Skip to content

Commit

Permalink
Add isVisible option to fields within DataForm (WordPress#65826)
Browse files Browse the repository at this point in the history
Co-authored-by: louwie17 <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: youknowriad <[email protected]>
  • Loading branch information
4 people authored Oct 30, 2024
1 parent e62588a commit 3e151e2
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 16 deletions.
17 changes: 10 additions & 7 deletions packages/dataviews/src/components/dataform-combined-edit/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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>
);
} );

Expand Down
22 changes: 19 additions & 3 deletions packages/dataviews/src/components/dataform/stories/index.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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( {
Expand All @@ -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={ {
Expand Down
32 changes: 32 additions & 0 deletions packages/dataviews/src/components/form-field-visibility/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
}
12 changes: 9 additions & 3 deletions packages/dataviews/src/dataforms-layouts/panel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
12 changes: 9 additions & 3 deletions packages/dataviews/src/dataforms-layouts/regular/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions packages/dataviews/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down

0 comments on commit 3e151e2

Please sign in to comment.