@wordpress/dataviews 10.2.0 → 10.3.1-next.2f1c7c01b.0

package/src/dataform-layouts/panel/index.tsx

@@ -17,48 +17,39 @@ import { useState, useContext } from '@wordpress/element';
  */
 import type {
 	FieldLayoutProps,
-	FormField,
 	NormalizedField,
+	NormalizedFormField,
 	NormalizedPanelLayout,
-	PanelLayout,
-	SimpleFormField,
 } from '../../types';
 import DataFormContext from '../../components/dataform-context';
-import { isCombinedField } from '../is-combined-field';
-import { normalizeLayout } from '../normalize-form-fields';
 import PanelDropdown from './dropdown';
 import PanelModal from './modal';
 import { getSummaryFields } from '../get-summary-fields';
 
 const getFieldDefinition = < Item, >(
-	field: FormField,
+	field: NormalizedFormField,
 	fields: NormalizedField< Item >[]
 ) => {
 	const fieldDefinition = fields.find( ( _field ) => _field.id === field.id );
 
 	if ( ! fieldDefinition ) {
 		return fields.find( ( _field ) => {
-			if ( isCombinedField( field ) ) {
+			if ( !! field.children ) {
 				const simpleChildren = field.children.filter(
-					( child ): child is string | SimpleFormField =>
-						typeof child === 'string' || ! isCombinedField( child )
+					( child ) => ! child.children
 				);
 
 				if ( simpleChildren.length === 0 ) {
 					return false;
 				}
 
-				const firstChildFieldId =
-					typeof simpleChildren[ 0 ] === 'string'
-						? simpleChildren[ 0 ]
-						: simpleChildren[ 0 ].id;
-
-				return _field.id === firstChildFieldId;
+				return _field.id === simpleChildren[ 0 ].id;
 			}
 
 			return _field.id === field.id;
 		} );
 	}
+
 	return fieldDefinition;
 };
 
@@ -78,7 +69,7 @@ const getFieldDefinition = < Item, >(
  */
 const getFieldDefinitionAndSummaryFields = < Item, >(
 	layout: NormalizedPanelLayout,
-	field: FormField,
+	field: NormalizedFormField,
 	fields: NormalizedField< Item >[]
 ) => {
 	const summaryFields = getSummaryFields( layout.summary, fields );
@@ -104,11 +95,7 @@ export default function FormPanelField< Item >( {
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
-
-	const layout: NormalizedPanelLayout = normalizeLayout( {
-		...field.layout,
-		type: 'panel',
-	} as PanelLayout ) as NormalizedPanelLayout;
+	const layout = field.layout as NormalizedPanelLayout;
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -128,9 +115,7 @@ export default function FormPanelField< Item >( {
 		'dataforms-layouts-panel__field-label',
 		`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`
 	);
-	const fieldLabel = isCombinedField( field )
-		? field.label
-		: fieldDefinition?.label;
+	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
 
 	const renderedControl =
 		layout.openAs === 'modal' ? (

package/src/dataform-layouts/panel/modal.tsx

@@ -18,10 +18,14 @@ import { useContext, useState, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { Field, Form, FormField, NormalizedField } from '../../types';
+import type {
+	Field,
+	NormalizedForm,
+	NormalizedFormField,
+	NormalizedField,
+} from '../../types';
 import { DataFormLayout } from '../data-form-layout';
-import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT } from '../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form';
 import SummaryButton from './summary-button';
 import useFormValidity from '../../hooks/use-form-validity';
 import DataFormContext from '../../components/dataform-context';
@@ -34,7 +38,7 @@ function ModalContent< Item >( {
 	onClose,
 }: {
 	data: Item;
-	field: FormField;
+	field: NormalizedFormField;
 	onChange: ( data: Partial< Item > ) => void;
 	onClose: () => void;
 	fieldLabel: string;
@@ -45,13 +49,13 @@ function ModalContent< Item >( {
 		return deepMerge( data, changes );
 	}, [ data, changes ] );
 
-	const form: Form = useMemo(
-		(): Form => ( {
+	const form: NormalizedForm = useMemo(
+		() => ( {
 			layout: DEFAULT_LAYOUT,
-			fields: isCombinedField( field )
+			fields: !! field.children
 				? field.children
 				: // If not explicit children return the field id itself.
-				  [ { id: field.id } ],
+				  [ { id: field.id, layout: DEFAULT_LAYOUT } ],
 		} ),
 		[ field ]
 	);
@@ -91,9 +95,7 @@ function ModalContent< Item >( {
 						data={ modalData }
 						field={ childField }
 						onChange={ handleOnChange }
-						hideLabelFromVision={
-							( form?.fields ?? [] ).length < 2
-						}
+						hideLabelFromVision={ form.fields.length < 2 }
 						validity={ childFieldValidity }
 					/>
 				) }
@@ -131,7 +133,7 @@ function PanelModal< Item >( {
 	fieldDefinition,
 }: {
 	data: Item;
-	field: FormField;
+	field: NormalizedFormField;
 	onChange: ( value: any ) => void;
 	labelPosition: 'side' | 'top' | 'none';
 	summaryFields: NormalizedField< Item >[];
@@ -139,9 +141,7 @@ function PanelModal< Item >( {
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	const fieldLabel = isCombinedField( field )
-		? field.label
-		: fieldDefinition?.label;
+	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
 
 	return (
 		<>

package/src/dataform-layouts/regular/index.tsx

@@ -19,14 +19,13 @@ import {
  * Internal dependencies
  */
 import type {
-	Form,
 	FieldLayoutProps,
+	NormalizedForm,
 	NormalizedRegularLayout,
 } from '../../types';
 import DataFormContext from '../../components/dataform-context';
 import { DataFormLayout } from '../data-form-layout';
-import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT, normalizeLayout } from '../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form';
 
 function Header( { title }: { title: string } ) {
 	return (
@@ -49,16 +48,17 @@ export default function FormRegularField< Item >( {
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
+	const layout = field.layout as NormalizedRegularLayout;
 
-	const form: Form = useMemo(
-		(): Form => ( {
+	const form: NormalizedForm = useMemo(
+		() => ( {
 			layout: DEFAULT_LAYOUT,
-			fields: isCombinedField( field ) ? field.children : [],
+			fields: !! field.children ? field.children : [],
 		} ),
 		[ field ]
 	);
 
-	if ( isCombinedField( field ) ) {
+	if ( !! field.children ) {
 		return (
 			<>
 				{ ! hideLabelFromVision && field.label && (
@@ -74,11 +74,6 @@ export default function FormRegularField< Item >( {
 		);
 	}
 
-	const layout: NormalizedRegularLayout = normalizeLayout( {
-		...field.layout,
-		type: 'regular',
-	} ) as NormalizedRegularLayout;
-
 	const labelPosition = layout.labelPosition;
 	const fieldDefinition = fields.find(
 		( fieldDef ) => fieldDef.id === field.id

package/src/dataform-layouts/row/index.tsx

@@ -7,16 +7,18 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { FieldLayoutProps, Form, NormalizedRowLayout } from '../../types';
-import DataFormContext from '../../components/dataform-context';
+import type {
+	FieldLayoutProps,
+	NormalizedForm,
+	NormalizedLayout,
+	NormalizedRowLayout,
+} from '../../types';
 import { DataFormLayout } from '../data-form-layout';
-import { isCombinedField } from '../is-combined-field';
-import { normalizeLayout } from '../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form';
 import { getFormFieldLayout } from '..';
 
 function Header( { title }: { title: string } ) {
@@ -43,21 +45,12 @@ export default function FormRowField< Item >( {
 	hideLabelFromVision,
 	validity,
 }: FieldLayoutProps< Item > ) {
-	const { fields } = useContext( DataFormContext );
+	const layout = field.layout as NormalizedRowLayout;
 
-	const layout = normalizeLayout( {
-		...field.layout,
-		type: 'row',
-	} ) as NormalizedRowLayout;
-
-	if ( isCombinedField( field ) ) {
-		const form: Form = {
-			fields: field.children.map( ( child ) => {
-				if ( typeof child === 'string' ) {
-					return { id: child };
-				}
-				return child;
-			} ),
+	if ( !! field.children ) {
+		const form: NormalizedForm = {
+			layout: DEFAULT_LAYOUT as NormalizedLayout,
+			fields: field.children,
 		};
 
 		return (
@@ -94,12 +87,6 @@ export default function FormRowField< Item >( {
 		);
 	}
 
-	const fieldDefinition = fields.find( ( f ) => f.id === field.id );
-
-	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
-		return null;
-	}
-
 	const RegularLayout = getFormFieldLayout( 'regular' )?.component;
 	if ( ! RegularLayout ) {
 		return null;
@@ -110,7 +97,7 @@ export default function FormRowField< Item >( {
 			<div className="dataforms-layouts-row__field-control">
 				<RegularLayout
 					data={ data }
-					field={ fieldDefinition }
+					field={ field }
 					onChange={ onChange }
 					validity={ validity }
 				/>

package/src/dataviews-layouts/list/index.tsx

@@ -106,12 +106,10 @@ function PrimaryActionGridCell< Item >( {
 					<Button
 						disabled={ !! primaryAction.disabled }
 						accessibleWhenDisabled
+						text={ label }
 						size="small"
 						onClick={ () => setIsModalOpen( true ) }
-						variant="link"
-					>
-						{ label }
-					</Button>
+					/>
 				}
 			>
 				{ isModalOpen && (
@@ -135,7 +133,6 @@ function PrimaryActionGridCell< Item >( {
 						onClick={ () => {
 							primaryAction.callback( [ item ], { registry } );
 						} }
-						variant="link"
 					>
 						{ label }
 					</Button>

package/src/field-types/datetime.tsx

@@ -7,6 +7,7 @@ import type {
 	FieldTypeDefinition,
 } from '../types';
 import RenderFromElements from './utils/render-from-elements';
+import parseDateTime from './utils/parse-date-time';
 import {
 	OPERATOR_ON,
 	OPERATOR_NOT_ON,
@@ -33,11 +34,21 @@ export default {
 	},
 	Edit: 'datetime',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.hasElements ? (
-			<RenderFromElements item={ item } field={ field } />
-		) : (
-			field.getValue( { item } )
-		);
+		if ( field.elements ) {
+			return <RenderFromElements item={ item } field={ field } />;
+		}
+
+		const value = field.getValue( { item } );
+		if ( [ '', undefined, null ].includes( value ) ) {
+			return null;
+		}
+
+		try {
+			const dateValue = parseDateTime( value );
+			return dateValue?.toLocaleString();
+		} catch ( error ) {
+			return null;
+		}
 	},
 	enableSorting: true,
 	filterBy: {

package/src/field-types/utils/parse-date-time.ts

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { isValid as isValidDate } from 'date-fns';
+
+/**
+ * WordPress dependencies
+ */
+import { getDate } from '@wordpress/date';
+
+export default function parseDateTime( dateTimeString?: string ): Date | null {
+	if ( ! dateTimeString ) {
+		return null;
+	}
+	const parsed = getDate( dateTimeString );
+	return parsed && isValidDate( parsed ) ? parsed : null;
+}