From 35426eef3620f312abafdc1d3869273d674caaab Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Mon, 14 Nov 2022 18:30:18 -0500 Subject: [PATCH] feat: updates tab preference keys --- src/admin/components/forms/RenderFields/index.tsx | 4 ++-- src/admin/components/forms/RenderFields/types.ts | 2 +- .../components/forms/field-types/Array/index.tsx | 2 ++ .../components/forms/field-types/Array/types.ts | 1 + .../components/forms/field-types/Blocks/index.tsx | 2 ++ .../components/forms/field-types/Blocks/types.ts | 1 + .../forms/field-types/Collapsible/index.tsx | 4 ++-- .../forms/field-types/Collapsible/types.ts | 2 +- .../components/forms/field-types/Group/index.tsx | 2 ++ .../components/forms/field-types/Group/types.ts | 1 + .../components/forms/field-types/Row/index.tsx | 2 ++ .../components/forms/field-types/Row/types.ts | 1 + .../components/forms/field-types/Tabs/index.tsx | 15 ++++++++------- .../components/forms/field-types/Tabs/types.ts | 2 +- 14 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/admin/components/forms/RenderFields/index.tsx b/src/admin/components/forms/RenderFields/index.tsx index 49edb514fb..1393fe2e5b 100644 --- a/src/admin/components/forms/RenderFields/index.tsx +++ b/src/admin/components/forms/RenderFields/index.tsx @@ -20,7 +20,7 @@ const RenderFields: React.FC = (props) => { readOnly: readOnlyOverride, className, forceRender, - pathByIndex: incomingFieldIndex + indexPath: incomingIndexPath } = props; const [hasRendered, setHasRendered] = useState(Boolean(forceRender)); @@ -91,7 +91,7 @@ const RenderFields: React.FC = (props) => { ...field, path: field.path || (isFieldAffectingData ? field.name : ''), fieldTypes, - pathByIndex: incomingFieldIndex ? `${incomingFieldIndex}[${fieldIndex}]` : `[${fieldIndex}]`, + indexPath: incomingIndexPath ? `${incomingIndexPath}.${fieldIndex}` : `${fieldIndex}`, admin: { ...(field.admin || {}), readOnly, diff --git a/src/admin/components/forms/RenderFields/types.ts b/src/admin/components/forms/RenderFields/types.ts index 62202fb3ae..19cd698dce 100644 --- a/src/admin/components/forms/RenderFields/types.ts +++ b/src/admin/components/forms/RenderFields/types.ts @@ -12,5 +12,5 @@ export type Props = { filter?: (field: Field) => boolean fieldSchema: FieldWithPath[] fieldTypes: FieldTypes - pathByIndex: string + indexPath?: string } diff --git a/src/admin/components/forms/field-types/Array/index.tsx b/src/admin/components/forms/field-types/Array/index.tsx index 7c30b70b9c..35c8bed3d3 100644 --- a/src/admin/components/forms/field-types/Array/index.tsx +++ b/src/admin/components/forms/field-types/Array/index.tsx @@ -38,6 +38,7 @@ const ArrayFieldType: React.FC = (props) => { maxRows, minRows, permissions, + indexPath, admin: { readOnly, description, @@ -292,6 +293,7 @@ const ArrayFieldType: React.FC = (props) => { readOnly={readOnly} fieldTypes={fieldTypes} permissions={permissions?.fields} + indexPath={indexPath} fieldSchema={fields.map((field) => ({ ...field, path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`, diff --git a/src/admin/components/forms/field-types/Array/types.ts b/src/admin/components/forms/field-types/Array/types.ts index 2f78984e48..c746d2cae2 100644 --- a/src/admin/components/forms/field-types/Array/types.ts +++ b/src/admin/components/forms/field-types/Array/types.ts @@ -7,4 +7,5 @@ export type Props = Omit & { fieldTypes: FieldTypes permissions: FieldPermissions label: string | false + indexPath: string } diff --git a/src/admin/components/forms/field-types/Blocks/index.tsx b/src/admin/components/forms/field-types/Blocks/index.tsx index 3e236a3378..6d788253e3 100644 --- a/src/admin/components/forms/field-types/Blocks/index.tsx +++ b/src/admin/components/forms/field-types/Blocks/index.tsx @@ -50,6 +50,7 @@ const BlocksField: React.FC = (props) => { required, validate = blocksValidator, permissions, + indexPath, admin: { readOnly, description, @@ -345,6 +346,7 @@ const BlocksField: React.FC = (props) => { ...field, path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`, }))} + indexPath={indexPath} /> diff --git a/src/admin/components/forms/field-types/Blocks/types.ts b/src/admin/components/forms/field-types/Blocks/types.ts index 74bc134973..e4642373ed 100644 --- a/src/admin/components/forms/field-types/Blocks/types.ts +++ b/src/admin/components/forms/field-types/Blocks/types.ts @@ -6,4 +6,5 @@ export type Props = Omit & { path?: string fieldTypes: FieldTypes permissions: FieldPermissions + indexPath: string } diff --git a/src/admin/components/forms/field-types/Collapsible/index.tsx b/src/admin/components/forms/field-types/Collapsible/index.tsx index 2b77fe1812..c80b558934 100644 --- a/src/admin/components/forms/field-types/Collapsible/index.tsx +++ b/src/admin/components/forms/field-types/Collapsible/index.tsx @@ -21,7 +21,7 @@ const CollapsibleField: React.FC = (props) => { fieldTypes, path, permissions, - pathByIndex, + indexPath, admin: { readOnly, className, @@ -78,7 +78,7 @@ const CollapsibleField: React.FC = (props) => { readOnly={readOnly} permissions={permissions} fieldTypes={fieldTypes} - pathByIndex={pathByIndex} + indexPath={indexPath} fieldSchema={fields.map((field) => ({ ...field, path: getFieldPath(path, field), diff --git a/src/admin/components/forms/field-types/Collapsible/types.ts b/src/admin/components/forms/field-types/Collapsible/types.ts index f31f639b97..e64fc938a4 100644 --- a/src/admin/components/forms/field-types/Collapsible/types.ts +++ b/src/admin/components/forms/field-types/Collapsible/types.ts @@ -6,5 +6,5 @@ export type Props = Omit & { path?: string fieldTypes: FieldTypes permissions: FieldPermissions - pathByIndex: string + indexPath: string } diff --git a/src/admin/components/forms/field-types/Group/index.tsx b/src/admin/components/forms/field-types/Group/index.tsx index a2bee2cf19..94f03877bc 100644 --- a/src/admin/components/forms/field-types/Group/index.tsx +++ b/src/admin/components/forms/field-types/Group/index.tsx @@ -19,6 +19,7 @@ const Group: React.FC = (props) => { name, path: pathFromProps, fieldTypes, + indexPath, admin: { readOnly, style, @@ -70,6 +71,7 @@ const Group: React.FC = (props) => { permissions={permissions?.fields} readOnly={readOnly} fieldTypes={fieldTypes} + indexPath={indexPath} fieldSchema={fields.map((subField) => ({ ...subField, path: `${path}${fieldAffectsData(subField) ? `.${subField.name}` : ''}`, diff --git a/src/admin/components/forms/field-types/Group/types.ts b/src/admin/components/forms/field-types/Group/types.ts index 836b2079c1..a883172f44 100644 --- a/src/admin/components/forms/field-types/Group/types.ts +++ b/src/admin/components/forms/field-types/Group/types.ts @@ -6,4 +6,5 @@ export type Props = Omit & { path?: string fieldTypes: FieldTypes permissions: FieldPermissions + indexPath: string } diff --git a/src/admin/components/forms/field-types/Row/index.tsx b/src/admin/components/forms/field-types/Row/index.tsx index 88a1542c8c..b76664d036 100644 --- a/src/admin/components/forms/field-types/Row/index.tsx +++ b/src/admin/components/forms/field-types/Row/index.tsx @@ -16,6 +16,7 @@ const Row: React.FC = (props) => { readOnly, className, }, + indexPath } = props; const classes = [ @@ -30,6 +31,7 @@ const Row: React.FC = (props) => { className={classes} permissions={permissions} fieldTypes={fieldTypes} + indexPath={indexPath} fieldSchema={fields.map((field) => ({ ...field, path: getFieldPath(path, field), diff --git a/src/admin/components/forms/field-types/Row/types.ts b/src/admin/components/forms/field-types/Row/types.ts index 5fde37f057..b74c52b91e 100644 --- a/src/admin/components/forms/field-types/Row/types.ts +++ b/src/admin/components/forms/field-types/Row/types.ts @@ -6,4 +6,5 @@ export type Props = Omit & { path?: string fieldTypes: FieldTypes permissions: FieldPermissions + indexPath: string } diff --git a/src/admin/components/forms/field-types/Tabs/index.tsx b/src/admin/components/forms/field-types/Tabs/index.tsx index 7a7154a345..5353f98a0e 100644 --- a/src/admin/components/forms/field-types/Tabs/index.tsx +++ b/src/admin/components/forms/field-types/Tabs/index.tsx @@ -21,7 +21,7 @@ const TabsField: React.FC = (props) => { fieldTypes, path, permissions, - pathByIndex, + indexPath, admin: { readOnly, className, @@ -33,15 +33,16 @@ const TabsField: React.FC = (props) => { const isWithinCollapsible = useCollapsible(); const [activeTabIndex, setActiveTabIndex] = useState(0); + const tabsPrefKey = `tabs-${indexPath}`; useEffect(() => { const getInitialPref = async () => { const existingPreferences: DocumentPreferences = await getPreference(preferencesKey); - const initialIndex = path ? existingPreferences?.fields?.[path]?.tabIndex : existingPreferences?.fields?.[pathByIndex]?.tabIndex; + const initialIndex = path ? existingPreferences?.fields?.[path]?.tabIndex : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex; setActiveTabIndex(initialIndex || 0) } getInitialPref(); - }, [path, pathByIndex]) + }, [path, indexPath]) const handleTabChange = useCallback((incomingTabIndex: number) => { setActiveTabIndex(incomingTabIndex) @@ -62,8 +63,8 @@ const TabsField: React.FC = (props) => { } : { fields: { ...existingPreferences?.fields, - [pathByIndex]: { - ...existingPreferences?.fields?.[pathByIndex], + [tabsPrefKey]: { + ...existingPreferences?.fields?.[tabsPrefKey], tabIndex: incomingTabIndex, } }, @@ -72,7 +73,7 @@ const TabsField: React.FC = (props) => { } handlePref(); - }, [pathByIndex, preferencesKey, getPreference, setPreference, path]) + }, [indexPath, preferencesKey, getPreference, setPreference, path]) const activeTabConfig = tabs[activeTabIndex]; @@ -126,7 +127,7 @@ const TabsField: React.FC = (props) => { ...field, path: `${path ? `${path}.` : ''}${tabHasName(activeTabConfig) ? `${activeTabConfig.name}.` : ''}${fieldAffectsData(field) ? field.name : ''}`, }))} - pathByIndex={pathByIndex} + indexPath={indexPath} /> )} diff --git a/src/admin/components/forms/field-types/Tabs/types.ts b/src/admin/components/forms/field-types/Tabs/types.ts index 19d4b6f20c..69f8254903 100644 --- a/src/admin/components/forms/field-types/Tabs/types.ts +++ b/src/admin/components/forms/field-types/Tabs/types.ts @@ -6,5 +6,5 @@ export type Props = Omit & { path?: string fieldTypes: FieldTypes permissions: FieldPermissions - pathByIndex: string + indexPath: string }