@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
157 lines (156 loc) • 6.7 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["mode", "open", "ariaLabel", "onAnimationEnd", "className", "children", "openDelay", "variant", "toolbarVariant"];
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useCallback, useContext, useReducer, useRef } from 'react';
import classnames from 'classnames';
import { Card, HeightAnimation } from '../../../../components';
import IterateItemContext from '../IterateItemContext';
import ArrayItemAreaContext from './ArrayItemAreaContext';
import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext';
const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
function ArrayItemArea(props) {
const [, forceUpdate] = useReducer(() => ({}), {});
const {
mode,
open,
ariaLabel,
onAnimationEnd,
className,
children,
openDelay = 100,
variant = 'outline',
toolbarVariant
} = props,
restProps = _objectWithoutProperties(props, _excluded);
const localContextRef = useRef();
const {
hasError,
hasSubmitError
} = useContext(FieldBoundaryContext) || {};
localContextRef.current = useContext(IterateItemContext) || {};
const nextFocusElementRef = useRef();
const {
isNew
} = localContextRef.current;
const determineMode = useCallback(() => {
const {
value,
initialContainerMode
} = localContextRef.current;
if (initialContainerMode === 'auto') {
if (hasSubmitError || hasError || !value || typeof value === 'object' && Object.keys(value).length === 0) {
return 'edit';
}
}
}, [hasError, hasSubmitError]);
if (determineMode() === 'edit') {
localContextRef.current.containerMode = 'edit';
if (!localContextRef.current.modeOptions) {
localContextRef.current.modeOptions = {};
}
localContextRef.current.modeOptions.omitFocusManagement = true;
}
if (localContextRef.current.containerMode === 'auto') {
localContextRef.current.containerMode = 'view';
}
useLayoutEffect(() => {
if (mode === 'edit') {
const editMode = determineMode();
if (editMode) {
const {
switchContainerMode
} = localContextRef.current;
switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode(editMode, {
omitFocusManagement: true,
preventUpdate: true
});
}
}
}, [determineMode, mode]);
const {
handleRemove,
index,
previousContainerMode,
containerMode
} = localContextRef.current;
const openRef = useRef(open !== null && open !== void 0 ? open : containerMode === mode && !isNew);
const isRemoving = useRef(false);
const setOpenState = useCallback(open => {
openRef.current = open;
forceUpdate();
}, []);
useLayoutEffect(() => {
if (!isRemoving.current) {
if (typeof open !== 'undefined') {
setOpenState(open);
} else {
if (openRef.current !== (containerMode === mode)) {
if (isNew) {
setTimeout(() => {
setOpenState(containerMode === mode);
}, openDelay);
} else {
setOpenState(containerMode === mode);
}
}
}
}
}, [containerMode, isNew, mode, open, openDelay, setOpenState]);
const setFocus = useCallback(state => {
var _localContextRef$curr;
if (((_localContextRef$curr = localContextRef.current.modeOptions) === null || _localContextRef$curr === void 0 ? void 0 : _localContextRef$curr.omitFocusManagement) !== true && !hasSubmitError && containerMode === mode && containerMode !== previousContainerMode) {
if (state === 'opened') {
var _localContextRef$curr2, _localContextRef$curr3, _localContextRef$curr4;
(_localContextRef$curr2 = localContextRef.current.elementRef) === null || _localContextRef$curr2 === void 0 ? void 0 : (_localContextRef$curr3 = _localContextRef$curr2.current) === null || _localContextRef$curr3 === void 0 ? void 0 : (_localContextRef$curr4 = _localContextRef$curr3.focus) === null || _localContextRef$curr4 === void 0 ? void 0 : _localContextRef$curr4.call(_localContextRef$curr3);
} else if (state === 'closed') {
var _nextFocusElementRef$, _nextFocusElementRef$2;
(_nextFocusElementRef$ = nextFocusElementRef.current) === null || _nextFocusElementRef$ === void 0 ? void 0 : (_nextFocusElementRef$2 = _nextFocusElementRef$.focus) === null || _nextFocusElementRef$2 === void 0 ? void 0 : _nextFocusElementRef$2.call(_nextFocusElementRef$);
}
}
}, [containerMode, hasSubmitError, mode, previousContainerMode]);
const handleAnimationEnd = useCallback(state => {
if (!openRef.current && isRemoving.current) {
var _localContextRef$curr5, _localContextRef$curr6;
isRemoving.current = false;
(_localContextRef$curr5 = (_localContextRef$curr6 = localContextRef.current).fulfillRemove) === null || _localContextRef$curr5 === void 0 ? void 0 : _localContextRef$curr5.call(_localContextRef$curr6);
}
setFocus(state);
onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd(state);
}, [onAnimationEnd, setFocus]);
const handleRemoveItem = useCallback(() => {
try {
nextFocusElementRef.current = Array.from(localContextRef.current.elementRef.current.parentElement.childNodes).at(index - 1);
} catch (e) {}
isRemoving.current = true;
setOpenState(false);
handleRemove === null || handleRemove === void 0 ? void 0 : handleRemove({
keepItems: true
});
}, [handleRemove, index, setOpenState]);
return React.createElement(ArrayItemAreaContext.Provider, {
value: {
handleRemoveItem,
variant,
toolbarVariant,
divider: restProps.divider
}
}, React.createElement(HeightAnimation, {
className: classnames('dnb-forms-section-block', className, variant && `dnb-forms-section-block--variant-${variant}`, isNew && 'dnb-forms-section-block--new', hasSubmitError && 'dnb-forms-section-block--error'),
open: openRef.current,
onAnimationEnd: handleAnimationEnd,
duration: 450,
keepInDOM: true
}, React.createElement(Card, _extends({
stack: true,
filled: variant === 'filled',
innerSpace: variant === 'basic' ? false : 'small',
className: "dnb-forms-section-block__inner"
}, restProps, {
"aria-label": ariaLabel
}), children)));
}
ArrayItemArea._supportsSpacingProps = true;
export default ArrayItemArea;
//# sourceMappingURL=ArrayItemArea.js.map