fix: readability

dev-otta · Jun 19, 2024 · 001ba04 · 001ba04
1 parent 82f9fc5
commit 001ba04
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 35 deletions.
diff --git a/src/components/GrowthChart/ChartSettingsButton/ChartSettingsButton.tsx b/src/components/GrowthChart/ChartSettingsButton/ChartSettingsButton.tsx
@@ -5,6 +5,7 @@ import { CategoryCodes, ChartData } from '../../../types/chartDataTypes';
 import { MappedEntityValues } from '../../../utils/DataFetching/Sorting/useMappedTrackedEntity';
 import { PrintDocument } from '../../../utils/ChartOptions';
 import { PrintIcon } from '../../../UI/Icons/PrintIcon';
+import { MenuItem } from '@dhis2/ui';
 
 interface ChartSettingsButtonProps {
     category: keyof typeof CategoryCodes;
@@ -32,11 +33,14 @@ export const ChartSettingsButton = ({
     return (
         <EllipsisButton
             dataTest='widget-profile-overflow-menu'
-            icon={<PrintIcon />}
-            label={i18n.t('Print')}
-            onClick={handlePrintDocument}
             secondary
             small
-        />
+        >
+            <MenuItem
+                label={i18n.t('Print')}
+                onClick={handlePrintDocument}
+                icon={<PrintIcon />}
+            />
+        </EllipsisButton>
     );
 };
diff --git a/src/components/GrowthChart/ChartSettingsButton/EllipsisButton/EllipsisButton.tsx b/src/components/GrowthChart/ChartSettingsButton/EllipsisButton/EllipsisButton.tsx
@@ -1,26 +1,23 @@
-import React, { useState, useRef } from 'react';
-import { Button, Layer, Popper, FlyoutMenu, IconMore16, MenuItem } from '@dhis2/ui';
+import React, { useState, useRef, ReactNode } from 'react';
+import { Button, Layer, Popper, FlyoutMenu, IconMore16 } from '@dhis2/ui';
 
 type Props = {
-    label?: string,
-    primary?: boolean,
-    secondary?: boolean,
-    icon?: React.ReactElement,
-    onClick?: () => void,
-    dataTest?: string,
-    small?: boolean,
-    large?: boolean,
+    primary?: boolean;
+    secondary?: boolean;
+    icon?: React.ReactElement;
+    dataTest?: string;
+    small?: boolean;
+    large?: boolean;
+    children: ReactNode;
 };
 
 export const EllipsisButton = ({
-    label,
     primary,
     secondary,
     small,
     large,
-    onClick: handleClick,
-    icon,
     dataTest,
+    children,
 }: Props) => {
     const anchorRef = useRef(null);
     const [actionsIsOpen, setActionsIsOpen] = useState(false);
@@ -47,11 +44,7 @@ export const EllipsisButton = ({
                 <Layer onBackdropClick={toggle}>
                     <Popper reference={anchorRef} placement='bottom-end'>
                         <FlyoutMenu dense>
-                            <MenuItem
-                                label={label}
-                                onClick={handleClick}
-                                icon={icon}
-                            />
+                            {children}
                         </FlyoutMenu>
                     </Popper>
                 </Layer>

diff --git a/src/components/GrowthChart/GrowthChart.tsx b/src/components/GrowthChart/GrowthChart.tsx
@@ -99,20 +99,21 @@ export const GrowthChart = ({
                         trackedEntity={trackedEntity}
                     />
                 </div>
-
             </div>
-            <div className='overflow-auto px-2'>
-                <GrowthChartBuilder
-                    measurementData={measurementData}
-                    datasetValues={dataSetValues}
-                    datasetMetadata={dataSetMetadata}
-                    yAxisValues={yAxisValues}
-                    keysDataSet={keysDataSet}
-                    dateOfBirth={new Date(trackedEntity?.dateOfBirth)}
-                    category={category}
-                    dataset={dataset}
-                    isPercentiles={isPercentiles}
-                />
+            <div className='px-2'>
+                <div className='overflow-auto'>
+                    <GrowthChartBuilder
+                        measurementData={measurementData}
+                        datasetValues={dataSetValues}
+                        datasetMetadata={dataSetMetadata}
+                        yAxisValues={yAxisValues}
+                        keysDataSet={keysDataSet}
+                        dateOfBirth={new Date(trackedEntity?.dateOfBirth)}
+                        category={category}
+                        dataset={dataset}
+                        isPercentiles={isPercentiles}
+                    />
+                </div>
             </div>
         </>
     );