From bb9b2a6719f8804fc5a498ab34bb76a825fd2dbe Mon Sep 17 00:00:00 2001
From: Lourens Schep <lourensschep@gmail.com>
Date: Thu, 12 Dec 2024 16:39:05 +0100
Subject: [PATCH] Move overlapping logic to useFieldValue hook

---
 .../src/dataforms-layouts/panel/index.tsx     | 17 +--------
 .../src/dataforms-layouts/regular/index.tsx   | 24 +-----------
 .../src/dataforms-layouts/use-field-value.ts  | 38 +++++++++++++++++++
 3 files changed, 42 insertions(+), 37 deletions(-)
 create mode 100644 packages/dataviews/src/dataforms-layouts/use-field-value.ts

diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
index bb2058080115e..72fcf6e0a0387 100644
--- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx
+++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -27,6 +27,7 @@ import DataFormContext from '../../components/dataform-context';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
 import { MIXED_VALUE } from '../../constants';
+import useFieldValue from '../use-field-value';
 
 function DropdownHeader( {
 	title,
@@ -99,21 +100,7 @@ function PanelDropdown< Item >( {
 		};
 	}, [ field ] );
 
-	const fieldValue = useMemo( () => {
-		if ( Array.isArray( data ) ) {
-			const [ firstRecord, ...remainingRecords ] = data;
-			const firstValue = fieldDefinition.getValue( {
-				item: firstRecord,
-			} );
-			const intersects = remainingRecords.every( ( item ) => {
-				return fieldDefinition.getValue( { item } ) === firstValue;
-			} );
-			return intersects ? firstValue : MIXED_VALUE;
-		}
-		return fieldDefinition.getValue( {
-			item: data,
-		} );
-	}, [ data, fieldDefinition ] );
+	const fieldValue = useFieldValue( data, field.id );
 
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
index a497b2070bbcf..ef81f2fb15292 100644
--- a/packages/dataviews/src/dataforms-layouts/regular/index.tsx
+++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
@@ -16,7 +16,7 @@ import type { Form, FieldLayoutProps } from '../../types';
 import DataFormContext from '../../components/dataform-context';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
-import { MIXED_VALUE } from '../../constants';
+import useFieldValue from '../use-field-value';
 
 function Header( { title }: { title: string } ) {
 	return (
@@ -60,27 +60,7 @@ export default function FormRegularField< Item >( {
 		};
 	}, [ field ] );
 
-	const fieldValue = useMemo( () => {
-		const fieldDefinition = fields.find(
-			( fieldDef ) => fieldDef.id === field.id
-		);
-		if ( ! fieldDefinition ) {
-			return undefined;
-		}
-		if ( Array.isArray( data ) ) {
-			const [ firstRecord, ...remainingRecords ] = data;
-			const firstValue = fieldDefinition.getValue( {
-				item: firstRecord,
-			} );
-			const intersects = remainingRecords.every( ( item ) => {
-				return fieldDefinition.getValue( { item } ) === firstValue;
-			} );
-			return intersects ? firstValue : MIXED_VALUE;
-		}
-		return fieldDefinition.getValue( {
-			item: data,
-		} );
-	}, [ data, fields, field.id ] );
+	const fieldValue = useFieldValue( data, field.id );
 
 	if ( isCombinedField( field ) ) {
 		return (
diff --git a/packages/dataviews/src/dataforms-layouts/use-field-value.ts b/packages/dataviews/src/dataforms-layouts/use-field-value.ts
new file mode 100644
index 0000000000000..6803437ea4651
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/use-field-value.ts
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataFormContext from '../components/dataform-context';
+import { MIXED_VALUE } from '../constants';
+
+export default function useFieldValue< Item >(
+	data: Item | Item[],
+	fieldId: string
+) {
+	const { fields } = useContext( DataFormContext );
+	return useMemo( () => {
+		const fieldDefinition = fields.find(
+			( fieldDef ) => fieldDef.id === fieldId
+		);
+		if ( ! fieldDefinition ) {
+			return undefined;
+		}
+		if ( Array.isArray( data ) ) {
+			const [ firstRecord, ...remainingRecords ] = data;
+			const firstValue = fieldDefinition.getValue( {
+				item: firstRecord,
+			} );
+			const intersects = remainingRecords.every( ( item ) => {
+				return fieldDefinition.getValue( { item } ) === firstValue;
+			} );
+			return intersects ? firstValue : MIXED_VALUE;
+		}
+		return fieldDefinition.getValue( {
+			item: data,
+		} );
+	}, [ data, fields, fieldId ] );
+}