From 13ec1e0398d2a9ce1aeddc5692008173acfde45e Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Tue, 15 Nov 2022 01:53:09 -0500 Subject: [PATCH] feat: converts rowHeader to collapsibleLabel, extends data passed to functions/components --- .../forms/CollapsibleLabel/index.tsx | 23 +++++++++++ .../forms/CollapsibleLabel/types.ts | 16 ++++++++ .../components/forms/RowHeader/index.tsx | 40 ------------------- src/admin/components/forms/RowHeader/types.ts | 13 ------ .../forms/field-types/Array/index.tsx | 12 +++--- .../forms/field-types/Collapsible/index.tsx | 10 ++--- src/fields/config/schema.ts | 4 +- src/fields/config/types.ts | 6 +-- .../collections/Array/HeaderComponent.tsx | 10 ++--- test/fields/collections/Array/index.ts | 13 +++--- .../Collapsible/HeaderComponent.tsx | 10 ++--- test/fields/collections/Collapsible/index.ts | 17 ++++---- 12 files changed, 79 insertions(+), 95 deletions(-) create mode 100644 src/admin/components/forms/CollapsibleLabel/index.tsx create mode 100644 src/admin/components/forms/CollapsibleLabel/types.ts delete mode 100644 src/admin/components/forms/RowHeader/index.tsx delete mode 100644 src/admin/components/forms/RowHeader/types.ts diff --git a/src/admin/components/forms/CollapsibleLabel/index.tsx b/src/admin/components/forms/CollapsibleLabel/index.tsx new file mode 100644 index 000000000..3984665fb --- /dev/null +++ b/src/admin/components/forms/CollapsibleLabel/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Props } from './types'; +import { useWatchForm } from '../Form/context'; + +export const CollapsibleLabel: React.FC = (props) => { + const { + path, + fallback, + label, + rowNumber, + } = props; + const { getDataByPath, getSiblingData, getData } = useWatchForm(); + const formData = getData(); + const collapsibleData = getDataByPath(path) || getSiblingData(path); + + return ( + + {(typeof label === 'function') + ? label({ collapsibleData, index: rowNumber, formData, fallback }) + : (label || fallback)} + + ); +}; diff --git a/src/admin/components/forms/CollapsibleLabel/types.ts b/src/admin/components/forms/CollapsibleLabel/types.ts new file mode 100644 index 000000000..59325f2ff --- /dev/null +++ b/src/admin/components/forms/CollapsibleLabel/types.ts @@ -0,0 +1,16 @@ +import React from 'react'; +import { Data } from '../Form/types'; + +export type CollapsibleHeader = (props: { + formData: Data, + collapsibleData: Data, + index?: number, + fallback: string, +}) => React.ReactNode; + +export type Props = { + fallback: string; + path: string; + header?: CollapsibleHeader; + rowNumber?: number; +} diff --git a/src/admin/components/forms/RowHeader/index.tsx b/src/admin/components/forms/RowHeader/index.tsx deleted file mode 100644 index acecd0280..000000000 --- a/src/admin/components/forms/RowHeader/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { Fragment } from 'react'; -import { Props } from './types'; -import { useWatchForm } from '../Form/context'; - -const RowHeader: React.FC = (props) => { - const { - path, - fallback, - header, - rowNumber, - } = props; - const { getSiblingData } = useWatchForm(); - const siblingData = getSiblingData(`${path}`); - - /* if (isComponent(header)) { - const Header = header; - return ( -
- ); - } */ - - if (header) { - return ( - - { - typeof header === 'function' - ? header({ value: siblingData, index: rowNumber }) - : header - } - - ); - } - - return {fallback}; -}; - -export default RowHeader; diff --git a/src/admin/components/forms/RowHeader/types.ts b/src/admin/components/forms/RowHeader/types.ts deleted file mode 100644 index aad8190b8..000000000 --- a/src/admin/components/forms/RowHeader/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Data } from '../Form/types'; - -export type RowHeaderComponent = (props: {value: Data, index?: number}) => React.ReactNode; - -export type RowHeader = string | RowHeaderComponent; - -export type Props = { - fallback: string | React.ReactElement; - path: string; - header?: RowHeader; - rowNumber?: number; -} diff --git a/src/admin/components/forms/field-types/Array/index.tsx b/src/admin/components/forms/field-types/Array/index.tsx index 54fb7e68b..087bcecbc 100644 --- a/src/admin/components/forms/field-types/Array/index.tsx +++ b/src/admin/components/forms/field-types/Array/index.tsx @@ -22,9 +22,9 @@ import { usePreferences } from '../../../utilities/Preferences'; import { ArrayAction } from '../../../elements/ArrayAction'; import { scrollToID } from '../../../../utilities/scrollToID'; import HiddenInput from '../HiddenInput'; +import { CollapsibleLabel } from '../../CollapsibleLabel'; import './index.scss'; -import RowHeader from '../../RowHeader'; const baseClass = 'array-field'; @@ -49,7 +49,7 @@ const ArrayFieldType: React.FC = (props) => { }, } = props; - const RowHeaderFromProps = components?.RowHeader || undefined; + const CollapsibleLabelFromProps = components?.CollapsibleLabel || undefined; const path = pathFromProps || name; @@ -287,10 +287,10 @@ const ArrayFieldType: React.FC = (props) => { key={row.id} dragHandleProps={providedDrag.dragHandleProps} header={( - = 10 ? rowNumber : `0${rowNumber}`}`} + )} diff --git a/src/admin/components/forms/field-types/Collapsible/index.tsx b/src/admin/components/forms/field-types/Collapsible/index.tsx index c873089af..a4c1fc326 100644 --- a/src/admin/components/forms/field-types/Collapsible/index.tsx +++ b/src/admin/components/forms/field-types/Collapsible/index.tsx @@ -9,7 +9,7 @@ import { DocumentPreferences } from '../../../../../preferences/types'; import { useDocumentInfo } from '../../../utilities/DocumentInfo'; import FieldDescription from '../../FieldDescription'; import { getFieldPath } from '../getFieldPath'; -import RowHeader from '../../RowHeader'; +import { CollapsibleLabel } from '../../CollapsibleLabel'; import './index.scss'; @@ -31,7 +31,7 @@ const CollapsibleField: React.FC = (props) => { }, } = props; - const RowHeaderFromProps = components?.RowHeader || undefined; + const CollapsibleLabelFromProps = components?.CollapsibleLabel || undefined; const { getPreference, setPreference } = usePreferences(); const { preferencesKey } = useDocumentInfo(); @@ -74,10 +74,10 @@ const CollapsibleField: React.FC = (props) => { className, ].filter(Boolean).join(' ')} header={( - {label}} - header={RowHeaderFromProps} + fallback={label} + label={CollapsibleLabelFromProps} /> )} onToggle={onToggle} diff --git a/src/fields/config/schema.ts b/src/fields/config/schema.ts index 22742bb1c..854a46229 100644 --- a/src/fields/config/schema.ts +++ b/src/fields/config/schema.ts @@ -186,7 +186,7 @@ export const collapsible = baseField.keys({ fields: joi.array().items(joi.link('#field')), admin: baseAdminFields.keys({ components: joi.object().keys({ - RowHeader: componentSchema, + CollapsibleLabel: componentSchema, }).default({}), }).default({}), }); @@ -242,7 +242,7 @@ export const array = baseField.keys({ ), admin: baseAdminFields.keys({ components: joi.object().keys({ - RowHeader: componentSchema, + CollapsibleLabel: componentSchema, }).default({}), }).default({}), }); diff --git a/src/fields/config/types.ts b/src/fields/config/types.ts index 093c040d7..f3928d27f 100644 --- a/src/fields/config/types.ts +++ b/src/fields/config/types.ts @@ -8,7 +8,7 @@ import { ConditionalDateProps } from '../../admin/components/elements/DatePicker import { Description } from '../../admin/components/forms/FieldDescription/types'; import { User } from '../../auth'; import { Payload } from '../..'; -import { RowHeader } from '../../admin/components/forms/RowHeader/types'; +import { CollapsibleLabel } from '../../admin/components/forms/CollapsibleLabel/types'; export type FieldHookArgs = { /** The data passed to update the document within create and update operations, and the full document itself in the afterRead hook. */ @@ -193,7 +193,7 @@ export type CollapsibleField = Omit & { admin?: Admin & { initCollapsed?: boolean | false; components?: { - RowHeader?: RowHeader + CollapsibleLabel?: CollapsibleLabel } } } @@ -342,7 +342,7 @@ export type ArrayField = FieldBase & { admin?: Admin & { initCollapsed?: boolean | false; components?: { - RowHeader?: RowHeader + CollapsibleLabel?: CollapsibleLabel } }; }; diff --git a/test/fields/collections/Array/HeaderComponent.tsx b/test/fields/collections/Array/HeaderComponent.tsx index 8f0c97f2e..0910ea7c3 100644 --- a/test/fields/collections/Array/HeaderComponent.tsx +++ b/test/fields/collections/Array/HeaderComponent.tsx @@ -1,9 +1,7 @@ import React from 'react'; -import { RowHeaderComponent } from '../../../../src/admin/components/forms/RowHeader/types'; +import { CollapsibleLabel } from '../../../../src/admin/components/forms/CollapsibleLabel/types'; -const ArrayRowHeader: RowHeaderComponent = (props) => { - const { value, index } = props; - return {value.title || `array_${index}`}; +export const ArrayCollapsibleLabel: CollapsibleLabel = (props) => { + const { collapsibleData, fallback } = props; + return {collapsibleData.title || fallback}; }; - -export default ArrayRowHeader; diff --git a/test/fields/collections/Array/index.ts b/test/fields/collections/Array/index.ts index 6b51b89f0..fb6d9ae17 100644 --- a/test/fields/collections/Array/index.ts +++ b/test/fields/collections/Array/index.ts @@ -1,6 +1,5 @@ -import { RowHeaderFunction } from '../../../../src/admin/components/forms/RowHeader/types'; import type { CollectionConfig } from '../../../../src/collections/config/types'; -import HeaderComponent from './HeaderComponent'; +import { ArrayCollapsibleLabel } from './HeaderComponent'; export const arrayDefaultValue = [ { text: 'row one' }, @@ -86,7 +85,7 @@ const ArrayFields: CollectionConfig = { }, { type: 'array', - name: 'arrayWithRowHeaderFunction', + name: 'collapsibleLabelAsFunction', fields: [ { name: 'title', @@ -94,14 +93,15 @@ const ArrayFields: CollectionConfig = { }, ], admin: { + description: 'Collapsible labels rendered from a function.', components: { - RowHeader: ({ value, index }) => value.title || `item ${index}`, + CollapsibleLabel: ({ collapsibleData, fallback }) => collapsibleData.title || fallback, }, }, }, { type: 'array', - name: 'arrayWithRowHeaderComponent', + name: 'rowHeaderAsComponent', fields: [ { name: 'title', @@ -109,8 +109,9 @@ const ArrayFields: CollectionConfig = { }, ], admin: { + description: 'Collapsible labels rendered as components.', components: { - RowHeader: HeaderComponent, + CollapsibleLabel: ArrayCollapsibleLabel, }, }, }, diff --git a/test/fields/collections/Collapsible/HeaderComponent.tsx b/test/fields/collections/Collapsible/HeaderComponent.tsx index 426b05e7a..686a2e5f3 100644 --- a/test/fields/collections/Collapsible/HeaderComponent.tsx +++ b/test/fields/collections/Collapsible/HeaderComponent.tsx @@ -1,9 +1,7 @@ import React from 'react'; -import { RowHeaderComponent } from '../../../../src/admin/components/forms/RowHeader/types'; +import { CollapsibleLabel } from '../../../../src/admin/components/forms/CollapsibleLabel/types'; -const ArrayRowHeader: RowHeaderComponent = (props) => { - const { value } = props; - return {value.title || 'enter title'}; +export const CollapsibleLabelComponent: CollapsibleLabel = (props) => { + const { collapsibleData, fallback } = props; + return {collapsibleData.componentTitleField || fallback}; }; - -export default ArrayRowHeader; diff --git a/test/fields/collections/Collapsible/index.ts b/test/fields/collections/Collapsible/index.ts index 5cafb0bf8..07c5749ed 100644 --- a/test/fields/collections/Collapsible/index.ts +++ b/test/fields/collections/Collapsible/index.ts @@ -1,4 +1,5 @@ import type { CollectionConfig } from '../../../../src/collections/config/types'; +import { CollapsibleLabelComponent } from './HeaderComponent'; const CollapsibleFields: CollectionConfig = { slug: 'collapsible-fields', @@ -74,35 +75,35 @@ const CollapsibleFields: CollectionConfig = { ], }, { - label: 'Collapsible Field - RowHeaderFunction', + label: 'Collapsible Header Function', type: 'collapsible', admin: { - description: 'This is a collapsible field.', + description: 'Collapsible label rendered from a function.', initCollapsed: true, components: { - RowHeader: ({ value }) => value.title1 || 'untitled', + CollapsibleLabel: ({ collapsibleData }) => collapsibleData.functionTitleField || 'Untitled', }, }, fields: [ { - name: 'title1', + name: 'functionTitleField', type: 'text', }, ], }, { - label: 'Collapsible Field - RowHeaderComponent', + label: 'Collapsible Header Component', type: 'collapsible', admin: { - description: 'This is a collapsible field.', + description: 'Collapsible label rendered as a react component.', initCollapsed: true, components: { - RowHeader: ({ value }) => value.title2 || 'untitled', + CollapsibleLabel: CollapsibleLabelComponent, }, }, fields: [ { - name: 'title2', + name: 'componentTitleField', type: 'text', }, ],