@wordpress/dataviews 4.22.0 → 5.0.1-next.719a03cbe.0

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

@@ -0,0 +1,351 @@
+/**
+ * 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 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 } ) } )
+			}
+		/>
+	);
+}

package/src/dataform-controls/datetime.tsx

@@ -1,19 +1,110 @@
 /**
  * WordPress dependencies
  */
-import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
+import {
+	BaseControl,
+	TimePicker,
+	VisuallyHidden,
+	SelectControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
+
+const TIME_UNITS_OPTIONS = {
+	[ OPERATOR_IN_THE_PAST ]: [
+		{ value: 'days', label: __( 'Days' ) },
+		{ value: 'weeks', label: __( 'Weeks' ) },
+		{ value: 'months', label: __( 'Months' ) },
+		{ value: 'years', label: __( 'Years' ) },
+	],
+	[ OPERATOR_OVER ]: [
+		{ value: 'days', label: __( 'Days ago' ) },
+		{ value: 'weeks', label: __( 'Weeks ago' ) },
+		{ value: 'months', label: __( 'Months ago' ) },
+		{ value: 'years', label: __( 'Years ago' ) },
+	],
+};
+
+function RelativeDateControls( {
+	id,
+	value,
+	onChange,
+	label,
+	hideLabelFromVision,
+	options,
+}: {
+	id: string;
+	value: { value?: string | number; unit?: string };
+	onChange: ( value: any ) => void;
+	label: string;
+	hideLabelFromVision?: boolean;
+	options: { value: string; label: string }[];
+} ) {
+	const { value: relValue = '', unit = options[ 0 ].value } = value;
+
+	const onChangeValue = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: { value: Number( newValue ), unit },
+			} ),
+		[ id, onChange, unit ]
+	);
+
+	const onChangeUnit = useCallback(
+		( newUnit: string | undefined ) =>
+			onChange( {
+				[ id ]: { value: relValue, unit: newUnit },
+			} ),
+		[ id, onChange, relValue ]
+	);
+
+	return (
+		<BaseControl
+			id={ id }
+			__nextHasNoMarginBottom
+			className="dataviews-controls__datetime"
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+		>
+			<HStack spacing={ 2.5 }>
+				<NumberControl
+					__next40pxDefaultSize
+					className="dataviews-controls__datetime-number"
+					spinControls="none"
+					min={ 1 }
+					step={ 1 }
+					value={ relValue }
+					onChange={ onChangeValue }
+				/>
+				<SelectControl
+					className="dataviews-controls__datetime-unit"
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Unit' ) }
+					value={ unit }
+					options={ options }
+					onChange={ onChangeUnit }
+					hideLabelFromVision
+				/>
+			</HStack>
+		</BaseControl>
+	);
+}
 
 export default function DateTime< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
+	operator,
 }: DataFormControlProps< Item > ) {
 	const { id, label } = field;
 	const value = field.getValue( { item: data } );
@@ -23,6 +114,19 @@ export default function DateTime< Item >( {
 		[ id, onChange ]
 	);
 
+	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
+		return (
+			<RelativeDateControls
+				id={ id }
+				value={ value && typeof value === 'object' ? value : {} }
+				onChange={ onChange }
+				label={ label }
+				hideLabelFromVision={ hideLabelFromVision }
+				options={ TIME_UNITS_OPTIONS[ operator ] }
+			/>
+		);
+	}
+
 	return (
 		<fieldset className="dataviews-controls__datetime">
 			{ ! hideLabelFromVision && (
@@ -34,7 +138,7 @@ export default function DateTime< Item >( {
 				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
 			) }
 			<TimePicker
-				currentTime={ value }
+				currentTime={ typeof value === 'string' ? value : undefined }
 				onChange={ onChangeControl }
 				hideLabelFromVision
 			/>