@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.0

package/src/field-types/text.tsx

@@ -1,18 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_CONTAINS,
 	OPERATOR_IS,
@@ -34,23 +28,16 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 export default {
 	sort,
 	isValid: {
-		custom: ( item: any, field: NormalizedField< any > ) => {
-			const value = field.getValue( { item } );
-			if ( field?.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if ( ! validValues.includes( value ) ) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
-
-			return null;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	Edit: 'text',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.elements
-			? renderFromElements( { item, field } )
-			: field.getValue( { item } );
+		return field.hasElements ? (
+			<RenderFromElements item={ item } field={ field } />
+		) : (
+			field.getValue( { item } )
+		);
 	},
 	enableSorting: true,
 	filterBy: {

package/src/field-types/url.tsx

@@ -1,18 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_IS,
 	OPERATOR_IS_ALL,
@@ -34,23 +28,16 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 export default {
 	sort,
 	isValid: {
-		custom: ( item: any, field: NormalizedField< any > ) => {
-			const value = field.getValue( { item } );
-			if ( field?.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if ( ! validValues.includes( value ) ) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
-
-			return null;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	Edit: 'url',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.elements
-			? renderFromElements( { item, field } )
-			: field.getValue( { item } );
+		return field.hasElements ? (
+			<RenderFromElements item={ item } field={ field } />
+		) : (
+			field.getValue( { item } )
+		);
 	},
 	enableSorting: true,
 	filterBy: {

package/src/field-types/utils/render-from-elements.tsx

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import type { DataViewRenderFieldProps } from '../../types';
+import useElements from '../../hooks/use-elements';
+
+export default function RenderFromElements< Item >( {
+	item,
+	field,
+}: DataViewRenderFieldProps< Item > ) {
+	const { elements, isLoading } = useElements( {
+		elements: field.elements,
+		getElements: field.getElements,
+	} );
+
+	const value = field.getValue( { item } );
+	if ( isLoading ) {
+		return value;
+	}
+
+	if ( elements.length === 0 ) {
+		return value;
+	}
+
+	return (
+		elements?.find( ( element ) => element.value === value )?.label ||
+		field.getValue( { item } )
+	);
+}

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { default as useFormValidity } from './use-form-validity';

package/src/hooks/use-elements.ts

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { Option } from '../types';
+
+const EMPTY_ARRAY: Option[] = [];
+
+export default function useElements( {
+	elements,
+	getElements,
+}: {
+	elements?: Option[];
+	getElements?: () => Promise< Option[] >;
+} ) {
+	const staticElements =
+		Array.isArray( elements ) && elements.length > 0
+			? elements
+			: EMPTY_ARRAY;
+	const [ records, setRecords ] = useState< Option[] >( staticElements );
+	const [ isLoading, setIsLoading ] = useState( false );
+
+	useEffect( () => {
+		if ( ! getElements ) {
+			setRecords( staticElements );
+			return;
+		}
+
+		let cancelled = false;
+		setIsLoading( true );
+		getElements()
+			.then( ( fetchedElements ) => {
+				if ( ! cancelled ) {
+					const dynamicElements =
+						Array.isArray( fetchedElements ) &&
+						fetchedElements.length > 0
+							? fetchedElements
+							: staticElements;
+					setRecords( dynamicElements );
+				}
+			} )
+			.catch( () => {
+				if ( ! cancelled ) {
+					setRecords( staticElements );
+				}
+			} )
+			.finally( () => {
+				if ( ! cancelled ) {
+					setIsLoading( false );
+				}
+			} );
+
+		return () => {
+			cancelled = true;
+		};
+	}, [ getElements, staticElements ] );
+
+	return {
+		elements: records,
+		isLoading,
+	};
+}