-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
163 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
...y-docs/content/extensions/data-view/examples/Components/DataViewToolbarActionsExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from 'react'; | ||
| import { Pagination } from '@patternfly/react-core'; | ||
| import { BulkSelect } from '@patternfly/react-component-groups'; | ||
| import { DataViewToolbar, ResponsiveAction, ResponsiveActions } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; | ||
|
|
||
| export const BasicExample: React.FunctionComponent = () => ( | ||
| <DataViewToolbar | ||
| bulkSelect={ | ||
| <BulkSelect | ||
| selectedCount={0} | ||
| pageCount={5} | ||
| onSelect={() => null} | ||
| /> | ||
| } | ||
| actions={ | ||
| <ResponsiveActions breakpoint="lg" ouiaId="example-actions"> | ||
| <ResponsiveAction isPersistent variant="primary">Persistent action</ResponsiveAction> | ||
| <ResponsiveAction isPinned variant="secondary">Pinned Action</ResponsiveAction> | ||
| <ResponsiveAction>Tertiary Action</ResponsiveAction> | ||
| <ResponsiveAction>Link Action</ResponsiveAction> | ||
| </ResponsiveActions> | ||
| } | ||
| pagination={ | ||
| <Pagination page={1} perPage={10} /> | ||
| } | ||
| /> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react'; | ||
| import { ButtonProps } from '@patternfly/react-core'; | ||
|
|
||
| export interface ResponsiveActionProps extends ButtonProps { | ||
| /** Determines whether the action should be displayed next to dropdown if possible */ | ||
| isPinned?: boolean; | ||
| /** Determines whether the action should always be displayed as pinned */ | ||
| isPersistent?: boolean; | ||
| /** Key for the action */ | ||
| key?: string; | ||
| /** Action label */ | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| export const ResponsiveAction: React.FC<ResponsiveActionProps> = ({ ouiaId="ResponsiveAction", isPersistent = false, isPinned = false, label, ...props }) => | ||
| null // this component is only used declaratively - rendering ishandled by ResponsiveActions | ||
| ; | ||
|
|
||
| export default ResponsiveAction; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Button, Dropdown, DropdownList, MenuToggle, OverflowMenu, OverflowMenuContent, OverflowMenuControl, OverflowMenuDropdownItem, OverflowMenuGroup, OverflowMenuItem, OverflowMenuProps } from '@patternfly/react-core'; | ||
| import { EllipsisVIcon } from '@patternfly/react-icons'; | ||
| import { ResponsiveActionProps } from './ResponsiveAction'; | ||
|
|
||
| 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; | ||
| /** Child actions to display */ | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| export const ResponsiveActions: React.FC<ResponsiveActionsProps> = ({ ouiaId = 'ResponsiveActions', breakpoint = 'lg', children, ...props }) => { | ||
| const [ isOpen, setIsOpen ] = useState(false); | ||
|
|
||
| // separate persistent, pinned and collapsed actions | ||
| const persistentActions: React.ReactNode[] = []; | ||
| const pinnedActions: React.ReactNode[] = []; | ||
| const dropdownItems: React.ReactNode[] = []; | ||
|
|
||
| React.Children.forEach(children, (child) => { | ||
| if (React.isValidElement<ResponsiveActionProps>(child)) { | ||
| const { isPersistent, isPinned, key, children, onClick, ...actionProps } = child.props; | ||
|
|
||
| if (isPersistent || isPinned) { | ||
| (isPersistent ? persistentActions : pinnedActions).push( | ||
| <OverflowMenuItem key={key} isPersistent={isPersistent}> | ||
| <Button onClick={onClick} {...actionProps}> | ||
| {children} | ||
| </Button> | ||
| </OverflowMenuItem> | ||
| ); | ||
| } | ||
| if (!isPersistent) { | ||
| dropdownItems.push( | ||
| <OverflowMenuDropdownItem key={key} onClick={onClick} isShared={isPinned}> | ||
| {children} | ||
| </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-persistent-group`} isPersistent> | ||
| {persistentActions} | ||
| </OverflowMenuGroup> | ||
| <OverflowMenuGroup groupType="button" data-ouia-component-id={`${ouiaId}-menu-pinned-group`}> | ||
| {pinnedActions} | ||
| </OverflowMenuGroup> | ||
| </OverflowMenuContent> | ||
|
|
||
| {dropdownItems.length > 0 && ( | ||
| <OverflowMenuControl hasAdditionalOptions data-ouia-component-id={`${ouiaId}-menu-control`}> | ||
| <Dropdown | ||
| ouiaId={`${ouiaId}-menu-dropdown`} | ||
| onSelect={() => setIsOpen(false)} | ||
| toggle={(toggleRef) => ( | ||
| <MenuToggle | ||
| data-ouia-component-id={`${ouiaId}-menu-dropdown-toggle`} | ||
| ref={toggleRef} | ||
| aria-label="Actions overflow menu" | ||
| variant="plain" | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| isExpanded={isOpen} | ||
| > | ||
| <EllipsisVIcon /> | ||
| </MenuToggle> | ||
| )} | ||
| isOpen={isOpen} | ||
| onOpenChange={setIsOpen} | ||
| > | ||
| <DropdownList data-ouia-component-id={`${ouiaId}-menu-dropdown-list`}> | ||
| {dropdownItems} | ||
| </DropdownList> | ||
| </Dropdown> | ||
| </OverflowMenuControl> | ||
| )} | ||
| </OverflowMenu> | ||
| ); | ||
| }; | ||
|
|
||
| export default ResponsiveActions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,4 @@ | ||
| export { default } from './DataViewToolbar'; | ||
| export * from './DataViewToolbar'; | ||
| export * from './ResponsiveActions'; | ||
| export * from './ResponsiveAction'; |