INIT

patternfly · Sep 17, 2024 · faf76ac · faf76ac
1 parent 35b4322
commit faf76ac
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 7 deletions.
diff --git a/...tternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx b/...tternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx
@@ -6,15 +6,15 @@ import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewTo
 
 export const BasicExample: React.FunctionComponent = () => (
   <DataViewToolbar 
-    pagination={
-      <Pagination page={1} perPage={10} />
-    }
     bulkSelect={
       <BulkSelect
         selectedCount={0}
         pageCount={5}
         onSelect={() => null}
       />  
-    } 
+    }
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
   />
 )
diff --git a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx
@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+import ResponsiveActions from './ResponsiveActions';
 
 export interface DataViewToolbarProps extends PropsWithChildren {
   /** Toolbar className */
@@ -14,15 +15,19 @@ export interface DataViewToolbarProps extends PropsWithChildren {
   actions?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children, ...props }: DataViewToolbarProps) => (
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children, ...props }: DataViewToolbarProps) => (
   <Toolbar ouiaId={ouiaId} className={className} {...props}>
     <ToolbarContent>
       {bulkSelect && (
         <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>
           {bulkSelect}
         </ToolbarItem>
       )}
-      {actions}
+      {actions && (
+        <ToolbarItem variant={ToolbarItemVariant['overflow-menu']}>
+          {Array.isArray(actions) ? <ResponsiveActions actions={actions}/> : actions}
+        </ToolbarItem>
+      )}
       {pagination && (
         <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
           {pagination}
@@ -31,7 +36,7 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
       {children}
     </ToolbarContent>
   </Toolbar>
-);
+)
 
 export default DataViewToolbar;
 
diff --git a/packages/module/src/DataViewToolbar/ResponsiveActions.tsx b/packages/module/src/DataViewToolbar/ResponsiveActions.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Button, ButtonVariant, Dropdown, DropdownList, MenuToggle, OverflowMenu, OverflowMenuContent, OverflowMenuControl, OverflowMenuDropdownItem, OverflowMenuGroup, OverflowMenuItem, OverflowMenuProps, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+
+export interface ResponsiveActionsProps extends Omit<OverflowMenuProps, 'ref' | 'breakpoint'> {
+  /** Indicates breakpoint at which to switch between horizontal menu and vertical dropdown */
+  breakpoint?: OverflowMenuProps['breakpoint'];
+  /** Custom OUIA ID */
+  ouiaId?: string;
+  /** React component to display actions */
+  actions?: React.ReactNode;
+}
+
+export const ResponsiveActions: React.FC<ResponsiveActionsProps> = ({ ouiaId = 'ResponsiveActions', breakpoint = 'lg', ...props }: ResponsiveActionsProps) => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="secondary" isShared>
+      Secondary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="tertiary" isShared>
+      Tertiary
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="action">
+      Action 4
+    </OverflowMenuDropdownItem>
+  ];
+  return (
+    <OverflowMenu breakpoint={breakpoint} data-ouia-component-id={`${ouiaId}-menu`} {...props}>
+      <OverflowMenuContent isPersistent data-ouia-component-id={`${ouiaId}-menu-content`}>
+
+        <OverflowMenuGroup groupType="button" data-ouia-component-id={`${ouiaId}-menu-group`} isPersistent>
+          <OverflowMenuItem isPersistent>
+            <Button variant={ButtonVariant.primary}>Primary</Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.secondary}>Secondary</Button>
+          </OverflowMenuItem>
+          <OverflowMenuItem>
+            <Button variant={ButtonVariant.tertiary}>Tertiary</Button>
+          </OverflowMenuItem>
+        </OverflowMenuGroup>
+
+      </OverflowMenuContent>
+
+      <OverflowMenuControl hasAdditionalOptions data-ouia-component-id={`${ouiaId}-menu-control`}>
+        <Dropdown
+          ouiaId={`${ouiaId}-menu-dropdown`}
+          onSelect={onSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              data-ouia-component-id={`${ouiaId}-menu-dropdown-toggle`}
+              ref={toggleRef}
+              aria-label="Persistent example overflow menu"
+              variant="plain"
+              onClick={onToggle}
+              isExpanded={isOpen}
+            >
+              <EllipsisVIcon />
+            </MenuToggle>
+          )}
+          isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        >
+          <DropdownList data-ouia-component-id={`${ouiaId}-menu-dropdown-list`}>{dropdownItems}</DropdownList>
+        </Dropdown>
+      </OverflowMenuControl>
+
+    </OverflowMenu>
+  );}
+
+export default ResponsiveActions;
+