diff --git a/src/admin/components/forms/Form/fieldReducer.ts b/src/admin/components/forms/Form/fieldReducer.ts index 64ede18fe8..d268b36d4a 100644 --- a/src/admin/components/forms/Form/fieldReducer.ts +++ b/src/admin/components/forms/Form/fieldReducer.ts @@ -112,11 +112,9 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { } case 'ADD_ROW': { - const { - rowIndex, path, subFieldState, blockType, - } = action; + const { rowIndex, path, subFieldState, blockType } = action; - const rowsMetadata = state[path]?.rows || []; + const rowsMetadata = [...state[path]?.rows || []]; rowsMetadata.splice( rowIndex + 1, 0, @@ -143,13 +141,13 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { const newState: Fields = { ...remainingFields, + ...flattenRows(path, rows), [path]: { ...state[path], value: rows.length, disableFormData: true, rows: rowsMetadata, }, - ...flattenRows(path, rows), }; return newState; @@ -198,9 +196,19 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields { // insert row copyOfMovingRow back in rows.splice(moveToIndex, 0, copyOfMovingRow); + // modify array/block internal row state (i.e. collapsed, blockType) + const rowStateCopy = [...state[path]?.rows || []]; + const movingRowState = { ...rowStateCopy[moveFromIndex] }; + rowStateCopy.splice(moveFromIndex, 1); + rowStateCopy.splice(moveToIndex, 0, movingRowState); + const newState = { ...remainingFields, ...flattenRows(path, rows), + [path]: { + ...state[path], + rows: rowStateCopy, + }, }; return newState; diff --git a/src/admin/components/forms/field-types/Blocks/RowActions.tsx b/src/admin/components/forms/field-types/Blocks/RowActions.tsx index dadc34dfc9..48f7c36ebb 100644 --- a/src/admin/components/forms/field-types/Blocks/RowActions.tsx +++ b/src/admin/components/forms/field-types/Blocks/RowActions.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { Block, Labels } from '../../../../../fields/config/types'; import { ArrayAction } from '../../../elements/ArrayAction'; import { useDrawerSlug } from '../../../elements/Drawer/useDrawerSlug'; -import { Row } from '../rowReducer'; import { BlocksDrawer } from './BlocksDrawer'; +import { Row } from '../../Form/types'; export const RowActions: React.FC<{ addRow: (rowIndex: number, blockType: string) => void diff --git a/src/admin/components/forms/field-types/Blocks/index.tsx b/src/admin/components/forms/field-types/Blocks/index.tsx index 224b214812..fbb12910ef 100644 --- a/src/admin/components/forms/field-types/Blocks/index.tsx +++ b/src/admin/components/forms/field-types/Blocks/index.tsx @@ -100,13 +100,14 @@ const BlocksField: React.FC = (props) => { path, validate: memoizedValidate, condition, + hasRows: true, }); const addRow = useCallback(async (rowIndex: number, blockType: string) => { const block = blocks.find((potentialBlock) => potentialBlock.slug === blockType); const preferences = await getDocPreferences(); const subFieldState = await buildStateFromSchema({ fieldSchema: block.fields, preferences, operation, id, user, locale, t }); - dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path }); + dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path, blockType }); setModified(true); setTimeout(() => { diff --git a/src/admin/components/forms/useField/index.tsx b/src/admin/components/forms/useField/index.tsx index b1b59a3a7b..9fd913fce1 100644 --- a/src/admin/components/forms/useField/index.tsx +++ b/src/admin/components/forms/useField/index.tsx @@ -29,6 +29,7 @@ const useField = (options: Options): FieldType => { const { id } = useDocumentInfo(); const operation = useOperation(); const field = useFormFields(([fields]) => fields[path]); + const dispatchField = useFormFields(([_, dispatch]) => dispatch); const { t } = useTranslation(); @@ -94,6 +95,7 @@ const useField = (options: Options): FieldType => { value, valid: false, errorMessage: undefined, + rows: field?.rows, }; const validateOptions = { @@ -133,6 +135,7 @@ const useField = (options: Options): FieldType => { path, user, validate, + field?.rows, ]); return result;