From 687a9b3ac29a632c760fa37273fcee143ecdf936 Mon Sep 17 00:00:00 2001 From: Maxime Cloutier Date: Wed, 9 Aug 2023 08:52:20 -0400 Subject: [PATCH] Update implementation --- polaris-react/playground/DetailsPage.tsx | 18 +++++++ .../src/components/ActionList/ActionList.tsx | 52 ++++++++++++++++--- .../components/MenuGroup/MenuGroup.tsx | 25 ++------- .../RollupActions/RollupActions.tsx | 27 ++-------- .../IndexTable/IndexTable.stories.tsx | 24 +++++++++ 5 files changed, 95 insertions(+), 51 deletions(-) diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx index 46f54b024b4..f18c1db12bc 100644 --- a/polaris-react/playground/DetailsPage.tsx +++ b/polaris-react/playground/DetailsPage.tsx @@ -587,6 +587,24 @@ export function DetailsPage() { content: 'Toggle page actions', onAction: toggleActions, }, + { + content: 'Embed on a website', + + onAction: () => console.log('embed'), + }, + { + content: 'Toggle page actions', + onAction: toggleActions, + }, + { + content: 'Embed on a website', + + onAction: () => console.log('embed'), + }, + { + content: 'Toggle page actions', + onAction: toggleActions, + }, ], }, ]} diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx index 92ec54bdafc..dac98308964 100644 --- a/polaris-react/src/components/ActionList/ActionList.tsx +++ b/polaris-react/src/components/ActionList/ActionList.tsx @@ -1,16 +1,17 @@ -import React, {useRef} from 'react'; +import React, {useMemo, useRef, useState} from 'react'; +import type {ActionListItemDescriptor, ActionListSection} from '../../types'; +import {Key} from '../../types'; import { wrapFocusNextFocusableMenuItem, wrapFocusPreviousFocusableMenuItem, } from '../../utilities/focus'; -import {KeypressListener} from '../KeypressListener'; -import {Key} from '../../types'; -import type {ActionListItemDescriptor, ActionListSection} from '../../types'; import {Box} from '../Box'; +import {KeypressListener} from '../KeypressListener'; +import {TextField} from '../TextField'; -import {Section, Item} from './components'; import type {ItemProps} from './components'; +import {Item, Section} from './components'; export interface ActionListProps { /** Collection of actions for list */ @@ -33,6 +34,7 @@ export function ActionList({ }: ActionListProps) { let finalSections: readonly ActionListSection[] = []; const actionListRef = useRef(null); + const [searchText, setSeachText] = useState(''); if (items) { finalSections = [{items}, ...sections]; @@ -46,7 +48,14 @@ export function ActionList({ const elementTabIndex = hasMultipleSections && actionRole === 'menuitem' ? -1 : undefined; - const sectionMarkup = finalSections.map((section, index) => { + const filteredSections = finalSections?.map((section) => ({ + ...section, + items: section.items.filter((item) => + item.content?.toLowerCase().includes(searchText.toLowerCase()), + ), + })); + + const sectionMarkup = filteredSections.map((section, index) => { return section.items.length > 0 ? (
) : null; + const totalActions = + finalSections?.reduce( + (acc: number, section) => acc + section.items.length, + 0, + ) || 0; + + const totalFilteredActions = useMemo(() => { + const totalSectionItems = + filteredSections?.reduce( + (acc: number, section) => acc + section.items.length, + 0, + ) || 0; + + return totalSectionItems; + }, [filteredSections]); + + const showSearch = totalActions >= 10; + return ( {listeners} + + {showSearch && ( + 0 ? '0' : '2'}> + setSeachText(value)} + /> + + )} {sectionMarkup} ); diff --git a/polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx b/polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx index c8348ec03f9..5052ed6e5f4 100644 --- a/polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx +++ b/polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx @@ -1,10 +1,9 @@ -import React, {useCallback, useState} from 'react'; +import React, {useCallback} from 'react'; import type {ActionListSection, MenuGroupDescriptor} from '../../../../types'; import {ActionList} from '../../../ActionList'; import {Popover} from '../../../Popover'; import {SecondaryAction} from '../SecondaryAction'; -import {TextField} from '../../../TextField'; import styles from './MenuGroup.scss'; @@ -39,7 +38,6 @@ export function MenuGroup({ getOffsetWidth, sections, }: MenuGroupProps) { - const [searchText, setSeachText] = useState(''); const handleClose = useCallback(() => { onClose(title); }, [onClose, title]); @@ -77,16 +75,6 @@ export function MenuGroup({ ); - const filteredActions = actions.filter((action) => - action.content?.toLowerCase().includes(searchText.toLowerCase()), - ); - - const filteredSections = sections?.filter((section) => - section.items.some((item) => - item.content?.toLowerCase().includes(searchText.toLowerCase()), - ), - ); - return ( - setSeachText(value)} - /> {details &&
{details}
} diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx index 5260678e10b..7b0664caa67 100644 --- a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx +++ b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx @@ -1,16 +1,15 @@ -import React, {useState} from 'react'; import {HorizontalDotsMinor} from '@shopify/polaris-icons'; +import React from 'react'; import type { - ActionListSection, ActionListItemDescriptor, + ActionListSection, } from '../../../../types'; import {useI18n} from '../../../../utilities/i18n'; import {useToggle} from '../../../../utilities/use-toggle'; import {ActionList} from '../../../ActionList'; import {Button} from '../../../Button'; import {Popover} from '../../../Popover'; -import {TextField} from '../../../TextField'; import styles from './RollupActions.scss'; @@ -29,7 +28,6 @@ export function RollupActions({ sections = [], }: RollupActionsProps) { const i18n = useI18n(); - const [searchText, setSeachText] = useState(''); const {value: rollupOpen, toggle: toggleRollupOpen} = useToggle(false); @@ -51,16 +49,6 @@ export function RollupActions({ ); - const filteredItems = items.filter((item) => - item.content?.toLowerCase().includes(searchText.toLowerCase()), - ); - - const filteredSections = sections?.filter((section) => - section.items.some((item) => - item.content?.toLowerCase().includes(searchText.toLowerCase()), - ), - ); - return ( - setSeachText(value)} - /> diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index 69f3b240306..e5bd9242a1b 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -804,6 +804,30 @@ export function WithBulkActions() { content: 'Delete customers', onAction: () => console.log('Todo: implement bulk delete'), }, + { + content: 'Add tags', + onAction: () => console.log('Todo: implement bulk add tags'), + }, + { + content: 'Remove tags', + onAction: () => console.log('Todo: implement bulk remove tags'), + }, + { + content: 'Delete customers', + onAction: () => console.log('Todo: implement bulk delete'), + }, + { + content: 'Add tags', + onAction: () => console.log('Todo: implement bulk add tags'), + }, + { + content: 'Remove tags', + onAction: () => console.log('Todo: implement bulk remove tags'), + }, + { + content: 'Delete customers', + onAction: () => console.log('Todo: implement bulk delete'), + }, ]; const rowMarkup = customers.map(