diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index cf92d14e27b379..6efa4a8508239a 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -4,7 +4,8 @@ ### Breaking Changes -- `onSelectionChange` has been renamed to `onChangeSelection`. +- `onSelectionChange` prop has been renamed to `onChangeSelection` and its argument has been updated to be a list of ids. +- `setSelection` prop has been removed. Please use `onChangeSelection` instead. ## 3.0.0 (2024-07-10) diff --git a/packages/dataviews/src/dataviews.tsx b/packages/dataviews/src/dataviews.tsx index f840423b16c89d..7ac09a990fa24b 100644 --- a/packages/dataviews/src/dataviews.tsx +++ b/packages/dataviews/src/dataviews.tsx @@ -31,7 +31,7 @@ import type { ViewBaseProps, SupportedLayouts, } from './types'; -import type { SetSelection, SelectionOrUpdater } from './private-types'; +import type { SelectionOrUpdater } from './private-types'; type ItemWithId = { id: string }; @@ -50,16 +50,13 @@ type DataViewsProps< Item > = { }; defaultLayouts: SupportedLayouts; selection?: string[]; - setSelection?: SetSelection; - onChangeSelection?: ( items: Item[] ) => void; + onChangeSelection?: ( items: string[] ) => void; } & ( Item extends ItemWithId ? { getItemId?: ( item: Item ) => string } : { getItemId: ( item: Item ) => string } ); const defaultGetItemId = ( item: ItemWithId ) => item.id; -const defaultOnChangeSelection = () => {}; - export default function DataViews< Item >( { view, onChangeView, @@ -73,25 +70,23 @@ export default function DataViews< Item >( { paginationInfo, defaultLayouts, selection: selectionProperty, - setSelection: setSelectionProperty, - onChangeSelection = defaultOnChangeSelection, + onChangeSelection, }: DataViewsProps< Item > ) { const [ selectionState, setSelectionState ] = useState< string[] >( [] ); const isUncontrolled = - selectionProperty === undefined || setSelectionProperty === undefined; + selectionProperty === undefined || onChangeSelection === undefined; const selection = isUncontrolled ? selectionState : selectionProperty; - const setSelection = isUncontrolled - ? setSelectionState - : setSelectionProperty; const [ openedFilter, setOpenedFilter ] = useState< string | null >( null ); function setSelectionWithChange( value: SelectionOrUpdater ) { const newValue = typeof value === 'function' ? value( selection ) : value; - onChangeSelection( - data.filter( ( item ) => newValue.includes( getItemId( item ) ) ) - ); - return setSelection( value ); + if ( ! isUncontrolled ) { + setSelectionState( newValue ); + } + if ( onChangeSelection ) { + onChangeSelection( newValue ); + } } const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type ) diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 2da04329bb2ea6..ed1c8543865c19 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -258,10 +258,11 @@ export default function PageTemplates() { const history = useHistory(); const onChangeSelection = useCallback( ( items ) => { + setSelection( items ); if ( view?.type === LAYOUT_LIST ) { history.push( { ...params, - postId: items.length === 1 ? items[ 0 ].id : undefined, + postId: items.length === 1 ? items[ 0 ] : undefined, } ); } }, @@ -374,7 +375,6 @@ export default function PageTemplates() { onChangeView={ onChangeView } onChangeSelection={ onChangeSelection } selection={ selection } - setSelection={ setSelection } defaultLayouts={ defaultLayouts } /> diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js index 1599cad29f95ee..5c8ac934a63355 100644 --- a/packages/edit-site/src/components/post-list/index.js +++ b/packages/edit-site/src/components/post-list/index.js @@ -284,6 +284,7 @@ export default function PostList( { postType } ) { const [ selection, setSelection ] = useState( [ postId ] ); const onChangeSelection = useCallback( ( items ) => { + setSelection( items ); const { params } = history.getLocationWithParams(); if ( ( params.isCustom ?? 'false' ) === 'false' && @@ -291,7 +292,7 @@ export default function PostList( { postType } ) { ) { history.push( { ...params, - postId: items.length === 1 ? items[ 0 ].id : undefined, + postId: items.length === 1 ? items[ 0 ] : undefined, } ); } }, @@ -611,7 +612,6 @@ export default function PostList( { postType } ) { view={ view } onChangeView={ setView } selection={ selection } - setSelection={ setSelection } onChangeSelection={ onChangeSelection } getItemId={ getItemId } defaultLayouts={ defaultLayouts }