@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
339 lines (338 loc) • 12.7 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _clsx = require("clsx");
var _index = _interopRequireDefault(require("../../Form/Isolation/index.js"));
var _extractZodSubSchema = require("../../Form/Isolation/extractZodSubSchema.js");
var z = _interopRequireWildcard(require("zod"));
var _zod2 = require("../../utils/zod.js");
var _index2 = _interopRequireDefault(require("../../utils/json-pointer/index.js"));
var _useHandleStatus = _interopRequireDefault(require("../../Form/Isolation/useHandleStatus.js"));
var _SectionContext = _interopRequireDefault(require("../../Form/Section/SectionContext.js"));
var _PushContainerContext = _interopRequireDefault(require("./PushContainerContext.js"));
var _IterateItemContext = _interopRequireDefault(require("../IterateItemContext.js"));
var _Context = _interopRequireDefault(require("../../DataContext/Context.js"));
var _VisibilityContext = _interopRequireDefault(require("../../Form/Visibility/VisibilityContext.js"));
var _useDataValue = _interopRequireDefault(require("../../hooks/useDataValue.js"));
var _index3 = _interopRequireWildcard(require("../EditContainer/index.js"));
var _index4 = _interopRequireDefault(require("../Array/index.js"));
var _OpenButton = _interopRequireDefault(require("./OpenButton.js"));
var _index5 = require("../../../../components/index.js");
var _index6 = require("../hooks/index.js");
var _index7 = _interopRequireDefault(require("../Toolbar/index.js"));
var _index8 = require("../../hooks/index.js");
var _index9 = require("../../DataContext/Provider/index.js");
var _structuredClone = require("../../../../shared/helpers/structuredClone.js");
var _withComponentMarkers = _interopRequireDefault(require("../../../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PushContainer(props) {
const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
const outerContext = (0, _react.useContext)(_Context.default);
const sectionContext = (0, _react.useContext)(_SectionContext.default);
const {
required: requiredInherited
} = outerContext;
const {
value: outerData
} = (0, _useDataValue.default)('//');
const {
data: dataProp,
defaultData: defaultDataProp,
isolatedData,
bubbleValidation,
preventUncommittedChanges,
dataReference,
showResetButton,
path,
itemPath,
insertAt,
title,
required = requiredInherited,
children,
openButton,
showOpenButtonWhen,
onCommit,
...rest
} = props;
const {
absolutePath
} = (0, _index6.useItemPath)(itemPath);
const {
path: relativePath
} = (0, _index8.usePath)({
path,
itemPath
});
const targetPath = (0, _react.useMemo)(() => {
if (absolutePath) {
return absolutePath;
}
if (!path) {
return relativePath;
}
const sectionPath = sectionContext?.path;
if (sectionPath && !path.startsWith('//') && (path === sectionPath || path.startsWith(`${sectionPath}/`))) {
return path;
}
return relativePath;
}, [absolutePath, path, relativePath, sectionContext?.path]);
const rootRelativeTargetPath = (0, _react.useMemo)(() => {
if (!targetPath || targetPath === '/') {
return targetPath;
}
return `//${targetPath.slice(1)}`;
}, [targetPath]);
const commitHandleRef = (0, _react.useRef)(undefined);
const switchContainerModeRef = (0, _react.useRef)(undefined);
const containerModeRef = (0, _react.useRef)(undefined);
const {
value: entries = [],
moveValueToPath,
getValueByPath
} = (0, _useDataValue.default)(rootRelativeTargetPath);
const {
setNextContainerMode
} = (0, _index6.useSwitchContainerMode)(targetPath);
const {
hasReachedLimit,
setShowStatus
} = (0, _index6.useArrayLimit)(targetPath);
const cancelHandler = (0, _react.useCallback)(() => {
if (hasReachedLimit) {
setShowStatus(false);
}
}, [hasReachedLimit, setShowStatus]);
const showOpenButton = showOpenButtonWhen?.(entries);
const newItemContextProps = {
path,
itemPath,
entries,
commitHandleRef,
switchContainerMode: switchContainerModeRef.current
};
const data = (0, _react.useMemo)(() => {
var _Object$freeze;
if (defaultDataProp) {
return undefined;
}
return {
...isolatedData,
pushContainerItems: [(_Object$freeze = Object.freeze(dataProp)) !== null && _Object$freeze !== void 0 ? _Object$freeze : _index9.clearedData]
};
}, [dataProp, defaultDataProp, isolatedData]);
if (outerData) {
if (!Object.isFrozen(data)) {
Object.assign(data || {}, outerData);
}
}
const defaultData = (0, _react.useMemo)(() => {
return {
...(!dataProp ? isolatedData : null),
pushContainerItems: [Object.freeze(defaultDataProp !== null && defaultDataProp !== void 0 ? defaultDataProp : _index9.clearedData)]
};
}, [dataProp, defaultDataProp, isolatedData]);
const emptyData = (0, _react.useCallback)(data => {
var _ref;
const firstItem = data.pushContainerItems?.[0];
if (firstItem === null || typeof firstItem !== 'object') {
return {
...isolatedData,
pushContainerItems: [null]
};
}
return {
...isolatedData,
pushContainerItems: [(_ref = dataProp !== null && dataProp !== void 0 ? dataProp : defaultDataProp) !== null && _ref !== void 0 ? _ref : _index9.clearedData]
};
}, [dataProp, defaultDataProp, isolatedData]);
const isolationSchema = (0, _react.useMemo)(() => {
const parentSchema = outerContext?.props?.schema;
if (!parentSchema || !targetPath) {
return undefined;
}
if ((0, _zod2.isZodSchema)(parentSchema)) {
const element = (0, _extractZodSubSchema.extractZodSubSchema)(parentSchema, `${targetPath}/0`);
return z.object({
pushContainerItems: z.array(element)
});
} else {
const segments = String(targetPath).split('/').filter(Boolean);
const schemaPointer = `/properties/${segments.join('/properties/')}/items`;
const itemsSchema = _index2.default.has(parentSchema, schemaPointer) ? _index2.default.get(parentSchema, schemaPointer) : undefined;
if (!itemsSchema) {
return undefined;
}
return {
type: 'object',
properties: {
pushContainerItems: {
type: 'array',
items: itemsSchema
}
}
};
}
}, [outerContext?.props?.schema, targetPath]);
return (0, _jsxRuntime.jsx)(_index.default, {
data: data,
defaultData: defaultData,
required: required,
dataReference: dataReference,
emptyData: emptyData,
bubbleValidation: containerModeRef.current === 'view' ? false : bubbleValidation,
commitHandleRef: commitHandleRef,
schema: isolationSchema,
transformOnCommit: ({
pushContainerItems
}) => {
return moveValueToPath(targetPath, typeof insertAt === 'number' ? [...entries.slice(0, insertAt), ...pushContainerItems, ...entries.slice(insertAt)] : [...entries, ...pushContainerItems], targetPath && targetPath !== '/' ? (0, _structuredClone.structuredClone)(getValueByPath('/')) : {});
},
onCommit: (data, options) => {
const {
clearData,
preventCommit
} = options;
if (hasReachedLimit) {
preventCommit();
setShowStatus(true);
} else {
setNextContainerMode('view');
switchContainerModeRef.current?.('view');
clearData();
}
onCommit?.(data, options);
},
children: (0, _jsxRuntime.jsx)(_PushContainerContext.default, {
value: newItemContextProps,
children: (0, _jsxRuntime.jsx)(_SectionContext.default, {
value: sectionContext ? {
...sectionContext,
path: undefined
} : undefined,
children: (0, _jsxRuntime.jsx)(_index4.default, {
path: "/pushContainerItems",
containerMode: showOpenButton ? 'view' : 'edit',
withoutFlex: true,
omitSectionPath: true,
children: (0, _jsxRuntime.jsx)(NewContainer, {
title: title,
openButton: openButton,
switchContainerModeRef: switchContainerModeRef,
showOpenButton: showOpenButton,
cancelHandler: cancelHandler,
containerModeRef: containerModeRef,
rerenderPushContainer: forceUpdate,
preventUncommittedChanges: preventUncommittedChanges,
showResetButton: showResetButton,
outerContext: outerContext,
required: required,
...rest,
children: children
})
})
})
})
});
}
function NewContainer({
title,
openButton,
showOpenButton,
showResetButton,
switchContainerModeRef,
cancelHandler,
containerModeRef,
rerenderPushContainer,
preventUncommittedChanges,
outerContext,
required,
children,
...rest
}) {
const iterateItemContext = (0, _react.useContext)(_IterateItemContext.default);
const {
containerMode,
switchContainerMode
} = iterateItemContext || {};
containerModeRef.current = containerMode;
const {
hasContentChanged,
showStatus
} = (0, _useHandleStatus.default)({
outerContext,
preventUncommittedChanges,
error: pushContainerError,
name: 'push-container'
});
(0, _react.useEffect)(() => {
rerenderPushContainer();
}, [containerMode, rerenderPushContainer]);
const visibilityContext = (0, _react.useContext)(_VisibilityContext.default);
switchContainerModeRef.current = switchContainerMode;
const isVisible = visibilityContext?.isVisible === false ? false : Boolean(!showOpenButton || containerMode === 'edit' || (required || hasContentChanged) && showStatus);
const {
preventUncommittedChangesText
} = (0, _index8.useTranslation)().Isolation;
const {
createButton
} = (0, _index8.useTranslation)().IteratePushContainer;
const {
clearData
} = (0, _react.useContext)(_Context.default) || {};
const restoreOriginalValue = (0, _react.useCallback)(() => {
clearData?.();
}, [clearData]);
const newItemContextProps = {
...iterateItemContext,
restoreOriginalValue
};
const toolbar = (0, _jsxRuntime.jsx)(_index7.default, {
children: (0, _jsxRuntime.jsxs)(_IterateItemContext.default, {
value: newItemContextProps,
children: [(0, _jsxRuntime.jsxs)(_index5.Flex.Horizontal, {
gap: "large",
children: [(0, _jsxRuntime.jsx)(_index3.DoneButton, {
text: createButton
}), showOpenButton && (0, _jsxRuntime.jsx)(_index3.CancelButton, {
onClick: cancelHandler
}), (preventUncommittedChanges || showResetButton) && (0, _jsxRuntime.jsx)(_index3.ResetButton, {
hidden: !(showResetButton || showStatus)
})]
}), preventUncommittedChanges && showStatus && (0, _jsxRuntime.jsx)(_index5.FormStatus, {
noAnimation: false,
show: hasContentChanged,
children: preventUncommittedChangesText
})]
})
});
return (0, _jsxRuntime.jsxs)(_VisibilityContext.default, {
value: {
isVisible,
keepInDOM: false
},
children: [(0, _jsxRuntime.jsx)(_index3.default, {
open: isVisible,
title: title,
toolbar: toolbar,
...rest,
className: (0, _clsx.clsx)('dnb-forms-section-block--error', rest.className),
children: children
}), openButton && typeof showOpenButton === 'boolean' && (0, _jsxRuntime.jsx)(_index5.HeightAnimation, {
open: showOpenButton && containerMode === 'view',
children: openButton
})]
});
}
const pushContainerError = new Error('Iterate.PushContainer');
PushContainer.OpenButton = _OpenButton.default;
(0, _withComponentMarkers.default)(PushContainer, {
_supportsSpacingProps: true
});
var _default = exports.default = PushContainer;
//# sourceMappingURL=PushContainer.js.map