@wordpress/dataviews 3.0.0 → 4.1.0

package/src/field-types/integer.tsx

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalNumberControl as NumberControl,
+	SelectControl,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	SortDirection,
+	ValidationContext,
+	DataFormControlProps,
+} from '../types';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	return direction === 'asc' ? a - b : b - a;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	// TODO: this implicitely means the value is required.
+	if ( value === '' ) {
+		return false;
+	}
+
+	if ( ! Number.isInteger( Number( value ) ) ) {
+		return false;
+	}
+
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( Number( value ) ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+function Edit< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, description } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( ( prevItem: Item ) => ( {
+				...prevItem,
+				[ id ]: newValue,
+			} ) ),
+		[ id, onChange ]
+	);
+
+	if ( field.elements ) {
+		const elements = [
+			/*
+			 * Value can be undefined when:
+			 *
+			 * - the field is not required
+			 * - in bulk editing
+			 *
+			 */
+			{ label: __( 'Select item' ), value: '' },
+			...field.elements,
+		];
+
+		return (
+			<SelectControl
+				label={ label }
+				value={ value }
+				options={ elements }
+				onChange={ onChangeControl }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+		);
+	}
+
+	return (
+		<NumberControl
+			label={ label }
+			help={ description }
+			value={ value }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
+
+export default {
+	sort,
+	isValid,
+	Edit,
+};

package/src/field-types/text.tsx

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl, TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	SortDirection,
+	ValidationContext,
+	DataFormControlProps,
+} from '../types';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	return direction === 'asc'
+		? valueA.localeCompare( valueB )
+		: valueB.localeCompare( valueA );
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements?.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+function Edit< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( ( prevItem: Item ) => ( {
+				...prevItem,
+				[ id ]: newValue,
+			} ) ),
+		[ id, onChange ]
+	);
+
+	if ( field.elements ) {
+		const elements = [
+			/*
+			 * Value can be undefined when:
+			 *
+			 * - the field is not required
+			 * - in bulk editing
+			 *
+			 */
+			{ label: __( 'Select item' ), value: '' },
+			...field.elements,
+		];
+
+		return (
+			<SelectControl
+				label={ label }
+				value={ value }
+				options={ elements }
+				onChange={ onChangeControl }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+		);
+	}
+
+	return (
+		<TextControl
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
+
+export default {
+	sort,
+	isValid,
+	Edit,
+};

package/src/filter-and-sort-data-view.ts

@@ -140,21 +140,7 @@ export function filterSortAndPaginate< Item >(
 		} );
 		if ( fieldToSort ) {
 			filteredData.sort( ( a, b ) => {
-				const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-				const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-
-				if (
-					typeof valueA === 'number' &&
-					typeof valueB === 'number'
-				) {
-					return view.sort?.direction === 'asc'
-						? valueA - valueB
-						: valueB - valueA;
-				}
-
-				return view.sort?.direction === 'asc'
-					? valueA.localeCompare( valueB )
-					: valueB.localeCompare( valueA );
+				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
 			} );
 		}
 	}

package/src/index.ts

@@ -1,5 +1,6 @@
-export { default as DataViews } from './dataviews';
-export { VIEW_LAYOUTS } from './layouts';
+export { default as DataViews } from './components/dataviews';
+export { default as DataForm } from './components/dataform';
+export { VIEW_LAYOUTS } from './dataviews-layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
-export { default as DataForm } from './dataform';
+export { isItemValid } from './validation';

package/src/normalize-fields.ts

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { Field, NormalizedField, ItemRecord } from './types';
+import getFieldTypeDefinition from './field-types';
+import type { Field, NormalizedField } from './types';
 
 /**
  * Apply default values and normalize the fields config.
@@ -13,15 +14,55 @@ export function normalizeFields< Item >(
 	fields: Field< Item >[]
 ): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
+		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
+
 		const getValue =
 			field.getValue ||
-			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
+			( ( { item }: { item: Item } ) => item[ field.id as keyof Item ] );
+
+		const sort =
+			field.sort ??
+			function sort( a, b, direction ) {
+				return fieldTypeDefinition.sort(
+					getValue( { item: a } ),
+					getValue( { item: b } ),
+					direction
+				);
+			};
+
+		const isValid =
+			field.isValid ??
+			function isValid( item, context ) {
+				return fieldTypeDefinition.isValid(
+					getValue( { item } ),
+					context
+				);
+			};
+
+		const Edit = field.Edit || fieldTypeDefinition.Edit;
+
+		const renderFromElements = ( { item }: { item: Item } ) => {
+			const value = getValue( { item } );
+			const label = field?.elements?.find( ( element ) => {
+				// Intentionally using == here to allow for type coercion.
+				// eslint-disable-next-line eqeqeq
+				return element.value == value;
+			} )?.label;
+
+			return label || value;
+		};
+
+		const render =
+			field.render || ( field.elements ? renderFromElements : getValue );
 
 		return {
 			...field,
-			header: field.header || field.id,
+			label: field.label || field.id,
 			getValue,
-			render: field.render || getValue,
+			render,
+			sort,
+			isValid,
+			Edit,
 		};
 	} );
 }