@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
91 lines (90 loc) • 3.13 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
import classnames from 'classnames';
import { Card, HeightAnimation } from "../../../../../components/index.js";
import SectionContainerContext from "./SectionContainerContext.js";
import FieldBoundaryContext from "../../../DataContext/FieldBoundary/FieldBoundaryContext.js";
function SectionContainer(props) {
const {
mode,
open,
ariaLabel,
onAnimationEnd,
className,
children,
variant = 'outline',
omitFocusManagementRef = {
current: undefined
},
...restProps
} = props;
const [, forceUpdate] = useReducer(() => ({}), {});
const containerRef = useRef();
const contextRef = useRef();
contextRef.current = useContext(SectionContainerContext) || {};
const {
hasError,
hasSubmitError
} = useContext(FieldBoundaryContext) || {};
contextRef.current.hasError = hasError;
contextRef.current.hasSubmitError = hasSubmitError;
const {
containerMode,
switchContainerMode,
disableEditing
} = contextRef.current;
const openRef = useRef(open !== null && open !== void 0 ? open : containerMode === mode);
const setOpenState = useCallback(open => {
openRef.current = open;
forceUpdate();
}, []);
useEffect(() => {
if (typeof open !== 'undefined') {
setOpenState(open);
} else {
if (openRef.current !== (containerMode === mode)) {
setOpenState(containerMode === mode);
}
}
}, [containerMode, mode, open, setOpenState]);
useEffect(() => {
if (disableEditing) {
return;
}
if (hasSubmitError && containerMode !== 'edit') {
switchContainerMode?.('edit');
}
}, [disableEditing, hasSubmitError, containerMode, switchContainerMode]);
const setFocus = useCallback(state => {
if (state === 'opened') {
if (!omitFocusManagementRef.current && !contextRef.current.hasSubmitError) {
containerRef?.current?.focus?.();
}
omitFocusManagementRef.current = false;
}
}, [omitFocusManagementRef]);
const handleAnimationEnd = useCallback(state => {
setFocus(state);
onAnimationEnd?.(state);
}, [onAnimationEnd, setFocus]);
return React.createElement(HeightAnimation, {
className: classnames('dnb-forms-section-block', className, variant && `dnb-forms-section-block--variant-${variant}`, omitFocusManagementRef.current && 'dnb-forms-section-block--no-animation', contextRef.current.hasSubmitError && 'dnb-forms-section-block--error'),
open: openRef.current,
onAnimationEnd: handleAnimationEnd,
duration: 450,
keepInDOM: true
}, React.createElement(Card, _extends({
stack: true,
innerSpace: variant === 'basic' ? false : 'small',
filled: variant === 'filled',
className: "dnb-forms-section-block__inner"
}, restProps, {
"aria-label": ariaLabel,
innerRef: containerRef,
tabIndex: -1
}), children));
}
SectionContainer._supportsSpacingProps = true;
export default SectionContainer;
//# sourceMappingURL=SectionContainer.js.map