feat: updates tab preference keys
This commit is contained in:
@@ -20,7 +20,7 @@ const RenderFields: React.FC<Props> = (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> = (props) => {
|
||||
...field,
|
||||
path: field.path || (isFieldAffectingData ? field.name : ''),
|
||||
fieldTypes,
|
||||
pathByIndex: incomingFieldIndex ? `${incomingFieldIndex}[${fieldIndex}]` : `[${fieldIndex}]`,
|
||||
indexPath: incomingIndexPath ? `${incomingIndexPath}.${fieldIndex}` : `${fieldIndex}`,
|
||||
admin: {
|
||||
...(field.admin || {}),
|
||||
readOnly,
|
||||
|
||||
@@ -12,5 +12,5 @@ export type Props = {
|
||||
filter?: (field: Field) => boolean
|
||||
fieldSchema: FieldWithPath[]
|
||||
fieldTypes: FieldTypes
|
||||
pathByIndex: string
|
||||
indexPath?: string
|
||||
}
|
||||
|
||||
@@ -38,6 +38,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
|
||||
maxRows,
|
||||
minRows,
|
||||
permissions,
|
||||
indexPath,
|
||||
admin: {
|
||||
readOnly,
|
||||
description,
|
||||
@@ -292,6 +293,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
|
||||
readOnly={readOnly}
|
||||
fieldTypes={fieldTypes}
|
||||
permissions={permissions?.fields}
|
||||
indexPath={indexPath}
|
||||
fieldSchema={fields.map((field) => ({
|
||||
...field,
|
||||
path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`,
|
||||
|
||||
@@ -7,4 +7,5 @@ export type Props = Omit<ArrayField, 'type'> & {
|
||||
fieldTypes: FieldTypes
|
||||
permissions: FieldPermissions
|
||||
label: string | false
|
||||
indexPath: string
|
||||
}
|
||||
|
||||
@@ -50,6 +50,7 @@ const BlocksField: React.FC<Props> = (props) => {
|
||||
required,
|
||||
validate = blocksValidator,
|
||||
permissions,
|
||||
indexPath,
|
||||
admin: {
|
||||
readOnly,
|
||||
description,
|
||||
@@ -345,6 +346,7 @@ const BlocksField: React.FC<Props> = (props) => {
|
||||
...field,
|
||||
path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`,
|
||||
}))}
|
||||
indexPath={indexPath}
|
||||
/>
|
||||
|
||||
</Collapsible>
|
||||
|
||||
@@ -6,4 +6,5 @@ export type Props = Omit<BlockField, 'type'> & {
|
||||
path?: string
|
||||
fieldTypes: FieldTypes
|
||||
permissions: FieldPermissions
|
||||
indexPath: string
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ const CollapsibleField: React.FC<Props> = (props) => {
|
||||
fieldTypes,
|
||||
path,
|
||||
permissions,
|
||||
pathByIndex,
|
||||
indexPath,
|
||||
admin: {
|
||||
readOnly,
|
||||
className,
|
||||
@@ -78,7 +78,7 @@ const CollapsibleField: React.FC<Props> = (props) => {
|
||||
readOnly={readOnly}
|
||||
permissions={permissions}
|
||||
fieldTypes={fieldTypes}
|
||||
pathByIndex={pathByIndex}
|
||||
indexPath={indexPath}
|
||||
fieldSchema={fields.map((field) => ({
|
||||
...field,
|
||||
path: getFieldPath(path, field),
|
||||
|
||||
@@ -6,5 +6,5 @@ export type Props = Omit<CollapsibleField, 'type'> & {
|
||||
path?: string
|
||||
fieldTypes: FieldTypes
|
||||
permissions: FieldPermissions
|
||||
pathByIndex: string
|
||||
indexPath: string
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@ const Group: React.FC<Props> = (props) => {
|
||||
name,
|
||||
path: pathFromProps,
|
||||
fieldTypes,
|
||||
indexPath,
|
||||
admin: {
|
||||
readOnly,
|
||||
style,
|
||||
@@ -70,6 +71,7 @@ const Group: React.FC<Props> = (props) => {
|
||||
permissions={permissions?.fields}
|
||||
readOnly={readOnly}
|
||||
fieldTypes={fieldTypes}
|
||||
indexPath={indexPath}
|
||||
fieldSchema={fields.map((subField) => ({
|
||||
...subField,
|
||||
path: `${path}${fieldAffectsData(subField) ? `.${subField.name}` : ''}`,
|
||||
|
||||
@@ -6,4 +6,5 @@ export type Props = Omit<GroupField, 'type'> & {
|
||||
path?: string
|
||||
fieldTypes: FieldTypes
|
||||
permissions: FieldPermissions
|
||||
indexPath: string
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@ const Row: React.FC<Props> = (props) => {
|
||||
readOnly,
|
||||
className,
|
||||
},
|
||||
indexPath
|
||||
} = props;
|
||||
|
||||
const classes = [
|
||||
@@ -30,6 +31,7 @@ const Row: React.FC<Props> = (props) => {
|
||||
className={classes}
|
||||
permissions={permissions}
|
||||
fieldTypes={fieldTypes}
|
||||
indexPath={indexPath}
|
||||
fieldSchema={fields.map((field) => ({
|
||||
...field,
|
||||
path: getFieldPath(path, field),
|
||||
|
||||
@@ -6,4 +6,5 @@ export type Props = Omit<RowField, 'type'> & {
|
||||
path?: string
|
||||
fieldTypes: FieldTypes
|
||||
permissions: FieldPermissions
|
||||
indexPath: string
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ const TabsField: React.FC<Props> = (props) => {
|
||||
fieldTypes,
|
||||
path,
|
||||
permissions,
|
||||
pathByIndex,
|
||||
indexPath,
|
||||
admin: {
|
||||
readOnly,
|
||||
className,
|
||||
@@ -33,15 +33,16 @@ const TabsField: React.FC<Props> = (props) => {
|
||||
|
||||
const isWithinCollapsible = useCollapsible();
|
||||
const [activeTabIndex, setActiveTabIndex] = useState<number>(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> = (props) => {
|
||||
} : {
|
||||
fields: {
|
||||
...existingPreferences?.fields,
|
||||
[pathByIndex]: {
|
||||
...existingPreferences?.fields?.[pathByIndex],
|
||||
[tabsPrefKey]: {
|
||||
...existingPreferences?.fields?.[tabsPrefKey],
|
||||
tabIndex: incomingTabIndex,
|
||||
}
|
||||
},
|
||||
@@ -72,7 +73,7 @@ const TabsField: React.FC<Props> = (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> = (props) => {
|
||||
...field,
|
||||
path: `${path ? `${path}.` : ''}${tabHasName(activeTabConfig) ? `${activeTabConfig.name}.` : ''}${fieldAffectsData(field) ? field.name : ''}`,
|
||||
}))}
|
||||
pathByIndex={pathByIndex}
|
||||
indexPath={indexPath}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -6,5 +6,5 @@ export type Props = Omit<TabsField, 'type'> & {
|
||||
path?: string
|
||||
fieldTypes: FieldTypes
|
||||
permissions: FieldPermissions
|
||||
pathByIndex: string
|
||||
indexPath: string
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user