fix(DropdownMenu): fix inner usages of switcher prop (#1116)

gravity-ui · Nov 13, 2023 · 2a3eccc · 2a3eccc
1 parent 496916e
commit 2a3eccc
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 51 deletions.
diff --git a/src/components/Breadcrumbs/BreadcrumbsMore.tsx b/src/components/Breadcrumbs/BreadcrumbsMore.tsx
@@ -11,14 +11,6 @@ interface Props extends Pick<BreadcrumbsProps, 'popupPlacement' | 'popupStyle' |
 
 const b = block('breadcrumbs');
 
-function Switcher() {
-    return (
-        <Link view="secondary" title={i18n('label_more')} className={b('item', {more: true})}>
-            ...
-        </Link>
-    );
-}
-
 export function BreadcrumbsMore({popupStyle, popupPlacement, items}: Props) {
     return (
         <DropdownMenu
@@ -29,7 +21,16 @@ export function BreadcrumbsMore({popupStyle, popupPlacement, items}: Props) {
                 }),
                 placement: popupPlacement,
             }}
-            switcher={<Switcher />}
+            renderSwitcher={({onClick}) => (
+                <Link
+                    view="secondary"
+                    title={i18n('label_more')}
+                    className={b('item', {more: true})}
+                    onClick={onClick}
+                >
+                    ...
+                </Link>
+            )}
         />
     );
 }

diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -138,43 +138,51 @@ const DropdownMenu = <T,>({
         [items],
     );
 
-    const handleSwitcherClick: React.MouseEventHandler<HTMLElement> = (event) => {
-        if (disabled) {
-            return;
-        }
+    const handleSwitcherClick = React.useCallback<React.MouseEventHandler<HTMLElement>>(
+        (event) => {
+            if (disabled) {
+                return;
+            }
 
-        onSwitcherClick?.(event);
-        togglePopup();
-    };
+            onSwitcherClick?.(event);
+
+            togglePopup();
+        },
+        [disabled, onSwitcherClick, togglePopup],
+    );
 
     const {onKeyDown: handleSwitcherKeyDown} = useActionHandlers(handleSwitcherClick);
 
+    const switcherProps = React.useMemo<SwitcherProps>(
+        () => ({
+            onClick: handleSwitcherClick,
+            onKeyDown: handleSwitcherKeyDown,
+        }),
+        [handleSwitcherClick, handleSwitcherKeyDown],
+    );
+
     return (
         <DropdownMenuContext.Provider value={contextValue}>
             {/* FIXME remove switcher prop and this wrapper */}
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div
                 ref={anchorRef}
                 className={cnDropdownMenu('switcher-wrapper', switcherWrapperClassName)}
-                onClick={handleSwitcherClick}
+                {...(renderSwitcher ? {} : switcherProps)}
             >
-                {renderSwitcher?.({
-                    onClick: handleSwitcherClick,
-                    onKeyDown: handleSwitcherKeyDown,
-                }) ||
-                    switcher || (
-                        <Button
-                            view="flat"
-                            size={size}
-                            // FIXME remove switcher prop and uncomment onClick handler
-                            // onClick={handleSwitcherClick}
-                            {...defaultSwitcherProps}
-                            className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
-                            disabled={disabled}
-                        >
-                            {icon}
-                        </Button>
-                    )}
+                {renderSwitcher?.(switcherProps) || switcher || (
+                    <Button
+                        view="flat"
+                        size={size}
+                        // FIXME remove switcher prop and uncomment onClick handler
+                        // onClick={handleSwitcherClick}
+                        {...defaultSwitcherProps}
+                        className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
+                        disabled={disabled}
+                    >
+                        {icon}
+                    </Button>
+                )}
             </div>
             <DropdownMenuNavigationContextProvider anchorRef={anchorRef} disabled={!isPopupShown}>
                 <DropdownMenuPopup

diff --git a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
@@ -117,11 +117,15 @@ const LabelSwitcherTemplate: StoryFn<{statuses: {text: string; style: LabelProps
     return (
         <DropdownMenu
             items={items}
-            switcher={
-                <Label theme={status.style} className={b('label-switcher-switcher')}>
+            renderSwitcher={({onClick}) => (
+                <Label
+                    theme={status.style}
+                    className={b('label-switcher-switcher')}
+                    onClick={onClick}
+                >
                     {status.text}
                 </Label>
-            }
+            )}
             popupProps={{className: b('label-switcher-menu')}}
         />
     );

diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -116,13 +116,13 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     const handleClosePopup = () => setInitialState();
 
-    const handleControlClick = () => {
+    const handleControlClick = React.useCallback(() => {
         if (!disabled) {
             setFocused(!focused);
             setRequiredItems(getRequiredItems(items));
             setCurrentItems(getConfigurableItems(items));
         }
-    };
+    }, [disabled, focused, items]);
 
     const handleApplyClick = () => {
         setInitialState();
@@ -212,19 +212,30 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     const {onKeyDown: handleControlKeyDown} = useActionHandlers(handleControlClick);
 
+    const switcherProps = React.useMemo<SwitcherProps>(
+        () => ({
+            onClick: handleControlClick,
+            onKeyDown: handleControlKeyDown,
+        }),
+        [handleControlClick, handleControlKeyDown],
+    );
+
     return (
         <div className={b(null, className)}>
             {/* FIXME remove switcher prop and this wrapper */}
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-            <div className={b('control')} ref={refControl} onClick={handleControlClick}>
-                {renderSwitcher?.({onClick: handleControlClick, onKeyDown: handleControlKeyDown}) ||
-                    switcher || (
-                        <Button disabled={disabled}>
-                            <Icon data={Gear} />
-                            {i18n('button_switcher')}
-                            {renderStatus()}
-                        </Button>
-                    )}
+            <div
+                className={b('control')}
+                ref={refControl}
+                {...(renderSwitcher ? {} : switcherProps)}
+            >
+                {renderSwitcher?.(switcherProps) || switcher || (
+                    <Button disabled={disabled}>
+                        <Icon data={Gear} />
+                        {i18n('button_switcher')}
+                        {renderStatus()}
+                    </Button>
+                )}
             </div>
             <Popup
                 anchorRef={refControl}

diff --git a/src/components/Table/hoc/withTableSettings/withTableSettings.tsx b/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
@@ -187,11 +187,15 @@ export function withTableSettings<I extends TableDataItem, E extends {} = {}>(
                                     sortable={sortable}
                                     onUpdate={onUpdateColumns}
                                     items={columnSetupItems}
-                                    switcher={
-                                        <Button view="flat" className={b('settings-button')}>
+                                    renderSwitcher={({onClick}) => (
+                                        <Button
+                                            view="flat"
+                                            className={b('settings-button')}
+                                            onClick={onClick}
+                                        >
                                             <Icon data={Gear} />
                                         </Button>
-                                    }
+                                    )}
                                 />
                             </div>
                         );