Introduce normalizeFormFields & form.labelPosition

WordPress · Nov 19, 2024 · 3f709f9 · 3f709f9
1 parent fa872ee
commit 3f709f9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx b/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,6 +11,7 @@ import type { Form, FormField, SimpleFormField } from '../types';
 import { getFormFieldLayout } from './index';
 import DataFormContext from '../components/dataform-context';
 import { isCombinedField } from './is-combined-field';
+import normalizeFormFields from '../normalize-form-fields';
 
 export function DataFormLayout< Item >( {
 	data,
@@ -41,21 +42,16 @@ export function DataFormLayout< Item >( {
 		);
 	}
 
+	const normalizedFormFields = useMemo(
+		() => normalizeFormFields( form ),
+		[ form ]
+	);
+
 	return (
 		<VStack spacing={ 2 }>
-			{ form?.fields?.map( ( field ) => {
-				const formField: FormField =
-					typeof field !== 'string'
-						? field
-						: {
-								id: field,
-						  };
-				const fieldLayoutId = formField.layout
-					? formField.layout
-					: form.type;
-				const FieldLayout = getFormFieldLayout(
-					fieldLayoutId ?? 'regular'
-				)?.component;
+			{ normalizedFormFields.map( ( formField ) => {
+				const FieldLayout = getFormFieldLayout( formField.layout )
+					?.component;
 
 				if ( ! FieldLayout ) {
 					return null;

diff --git a/packages/dataviews/src/normalize-form-fields.ts b/packages/dataviews/src/normalize-form-fields.ts
@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import type { Form } from './types';
+
+interface NormalizedFormField {
+	id: string;
+	layout: 'regular' | 'panel';
+	labelPosition: 'side' | 'top' | 'none';
+}
+
+export default function normalizeFormFields(
+	form: Form
+): NormalizedFormField[] {
+	let layout: 'regular' | 'panel' = 'regular';
+	if ( [ 'regular', 'panel' ].includes( form.type ?? '' ) ) {
+		layout = form.type as 'regular' | 'panel';
+	}
+
+	const labelPosition =
+		form.labelPosition ?? ( layout === 'regular' ? 'top' : 'side' );
+
+	return ( form.fields ?? [] ).map( ( field ) => {
+		if ( typeof field === 'string' ) {
+			return {
+				id: field,
+				layout,
+				labelPosition,
+			};
+		}
+
+		const fieldLayout = field.layout ?? layout;
+		const fieldLabelPosition =
+			field.labelPosition ??
+			( fieldLayout === 'regular' ? 'top' : 'side' );
+		return {
+			...field,
+			layout: fieldLayout,
+			labelPosition: fieldLabelPosition,
+		};
+	} );
+}
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -534,7 +534,7 @@ export type SimpleFormField = {
 };
 
 export type CombinedFormField = {
-	id?: string;
+	id: string;
 	label?: string;
 	layout?: 'regular' | 'panel';
 	labelPosition?: 'side' | 'top' | 'none';
@@ -549,6 +549,7 @@ export type FormField = SimpleFormField | CombinedFormField;
 export type Form = {
 	type?: 'regular' | 'panel';
 	fields?: Array< FormField | string >;
+	labelPosition?: 'side' | 'top' | 'none';
 };
 
 export interface DataFormProps< Item > {