feat(plate): update buttons prop in Plate component (#81)

* feat(plate): update buttons prop in Plate component * feat(plate): removed useCallback from render function
core-ds · Jun 3, 2022 · 0db6283 · 0db6283
1 parent 7cf60e0
commit 0db6283
Showing 1 changed file with 26 additions and 21 deletions.
diff --git a/packages/plate/src/Component.tsx b/packages/plate/src/Component.tsx
@@ -59,7 +59,7 @@ export type PlateProps = {
     /**
      * Набор действий
      */
-    buttons?: Array<ReactElement<ButtonProps>>;
+    buttons?: ReactNode | Array<ReactElement<ButtonProps>>;
 
     /**
      * Дополнительный класс
@@ -109,7 +109,7 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
             defaultFolded = true,
             leftAddons,
             children,
-            buttons = [],
+            buttons,
             title,
             view = 'common',
             className,
@@ -135,9 +135,11 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
         const foldable = !!title && !!children && foldableProp;
         const folded = uncontrolled ? foldedState : foldedProp;
 
-        const hasButtons = Array.isArray(buttons) && buttons.length > 0;
+        const hasButtons = !!buttons && typeof buttons !== 'boolean';
         const hasContent = children || hasButtons;
 
+        const buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+
         const handleClick = useCallback(
             event => {
                 const eventInsideComponent =
@@ -181,24 +183,27 @@ export const Plate = forwardRef<HTMLDivElement, PlateProps>(
             [onClose],
         );
 
-        const renderButtons = useCallback(
-            () => (
-                <div className={cn(styles.buttons, buttonsClassName)}>
-                    {buttons.map((button, index) =>
-                        button
-                            ? React.cloneElement(button, {
-                                  // eslint-disable-next-line react/no-array-index-key
-                                  key: index,
-                                  size: 'xs',
-                                  view: index === 0 ? 'outlined' : 'link',
-                                  className: cn(button.props.className, styles.button),
-                              })
-                            : null,
-                    )}
-                </div>
-            ),
-            [buttons, buttonsClassName],
-        );
+        const renderButtons = () => {
+            if (buttonsIsArray) {
+                return (
+                    <div className={cn(styles.buttons, buttonsClassName)}>
+                        {(buttons as Array<ReactElement<ButtonProps>>).map((button, index) =>
+                            button
+                                ? React.cloneElement(button, {
+                                      // eslint-disable-next-line react/no-array-index-key
+                                      key: index,
+                                      size: 'xs',
+                                      view: index === 0 ? 'outlined' : 'link',
+                                      className: cn(button.props.className, styles.button),
+                                  })
+                                : null,
+                        )}
+                    </div>
+                );
+            }
+
+            return <div className={cn(styles.buttons, buttonsClassName)}>{buttons}</div>;
+        };
 
         return (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions