Add isVisible option to fields within DataForm (#65826)

Co-authored-by: louwie17 <louwie17@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

packages/dataviews/src/components/dataform-combined-edit/index.tsx

@@ -12,6 +12,7 @@ import {
  * Internal dependencies
  */
 import type { DataFormCombinedEditProps, NormalizedField } from '../../types';
+import FormFieldVisibility from '../form-field-visibility';
 
 function Header( { title }: { title: string } ) {
 	return (
@@ -41,13 +42,15 @@ function DataFormCombinedEdit< Item >( {
 		);
 	const children = visibleChildren.map( ( child ) => {
 		return (
-			<div className="dataforms-combined-edit__field" key={ child.id }>
-				<child.Edit
-					data={ data }
-					field={ child }
-					onChange={ onChange }
-				/>
-			</div>
+			<FormFieldVisibility key={ child.id } data={ data } field={ child }>
+				<div className="dataforms-combined-edit__field">
+					<child.Edit
+						data={ data }
+						field={ child }
+						onChange={ onChange }
+					/>
+				</div>
+			</FormFieldVisibility>
 		);
 	} );
 

packages/dataviews/src/components/dataform/stories/index.story.tsx

@@ -7,7 +7,18 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import DataForm from '../index';
-import type { CombinedFormField } from '../../../types';
+import type { CombinedFormField, Field } from '../../../types';
+
+type SamplePost = {
+	title: string;
+	order: number;
+	author: number;
+	status: string;
+	reviewer: string;
+	date: string;
+	birthdate: string;
+	password?: string;
+};
 
 const meta = {
 	title: 'DataViews/DataForm',
@@ -75,14 +86,18 @@ const fields = [
 		elements: [
 			{ value: 'draft', label: 'Draft' },
 			{ value: 'published', label: 'Published' },
+			{ value: 'private', label: 'Private' },
 		],
 	},
 	{
 		id: 'password',
 		label: 'Password',
 		type: 'text' as const,
+		isVisible: ( item: SamplePost ) => {
+			return item.status !== 'private';
+		},
 	},
-];
+] as Field< SamplePost >[];
 
 export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 	const [ post, setPost ] = useState( {
@@ -102,13 +117,14 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 			'author',
 			'reviewer',
 			'status',
+			'password',
 			'date',
 			'birthdate',
 		],
 	};
 
 	return (
-		<DataForm
+		<DataForm< SamplePost >
 			data={ post }
 			fields={ fields }
 			form={ {

packages/dataviews/src/components/form-field-visibility/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+type FormFieldVisibilityProps< Item > = React.PropsWithChildren< {
+	field: NormalizedField< Item >;
+	data: Item;
+} >;
+
+export default function FormFieldVisibility< Item >( {
+	data,
+	field,
+	children,
+}: FormFieldVisibilityProps< Item > ) {
+	const isVisible = useMemo( () => {
+		if ( field.isVisible ) {
+			return field.isVisible( data );
+		}
+		return true;
+	}, [ field.isVisible, data ] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+	return children;
+}

packages/dataviews/src/dataforms-layouts/panel/index.tsx

@@ -19,6 +19,7 @@ import { closeSmall } from '@wordpress/icons';
 import { normalizeFields } from '../../normalize-fields';
 import { getVisibleFields } from '../get-visible-fields';
 import type { DataFormProps, NormalizedField } from '../../types';
+import FormFieldVisibility from '../../components/form-field-visibility';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -156,12 +157,17 @@ export default function FormPanel< Item >( {
 		<VStack spacing={ 2 }>
 			{ visibleFields.map( ( field ) => {
 				return (
-					<FormField
+					<FormFieldVisibility
 						key={ field.id }
 						data={ data }
 						field={ field }
-						onChange={ onChange }
-					/>
+					>
+						<FormField
+							data={ data }
+							field={ field }
+							onChange={ onChange }
+						/>
+					</FormFieldVisibility>
 				);
 			} ) }
 		</VStack>

packages/dataviews/src/dataforms-layouts/regular/index.tsx

@@ -10,6 +10,7 @@ import { useMemo } from '@wordpress/element';
 import { normalizeFields } from '../../normalize-fields';
 import { getVisibleFields } from '../get-visible-fields';
 import type { DataFormProps } from '../../types';
+import FormFieldVisibility from '../../components/form-field-visibility';
 
 export default function FormRegular< Item >( {
 	data,
@@ -33,12 +34,17 @@ export default function FormRegular< Item >( {
 		<VStack spacing={ 4 }>
 			{ visibleFields.map( ( field ) => {
 				return (
-					<field.Edit
+					<FormFieldVisibility
 						key={ field.id }
 						data={ data }
 						field={ field }
-						onChange={ onChange }
-					/>
+					>
+						<field.Edit
+							data={ data }
+							field={ field }
+							onChange={ onChange }
+						/>
+					</FormFieldVisibility>
 				);
 			} ) }
 		</VStack>

packages/dataviews/src/types.ts

@@ -123,6 +123,11 @@ export type Field< Item > = {
 	 */
 	isValid?: ( item: Item, context?: ValidationContext ) => boolean;
 
+	/**
+	 * Callback used to decide if a field should be displayed.
+	 */
+	isVisible?: ( item: Item ) => boolean;
+
 	/**
 	 * Whether the field is sortable.
 	 */