@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
96 lines (95 loc) • 3.24 kB
JavaScript
"use client";
import React, { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
import clsx from 'clsx';
import { Card, HeightAnimation } from "../../../../../components/index.js";
import SectionContainerContext from "./SectionContainerContext.js";
import FieldBoundaryContext from "../../../DataContext/FieldBoundary/FieldBoundaryContext.js";
import withComponentMarkers from "../../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx } from "react/jsx-runtime";
function SectionContainer(props) {
const {
mode,
open,
ariaLabel,
onAnimationEnd,
className,
children,
variant = 'outline',
omitFocusManagementRef = {
current: undefined
},
...restProps
} = props;
const [, forceUpdate] = useReducer(() => ({}), {});
const containerRef = useRef(undefined);
const contextRef = useRef(undefined);
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 _jsx(HeightAnimation, {
className: clsx('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,
children: _jsx(Card, {
stack: true,
innerSpace: variant === 'basic' ? false : 'small',
filled: variant === 'filled',
className: "dnb-forms-section-block__inner",
...restProps,
"aria-label": ariaLabel,
ref: containerRef,
tabIndex: -1,
children: children
})
});
}
withComponentMarkers(SectionContainer, {
_supportsSpacingProps: true
});
export default SectionContainer;
//# sourceMappingURL=SectionContainer.js.map