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

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
@@ -56,10 +60,32 @@ 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;
@@ -86,13 +112,18 @@ 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,
@@ -120,6 +151,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 +176,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',
@@ -395,6 +442,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';

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,