import { DataViewsPicker } from '@wordpress/dataviews';
View on Storybook
View source on GitHub
| Name | Default | Description |
|---|
view Required | | | ViewList
| ViewGrid
| ViewTable
| ViewPickerGrid
| ViewPickerTable
| ViewPickerActivity
| ViewActivity
|
onChangeView Required | | ( view: View ) => void
|
fields Required | | Field< Item >[]
|
actions | [] | ActionButton< Item >[]
|
search | true | boolean
|
searchLabel | undefined | string
|
data Required | | Item[]
|
isLoading | false | boolean
|
paginationInfo Required | | {
totalItems: number;
totalPages: number;
}
|
defaultLayouts | {
pickerGrid: true,
pickerTable: true,
} | SupportedLayouts
|
selection Required | | string[]
|
onChangeSelection Required | | ( items: string[] ) => void
|
children | | ReactNode
|
config | { perPageSizes: [ 10, 20, 50, 100 ] } | {
perPageSizes: number[];
}
|
itemListLabel | | string
|
empty | | ReactNode
|
onReset | | ( () => void ) | false
|
getItemId | ( item: ItemWithId ) => item.id | unknown
|
const Default = ( {
perPageSizes = [ 10, 25, 50, 100 ],
isMultiselectable,
isGrouped,
infiniteScrollEnabled,
}: {
perPageSizes: number[];
isMultiselectable: boolean;
isGrouped: boolean;
infiniteScrollEnabled: boolean;
} ) => (
<DataViewsPickerContent
perPageSizes={ perPageSizes }
isMultiselectable={ isMultiselectable }
isGrouped={ isGrouped }
infiniteScrollEnabled={ infiniteScrollEnabled }
/>
);
const WithModal = ( {
perPageSizes = [ 10, 25, 50, 100 ],
isMultiselectable,
isGrouped,
infiniteScrollEnabled,
}: {
perPageSizes: number[];
isMultiselectable: boolean;
isGrouped: boolean;
infiniteScrollEnabled: boolean;
} ) => {
const [ isModalOpen, setIsModalOpen ] = useState( false );
const [ selectedItems, setSelectedItems ] = useState< SpaceObject[] >( [] );
const modalActions: ActionButton< SpaceObject >[] = [
{
id: 'cancel',
label: 'Cancel',
supportsBulk: isMultiselectable,
callback() {
setIsModalOpen( false );
},
},
{
id: 'confirm',
label: 'Confirm',
isPrimary: true,
supportsBulk: isMultiselectable,
callback( items ) {
setSelectedItems( items );
setIsModalOpen( false );
},
},
];
return (
<>
<Stack direction="row" justify="left" gap="sm">
<Button
variant="primary"
__next40pxDefaultSize
onClick={ () => setIsModalOpen( true ) }
>
Open Picker Modal
</Button>
<Button
onClick={ () => setSelectedItems( [] ) }
disabled={ ! selectedItems.length }
accessibleWhenDisabled
__next40pxDefaultSize
>
Clear Selection
</Button>
</Stack>
{ selectedItems.length > 0 && (
<p>
Selected:{ ' ' }
{ selectedItems
.map( ( item ) => item.name.title )
.join( ', ' ) }
</p>
) }
{ isModalOpen && (
<>
<style>{ `
.components-modal__content {
padding: 0;
}
.components-modal__frame.is-full-screen .components-modal__content {
margin-bottom: 0;
}
` }</style>
<Modal
title="Select Items"
onRequestClose={ () => setIsModalOpen( false ) }
isFullScreen={ false }
size="fill"
>
<DataViewsPickerContent
perPageSizes={ perPageSizes }
isMultiselectable={ isMultiselectable }
isGrouped={ isGrouped }
infiniteScrollEnabled={ infiniteScrollEnabled }
actions={ modalActions }
selection={ selectedItems.map( ( item ) =>
String( item.id )
) }
/>
</Modal>
</>
) }
</>
);
};