From 40d1331e5d45f39b6e0b631d8956278fe89a273a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 17 Apr 2024 09:57:14 +0200 Subject: [PATCH 01/32] Sort layout component properties alphabetically --- packages/dataviews/src/dataviews.js | 6 +++--- packages/dataviews/src/view-grid.js | 8 ++++---- packages/dataviews/src/view-list.tsx | 8 ++++---- packages/dataviews/src/view-table.js | 8 ++++---- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js index 33f0da08c0ba5..75b672721f041 100644 --- a/packages/dataviews/src/dataviews.js +++ b/packages/dataviews/src/dataviews.js @@ -128,16 +128,16 @@ export default function DataViews( { /> field.id === view.layout.mediaField diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 193e89012fb89..c749a4085998d 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -149,14 +149,14 @@ function ListItem( { export default function ViewList( props: ListViewProps ) { const { - view, - fields, data, - isLoading, + fields, getItemId, + id: preferredId, + isLoading, onSelectionChange, selection, - id: preferredId, + view, } = props; const baseId = useInstanceId( ViewList, 'view-list', preferredId ); const selectedItem = data?.findLast( ( item ) => diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index d2b351fa80c6b..f06b364a5c8e8 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -362,16 +362,16 @@ function TableRow( { } function ViewTable( { - view, - onChangeView, - fields, actions, data, + fields, getItemId, isLoading = false, - selection, + onChangeView, onSelectionChange, + selection, setOpenedFilter, + view, } ) { const headerMenuRefs = useRef( new Map() ); const headerMenuToFocusRef = useRef(); From 6b5fb737b4708476cb63aef79c25a698c921eb34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 17 Apr 2024 10:00:25 +0200 Subject: [PATCH 02/32] Remove unused id property --- packages/dataviews/src/view-list.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index c749a4085998d..35d07f8fbb0aa 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -152,13 +152,12 @@ export default function ViewList( props: ListViewProps ) { data, fields, getItemId, - id: preferredId, isLoading, onSelectionChange, selection, view, } = props; - const baseId = useInstanceId( ViewList, 'view-list', preferredId ); + const baseId = useInstanceId( ViewList, 'view-list' ); const selectedItem = data?.findLast( ( item ) => selection.includes( item.id ) ); From 673cdeca050730e187d6ff3617ace2c06533868c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 17 Apr 2024 10:29:43 +0200 Subject: [PATCH 03/32] Use actions in the ListItem --- packages/dataviews/src/view-list.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 35d07f8fbb0aa..96b687c9097bc 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -21,6 +21,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { unlock } from './lock-unlock'; +<<<<<<< HEAD:packages/dataviews/src/view-list.tsx import type { Data, Item, @@ -48,6 +49,9 @@ interface ListViewItemProps { primaryField?: NormalizedField; visibleFields: NormalizedField[]; } +======= +import ItemActions from './item-actions'; +>>>>>>> c2605916bd (Use actions in the ListItem):packages/dataviews/src/view-list.js const { useCompositeStoreV2: useCompositeStore, @@ -57,6 +61,7 @@ const { } = unlock( componentsPrivateApis ); function ListItem( { + actions, id, item, isSelected, @@ -142,6 +147,21 @@ function ListItem( { +
+ ( + + ) } + item={ item } + actions={ actions } + /> +
); @@ -149,6 +169,7 @@ function ListItem( { export default function ViewList( props: ListViewProps ) { const { + actions, data, fields, getItemId, @@ -221,6 +242,7 @@ export default function ViewList( props: ListViewProps ) { Date: Tue, 30 Apr 2024 11:35:31 +0200 Subject: [PATCH 04/32] Let the fird grid grow and the second take the space for its content --- packages/dataviews/src/style.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index e8e8973ebf679..e4d98ff758d6d 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -406,8 +406,14 @@ position: relative; border-radius: $grid-unit-05; - > * { - width: 100%; + &::after { + position: absolute; + content: ""; + top: 100%; + left: $grid-unit-30; + right: $grid-unit-30; + background: $gray-100; + height: 1px; } } From c61f7a07ff22d672af16179a444db8b2808d4336 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 30 Apr 2024 11:35:46 +0200 Subject: [PATCH 05/32] Account for lack of actions --- packages/dataviews/src/view-list.tsx | 32 +++++++++++++++------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 96b687c9097bc..5edff456fcd04 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -147,21 +147,23 @@ function ListItem( { -
- ( - - ) } - item={ item } - actions={ actions } - /> -
+ { actions && ( +
+ ( + + ) } + item={ item } + actions={ actions } + /> +
+ ) } ); From 5d15c4bd3f8d70fefb6b95beb57f0646df9a1675 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 8 May 2024 10:08:09 +0200 Subject: [PATCH 06/32] Fix rebase --- packages/dataviews/src/view-list.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 5edff456fcd04..d03ccf50c4fa1 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -21,7 +21,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { unlock } from './lock-unlock'; -<<<<<<< HEAD:packages/dataviews/src/view-list.tsx import type { Data, Item, @@ -30,28 +29,28 @@ import type { } from './types'; interface ListViewProps { - view: ViewListType; - fields: NormalizedField[]; + actions: []; data: Data; - isLoading: boolean; + fields: NormalizedField[]; getItemId: ( item: Item ) => string; + id: string; + isLoading: boolean; onSelectionChange: ( selection: Item[] ) => void; selection: Item[]; - id: string; + view: ViewListType; } interface ListViewItemProps { + actions: []; id?: string; - item: Item; isSelected: boolean; - onSelect: ( item: Item ) => void; + item: Item; mediaField?: NormalizedField; + onSelect: ( item: Item ) => void; primaryField?: NormalizedField; visibleFields: NormalizedField[]; } -======= import ItemActions from './item-actions'; ->>>>>>> c2605916bd (Use actions in the ListItem):packages/dataviews/src/view-list.js const { useCompositeStoreV2: useCompositeStore, @@ -152,7 +151,7 @@ function ListItem( { ( + render={ ( props: { actions: []; item: Item } ) => ( Date: Wed, 8 May 2024 16:29:26 +0200 Subject: [PATCH 07/32] Use Ariakit directly --- packages/dataviews/src/view-list.tsx | 58 +++++++++++++--------------- 1 file changed, 26 insertions(+), 32 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index d03ccf50c4fa1..c919a0f6ad8fa 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -2,15 +2,15 @@ * External dependencies */ import clsx from 'clsx'; +import * as Ariakit from '@ariakit/react'; /** * WordPress dependencies */ import { useInstanceId } from '@wordpress/compose'; import { - __experimentalHStack as HStack, + __experimentalHStack as HStack, __experimentalVStack as VStack, - privateApis as componentsPrivateApis, Spinner, VisuallyHidden, } from '@wordpress/components'; @@ -20,7 +20,6 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { unlock } from './lock-unlock'; import type { Data, Item, @@ -48,16 +47,9 @@ interface ListViewItemProps { mediaField?: NormalizedField; onSelect: ( item: Item ) => void; primaryField?: NormalizedField; + store: any; visibleFields: NormalizedField[]; } -import ItemActions from './item-actions'; - -const { - useCompositeStoreV2: useCompositeStore, - CompositeV2: Composite, - CompositeItemV2: CompositeItem, - CompositeRowV2: CompositeRow, -} = unlock( componentsPrivateApis ); function ListItem( { actions, @@ -67,6 +59,7 @@ function ListItem( { onSelect, mediaField, primaryField, + store, visibleFields, }: ListViewItemProps ) { const itemRef = useRef< HTMLElement >( null ); @@ -84,8 +77,7 @@ function ListItem( { }, [ isSelected ] ); return ( - } role="row" className={ clsx( { @@ -94,7 +86,8 @@ function ListItem( { >
- } role="button" id={ id } @@ -144,27 +137,27 @@ function ListItem( {
- + { actions && (
- ( - - ) } - item={ item } - actions={ actions } - /> + + + Menu + + } + /> + + Hello + +
) } - + ); } @@ -209,7 +202,7 @@ export default function ViewList( props: ListViewProps ) { [ baseId, getItemId ] ); - const store = useCompositeStore( { + const store = Ariakit.useCompositeStore( { defaultActiveId: getItemDomId( selectedItem ), } ); @@ -230,7 +223,7 @@ export default function ViewList( props: ListViewProps ) { } return ( - } className="dataviews-view-list" @@ -249,10 +242,11 @@ export default function ViewList( props: ListViewProps ) { onSelect={ onSelect } mediaField={ mediaField } primaryField={ primaryField } + store={ store } visibleFields={ visibleFields } /> ); } ) } - + ); } From 6fad6f1ab4e98c2cdf6933976487d78012234d44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 8 May 2024 16:51:06 +0200 Subject: [PATCH 08/32] Use Composite from @wordpress/components --- packages/dataviews/src/view-list.tsx | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index c919a0f6ad8fa..a531f40383039 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -9,8 +9,9 @@ import * as Ariakit from '@ariakit/react'; */ import { useInstanceId } from '@wordpress/compose'; import { - __experimentalHStack as HStack, + __experimentalHStack as HStack, __experimentalVStack as VStack, + privateApis as componentsPrivateApis, Spinner, VisuallyHidden, } from '@wordpress/components'; @@ -20,6 +21,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { unlock } from './lock-unlock'; import type { Data, Item, @@ -51,6 +53,13 @@ interface ListViewItemProps { visibleFields: NormalizedField[]; } +const { + CompositeV2: Composite, + CompositeItemV2: CompositeItem, + CompositeRowV2: CompositeRow, + useCompositeStoreV2: useCompositeStore, +} = unlock( componentsPrivateApis ); + function ListItem( { actions, id, @@ -77,7 +86,8 @@ function ListItem( { }, [ isSelected ] ); return ( - } role="row" className={ clsx( { @@ -86,7 +96,7 @@ function ListItem( { >
- } role="button" @@ -137,12 +147,12 @@ function ListItem( {
- + { actions && (
- @@ -157,7 +167,7 @@ function ListItem( {
) } - + ); } @@ -202,7 +212,7 @@ export default function ViewList( props: ListViewProps ) { [ baseId, getItemId ] ); - const store = Ariakit.useCompositeStore( { + const store = useCompositeStore( { defaultActiveId: getItemDomId( selectedItem ), } ); @@ -223,7 +233,7 @@ export default function ViewList( props: ListViewProps ) { } return ( - } className="dataviews-view-list" @@ -247,6 +257,6 @@ export default function ViewList( props: ListViewProps ) { /> ); } ) } - + ); } From 6dbd0f861cea4ee72e80d76ae9d2b1ccaf3d009a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 8 May 2024 17:09:48 +0200 Subject: [PATCH 09/32] Use the @wordpress/components Button as trigger --- packages/dataviews/src/view-list.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index a531f40383039..c1de2a1e10d79 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -9,6 +9,7 @@ import * as Ariakit from '@ariakit/react'; */ import { useInstanceId } from '@wordpress/compose'; import { + Button, __experimentalHStack as HStack, __experimentalVStack as VStack, privateApis as componentsPrivateApis, @@ -17,6 +18,7 @@ import { } from '@wordpress/components'; import { useCallback, useEffect, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +import { moreVertical } from '@wordpress/icons'; /** * Internal dependencies @@ -155,9 +157,13 @@ function ListItem( { - Menu - + + } + /> + + ); + } return (
Date: Thu, 9 May 2024 11:58:38 +0200 Subject: [PATCH 14/32] Do not show actions trigger if there is no actions --- packages/dataviews/src/view-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index de0f9c18bb9d4..b6539f5cc7994 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -191,7 +191,7 @@ function ListItem( {
- { actions && ( + { actions?.length > 0 && ( Date: Thu, 9 May 2024 12:45:55 +0200 Subject: [PATCH 15/32] Fix rebase --- packages/dataviews/src/style.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index e4d98ff758d6d..e8e8973ebf679 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -406,14 +406,8 @@ position: relative; border-radius: $grid-unit-05; - &::after { - position: absolute; - content: ""; - top: 100%; - left: $grid-unit-30; - right: $grid-unit-30; - background: $gray-100; - height: 1px; + > * { + width: 100%; } } From ca8bc809ea6b97a29f64609a2050dd3bc51ab6a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 13:07:16 +0200 Subject: [PATCH 16/32] Attach border to top-level element (li) --- packages/dataviews/src/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index e8e8973ebf679..f63bfa4fe7f0f 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -401,6 +401,7 @@ li { margin: 0; cursor: pointer; + border-top: 1px solid $gray-100; .dataviews-view-list__item-wrapper { position: relative; @@ -446,7 +447,6 @@ padding: $grid-unit-20 $grid-unit-40; width: 100%; scroll-margin: $grid-unit-10 0; - border-top: 1px solid $gray-100; &:focus-visible { &::before { From ef3feeb69c10312d98879efcbe28268d621be038 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 13:23:56 +0200 Subject: [PATCH 17/32] Space for actions --- packages/dataviews/src/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index f63bfa4fe7f0f..0536d2d6f0e71 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -514,6 +514,10 @@ } } + .dataviews-item-actions { + padding-right: $grid-unit-40; + } + & + .dataviews-pagination { justify-content: space-between; } From 9c6421c68ff796d93da10d33eded319c8571345f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 13:29:56 +0200 Subject: [PATCH 18/32] Sort lines ascending --- packages/dataviews/src/view-list.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index b6539f5cc7994..b1556d0d4d502 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -8,9 +8,9 @@ import clsx from 'clsx'; */ import { useInstanceId } from '@wordpress/compose'; import { - Button, __experimentalHStack as HStack, __experimentalVStack as VStack, + Button, Modal, privateApis as componentsPrivateApis, Spinner, @@ -19,8 +19,8 @@ import { import { useCallback, useEffect, - useRef, useMemo, + useRef, useState, } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -40,15 +40,15 @@ import type { import { ActionsDropdownMenuGroup } from './item-actions'; interface Action { - modalHeader: string; + callback: ( items: Item[] ) => void; hideModalHeader: any; - isDestructive: boolean | undefined; - isPrimary: boolean; icon: any; - isEligible: any; id: string; + isDestructive: boolean | undefined; + isEligible: any; + isPrimary: boolean; label: string; - callback: ( items: Item[] ) => void; + modalHeader: string; RenderModal: any; } @@ -77,21 +77,21 @@ interface ListViewItemProps { } const { - DropdownMenuV2: DropdownMenu, + useCompositeStoreV2: useCompositeStore, CompositeV2: Composite, CompositeItemV2: CompositeItem, CompositeRowV2: CompositeRow, - useCompositeStoreV2: useCompositeStore, + DropdownMenuV2: DropdownMenu, kebabCase, } = unlock( componentsPrivateApis ); function ListItem( { actions, id, - item, isSelected, - onSelect, + item, mediaField, + onSelect, primaryField, store, visibleFields, From 16e8c840874f1d335ee73b64f3efbed0b054e7ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 17:31:16 +0200 Subject: [PATCH 19/32] Move children as part of Composite --- packages/dataviews/src/view-list.tsx | 64 ++++++++++++++-------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index b1556d0d4d502..ac1be638b48f1 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -221,40 +221,38 @@ function ListItem( { true ) } - > - { isModalOpen && ( - - setIsModalOpen( - false - ) - } - overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( - action.id - ) }` } - > - - setIsModalOpen( - false - ) - } - /> - - ) } - + /> } - /> + > + { isModalOpen && ( + + setIsModalOpen( + false + ) + } + overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( + action.id + ) }` } + > + + setIsModalOpen( + false + ) + } + /> + + ) } + ); } From d2111672fcc81552afbb146f5b861dcadcde3b30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 17:48:23 +0200 Subject: [PATCH 20/32] Show actions on hover --- packages/dataviews/src/style.scss | 8 ++++++++ packages/dataviews/src/view-list.tsx | 11 +++++++++++ 2 files changed, 19 insertions(+) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 0536d2d6f0e71..5393854662574 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -412,6 +412,10 @@ } } + .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { + opacity: 0; + } + &:not(.is-selected) { .dataviews-view-list__primary-field { color: $gray-900; @@ -425,8 +429,12 @@ .dataviews-view-list__fields { color: var(--wp-admin-theme-color); } + .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { + opacity: 1; + } } } + } li.is-selected, diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index ac1be638b48f1..7ab906cd2a970 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -100,6 +100,14 @@ function ListItem( { const labelId = `${ id }-label`; const descriptionId = `${ id }-description`; + const [ isHovered, setIsHovered ] = useState( false ); + const handleMouseEnter = () => { + setIsHovered( true ); + }; + const handleMouseLeave = () => { + setIsHovered( false ); + }; + useEffect( () => { if ( isSelected ) { itemRef.current?.scrollIntoView( { @@ -134,7 +142,10 @@ function ListItem( { role="row" className={ clsx( { 'is-selected': isSelected, + 'is-hovered': isHovered, } ) } + onMouseEnter={ handleMouseEnter } + onMouseLeave={ handleMouseLeave } >
From c7db4b7aa7d5dfab974f9b2f24b567beb06c5969 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 18:39:04 +0200 Subject: [PATCH 21/32] Reuse ActionModal --- packages/dataviews/src/item-actions.js | 50 +++++++++++++------------- packages/dataviews/src/view-list.tsx | 31 ++++------------ 2 files changed, 30 insertions(+), 51 deletions(-) diff --git a/packages/dataviews/src/item-actions.js b/packages/dataviews/src/item-actions.js index 0023bafee974b..7931d2e6853de 100644 --- a/packages/dataviews/src/item-actions.js +++ b/packages/dataviews/src/item-actions.js @@ -47,14 +47,23 @@ function DropdownMenuItemTrigger( { action, onClick } ) { ); } -export function ActionWithModal( { - action, - items, - ActionTrigger, - onActionStart, - onActionPerformed, - isBusy, -} ) { +export function ActionModal( { action, item, closeModal, onActionStart, onActionPerformed } ) { + return ( + + + + ); +} + +function ActionWithModal( { action, item, ActionTrigger, onActionStart, onActionPerformed, isBusy } ) { const [ isModalOpen, setIsModalOpen ] = useState( false ); const actionTriggerProps = { action, @@ -64,28 +73,17 @@ export function ActionWithModal( { items, isBusy, }; - const { RenderModal, hideModalHeader } = action; return ( <> { isModalOpen && ( - { - setIsModalOpen( false ); - } } - overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( - action.id - ) }` } - > - setIsModalOpen( false ) } - onActionStart={ onActionStart } - onActionPerformed={ onActionPerformed } - /> - + setIsModalOpen( false ) } + onActionStart={ onActionStart } + onActionPerformed={ onActionPerformed} + /> ) } ); diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 7ab906cd2a970..1da95f0368708 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -11,7 +11,6 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, Button, - Modal, privateApis as componentsPrivateApis, Spinner, VisuallyHidden, @@ -37,7 +36,7 @@ import type { ViewList as ViewListType, } from './types'; -import { ActionsDropdownMenuGroup } from './item-actions'; +import { ActionsDropdownMenuGroup, ActionModal } from './item-actions'; interface Action { callback: ( items: Item[] ) => void; @@ -82,7 +81,6 @@ const { CompositeItemV2: CompositeItem, CompositeRowV2: CompositeRow, DropdownMenuV2: DropdownMenu, - kebabCase, } = unlock( componentsPrivateApis ); function ListItem( { @@ -236,32 +234,15 @@ function ListItem( { } > { isModalOpen && ( - + setIsModalOpen( false ) } - overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( - action.id - ) }` } - > - - setIsModalOpen( - false - ) - } - /> - + /> ) }
From 817aebb35d6ef5c0fd44d32697261654b08c2ce4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 18:44:18 +0200 Subject: [PATCH 22/32] Limit to a single primary action --- packages/dataviews/src/view-list.tsx | 113 ++++++++++++--------------- 1 file changed, 52 insertions(+), 61 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 1da95f0368708..53a20c8bd5280 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -116,7 +116,7 @@ function ListItem( { } }, [ isSelected ] ); - const { primaryActions, eligibleActions } = useMemo( () => { + const { primaryAction, eligibleActions } = useMemo( () => { // If an action is eligible for all items, doesn't need // to provide the `isEligible` function. const _eligibleActions = actions.filter( @@ -126,7 +126,7 @@ function ListItem( { ( action ) => action.isPrimary && !! action.icon ); return { - primaryActions: _primaryActions, + primaryAction: _primaryActions?.[ 0 ], eligibleActions: _eligibleActions, }; }, [ actions, item ] ); @@ -210,67 +210,58 @@ function ListItem( { width: 'auto', } } > - { !! primaryActions.length && - primaryActions.map( ( action ) => { - if ( !! action.RenderModal ) { - return ( -
- - setIsModalOpen( - true - ) - } - /> - } - > - { isModalOpen && ( - - setIsModalOpen( - false - ) - } - /> - ) } - -
- ); - } - return ( -
- - action.callback( [ - item, - ] ) - } - /> + { primaryAction && !! primaryAction.RenderModal && ( +
+ + setIsModalOpen( true ) + } + /> + } + > + { isModalOpen && ( + + setIsModalOpen( false ) } /> -
- ); - } ) } + ) } + +
+ ) } + { primaryAction && ! primaryAction.RenderModal && ( +
+ + primaryAction.callback( [ + item, + ] ) + } + /> + } + /> +
+ ) }
Date: Thu, 9 May 2024 18:47:13 +0200 Subject: [PATCH 23/32] Give more space to the item --- packages/dataviews/src/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 5393854662574..3977ab105a718 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -452,7 +452,7 @@ } .dataviews-view-list__item { - padding: $grid-unit-20 $grid-unit-40; + padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-40; width: 100%; scroll-margin: $grid-unit-10 0; From dcf7306236e99232a40b5bdc6d3cd2a6af06c3b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 18:54:21 +0200 Subject: [PATCH 24/32] Adjust conditions to show the primary action --- packages/dataviews/src/style.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 3977ab105a718..e57b44acbe210 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -416,6 +416,13 @@ opacity: 0; } + &.is-hovered, + &:hover { + .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { + opacity: 1; + } + } + &:not(.is-selected) { .dataviews-view-list__primary-field { color: $gray-900; @@ -429,9 +436,6 @@ .dataviews-view-list__fields { color: var(--wp-admin-theme-color); } - .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { - opacity: 1; - } } } From 132f6b91cd601d826eaef757f99336aa717450e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 May 2024 18:57:06 +0200 Subject: [PATCH 25/32] Fixup: show the primary action when the item has focus as well --- packages/dataviews/src/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index e57b44acbe210..11dc9e4ab3cbc 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -416,6 +416,7 @@ opacity: 0; } + &:focus-within, &.is-hovered, &:hover { .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { From 270c2a65c3b13d7b9053194445b85ffe4df71837 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 10 May 2024 11:26:07 +0200 Subject: [PATCH 26/32] Align item tools to the top --- packages/dataviews/src/style.scss | 1 + packages/dataviews/src/view-list.tsx | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 11dc9e4ab3cbc..893f05968fa16 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -528,6 +528,7 @@ } .dataviews-item-actions { + padding-top: $grid-unit-20; padding-right: $grid-unit-40; } diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 53a20c8bd5280..90c1a19583774 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -145,7 +145,10 @@ function ListItem( { onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave } > - +
Date: Fri, 10 May 2024 11:33:44 +0200 Subject: [PATCH 27/32] Fix rebase --- packages/dataviews/src/item-actions.js | 29 ++++++++++++++++++++------ packages/dataviews/src/view-list.tsx | 4 +++- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/dataviews/src/item-actions.js b/packages/dataviews/src/item-actions.js index 7931d2e6853de..60a120a2b5c60 100644 --- a/packages/dataviews/src/item-actions.js +++ b/packages/dataviews/src/item-actions.js @@ -47,7 +47,13 @@ function DropdownMenuItemTrigger( { action, onClick } ) { ); } -export function ActionModal( { action, item, closeModal, onActionStart, onActionPerformed } ) { +export function ActionModal( { + action, + items, + closeModal, + onActionStart, + onActionPerformed, +} ) { return ( - + ); } -function ActionWithModal( { action, item, ActionTrigger, onActionStart, onActionPerformed, isBusy } ) { +export function ActionWithModal( { + action, + items, + ActionTrigger, + onActionStart, + onActionPerformed, + isBusy, +} ) { const [ isModalOpen, setIsModalOpen ] = useState( false ); const actionTriggerProps = { action, @@ -79,10 +96,10 @@ function ActionWithModal( { action, item, ActionTrigger, onActionStart, onAction { isModalOpen && ( setIsModalOpen( false ) } onActionStart={ onActionStart } - onActionPerformed={ onActionPerformed} + onActionPerformed={ onActionPerformed } /> ) } diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 90c1a19583774..450b51025983d 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -234,10 +234,12 @@ function ListItem( { { isModalOpen && ( setIsModalOpen( false ) } + onActionStart={ () => {} } + onActionPerformed={ () => {} } /> ) } From 6afa65262b85ba581b18710e9313b2f8d8fc0eac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 13 May 2024 15:14:41 +0200 Subject: [PATCH 28/32] Manage item removal --- packages/dataviews/src/view-list.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 450b51025983d..7673f0e98848a 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -343,6 +343,24 @@ export default function ViewList( props: ListViewProps ) { defaultActiveId: getItemDomId( selectedItem ), } ); + // Manage focused item, when the active one is removed from the list. + const isActiveIdInList = store.useState( + ( state: { items: any[]; activeId: any } ) => + state.items.some( + ( item: { id: any } ) => item.id === state.activeId + ) + ); + useEffect( () => { + if ( ! isActiveIdInList ) { + // Prefer going down, except if there is no item below (last item), then go up (last item in list). + if ( store.down() ) { + store.move( store.down() ); + } else if ( store.up() ) { + store.move( store.up() ); + } + } + }, [ isActiveIdInList ] ); + const hasData = data?.length; if ( ! hasData ) { return ( From 7052fd2eecab0fada1fd93db8077f56097d77746 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 13 May 2024 18:22:47 +0200 Subject: [PATCH 29/32] Prevent the default behaviour and move up/down explicitely --- packages/dataviews/src/view-list.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 7673f0e98848a..888b088a43dca 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -279,6 +279,30 @@ function ListItem( { label={ __( 'Actions' ) } disabled={ ! actions.length } className="dataviews-all-actions-button" + onKeyDown={ ( event: { + key: string; + preventDefault: () => any; + } ) => { + if ( + event.key === + 'ArrowDown' + ) { + // Prevent the default behaviour (open dropdown menu) and go down. + event.preventDefault(); + store.move( + store.down() + ); + } + if ( + event.key === 'ArrowUp' + ) { + // Prevent the default behavior (open dropdown menu) and go up. + event.preventDefault(); + store.move( + store.up() + ); + } + } } /> } /> From 249d86e5cd4110e02e106a90874cf01ce2b3929d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 13 May 2024 19:15:41 +0200 Subject: [PATCH 30/32] Primary actions + all actions share visibility logic --- packages/dataviews/src/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 893f05968fa16..d8537a91764e7 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -412,14 +412,14 @@ } } - .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { + .dataviews-item-actions .components-button { opacity: 0; } - &:focus-within, + &.is-selected, &.is-hovered, - &:hover { - .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { + &:focus-within { + .dataviews-item-actions .components-button { opacity: 1; } } From adf56e27be8c119822aef60eea7a3a875b6952dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 13 May 2024 19:56:44 +0200 Subject: [PATCH 31/32] Improve types --- packages/dataviews/src/view-list.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 888b088a43dca..169e18e944486 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -2,6 +2,9 @@ * External dependencies */ import clsx from 'clsx'; +// Import CompositeStore type, which is not exported from @wordpress/components. +// eslint-disable-next-line no-restricted-imports +import type { CompositeStore } from '@ariakit/react'; /** * WordPress dependencies @@ -40,15 +43,14 @@ import { ActionsDropdownMenuGroup, ActionModal } from './item-actions'; interface Action { callback: ( items: Item[] ) => void; - hideModalHeader: any; icon: any; id: string; isDestructive: boolean | undefined; - isEligible: any; - isPrimary: boolean; + isEligible: ( item: Item ) => boolean | undefined; + isPrimary: boolean | undefined; label: string; modalHeader: string; - RenderModal: any; + RenderModal: ( props: any ) => JSX.Element; } interface ListViewProps { @@ -71,7 +73,7 @@ interface ListViewItemProps { mediaField?: NormalizedField; onSelect: ( item: Item ) => void; primaryField?: NormalizedField; - store: any; + store: CompositeStore; visibleFields: NormalizedField[]; } @@ -281,7 +283,7 @@ function ListItem( { className="dataviews-all-actions-button" onKeyDown={ ( event: { key: string; - preventDefault: () => any; + preventDefault: () => void; } ) => { if ( event.key === From 7d76a8e1baf1351e1b2b2524da2a68682b93866b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 May 2024 10:19:29 +0200 Subject: [PATCH 32/32] Update classes --- packages/dataviews/src/style.scss | 6 +++--- packages/dataviews/src/view-list.tsx | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index d8537a91764e7..aa46489db6392 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -412,14 +412,14 @@ } } - .dataviews-item-actions .components-button { + .dataviews-view-list__item-actions .components-button { opacity: 0; } &.is-selected, &.is-hovered, &:focus-within { - .dataviews-item-actions .components-button { + .dataviews-view-list__item-actions .components-button { opacity: 1; } } @@ -527,7 +527,7 @@ } } - .dataviews-item-actions { + .dataviews-view-list__item-actions { padding-top: $grid-unit-20; padding-right: $grid-unit-40; } diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 169e18e944486..022e2a7222f77 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -209,7 +209,7 @@ function ListItem( { void;