@wordpress/dataviews 9.0.1-next.6f42e1382.0 → 9.1.0

package/src/field-types/number.tsx

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	NormalizedField,
+	FieldTypeDefinition,
+} from '../types';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_BETWEEN,
+} from '../constants';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	return direction === 'asc' ? a - b : b - a;
+}
+
+function isEmpty( value: unknown ): value is '' | undefined | null {
+	return value === '' || value === undefined || value === null;
+}
+
+export default {
+	sort,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+
+			if ( ! isEmpty( value ) && ! Number.isFinite( value ) ) {
+				return __( 'Value must be a number.' );
+			}
+
+			if ( field?.elements ) {
+				const isMember = field.elements.some(
+					( element ) => element.value === Number( value )
+				);
+				if ( ! isMember ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
+	Edit: 'number',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		const value = field.getValue( { item } );
+		if ( ! isEmpty( value ) && field.elements ) {
+			const numericValue = Number( value );
+			const match = field.elements.find(
+				( element ) =>
+					Number.isFinite( Number( element.value ) ) &&
+					Number( element.value ) === numericValue
+			);
+			if ( match ) {
+				return match.label;
+			}
+		}
+
+		// TODO: remove this hardcoded value when the decimal number is configurable
+		return Number( value ).toFixed( 2 );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_LESS_THAN,
+			OPERATOR_GREATER_THAN,
+			OPERATOR_LESS_THAN_OR_EQUAL,
+			OPERATOR_GREATER_THAN_OR_EQUAL,
+			OPERATOR_BETWEEN,
+		],
+		validOperators: [
+			// Single-selection
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_LESS_THAN,
+			OPERATOR_GREATER_THAN,
+			OPERATOR_LESS_THAN_OR_EQUAL,
+			OPERATOR_GREATER_THAN_OR_EQUAL,
+			OPERATOR_BETWEEN,
+			// Multiple-selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;

package/src/field-types/stories/index.story.tsx

@@ -5,7 +5,11 @@ import { useState, useMemo } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	Icon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
+import { starFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -38,6 +42,7 @@ const meta = {
 				'datetime',
 				'email',
 				'integer',
+				'number',
 				'password',
 				'radio',
 				'select',
@@ -56,13 +61,36 @@ const meta = {
 };
 export default meta;
 
+const DollarPrefix = () => (
+	<InputControlPrefixWrapper>
+		<span>$</span>
+	</InputControlPrefixWrapper>
+);
+const StarIconPrefix = () => (
+	<InputControlPrefixWrapper variant="icon">
+		<Icon icon={ starFilled } />
+	</InputControlPrefixWrapper>
+);
+const PercentSuffix = () => (
+	<InputControlSuffixWrapper>
+		<span>%</span>
+	</InputControlSuffixWrapper>
+);
+const USDSuffix = () => (
+	<InputControlSuffixWrapper>
+		<span>USD</span>
+	</InputControlSuffixWrapper>
+);
 type DataType = {
 	id: number;
 	text: string;
 	textWithElements: string;
+	textWithRadio: string;
 	textWithTextarea: string;
 	integer: number;
 	integerWithElements: number;
+	number?: number;
+	numberWithElements?: number;
 	boolean: boolean;
 	booleanWithToggle: boolean;
 	booleanWithElements: boolean;
@@ -86,16 +114,23 @@ type DataType = {
 	arrayWithElements: string[];
 	notype: string;
 	notypeWithElements: string;
+	priceWithPrefix?: string;
+	ratingWithIcon?: string;
+	percentageWithSuffix?: string;
+	priceWithBoth?: string;
 };
 
 const data: DataType[] = [
 	{
 		id: 1,
 		text: 'Text',
-		textWithElements: 'Item 1',
+		textWithElements: 'item1',
+		textWithRadio: 'item2',
 		textWithTextarea: 'Textarea',
 		integer: 1,
 		integerWithElements: 1,
+		number: 10.25,
+		numberWithElements: 2,
 		boolean: true,
 		booleanWithToggle: true,
 		booleanWithElements: true,
@@ -104,7 +139,7 @@ const data: DataType[] = [
 		date: '2021-01-01',
 		dateWithElements: '2021-01-01',
 		email: 'hi@example.com',
-		emailWithElements: 'hi@example.com',
+		emailWithElements: 'bob@example.com',
 		telephone: '+1-555-123-4567',
 		telephoneWithElements: '+1-555-123-4567',
 		color: '#ff6600',
@@ -120,6 +155,10 @@ const data: DataType[] = [
 		arrayWithElements: [ 'item1', 'item2', 'item3' ],
 		notype: 'No type',
 		notypeWithElements: 'No type',
+		priceWithPrefix: '25.99',
+		ratingWithIcon: '4.5',
+		percentageWithSuffix: '85',
+		priceWithBoth: '199.99',
 	},
 ];
 
@@ -141,6 +180,18 @@ const fields: Field< DataType >[] = [
 			{ value: 'item3', label: 'Item 3' },
 		],
 	},
+	{
+		id: 'textWithRadio',
+		type: 'text',
+		label: 'Text (with radio)',
+		description: 'Help for text with radio.',
+		Edit: 'radio',
+		elements: [
+			{ value: 'item1', label: 'Item 1' },
+			{ value: 'item2', label: 'Item 2' },
+			{ value: 'item3', label: 'Item 3' },
+		],
+	},
 	{
 		id: 'textWithTextarea',
 		type: 'text',
@@ -164,6 +215,29 @@ const fields: Field< DataType >[] = [
 			{ value: 2, label: 'Two' },
 			{ value: 3, label: 'Three' },
 		],
+		setValue: ( { value } ) => ( {
+			integerWithElements: parseInt( value, 10 ),
+		} ),
+	},
+	{
+		id: 'number',
+		type: 'number',
+		label: 'Number',
+		description: 'Number field increments by 0.01.',
+	},
+	{
+		id: 'numberWithElements',
+		type: 'number',
+		label: 'Number (with elements)',
+		description: 'Number field with elements.',
+		elements: [
+			{ value: 1, label: 'One' },
+			{ value: 2, label: 'Two' },
+			{ value: 3, label: 'Three' },
+		],
+		setValue: ( { value } ) => ( {
+			numberWithElements: Number( value ),
+		} ),
 	},
 	{
 		id: 'boolean',
@@ -187,6 +261,9 @@ const fields: Field< DataType >[] = [
 			{ value: true, label: 'It is true' },
 			{ value: false, label: 'It is false' },
 		],
+		setValue: ( { value } ) => ( {
+			booleanWithElements: value === 'true' ? true : false,
+		} ),
 	},
 	{
 		id: 'datetime',
@@ -247,6 +324,9 @@ const fields: Field< DataType >[] = [
 			{ value: 'jane@example.com', label: 'Jane Doe' },
 			{ value: 'bob@example.com', label: 'Bob Smith' },
 		],
+		setValue: ( { value } ) => ( {
+			emailWithElements: value,
+		} ),
 	},
 	{
 		id: 'telephone',
@@ -395,6 +475,47 @@ const fields: Field< DataType >[] = [
 			{ value: 'item3', label: 'Item 3' },
 		],
 	},
+	{
+		id: 'priceWithPrefix',
+		label: 'Text with Prefix',
+		type: 'text',
+		description: 'Text field with dollar sign prefix.',
+		Edit: {
+			control: 'text',
+			prefix: DollarPrefix,
+		},
+	},
+	{
+		id: 'ratingWithIcon',
+		label: 'Text with Icon Prefix',
+		type: 'text',
+		description: 'Text field with star icon prefix.',
+		Edit: {
+			control: 'text',
+			prefix: StarIconPrefix,
+		},
+	},
+	{
+		id: 'percentageWithSuffix',
+		label: 'Text with Suffix',
+		type: 'text',
+		description: 'Text field with percent sign suffix.',
+		Edit: {
+			control: 'text',
+			suffix: PercentSuffix,
+		},
+	},
+	{
+		id: 'priceWithBoth',
+		label: 'Text with Prefix and Suffix',
+		type: 'text',
+		description: 'Text field with both dollar prefix and USD suffix.',
+		Edit: {
+			control: 'text',
+			prefix: DollarPrefix,
+			suffix: USDSuffix,
+		},
+	},
 ];
 
 type PanelTypes = 'regular' | 'panel';
@@ -407,6 +528,7 @@ type ControlTypes =
 	| 'datetime'
 	| 'email'
 	| 'integer'
+	| 'number'
 	| 'password'
 	| 'radio'
 	| 'select'
@@ -534,7 +656,7 @@ const FieldTypeStory = ( {
 	);
 };
 
-export const All = ( {
+export const AllComponent = ( {
 	type,
 	Edit,
 }: {
@@ -543,8 +665,9 @@ export const All = ( {
 } ) => {
 	return <FieldTypeStory fields={ fields } type={ type } Edit={ Edit } />;
 };
+AllComponent.storyName = 'All types';
 
-export const Text = ( {
+export const TextComponent = ( {
 	type,
 	Edit,
 }: {
@@ -558,8 +681,9 @@ export const Text = ( {
 
 	return <FieldTypeStory fields={ textFields } type={ type } Edit={ Edit } />;
 };
+TextComponent.storyName = 'text';
 
-export const Integer = ( {
+export const IntegerComponent = ( {
 	type,
 	Edit,
 }: {
@@ -575,8 +699,27 @@ export const Integer = ( {
 		<FieldTypeStory fields={ integerFields } type={ type } Edit={ Edit } />
 	);
 };
+IntegerComponent.storyName = 'integer';
+
+export const NumberComponent = ( {
+	type,
+	Edit,
+}: {
+	type: PanelTypes;
+	Edit: ControlTypes;
+} ) => {
+	const numberFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'number' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory fields={ numberFields } type={ type } Edit={ Edit } />
+	);
+};
+NumberComponent.storyName = 'number';
 
-export const Boolean = ( {
+export const BooleanComponent = ( {
 	type,
 	Edit,
 }: {
@@ -592,8 +735,9 @@ export const Boolean = ( {
 		<FieldTypeStory fields={ booleanFields } type={ type } Edit={ Edit } />
 	);
 };
+BooleanComponent.storyName = 'boolean';
 
-export const DateTime = ( {
+export const DateTimeComponent = ( {
 	type,
 	Edit,
 }: {
@@ -609,8 +753,9 @@ export const DateTime = ( {
 		<FieldTypeStory fields={ dateTimeFields } type={ type } Edit={ Edit } />
 	);
 };
+DateTimeComponent.storyName = 'datetime';
 
-export const Date = ( {
+export const DateComponent = ( {
 	type,
 	Edit,
 }: {
@@ -624,8 +769,9 @@ export const Date = ( {
 
 	return <FieldTypeStory fields={ dateFields } type={ type } Edit={ Edit } />;
 };
+DateComponent.storyName = 'date';
 
-export const Email = ( {
+export const EmailComponent = ( {
 	type,
 	Edit,
 }: {
@@ -641,8 +787,9 @@ export const Email = ( {
 		<FieldTypeStory fields={ emailFields } type={ type } Edit={ Edit } />
 	);
 };
+EmailComponent.storyName = 'email';
 
-export const Telephone = ( {
+export const TelephoneComponent = ( {
 	type,
 	Edit,
 }: {
@@ -662,8 +809,9 @@ export const Telephone = ( {
 		/>
 	);
 };
+TelephoneComponent.storyName = 'telephone';
 
-export const Url = ( {
+export const UrlComponent = ( {
 	type,
 	Edit,
 }: {
@@ -677,8 +825,9 @@ export const Url = ( {
 
 	return <FieldTypeStory fields={ urlFields } type={ type } Edit={ Edit } />;
 };
+UrlComponent.storyName = 'url';
 
-export const Color = ( {
+export const ColorComponent = ( {
 	type,
 	Edit,
 }: {
@@ -694,8 +843,9 @@ export const Color = ( {
 		<FieldTypeStory fields={ colorFields } type={ type } Edit={ Edit } />
 	);
 };
+ColorComponent.storyName = 'color';
 
-export const Media = ( {
+export const MediaComponent = ( {
 	type,
 	Edit,
 }: {
@@ -711,8 +861,9 @@ export const Media = ( {
 		<FieldTypeStory fields={ mediaFields } type={ type } Edit={ Edit } />
 	);
 };
+MediaComponent.storyName = 'media';
 
-export const Array = ( {
+export const ArrayComponent = ( {
 	type,
 	Edit,
 }: {
@@ -732,8 +883,9 @@ export const Array = ( {
 		/>
 	);
 };
+ArrayComponent.storyName = 'array';
 
-export const Password = ( {
+export const PasswordComponent = ( {
 	type,
 	Edit,
 }: {
@@ -749,8 +901,9 @@ export const Password = ( {
 		<FieldTypeStory fields={ passwordFields } type={ type } Edit={ Edit } />
 	);
 };
+PasswordComponent.storyName = 'password';
 
-export const NoType = ( {
+export const NoTypeComponent = ( {
 	type,
 	Edit,
 }: {
@@ -766,3 +919,4 @@ export const NoType = ( {
 		<FieldTypeStory fields={ noTypeFields } type={ type } Edit={ Edit } />
 	);
 };
+NoTypeComponent.storyName = 'No type';

package/src/index.ts

@@ -1,4 +1,5 @@
 export { default as DataViews } from './components/dataviews';
+export { default as DataViewsPicker } from './components/dataviews-picker';
 export { default as DataForm } from './components/dataform';
 export { VIEW_LAYOUTS } from './dataviews-layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';

package/src/normalize-fields.ts

@@ -37,6 +37,22 @@ const getValueFromId =
 		return value;
 	};
 
+export const setValueFromId =
+	( id: string ) =>
+	( { value }: { value: any } ) => {
+		const path = id.split( '.' );
+		const result: any = {};
+		let current = result;
+
+		for ( const segment of path.slice( 0, -1 ) ) {
+			current[ segment ] = {};
+			current = current[ segment ];
+		}
+
+		current[ path.at( -1 )! ] = value;
+		return result;
+	};
+
 function getFilterBy< Item >(
 	field: Field< Item >,
 	fieldTypeDefinition: FieldTypeDefinition< Item >
@@ -128,6 +144,7 @@ export function normalizeFields< Item >(
 			field.type
 		);
 		const getValue = field.getValue || getValueFromId( field.id );
+		const setValue = field.setValue || setValueFromId( field.id );
 
 		const sort =
 			field.sort ??
@@ -166,6 +183,7 @@ export function normalizeFields< Item >(
 			label: field.label || field.id,
 			header: field.header || field.label || field.id,
 			getValue,
+			setValue,
 			render,
 			sort,
 			isValid,

package/src/test/dataform.tsx

@@ -144,6 +144,42 @@ describe( 'DataForm component', () => {
 			}
 		} );
 
+		it( 'should allow decimal input for number fields', async () => {
+			const onChange = jest.fn();
+			const fieldsWithNumber = [
+				...fields,
+				{
+					id: 'price',
+					label: 'Price',
+					type: 'number' as const,
+				},
+			];
+			const formWithNumber = {
+				...form,
+				fields: [ ...form.fields, 'price' ],
+			};
+			render(
+				<Dataform
+					onChange={ onChange }
+					fields={ fieldsWithNumber }
+					form={ formWithNumber }
+					data={ { ...data, price: 2.5 } }
+				/>
+			);
+
+			const priceInput = screen.getByRole( 'spinbutton', {
+				name: /price/i,
+			} );
+			expect( priceInput ).toHaveValue( 2.5 );
+
+			const user = userEvent.setup();
+			await user.clear( priceInput );
+			await user.type( priceInput, '3.75' );
+
+			expect( onChange ).toHaveBeenLastCalledWith( { price: 3.75 } );
+			expect( priceInput ).toHaveValue( 3.75 );
+		} );
+
 		it( 'should wrap fields in HStack when labelPosition is set to side', async () => {
 			const { container } = render(
 				<Dataform