From 0ee44b6fb37658e3a73d92e0321fd26b9889ac67 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Wed, 14 Feb 2024 17:45:12 +0000 Subject: [PATCH 1/3] chore: allow for search and sort only in indexfilters --- .../IndexFilters/IndexFilters.stories.tsx | 149 ++++++++++++++++++ .../components/IndexFilters/IndexFilters.tsx | 38 +++-- .../UpdateButtons/UpdateButtons.tsx | 6 +- 3 files changed, 174 insertions(+), 19 deletions(-) diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx index ae9a6fcf962..84d685a9f8f 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx +++ b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx @@ -2324,3 +2324,152 @@ export function WithNoFilters() { ); } + +export function WithOnlySearchAndSort() { + const sleep = (ms: number) => + new Promise((resolve) => setTimeout(resolve, ms)); + const sortOptions: IndexFiltersProps['sortOptions'] = [ + {label: 'Order', value: 'order asc', directionLabel: 'Ascending'}, + {label: 'Order', value: 'order desc', directionLabel: 'Descending'}, + {label: 'Customer', value: 'customer asc', directionLabel: 'A-Z'}, + {label: 'Customer', value: 'customer desc', directionLabel: 'Z-A'}, + {label: 'Date', value: 'date asc', directionLabel: 'A-Z'}, + {label: 'Date', value: 'date desc', directionLabel: 'Z-A'}, + {label: 'Total', value: 'total asc', directionLabel: 'Ascending'}, + {label: 'Total', value: 'total desc', directionLabel: 'Descending'}, + ]; + const [sortSelected, setSortSelected] = useState(['order asc']); + const {mode, setMode} = useSetIndexFiltersMode(IndexFiltersMode.Filtering); + const onHandleCancel = () => {}; + + const onHandleSave = async () => { + await sleep(1); + return true; + }; + + const [queryValue, setQueryValue] = useState(''); + + const handleFiltersQueryChange = useCallback( + (value: string) => setQueryValue(value), + [], + ); + + const orders = [ + { + id: '1020', + order: ( + + #1020 + + ), + date: 'Jul 20 at 4:34pm', + customer: 'Jaydon Stanton', + total: '$969.44', + paymentStatus: Paid, + fulfillmentStatus: Unfulfilled, + }, + { + id: '1019', + order: ( + + #1019 + + ), + date: 'Jul 20 at 3:46pm', + customer: 'Ruben Westerfelt', + total: '$701.19', + paymentStatus: Partially paid, + fulfillmentStatus: Unfulfilled, + }, + { + id: '1018', + order: ( + + #1018 + + ), + date: 'Jul 20 at 3.44pm', + customer: 'Leo Carder', + total: '$798.24', + paymentStatus: Paid, + fulfillmentStatus: Unfulfilled, + }, + ]; + const resourceName = { + singular: 'order', + plural: 'orders', + }; + + const {selectedResources, allResourcesSelected, handleSelectionChange} = + useIndexResourceState(orders); + + const rowMarkup = orders.map( + ( + {id, order, date, customer, total, paymentStatus, fulfillmentStatus}, + index, + ) => ( + + + + {order} + + + {date} + {customer} + + + {total} + + + {paymentStatus} + {fulfillmentStatus} + + ), + ); + + return ( + + setQueryValue('')} + onSort={setSortSelected} + autoFocusSearchField={false} + tabs={[]} + filters={[]} + appliedFilters={[]} + onClearAll={() => {}} + mode={mode} + setMode={setMode} + hideFilters + filteringAccessibilityTooltip="Search (F)" + /> + + {rowMarkup} + + + ); +} diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx index 4df0777be63..ef585daa1a3 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx +++ b/polaris-react/src/components/IndexFilters/IndexFilters.tsx @@ -75,7 +75,7 @@ export interface IndexFiltersProps /** The primary action to display */ primaryAction?: IndexFiltersPrimaryAction; /** The cancel action to display */ - cancelAction: IndexFiltersCancelAction; + cancelAction?: IndexFiltersCancelAction; /** Optional callback invoked when a merchant begins to edit a view */ onEditStart?: (mode: ActionableIndexFiltersMode) => void; /** The current mode of the IndexFilters component. Used to determine which view to show */ @@ -104,6 +104,8 @@ export interface IndexFiltersProps disableKeyboardShortcuts?: boolean; /** Whether to display the edit columns button with the other default mode filter actions */ showEditColumnsButton?: boolean; + /** Whether or not to auto-focus the search field when it renders */ + autoFocusSearchField?: boolean; } export function IndexFilters({ @@ -143,6 +145,7 @@ export function IndexFilters({ closeOnChildOverlayClick, disableKeyboardShortcuts, showEditColumnsButton, + autoFocusSearchField = true, }: IndexFiltersProps) { const i18n = useI18n(); const {mdDown} = useBreakpoints(); @@ -152,10 +155,10 @@ export function IndexFilters({ value: filtersFocused, setFalse: setFiltersUnFocused, setTrue: setFiltersFocused, - } = useToggle(mode === IndexFiltersMode.Filtering); + } = useToggle(mode === IndexFiltersMode.Filtering && autoFocusSearchField); const handleModeChange = (newMode: IndexFiltersMode) => { - if (newMode === IndexFiltersMode.Filtering) { + if (newMode === IndexFiltersMode.Filtering && autoFocusSearchField) { setFiltersFocused(); } else { setFiltersUnFocused(); @@ -219,7 +222,7 @@ export function IndexFilters({ const onExecutedPrimaryAction = useExecutedCallback(primaryAction?.onAction); const onExecutedCancelAction = useCallback(() => { - cancelAction.onAction?.(); + cancelAction?.onAction?.(); setMode(IndexFiltersMode.Default); }, [cancelAction, setMode]); @@ -233,10 +236,12 @@ export function IndexFilters({ }, [onExecutedPrimaryAction, primaryAction]); const enhancedCancelAction = useMemo(() => { - return { - ...cancelAction, - onAction: onExecutedCancelAction, - }; + return cancelAction + ? { + ...cancelAction, + onAction: onExecutedCancelAction, + } + : undefined; }, [cancelAction, onExecutedCancelAction]); const beginEdit = useCallback( @@ -248,14 +253,15 @@ export function IndexFilters({ ); const updateButtonsMarkup = useMemo( - () => ( - - ), + () => + enhancedCancelAction || enhancedPrimaryAction ? ( + + ) : null, [enhancedPrimaryAction, enhancedCancelAction, disabled, viewNames], ); diff --git a/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx b/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx index c6b387a90ef..624a661656b 100644 --- a/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx +++ b/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx @@ -21,7 +21,7 @@ interface UpdateIndexFiltersPrimaryAction export interface UpdateButtonsProps { primaryAction?: UpdateIndexFiltersPrimaryAction; - cancelAction: IndexFiltersCancelAction; + cancelAction?: IndexFiltersCancelAction; viewNames: string[]; disabled?: boolean; } @@ -102,7 +102,7 @@ export function UpdateButtons({ primaryAction?.loading || savedViewName.length > MAX_VIEW_NAME_LENGTH; - const cancelButtonMarkup = ( + const cancelButtonMarkup = cancelAction ? ( - ); + ) : null; if (!primaryAction) { return cancelButtonMarkup; From a605678042879aa44a9bf2728c7e6b8029a31715 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Wed, 14 Feb 2024 17:52:46 +0000 Subject: [PATCH 2/3] chore: changeset --- .changeset/popular-oranges-drop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/popular-oranges-drop.md diff --git a/.changeset/popular-oranges-drop.md b/.changeset/popular-oranges-drop.md new file mode 100644 index 00000000000..2b366bee463 --- /dev/null +++ b/.changeset/popular-oranges-drop.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Updated IndexFilters to better support a configuration of only search and sort From 883ed095875e5c86eac7604317af2ddd2f51d267 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Mon, 19 Feb 2024 10:08:52 +0000 Subject: [PATCH 3/3] chore: update test to fix type --- .../IndexFilters/tests/IndexFilters.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx b/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx index bf548ac2138..4210c22bd8c 100644 --- a/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx +++ b/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx @@ -283,7 +283,7 @@ describe('IndexFilters', () => { }), ); - expect(defaultProps.cancelAction.onAction).not.toHaveBeenCalled(); + expect(defaultProps.cancelAction!.onAction).not.toHaveBeenCalled(); }); it('does call the cancelAction.onAction method when in Filtering mode', () => { @@ -297,7 +297,7 @@ describe('IndexFilters', () => { }), ); - expect(defaultProps.cancelAction.onAction).toHaveBeenCalled(); + expect(defaultProps.cancelAction!.onAction).toHaveBeenCalled(); }); it('does call the cancelAction.onAction method when in EditingColumns mode', () => { @@ -314,7 +314,7 @@ describe('IndexFilters', () => { }), ); - expect(defaultProps.cancelAction.onAction).toHaveBeenCalled(); + expect(defaultProps.cancelAction!.onAction).toHaveBeenCalled(); }); }); @@ -365,7 +365,7 @@ describe('IndexFilters', () => { }), ); - expect(defaultProps.cancelAction.onAction).not.toHaveBeenCalled(); + expect(defaultProps.cancelAction!.onAction).not.toHaveBeenCalled(); }); it('does not call the cancelAction.onAction method when pressing escape in EditingColumns mode', () => { @@ -383,7 +383,7 @@ describe('IndexFilters', () => { }), ); - expect(defaultProps.cancelAction.onAction).not.toHaveBeenCalled(); + expect(defaultProps.cancelAction!.onAction).not.toHaveBeenCalled(); }); });