Skip to content

Commit

Permalink
Move overlapping logic to useFieldValue hook
Browse files Browse the repository at this point in the history
louwie17 committed Dec 12, 2024
1 parent 48cb500 commit bb9b2a6
Showing 3 changed files with 42 additions and 37 deletions.
17 changes: 2 additions & 15 deletions packages/dataviews/src/dataforms-layouts/panel/index.tsx
Original file line number Diff line number Diff line change
@@ -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(
24 changes: 2 additions & 22 deletions packages/dataviews/src/dataforms-layouts/regular/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
38 changes: 38 additions & 0 deletions packages/dataviews/src/dataforms-layouts/use-field-value.ts
Original file line number Diff line number Diff line change
@@ -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 ] );
}

0 comments on commit bb9b2a6

Please sign in to comment.