@wordpress/dataviews 4.22.0 → 5.0.0

package/src/components/dataviews-view-config/index.tsx

@@ -45,26 +45,21 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
-import type { NormalizedField, SupportedLayouts, View } from '../../types';
+import type { NormalizedField, View } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
 
 const { Menu } = unlock( componentsPrivateApis );
 
-interface ViewTypeMenuProps {
-	defaultLayouts?: SupportedLayouts;
-}
-
 const DATAVIEWS_CONFIG_POPOVER_PROPS = {
 	className: 'dataviews-config__popover',
 	placement: 'bottom-end',
 	offset: 9,
 };
 
-function ViewTypeMenu( {
-	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: ViewTypeMenuProps ) {
-	const { view, onChangeView } = useContext( DataViewsContext );
+export function ViewTypeMenu() {
+	const { view, onChangeView, defaultLayouts } =
+		useContext( DataViewsContext );
 	const availableLayouts = Object.keys( defaultLayouts );
 	if ( availableLayouts.length <= 1 ) {
 		return null;
@@ -220,7 +215,8 @@ function SortDirectionControl() {
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function ItemsPerPageControl() {
-	const { view, onChangeView } = useContext( DataViewsContext );
+	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
+	const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -242,7 +238,7 @@ function ItemsPerPageControl() {
 				} );
 			} }
 		>
-			{ PAGE_SIZE_VALUES.map( ( value ) => {
+			{ pageSizeValues.map( ( value ) => {
 				return (
 					<ToggleGroupControlOption
 						key={ value }
@@ -761,7 +757,7 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigDropdown() {
+export function DataviewsViewConfigDropdown() {
 	const { view } = useContext( DataViewsContext );
 	const popoverId = useInstanceId(
 		_DataViewsViewConfig,
@@ -815,14 +811,10 @@ function DataviewsViewConfigDropdown() {
 	);
 }
 
-function _DataViewsViewConfig( {
-	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: {
-	defaultLayouts?: SupportedLayouts;
-} ) {
+function _DataViewsViewConfig() {
 	return (
 		<>
-			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
+			<ViewTypeMenu />
 			<DataviewsViewConfigDropdown />
 		</>
 	);

package/src/components/stories/index.story.tsx

@@ -0,0 +1,372 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../dataviews/index';
+import DataForm from '../dataform/index';
+import {
+	actions,
+	data,
+	fields,
+	type SpaceObject,
+} from '../dataviews/stories/fixtures';
+import { filterSortAndPaginate } from '../../filter-and-sort-data-view';
+import type { View, Form, Field } from '../../types';
+
+const meta = {
+	title: 'DataViews/FieldTypes',
+	component: DataForm,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description:
+				'Chooses the default layout of each field. "regular" is the default layout.',
+			options: [ 'default', 'regular', 'panel' ],
+		},
+		labelPosition: {
+			control: { type: 'select' },
+			description: 'Chooses the label position of the layout.',
+			options: [ 'default', 'top', 'side', 'none' ],
+		},
+	},
+} as const;
+export default meta;
+
+const defaultLayouts = {
+	table: {},
+	grid: {},
+	list: {},
+};
+
+interface FieldTypeStoryProps {
+	fields: Field< SpaceObject >[];
+	titleField?: string;
+	descriptionField?: string;
+	mediaField?: string;
+	type?: 'default' | 'regular' | 'panel';
+	labelPosition?: 'default' | 'top' | 'side' | 'none';
+}
+
+const FieldTypeStory = ( {
+	fields: storyFields,
+	titleField,
+	descriptionField,
+	mediaField,
+	type = 'default',
+	labelPosition = 'default',
+}: FieldTypeStoryProps ) => {
+	const form = useMemo(
+		() => ( {
+			type,
+			labelPosition,
+			fields: storyFields.map( ( field ) => field.id ),
+		} ),
+		[ type, labelPosition, storyFields ]
+	) as Form;
+
+	const [ view, setView ] = useState< View >( {
+		type: 'table' as const,
+		search: '',
+		page: 1,
+		perPage: 10,
+		layout: {},
+		filters: [],
+		titleField,
+		descriptionField,
+		mediaField,
+		fields: storyFields
+			.filter(
+				( field ) =>
+					! [ titleField, descriptionField, mediaField ].includes(
+						field.id
+					)
+			)
+			.map( ( field ) => field.id ),
+	} );
+
+	const [ selectedIds, setSelectedIds ] = useState< number[] >( [] );
+	const [ modifiedData, setModifiedData ] = useState< SpaceObject[] >( data );
+
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( modifiedData, view, storyFields );
+	}, [ modifiedData, view, storyFields ] );
+
+	const selectedItem =
+		( selectedIds.length === 1 &&
+			shownData.find( ( item ) => item.id === selectedIds[ 0 ] ) ) ||
+		null;
+
+	return (
+		<HStack alignment="stretch">
+			<div style={ { flex: 2 } }>
+				<DataViews
+					getItemId={ ( item ) => item.id.toString() }
+					data={ shownData }
+					paginationInfo={ paginationInfo }
+					view={ view }
+					fields={ storyFields }
+					onChangeView={ setView }
+					actions={ actions }
+					defaultLayouts={ defaultLayouts }
+					selection={ selectedIds.map( ( id ) => id.toString() ) }
+					onChangeSelection={ ( newSelection ) =>
+						setSelectedIds(
+							newSelection.map( ( id ) => parseInt( id, 10 ) )
+						)
+					}
+					// eslint-disable-next-line no-alert
+					onClickItem={ ( item ) => alert( 'clicked ' + item.title ) }
+				/>
+			</div>
+			{ selectedItem ? (
+				<VStack alignment="top">
+					<DataForm
+						data={ selectedItem }
+						form={ form }
+						fields={ storyFields }
+						onChange={ ( updatedValues ) => {
+							const updatedItem = {
+								...selectedItem,
+								...updatedValues,
+							};
+
+							setModifiedData(
+								modifiedData.map( ( item ) =>
+									item.id === selectedItem.id
+										? updatedItem
+										: item
+								)
+							);
+						} }
+					/>
+				</VStack>
+			) : (
+				<VStack alignment="center">
+					<span
+						style={ {
+							color: '#888',
+						} }
+					>
+						Please, select a single item.
+					</span>
+				</VStack>
+			) }
+		</HStack>
+	);
+};
+
+export const All = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	return (
+		<FieldTypeStory
+			fields={ fields }
+			titleField="title"
+			descriptionField="description"
+			mediaField="image"
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Text = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const textFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'text' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ textFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Integer = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const integerFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'integer' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ integerFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Boolean = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const booleanFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'boolean' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ booleanFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const DateTime = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const dateTimeFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'datetime' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ dateTimeFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Date = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const dateFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'date' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ dateFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Email = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const emailFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'email' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ emailFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Media = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const mediaFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'media' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ mediaFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Array = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const arrayTextFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'array' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ arrayTextFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const NoType = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const noTypeFields = useMemo(
+		() => fields.filter( ( field ) => field.type === undefined ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ noTypeFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};

package/src/constants.ts

@@ -16,15 +16,66 @@ export const OPERATOR_IS_ANY = 'isAny';
 export const OPERATOR_IS_NONE = 'isNone';
 export const OPERATOR_IS_ALL = 'isAll';
 export const OPERATOR_IS_NOT_ALL = 'isNotAll';
+export const OPERATOR_LESS_THAN = 'lessThan';
+export const OPERATOR_GREATER_THAN = 'greaterThan';
+export const OPERATOR_LESS_THAN_OR_EQUAL = 'lessThanOrEqual';
+export const OPERATOR_GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual';
+export const OPERATOR_BEFORE = 'before';
+export const OPERATOR_AFTER = 'after';
+export const OPERATOR_BEFORE_INC = 'beforeInc';
+export const OPERATOR_AFTER_INC = 'afterInc';
+export const OPERATOR_CONTAINS = 'contains';
+export const OPERATOR_NOT_CONTAINS = 'notContains';
+export const OPERATOR_STARTS_WITH = 'startsWith';
+export const OPERATOR_BETWEEN = 'between';
+export const OPERATOR_ON = 'on';
+export const OPERATOR_NOT_ON = 'notOn';
+export const OPERATOR_IN_THE_PAST = 'inThePast';
+export const OPERATOR_OVER = 'over';
 
-export const ALL_OPERATORS = [
+export const ALL_OPERATORS: Operator[] = [
 	OPERATOR_IS,
 	OPERATOR_IS_NOT,
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+	OPERATOR_BETWEEN,
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+	OPERATOR_IN_THE_PAST,
+	OPERATOR_OVER,
 ];
+
+export const SINGLE_SELECTION_OPERATORS: Operator[] = [
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+];
+
 export const OPERATORS: Record< Operator, { key: string; label: string } > = {
 	[ OPERATOR_IS ]: {
 		key: 'is-filter',
@@ -50,6 +101,70 @@ export const OPERATORS: Record< Operator, { key: string; label: string } > = {
 		key: 'is-not-all-filter',
 		label: __( 'Is not all' ),
 	},
+	[ OPERATOR_LESS_THAN ]: {
+		key: 'less-than-filter',
+		label: __( 'Less than' ),
+	},
+	[ OPERATOR_GREATER_THAN ]: {
+		key: 'greater-than-filter',
+		label: __( 'Greater than' ),
+	},
+	[ OPERATOR_LESS_THAN_OR_EQUAL ]: {
+		key: 'less-than-or-equal-filter',
+		label: __( 'Less than or equal' ),
+	},
+	[ OPERATOR_GREATER_THAN_OR_EQUAL ]: {
+		key: 'greater-than-or-equal-filter',
+		label: __( 'Greater than or equal' ),
+	},
+	[ OPERATOR_BEFORE ]: {
+		key: 'before-filter',
+		label: __( 'Before' ),
+	},
+	[ OPERATOR_AFTER ]: {
+		key: 'after-filter',
+		label: __( 'After' ),
+	},
+	[ OPERATOR_BEFORE_INC ]: {
+		key: 'before-inc-filter',
+		label: __( 'Before (inc)' ),
+	},
+	[ OPERATOR_AFTER_INC ]: {
+		key: 'after-inc-filter',
+		label: __( 'After (inc)' ),
+	},
+	[ OPERATOR_CONTAINS ]: {
+		key: 'contains-filter',
+		label: __( 'Contains' ),
+	},
+	[ OPERATOR_NOT_CONTAINS ]: {
+		key: 'not-contains-filter',
+		label: __( "Doesn't contain" ),
+	},
+	[ OPERATOR_STARTS_WITH ]: {
+		key: 'starts-with-filter',
+		label: __( 'Starts with' ),
+	},
+	[ OPERATOR_BETWEEN ]: {
+		key: 'between-filter',
+		label: __( 'Between (inc)' ),
+	},
+	[ OPERATOR_ON ]: {
+		key: 'on-filter',
+		label: __( 'On' ),
+	},
+	[ OPERATOR_NOT_ON ]: {
+		key: 'not-on-filter',
+		label: __( 'Not on' ),
+	},
+	[ OPERATOR_IN_THE_PAST ]: {
+		key: 'in-the-past-filter',
+		label: __( 'In the past' ),
+	},
+	[ OPERATOR_OVER ]: {
+		key: 'over-filter',
+		label: __( 'Over' ),
+	},
 };
 
 export const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;

package/src/dataform-controls/boolean.tsx

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Boolean< Item >( {
+	field,
+	onChange,
+	data,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, getValue, label } = field;
+
+	return (
+		<ToggleControl
+			hidden={ hideLabelFromVision }
+			__nextHasNoMarginBottom
+			label={ label }
+			checked={ getValue( { item: data } ) }
+			onChange={ () =>
+				onChange( { [ id ]: ! getValue( { item: data } ) } )
+			}
+		/>
+	);
+}

package/src/dataform-controls/checkbox.tsx

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Checkbox< Item >( {
+	field,
+	onChange,
+	data,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, getValue, label, description } = field;
+
+	return (
+		<CheckboxControl
+			__nextHasNoMarginBottom
+			hidden={ hideLabelFromVision }
+			label={ label }
+			help={ description }
+			checked={ getValue( { item: data } ) }
+			onChange={ () =>
+				onChange( { [ id ]: ! getValue( { item: data } ) } )
+			}
+		/>
+	);
+}