fix: define props type with ButtonProps

dev-otta · Jun 17, 2024 · 66d587b · 66d587b
1 parent 0e1434f
commit 66d587b
Showing 1 changed file with 12 additions and 26 deletions.
diff --git a/src/components/GrowthChart/ChartSettingsButton/EllipsisButton/EllipsisButton.tsx b/src/components/GrowthChart/ChartSettingsButton/EllipsisButton/EllipsisButton.tsx
@@ -1,28 +1,19 @@
 import React, { useState, useRef } from 'react';
-import { Button, Layer, Popper, FlyoutMenu, IconMore16, MenuItem } from '@dhis2/ui';
+import { Button, Layer, Popper, FlyoutMenu, IconMore16, MenuItem, ButtonProps } from '@dhis2/ui';
 
-type Props = {
-    label?: string,
-    primary?: boolean,
-    secondary?: boolean,
-    icon?: React.ReactElement,
-    onClick?: () => void,
-    dataTest?: string,
-    small?: boolean,
-    large?: boolean,
-};
+interface Props extends ButtonProps {
+    label?: string;
+    icon?: React.ReactElement;
+    onClick: () => void;
+}
 
 export const EllipsisButton = ({
     label,
-    primary,
-    secondary,
-    small,
-    large,
-    onClick: handleClick,
     icon,
-    dataTest,
+    onClick,
+    ...buttonProps
 }: Props) => {
-    const anchorRef = useRef(null);
+    const anchorRef = useRef<HTMLDivElement>(null);
     const [actionsIsOpen, setActionsIsOpen] = useState(false);
 
     const toggle = () => {
@@ -32,15 +23,10 @@ export const EllipsisButton = ({
     return (
         <>
             <div ref={anchorRef}>
-                {/* @ts-ignore */}
                 <Button
-                    primary={primary}
-                    secondary={secondary}
-                    dataTest={dataTest}
-                    small={small}
-                    large={large}
                     onClick={toggle}
-                    icon={<IconMore16 />}
+                    icon={icon ?? <IconMore16 />}
+                    {...buttonProps}
                 />
             </div>
             {actionsIsOpen && (
@@ -49,7 +35,7 @@ export const EllipsisButton = ({
                         <FlyoutMenu dense>
                             <MenuItem
                                 label={label}
-                                onClick={handleClick}
+                                onClick={onClick}
                                 icon={icon}
                             />
                         </FlyoutMenu>