fix: Pulls out overflow menu to own component

cloudscape-design · Aug 8, 2023 · 337aeb4 · 337aeb4
1 parent 0c6f626
commit 337aeb4
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 116 deletions.
diff --git a/src/app-layout/drawer/index.tsx b/src/app-layout/drawer/index.tsx
@@ -3,12 +3,11 @@
 import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { ToggleButton, CloseButton, togglesConfig } from '../toggles';
-import InternalButtonDropdown from '../../button-dropdown/internal';
 
 import testutilStyles from '../test-classes/styles.css.js';
 import styles from './styles.css.js';
 import { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';
-import { getTrigger } from './overflow-menu';
+import OverflowMenu from './overflow-menu';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { useCompactMode } from '../../internal/hooks/use-compact-mode';
 
@@ -249,23 +248,15 @@ export const DrawerTriggersBar = ({
                 <span
                   className={clsx(styles['drawer-trigger'], overflowItemIsActive() && styles['drawer-trigger-active'])}
                 >
-                  <InternalButtonDropdown
-                    expandToViewport={true}
-                    items={overflowItems.map(item => ({
-                      id: item.id,
-                      text: item.ariaLabels?.content || 'Content',
-                      iconName: item.trigger.iconName,
-                      iconSvg: item.trigger.iconSvg,
-                      badge: item.badge,
-                    }))}
+                  <OverflowMenu
+                    overflowItems={overflowItems}
                     onItemClick={({ detail }) => {
                       drawers.onChange({
                         activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,
                       });
                     }}
-                    ariaLabel="Overflow drawer triggers"
-                    customTriggerBuilder={getTrigger(overflowItemHasBadge(), overflowItemIsActive())}
-                    variant="icon"
+                    hasOverflowBadge={overflowItemHasBadge()}
+                    hasActiveStyles={overflowItemIsActive()}
                   />
                 </span>
               )}

diff --git a/src/app-layout/drawer/overflow-menu.tsx b/src/app-layout/drawer/overflow-menu.tsx
@@ -5,8 +5,11 @@ import React from 'react';
 import { ButtonProps } from '../../button/interfaces';
 import { InternalButton } from '../../button/internal';
 import buttonDropdownStyles from '../../button-dropdown/styles.css.js';
+import InternalButtonDropdown from '../../button-dropdown/internal';
+import { ButtonDropdownProps } from '../../button-dropdown/interfaces';
+import { CancelableEventHandler } from '../../internal/events';
 
-export const getTrigger = (hasOverflowBadge: boolean, isActive: boolean) => {
+const getTrigger = (hasOverflowBadge?: boolean, isActive?: boolean) => {
   const DropdownTrigger = (
     clickHandler: () => void,
     ref: React.Ref<ButtonProps.Ref>,
@@ -35,3 +38,34 @@ export const getTrigger = (hasOverflowBadge: boolean, isActive: boolean) => {
   };
   return DropdownTrigger;
 };
+
+interface OverflowMenuProps {
+  drawersRefs?: any;
+  className?: any;
+  overflowItems: any[];
+  onItemClick: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
+  hasOverflowBadge?: boolean;
+  hasActiveStyles?: boolean;
+}
+
+export default function OverflowMenu(props: OverflowMenuProps) {
+  const { drawersRefs, className, overflowItems, onItemClick, hasOverflowBadge, hasActiveStyles } = props;
+  return (
+    <InternalButtonDropdown
+      ref={drawersRefs ? drawersRefs.toggle : null}
+      className={className}
+      items={overflowItems.map(item => ({
+        id: item.id,
+        text: item.ariaLabels?.content || 'Content',
+        iconName: item.trigger.iconName,
+        iconSvg: item.trigger.iconSvg,
+        badge: item.badge,
+      }))}
+      onItemClick={onItemClick}
+      ariaLabel="Overflow drawer triggers"
+      variant="icon"
+      customTriggerBuilder={getTrigger(hasOverflowBadge, hasActiveStyles)}
+      expandToViewport={true}
+    />
+  );
+}
diff --git a/src/app-layout/mobile-toolbar/index.tsx b/src/app-layout/mobile-toolbar/index.tsx
@@ -6,8 +6,7 @@ import { ButtonProps } from '../../button/interfaces';
 import { AppLayoutProps } from '../interfaces';
 import { DrawerItem } from '../drawer/interfaces';
 import { ToggleButton, togglesConfig } from '../toggles';
-import InternalButtonDropdown from '../../button-dropdown/internal';
-import { InternalButton } from '../../button/internal';
+import OverflowMenu from '../drawer/overflow-menu';
 import styles from './styles.css.js';
 import sharedStyles from '../styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
@@ -67,35 +66,6 @@ interface MobileToolbarProps {
   };
 }
 
-const getTrigger = (hasOverflowBadge: boolean) => {
-  const DropdownTrigger = (
-    clickHandler: () => void,
-    ref: React.Ref<ButtonProps.Ref>,
-    isDisabled: boolean,
-    isExpanded: boolean,
-    ariaLabel?: string
-  ) => {
-    return (
-      <InternalButton
-        disabled={isDisabled}
-        onClick={event => {
-          event.preventDefault();
-          clickHandler();
-        }}
-        ref={ref}
-        ariaExpanded={isExpanded}
-        aria-haspopup={true}
-        ariaLabel={ariaLabel}
-        variant="icon"
-        iconName="ellipsis"
-        badge={hasOverflowBadge}
-        badgeColor="red"
-      />
-    );
-  };
-  return DropdownTrigger;
-};
-
 export function MobileToolbar({
   ariaLabels = {},
   toggleRefs,
@@ -176,22 +146,14 @@ export function MobileToolbar({
           ))}
           {drawers?.items?.length && drawers?.items?.length > 2 && (
             <span className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}>
-              <InternalButtonDropdown
-                items={drawers.items.slice(2, drawers.items.length).map(item => ({
-                  id: item.id,
-                  text: item.ariaLabels?.content || 'Content',
-                  iconName: item.trigger.iconName,
-                  iconSvg: item.trigger.iconSvg,
-                  badge: item.badge,
-                }))}
+              <OverflowMenu
+                overflowItems={drawers.items.slice(2, drawers.items.length)}
                 onItemClick={({ detail }) => {
                   drawers.onChange({
                     activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,
                   });
                 }}
-                ariaLabel="Overflow drawer triggers"
-                customTriggerBuilder={getTrigger(overflowItemHasBadge())}
-                expandToViewport={true}
+                hasOverflowBadge={overflowItemHasBadge()}
               />
             </span>
           )}

diff --git a/src/app-layout/visual-refresh/drawers.tsx b/src/app-layout/visual-refresh/drawers.tsx
@@ -4,17 +4,15 @@ import React, { useRef } from 'react';
 import clsx from 'clsx';
 import customCssProps from '../../internal/generated/custom-css-properties';
 import { InternalButton } from '../../button/internal';
-import { ButtonProps } from '../../button/interfaces';
-import InternalButtonDropdown from '../../button-dropdown/internal';
 import SplitPanel from './split-panel';
 import TriggerButton from './trigger-button';
 import { useAppLayoutInternals } from './context';
 import splitPanelStyles from '../../split-panel/styles.css.js';
 import styles from './styles.css.js';
-import buttonDropdownStyles from '../../button-dropdown/styles.css.js';
 import sharedStyles from '../styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import OverflowMenu from '../drawer/overflow-menu';
 
 /**
  * The Drawers root component is mounted in the AppLayout index file. It will only
@@ -131,36 +129,6 @@ function ActiveDrawer() {
   );
 }
 
-const getTrigger = (hasOverflowBadge: boolean, isMobile: boolean) => {
-  const DropdownTrigger = (
-    clickHandler: () => void,
-    ref: React.Ref<ButtonProps.Ref>,
-    isDisabled: boolean,
-    isExpanded: boolean,
-    ariaLabel?: string
-  ) => {
-    return (
-      <InternalButton
-        disabled={isDisabled}
-        onClick={event => {
-          event.preventDefault();
-          clickHandler();
-        }}
-        className={clsx(!isMobile && buttonDropdownStyles['trigger-active'])}
-        ref={ref}
-        ariaExpanded={isExpanded}
-        aria-haspopup={true}
-        ariaLabel={ariaLabel}
-        variant="icon"
-        badge={hasOverflowBadge}
-        badgeColor="red"
-        iconName="ellipsis"
-      />
-    );
-  };
-  return DropdownTrigger;
-};
-
 /**
  * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the
  * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be
@@ -329,28 +297,19 @@ function DesktopTriggers() {
         })}
 
         {getDrawerItems() && getDrawerItems().length > getIndexOfOverflowItem() && (
-          <InternalButtonDropdown
-            ref={drawersRefs.toggle}
+          <OverflowMenu
+            drawersRefs={drawersRefs}
             className={clsx(
               styles['drawers-trigger'],
               styles.trigger,
               styles['drawers-trigger-overflow'],
               overflowItemHasBadge() && styles.badge
             )}
-            items={overflowItems.map(item => ({
-              id: item.id,
-              text: item.ariaLabels?.content || 'Content',
-              iconName: item.trigger.iconName,
-              iconSvg: item.trigger.iconSvg,
-              badge: item.badge,
-            }))}
+            overflowItems={overflowItems}
             onItemClick={({ detail }) => {
               handleDrawersClick(detail.id);
             }}
-            ariaLabel="Overflow drawer triggers"
-            variant="icon"
-            customTriggerBuilder={getTrigger(false, isMobile)}
-            expandToViewport={true}
+            hasActiveStyles={true}
           />
         )}
         {hasSplitPanel && splitPanelToggle.displayed && (
@@ -456,23 +415,14 @@ export function MobileTriggers() {
         />
       ))}
       {drawers?.items?.length && hasOverflowMenu && (
-        <InternalButtonDropdown
-          ref={drawersRefs.toggle}
+        <OverflowMenu
+          drawersRefs={drawersRefs}
           className={clsx(styles['drawers-trigger'], overflowItemHasBadge() && styles.badge)}
-          items={overflowItems.map(item => ({
-            id: item.id,
-            text: item.ariaLabels?.content || 'Content',
-            iconName: item.trigger.iconName,
-            iconSvg: item.trigger.iconSvg,
-            badge: item.badge,
-          }))}
+          overflowItems={overflowItems}
           onItemClick={({ detail }) => {
             handleDrawersClick(detail.id);
           }}
-          ariaLabel="Overflow drawer triggers"
-          variant="icon"
-          customTriggerBuilder={getTrigger(overflowItemHasBadge(), isMobile)}
-          expandToViewport={true}
+          hasOverflowBadge={overflowItemHasBadge()}
         />
       )}
     </aside>