@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
103 lines (102 loc) • 4.16 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _clsx = _interopRequireDefault(require("clsx"));
var _index = require("../../../../../components/index.js");
var _SectionContainerContext = _interopRequireDefault(require("./SectionContainerContext.js"));
var _FieldBoundaryContext = _interopRequireDefault(require("../../../DataContext/FieldBoundary/FieldBoundaryContext.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../../../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function SectionContainer(props) {
const {
mode,
open,
ariaLabel,
onAnimationEnd,
className,
children,
variant = 'outline',
omitFocusManagementRef = {
current: undefined
},
...restProps
} = props;
const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
const containerRef = (0, _react.useRef)(undefined);
const contextRef = (0, _react.useRef)(undefined);
contextRef.current = (0, _react.useContext)(_SectionContainerContext.default) || {};
const {
hasError,
hasSubmitError
} = (0, _react.useContext)(_FieldBoundaryContext.default) || {};
contextRef.current.hasError = hasError;
contextRef.current.hasSubmitError = hasSubmitError;
const {
containerMode,
switchContainerMode,
disableEditing
} = contextRef.current;
const openRef = (0, _react.useRef)(open !== null && open !== void 0 ? open : containerMode === mode);
const setOpenState = (0, _react.useCallback)(open => {
openRef.current = open;
forceUpdate();
}, []);
(0, _react.useEffect)(() => {
if (typeof open !== 'undefined') {
setOpenState(open);
} else {
if (openRef.current !== (containerMode === mode)) {
setOpenState(containerMode === mode);
}
}
}, [containerMode, mode, open, setOpenState]);
(0, _react.useEffect)(() => {
if (disableEditing) {
return;
}
if (hasSubmitError && containerMode !== 'edit') {
switchContainerMode === null || switchContainerMode === void 0 || switchContainerMode('edit');
}
}, [disableEditing, hasSubmitError, containerMode, switchContainerMode]);
const setFocus = (0, _react.useCallback)(state => {
if (state === 'opened') {
if (!omitFocusManagementRef.current && !contextRef.current.hasSubmitError) {
var _containerRef$current, _containerRef$current2;
containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || (_containerRef$current2 = _containerRef$current.focus) === null || _containerRef$current2 === void 0 || _containerRef$current2.call(_containerRef$current);
}
omitFocusManagementRef.current = false;
}
}, [omitFocusManagementRef]);
const handleAnimationEnd = (0, _react.useCallback)(state => {
setFocus(state);
onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd(state);
}, [onAnimationEnd, setFocus]);
return (0, _jsxRuntime.jsx)(_index.HeightAnimation, {
className: (0, _clsx.default)('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: (0, _jsxRuntime.jsx)(_index.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
})
});
}
(0, _withComponentMarkers.default)(SectionContainer, {
_supportsSpacingProps: true
});
var _default = exports.default = SectionContainer;
//# sourceMappingURL=SectionContainer.js.map