From c66e459961a3dcb051295fb0ca9a84de1aaba04d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 11 Sep 2024 16:00:12 +0200 Subject: [PATCH] Refactor of ArrayElement and its context --- .../AnimatedContainer/ElementBlockContext.ts | 9 - .../ArrayItemArea.tsx} | 56 +++--- .../Iterate/Array/ArrayItemAreaContext.ts | 9 + .../Iterate/Array/__tests__/Array.test.tsx | 96 +++++++++- .../Array/__tests__/ArrayElement.test.tsx | 99 ---------- .../__tests__/ArrayItemArea.test.tsx} | 76 ++++---- .../Iterate/EditContainer/EditContainer.tsx | 10 +- .../__tests__/EditAndViewContainer.test.tsx | 181 +++++++++++------- .../Iterate/RemoveButton/RemoveButton.tsx | 12 +- .../Iterate/ViewContainer/ViewContainer.tsx | 10 +- 10 files changed, 291 insertions(+), 267 deletions(-) delete mode 100644 packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/ElementBlockContext.ts rename packages/dnb-eufemia/src/extensions/forms/Iterate/{AnimatedContainer/ElementBlock.tsx => Array/ArrayItemArea.tsx} (78%) create mode 100644 packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts delete mode 100644 packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/ArrayElement.test.tsx rename packages/dnb-eufemia/src/extensions/forms/Iterate/{AnimatedContainer/__tests__/ElementBlock.test.tsx => Array/__tests__/ArrayItemArea.test.tsx} (87%) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/ElementBlockContext.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/ElementBlockContext.ts deleted file mode 100644 index 06b10ff973b..00000000000 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/ElementBlockContext.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createContext } from 'react' - -type ElementBlockContext = { - handleRemoveBlock?: () => void -} - -const ElementBlockContext = createContext(null) - -export default ElementBlockContext diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/ElementBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx similarity index 78% rename from packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/ElementBlock.tsx rename to packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx index 87f05c923aa..301cda43f97 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/ElementBlock.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx @@ -10,12 +10,12 @@ import { Flex, HeightAnimation } from '../../../../components' import IterateItemContext, { IterateItemContextState, } from '../IterateItemContext' -import ElementBlockContext from './ElementBlockContext' +import ArrayItemAreaContext from './ArrayItemAreaContext' import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext' import { Props as FlexContainerProps } from '../../../../components/flex/Container' -import { ContainerMode } from '../Array/types' +import { ContainerMode } from './types' -export type ElementSectionProps = { +export type ArrayItemAreaProps = { /** * Defines the variant of the ViewContainer or EditContainer. Can be `outline`. * Defaults to `outline`. @@ -28,9 +28,9 @@ export type Props = { open?: boolean | undefined ariaLabel?: string openDelay?: number -} & ElementSectionProps +} & ArrayItemAreaProps -function ElementBlock(props: Props & FlexContainerProps) { +function ArrayItemArea(props: Props & FlexContainerProps) { const [, forceUpdate] = useReducer(() => ({}), {}) const { @@ -46,11 +46,11 @@ function ElementBlock(props: Props & FlexContainerProps) { } = props const localContextRef = useRef() - const { hasError, hasSubmitError } = useContext(FieldBoundaryContext) || {} localContextRef.current = useContext(IterateItemContext) || {} const omitFocusManagementRef = useRef(false) + const nextFocusElementRef = useRef() const { isNew, value } = localContextRef.current if (hasSubmitError || !value) { localContextRef.current.containerMode = 'edit' @@ -79,7 +79,7 @@ function ElementBlock(props: Props & FlexContainerProps) { determineMode() }, [determineMode]) - const { handleRemove, previousContainerMode, containerMode } = + const { handleRemove, index, previousContainerMode, containerMode } = localContextRef.current const openRef = useRef(open ?? (containerMode === mode && !isNew)) @@ -121,26 +121,7 @@ function ElementBlock(props: Props & FlexContainerProps) { if (state === 'opened') { localContextRef.current?.elementRef?.current?.focus?.() } else if (state === 'closed') { - // Wait until the element is removed, then check if we can set focus - window.requestAnimationFrame(() => { - // try to focus on the second last element - try { - if ( - // But not when we focus is already inside our element - !document.activeElement?.closest( - '.dnb-forms-iterate__element' - ) - ) { - const elements = - localContextRef.current?.containerRef.current.querySelectorAll( - '.dnb-forms-iterate__element' - ) - elements[elements.length - 1].focus() - } - } catch (e) { - /* do nothing */ - } - }) + nextFocusElementRef.current?.focus?.() } } @@ -162,14 +143,23 @@ function ElementBlock(props: Props & FlexContainerProps) { }, [onAnimationEnd, setFocus] ) - const handleRemoveBlock = useCallback(() => { + + const handleRemoveItem = useCallback(() => { + try { + // Because "previousElementSibling" did not work in Jest/JSDOM + nextFocusElementRef.current = Array.from( + localContextRef.current.elementRef.current.parentElement.childNodes + ).at(index - 1) as HTMLElement + } catch (e) { + // + } isRemoving.current = true handleRemove?.({ keepItems: true }) setOpenState(false) - }, [handleRemove, setOpenState]) + }, [handleRemove, index, setOpenState]) return ( - + - + ) } -ElementBlock._supportsSpacingProps = true -export default ElementBlock +ArrayItemArea._supportsSpacingProps = true +export default ArrayItemArea diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts new file mode 100644 index 00000000000..cd03dc0ef6a --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts @@ -0,0 +1,9 @@ +import { createContext } from 'react' + +type ArrayItemAreaContext = { + handleRemoveItem?: () => void +} + +const ArrayItemAreaContext = createContext(null) + +export default ArrayItemAreaContext diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx index 5d48916f75e..298c9d46995 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx @@ -1,8 +1,9 @@ -import React from 'react' +import React, { useEffect } from 'react' import { fireEvent, render } from '@testing-library/react' import userEvent from '@testing-library/user-event' import * as Iterate from '../..' import * as DataContext from '../../../DataContext' +import { IterateItemContext } from '../..' import { Field, FieldBlock, Form, Value, ValueBlock } from '../../..' import { FilterData } from '../../../DataContext' @@ -1171,4 +1172,97 @@ describe('Iterate.Array', () => { log.mockRestore() }) }) + + it('should contain tabindex of -1', () => { + render(content) + + expect( + document.querySelector('.dnb-forms-iterate__element') + ).toHaveAttribute('tabindex', '-1') + }) + + it('should set elementRef', () => { + let elementRef = null + + const ContextConsumer = () => { + const context = React.useContext(IterateItemContext) + + useEffect(() => { + elementRef = context.elementRef.current + }) + + return null + } + + render( + + + + ) + + expect(elementRef).toBeDefined() + expect(elementRef instanceof HTMLElement).toBeTruthy() + }) + + it('should set index and value', () => { + let contextToTest = null + + const ContextConsumer = () => { + const context = React.useContext(IterateItemContext) + + useEffect(() => { + contextToTest = context + }) + + return null + } + + render( + + + + ) + + expect(contextToTest).toMatchObject({ + index: 0, + value: 'one', + }) + }) + + it('focuses on the block when focusOnOpen prop is true', async () => { + const { rerender } = render( + + {(itemValue, index) => { + return ( + + Content {JSON.stringify(itemValue)} {index} + + ) + }} + + ) + + expect( + document.querySelectorAll('.dnb-forms-iterate__element') + ).toHaveLength(1) + expect(document.querySelector('output')).toHaveTextContent( + 'Content "foo" 0' + ) + + rerender( + + {(itemValue, index) => { + return ( + + Content {JSON.stringify(itemValue)} {index} + + ) + }} + + ) + + const outputs = document.querySelectorAll('output') + expect(outputs[0]).toHaveTextContent('Content "foo" 0') + expect(outputs[1]).toHaveTextContent('Content "bar" 1') + }) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/ArrayElement.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/ArrayElement.test.tsx deleted file mode 100644 index 8e722078f2f..00000000000 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/ArrayElement.test.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useEffect } from 'react' -import { render } from '@testing-library/react' -import IterateItemContext from '../../IterateItemContext' -import Array from '../Array' - -describe('ArrayElement', () => { - it('should contain tabindex of -1', () => { - render(content) - - expect( - document.querySelector('.dnb-forms-iterate__element') - ).toHaveAttribute('tabindex', '-1') - }) - - it('should set elementRef', () => { - let elementRef = null - - const ContextConsumer = () => { - const context = React.useContext(IterateItemContext) - - useEffect(() => { - elementRef = context.elementRef.current - }) - - return null - } - - render( - - - - ) - - expect(elementRef).toBeDefined() - expect(elementRef instanceof HTMLElement).toBeTruthy() - }) - - it('should set index and value', () => { - let contextToTest = null - - const ContextConsumer = () => { - const context = React.useContext(IterateItemContext) - - useEffect(() => { - contextToTest = context - }) - - return null - } - - render( - - - - ) - - expect(contextToTest).toMatchObject({ - index: 0, - value: 'one', - }) - }) - - it('focuses on the block when focusOnOpen prop is true', async () => { - const { rerender } = render( - - {(itemValue, index) => { - return ( - - Content {JSON.stringify(itemValue)} {index} - - ) - }} - - ) - - expect( - document.querySelectorAll('.dnb-forms-iterate__element') - ).toHaveLength(1) - expect(document.querySelector('output')).toHaveTextContent( - 'Content "foo" 0' - ) - - rerender( - - {(itemValue, index) => { - return ( - - Content {JSON.stringify(itemValue)} {index} - - ) - }} - - ) - - const outputs = document.querySelectorAll('output') - expect(outputs[0]).toHaveTextContent('Content "foo" 0') - expect(outputs[1]).toHaveTextContent('Content "bar" 1') - }) -}) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/__tests__/ElementBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/ArrayItemArea.test.tsx similarity index 87% rename from packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/__tests__/ElementBlock.test.tsx rename to packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/ArrayItemArea.test.tsx index ebf1e6d552d..3e715212c7a 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/__tests__/ElementBlock.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/ArrayItemArea.test.tsx @@ -1,14 +1,14 @@ import React from 'react' import { fireEvent, render } from '@testing-library/react' import IterateItemContext from '../../IterateItemContext' -import ElementBlock from '../ElementBlock' +import ArrayItemArea from '../ArrayItemArea' import RemoveButton from '../../RemoveButton' import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext' import { wait } from '../../../../../core/jest/jestSetup' import { DataContext, Field, Form, Iterate } from '../../..' import { simulateAnimationEnd } from '../../../../../components/height-animation/__tests__/HeightAnimationUtils' -describe('ElementBlock', () => { +describe('ArrayItemArea', () => { it('should call "onAnimationEnd"', () => { const onAnimationEnd = jest.fn() @@ -21,9 +21,9 @@ describe('ElementBlock', () => { ) render( - + - , + , { wrapper } ) @@ -44,9 +44,9 @@ describe('ElementBlock', () => { ) render( - + - , + , { wrapper } ) @@ -67,9 +67,9 @@ describe('ElementBlock', () => { ) render( - + - , + , { wrapper } ) @@ -169,9 +169,9 @@ describe('ElementBlock', () => { ) const { rerender } = render( - + Content - , + , { wrapper } ) @@ -179,9 +179,9 @@ describe('ElementBlock', () => { expect(block).toHaveClass('dnb-height-animation--hidden') rerender( - + Content - + ) expect(block).toHaveClass('dnb-height-animation--hidden') @@ -199,7 +199,7 @@ describe('ElementBlock', () => { ) - render(Content, { wrapper }) + render(Content, { wrapper }) expect( document.querySelector('.dnb-forms-section-block__inner').tagName @@ -214,9 +214,9 @@ describe('ElementBlock', () => { ) render( - + Content - , + , { wrapper } ) @@ -227,7 +227,7 @@ describe('ElementBlock', () => { it('renders content and without errors', () => { const { rerender } = render( - content + content ) const element = document.querySelector('.dnb-forms-section-block') @@ -240,9 +240,9 @@ describe('ElementBlock', () => { expect(inner).toHaveTextContent('content') rerender( - + content - + ) expect(element).not.toHaveClass('dnb-height-animation--hidden') @@ -250,9 +250,9 @@ describe('ElementBlock', () => { it('closes the block when open prop is false', () => { render( - + content - + ) expect( @@ -265,9 +265,9 @@ describe('ElementBlock', () => { render( - + - + ) @@ -289,9 +289,9 @@ describe('ElementBlock', () => { value: 'foo', }} > - + - + ) @@ -312,7 +312,7 @@ describe('ElementBlock', () => { - content + content ) @@ -324,7 +324,7 @@ describe('ElementBlock', () => { - content + content ) @@ -345,9 +345,9 @@ describe('ElementBlock', () => { - + - + ) @@ -367,7 +367,7 @@ describe('ElementBlock', () => { value: 'foo', }} > - content + content ) @@ -378,9 +378,9 @@ describe('ElementBlock', () => { it('opens component based on "open" prop', async () => { const { rerender } = render( - + content - + ) const element = document.querySelector('.dnb-forms-section-block') @@ -388,17 +388,17 @@ describe('ElementBlock', () => { expect(element).not.toHaveClass('dnb-height-animation--hidden') rerender( - + content - + ) expect(element).toHaveClass('dnb-height-animation--hidden') rerender( - + content - + ) expect(element).not.toHaveClass('dnb-height-animation--hidden') @@ -409,7 +409,7 @@ describe('ElementBlock', () => { - content + content ) @@ -430,9 +430,9 @@ describe('ElementBlock', () => { value: 'foo', }} > - + - + ) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx index 93444873b73..5f92fae827f 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx @@ -4,9 +4,7 @@ import { convertJsxToString } from '../../../../shared/component-helper' import { Lead } from '../../../../elements' import { Props as FlexContainerProps } from '../../../../components/flex/Container' import IterateItemContext from '../IterateItemContext' -import ElementBlock, { - ElementSectionProps, -} from '../AnimatedContainer/ElementBlock' +import ArrayItemArea, { ArrayItemAreaProps } from '../Array/ArrayItemArea' import Toolbar from '../Toolbar' import { useSwitchContainerMode } from '../hooks' import DoneButton from './DoneButton' @@ -34,7 +32,7 @@ export type Props = { toolbar?: React.ReactNode } -export type AllProps = Props & FlexContainerProps & ElementSectionProps +export type AllProps = Props & FlexContainerProps & ArrayItemAreaProps export default function EditContainer(props: AllProps) { const { toolbar, children, ...rest } = props @@ -89,7 +87,7 @@ export function EditContainerWithoutToolbar( useSwitchContainerMode({ path }) return ( - {itemTitle}} {children} {toolbar} - + ) } diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx index 88f9af9ce64..d87650f3208 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx @@ -150,98 +150,141 @@ describe('EditContainer and ViewContainer', () => { expect(containerMode).toBe('edit') }) - it('should set focus on __element when containerMode changes', async () => { - render( - - View Content - Edit Content - - ) + describe('focus management', () => { + it('should not set focus when container opens initially in edit mode', async () => { + let containerMode = null - const elements = document.querySelectorAll( - '.dnb-forms-iterate__element' - ) - expect(elements).toHaveLength(2) + const ContextConsumer = () => { + const context = React.useContext(IterateItemContext) + containerMode = context.containerMode - const firstElement = elements[0] - const [viewBlock, editBlock] = Array.from( - firstElement.querySelectorAll('.dnb-forms-section-block') - ) - const [editButton] = Array.from(viewBlock.querySelectorAll('button')) - const [cancelButton] = Array.from(editBlock.querySelectorAll('button')) + return null + } - expect(viewBlock).toHaveClass('dnb-forms-section-view-block') - expect(editBlock).toHaveClass('dnb-forms-section-edit-block') + render( + + View Content + + + + + + ) - expect(document.body).toHaveFocus() + expect(document.body).toHaveFocus() + expect(containerMode).toBe('edit') - // Switch to edit mode - fireEvent.click(editButton) - expect(firstElement).toHaveTextContent('Edit Content') + const elements = document.querySelectorAll( + '.dnb-forms-iterate__element' + ) + const firstElement = elements[0] + const [viewBlock] = Array.from( + firstElement.querySelectorAll('.dnb-forms-section-block') + ) - await waitFor(() => { - expect(firstElement).toHaveFocus() + await waitFor(() => { + expect(viewBlock).toHaveClass('dnb-height-animation--hidden') + }) + + expect(document.body).toHaveFocus() + expect(containerMode).toBe('edit') }) - // Reset focus, so we can test focus during close - ;(document.activeElement as HTMLElement).blur() + it('should set focus on __element when containerMode changes', async () => { + render( + + View Content + Edit Content + + ) - // Switch to view mode - fireEvent.click(cancelButton) - expect(firstElement).toHaveTextContent('View Content') + const elements = document.querySelectorAll( + '.dnb-forms-iterate__element' + ) + expect(elements).toHaveLength(2) - await waitFor(() => { - expect(firstElement).toHaveFocus() - }) + const firstElement = elements[0] + const [viewBlock, editBlock] = Array.from( + firstElement.querySelectorAll('.dnb-forms-section-block') + ) + const [editButton] = Array.from(viewBlock.querySelectorAll('button')) + const [cancelButton] = Array.from( + editBlock.querySelectorAll('button') + ) - // Reset focus, so we can test focus during close - ;(document.activeElement as HTMLElement).blur() + expect(viewBlock).toHaveClass('dnb-forms-section-view-block') + expect(editBlock).toHaveClass('dnb-forms-section-edit-block') - // Switch to edit mode - fireEvent.click(editButton) - expect(firstElement).toHaveTextContent('Edit Content') + expect(document.body).toHaveFocus() - await waitFor(() => { - expect(firstElement).toHaveFocus() - }) - }) + // Switch to edit mode + fireEvent.click(editButton) + expect(firstElement).toHaveTextContent('Edit Content') - it('should set focus on other item __element when containerMode gets removed', async () => { - render( - - View Content - Edit Content - - ) + await waitFor(() => { + expect(firstElement).toHaveFocus() + }) - const elements = document.querySelectorAll( - '.dnb-forms-iterate__element' - ) - expect(elements).toHaveLength(2) + // Reset focus, so we can test focus during close + ;(document.activeElement as HTMLElement).blur() - const firstElement = elements[0] - const [viewBlock, editBlock] = Array.from( - firstElement.querySelectorAll('.dnb-forms-section-block') - ) - const [, removeButton] = Array.from( - viewBlock.querySelectorAll('button') - ) + // Switch to view mode + fireEvent.click(cancelButton) + expect(firstElement).toHaveTextContent('View Content') - expect(viewBlock).toHaveClass('dnb-forms-section-view-block') - expect(editBlock).toHaveClass('dnb-forms-section-edit-block') + await waitFor(() => { + expect(firstElement).toHaveFocus() + }) - expect(document.body).toHaveFocus() + // Reset focus, so we can test focus during close + ;(document.activeElement as HTMLElement).blur() - // Remove the element - fireEvent.click(removeButton) - expect(removeButton).toHaveTextContent(tr.editContainer.removeButton) + // Switch to edit mode + fireEvent.click(editButton) + expect(firstElement).toHaveTextContent('Edit Content') + + await waitFor(() => { + expect(firstElement).toHaveFocus() + }) + }) + + it('should set focus on other item __element when containerMode gets removed', async () => { + render( + + View Content + Edit Content + + ) - await waitFor(() => { const elements = document.querySelectorAll( '.dnb-forms-iterate__element' ) - expect(elements).toHaveLength(1) - expect(elements[0]).toHaveFocus() + expect(elements).toHaveLength(3) + + const firstElement = elements[0] + const [viewBlock, editBlock] = Array.from( + firstElement.querySelectorAll('.dnb-forms-section-block') + ) + const [, removeButton] = Array.from( + viewBlock.querySelectorAll('button') + ) + + expect(viewBlock).toHaveClass('dnb-forms-section-view-block') + expect(editBlock).toHaveClass('dnb-forms-section-edit-block') + + expect(document.body).toHaveFocus() + + // Remove the element + await userEvent.click(removeButton) + expect(removeButton).toHaveTextContent(tr.editContainer.removeButton) + + await waitFor(() => { + const elements = document.querySelectorAll( + '.dnb-forms-iterate__element' + ) + expect(elements).toHaveLength(2) + expect(elements[1]).toHaveFocus() + }) }) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx index ecf27882ca8..fc12cbb9703 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx @@ -4,7 +4,7 @@ import { Button } from '../../../../components' import { ButtonProps } from '../../../../components/Button' import IterateItemContext from '../IterateItemContext' import { useFieldProps, useTranslation } from '../../hooks' -import ElementBlockContext from '../AnimatedContainer/ElementBlockContext' +import ArrayItemAreaContext from '../Array/ArrayItemAreaContext' import { DataValueReadWriteComponentProps, omitDataValueReadWriteProps, @@ -28,16 +28,16 @@ function RemoveButton(props: Props) { const translation = useTranslation().RemoveButton const textContent = text || children || translation.text - const elementBlockContext = useContext(ElementBlockContext) - const { handleRemoveBlock } = elementBlockContext || {} + const elementBlockContext = useContext(ArrayItemAreaContext) + const { handleRemoveItem } = elementBlockContext || {} const handleClick = useCallback(() => { - if (handleRemoveBlock) { - handleRemoveBlock() + if (handleRemoveItem) { + handleRemoveItem() } else { handleRemove() } - }, [handleRemove, handleRemoveBlock]) + }, [handleRemove, handleRemoveItem]) return (