Automattic Design System

Category: DataViews

  • DataForm

    import { DataForm } from '@wordpress/dataviews';

    View on Storybook

    View source on GitHub

    Props

    NameDefaultDescription
    data Required

    Item

    fields Required

    Field< Item >[]

    form Required

    { layout?: Layout; fields?: Array< FormField | string >; }

    onChange Required

    ( value: Record< string, any > ) => void

    validity

    Record< string, FieldValidity > | undefined

    Examples

    Layout Card

    const LayoutCard = () => <DataForm withHeader withSummary isCollapsible />;

    Layout Details

    const LayoutDetails = () => <DataForm />;

    Layout Panel

    const LayoutPanel = () => <DataForm openAs="default" />;

    Layout Regular

    const LayoutRegular = () => <DataForm disabled={false} />;

    Layout Row

    const LayoutRow = () => <DataForm alignment="default" />;

    Layout Mixed

    const LayoutMixed = () => <DataForm />;

    Validation

    const Validation = () => <DataForm
    layout="regular"
    required
    elements="sync"
    custom="sync"
    pattern={false}
    minMax={false} />;

    Visibility

    const Visibility = () => <DataForm />;

    Data Adapter

    const DataAdapter = () => <DataForm />;

  • DataViews

    import { DataViews } from '@wordpress/dataviews';

    View on Storybook

    View source on GitHub

    Props

    NameDefaultDescription
    view Required

    | ViewList | ViewGrid | ViewTable | ViewPickerGrid | ViewPickerTable | ViewPickerActivity | ViewActivity

    onChangeView Required

    ( view: View ) => void

    fields Required

    Field< Item >[]

    searchtrue

    boolean

    searchLabelundefined

    string

    actions[]

    Action< Item >[]

    data Required

    Item[]

    isLoadingfalse

    boolean

    paginationInfo Required

    { totalItems: number; totalPages: number; }

    defaultLayouts{ table: {}, grid: {}, list: {} }

    SupportedLayouts

    selection

    string[]

    onChangeSelection

    ( items: string[] ) => void

    onClickItem

    ( item: Item ) => void

    renderItemLink

    ( props: { item: Item; } & ComponentProps< 'a' > ) => ReactElement

    isItemClickable() => true

    ( item: Item ) => boolean

    header

    ReactNode

    getItemLevel

    ( item: Item ) => number

    children

    ReactNode

    config{ perPageSizes: [ 10, 20, 50, 100 ] }

    { perPageSizes: number[]; }

    empty

    ReactNode

    onReset

    ( () => void ) | false

    getItemId( item: ItemWithId ) => item.id

    unknown

    Examples

    Layout Table

    const LayoutTable = () => <DataViews
    containerHeight="auto"
    groupBy={false}
    groupByLabel
    hasClickableItems
    perPageSizes={[ 10, 25, 50, 100 ]}
    showMedia />;

    Layout Grid

    const LayoutGrid = () => <DataViews
    containerHeight="auto"
    groupBy={false}
    groupByLabel
    hasClickableItems
    perPageSizes={[ 10, 25, 50, 100 ]}
    showMedia />;

    Layout List

    const LayoutList = () => <DataViews
    containerHeight="auto"
    fullWidth={false}
    groupBy={false}
    groupByLabel
    hasClickableItems
    perPageSizes={[ 10, 25, 50, 100 ]}
    showMedia />;

    Layout Activity

    const LayoutActivity = () => <DataViews
    containerHeight="auto"
    fullWidth={false}
    groupBy={false}
    groupByLabel
    hasClickableItems
    perPageSizes={[ 10, 25, 50, 100 ]}
    showMedia />;

    Layout Custom

    const LayoutCustom = () => <DataViews containerHeight="auto" />;

    Empty

    const Empty = () => <DataViews containerHeight="auto" customEmpty={false} isLoading={false} />;

    Minimal UI

    const MinimalUI = () => <DataViews containerHeight="auto" />;

    Free Composition

    const FreeComposition = () => <DataViews containerHeight="auto" />;

    With Card

    const WithCard = () => <DataViews containerHeight="auto" />;

    Infinite Scroll

    const InfiniteScroll = () => <DataViews containerHeight="auto" />;

  • DataViewsPicker

    import { DataViewsPicker } from '@wordpress/dataviews';

    View on Storybook

    View source on GitHub

    Props

    NameDefaultDescription
    view Required

    | ViewList | ViewGrid | ViewTable | ViewPickerGrid | ViewPickerTable | ViewPickerActivity | ViewActivity

    onChangeView Required

    ( view: View ) => void

    fields Required

    Field< Item >[]

    actions[]

    ActionButton< Item >[]

    searchtrue

    boolean

    searchLabelundefined

    string

    data Required

    Item[]

    isLoadingfalse

    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

    Examples

    Default

    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 }
	/>
);

    With Modal

    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>
				</>
			) }
		</>
	);
};