@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
301 lines (300 loc) • 12.8 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
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 _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");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function PushContainer(props) {
var _outerContext$props2;
const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
const outerContext = (0, _react.useContext)(_Context.default);
const {
data: outerData,
required: requiredInherited
} = outerContext;
const {
data: dataProp,
defaultData: defaultDataProp,
isolatedData,
bubbleValidation,
preventUncommittedChanges = props === null || props === void 0 ? void 0 : props.requireCommit,
requireCommit,
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 commitHandleRef = (0, _react.useRef)();
const switchContainerModeRef = (0, _react.useRef)();
const containerModeRef = (0, _react.useRef)();
const {
value: entries = [],
moveValueToPath,
getValueByPath
} = (0, _useDataValue.default)(path || itemPath);
const {
setNextContainerMode
} = (0, _index6.useSwitchContainerMode)(path || absolutePath);
const {
hasReachedLimit,
setShowStatus
} = (0, _index6.useArrayLimit)(path || absolutePath);
const cancelHandler = (0, _react.useCallback)(() => {
if (hasReachedLimit) {
setShowStatus(false);
}
}, [hasReachedLimit, setShowStatus]);
const showOpenButton = showOpenButtonWhen === null || showOpenButtonWhen === void 0 ? void 0 : showOpenButtonWhen(entries);
const newItemContextProps = {
path,
itemPath,
entries,
commitHandleRef,
switchContainerMode: switchContainerModeRef.current
};
const data = (0, _react.useMemo)(() => {
var _Object$freeze;
if (defaultDataProp) {
return;
}
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 _data$pushContainerIt, _ref;
const firstItem = (_data$pushContainerIt = data.pushContainerItems) === null || _data$pushContainerIt === void 0 ? void 0 : _data$pushContainerIt[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)(() => {
var _outerContext$props;
const parentSchema = outerContext === null || outerContext === void 0 || (_outerContext$props = outerContext.props) === null || _outerContext$props === void 0 ? void 0 : _outerContext$props.schema;
const targetPath = absolutePath || relativePath;
if (!parentSchema || !targetPath) {
return;
}
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;
}
return {
type: 'object',
properties: {
pushContainerItems: {
type: 'array',
items: itemsSchema
}
}
};
}
}, [outerContext === null || outerContext === void 0 || (_outerContext$props2 = outerContext.props) === null || _outerContext$props2 === void 0 ? void 0 : _outerContext$props2.schema, absolutePath, relativePath]);
return _react.default.createElement(_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(absolutePath || relativePath, typeof insertAt === 'number' ? [...entries.slice(0, insertAt), ...pushContainerItems, ...entries.slice(insertAt)] : [...entries, ...pushContainerItems], absolutePath ? (0, _structuredClone.structuredClone)(getValueByPath('/')) : {});
},
onCommit: (data, options) => {
const {
clearData,
preventCommit
} = options;
if (hasReachedLimit) {
preventCommit();
setShowStatus(true);
} else {
var _switchContainerModeR;
setNextContainerMode('view');
(_switchContainerModeR = switchContainerModeRef.current) === null || _switchContainerModeR === void 0 || _switchContainerModeR.call(switchContainerModeRef, 'view');
clearData();
}
onCommit === null || onCommit === void 0 || onCommit(data, options);
}
}, _react.default.createElement(_PushContainerContext.default.Provider, {
value: newItemContextProps
}, _react.default.createElement(_index4.default, {
path: "/pushContainerItems",
containerMode: showOpenButton ? 'view' : 'edit',
withoutFlex: true,
omitSectionPath: true
}, _react.default.createElement(NewContainer, _extends({
title: title,
openButton: openButton,
switchContainerModeRef: switchContainerModeRef,
showOpenButton: showOpenButton,
cancelHandler: cancelHandler,
containerModeRef: containerModeRef,
rerenderPushContainer: forceUpdate,
preventUncommittedChanges: preventUncommittedChanges,
showResetButton: showResetButton,
outerContext: outerContext,
required: required
}, rest), children))));
}
function NewContainer({
title,
openButton,
showOpenButton,
showResetButton,
switchContainerModeRef,
cancelHandler,
containerModeRef,
rerenderPushContainer,
preventUncommittedChanges,
outerContext,
required,
children,
...rest
}) {
var _DoneButton, _CancelButton, _FormStatus;
const {
containerMode,
switchContainerMode
} = (0, _react.useContext)(_IterateItemContext.default) || {};
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 === null || visibilityContext === void 0 ? void 0 : 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 === null || clearData === void 0 || clearData();
}, [clearData]);
const toolbar = _react.default.createElement(_index7.default, null, _react.default.createElement(_IterateItemContext.default.Consumer, null, context => {
const newItemContextProps = {
...context,
restoreOriginalValue
};
return _react.default.createElement(_IterateItemContext.default.Provider, {
value: newItemContextProps
}, _react.default.createElement(_index5.Flex.Horizontal, {
gap: "large"
}, _DoneButton || (_DoneButton = _react.default.createElement(_index3.DoneButton, {
text: createButton
})), showOpenButton && (_CancelButton || (_CancelButton = _react.default.createElement(_index3.CancelButton, {
onClick: cancelHandler
}))), (preventUncommittedChanges || showResetButton) && _react.default.createElement(_index3.ResetButton, {
hidden: !(showResetButton || showStatus)
})), preventUncommittedChanges && showStatus && (_FormStatus || (_FormStatus = _react.default.createElement(_index5.FormStatus, {
no_animation: false,
show: hasContentChanged
}, preventUncommittedChangesText))));
}));
return _react.default.createElement(_VisibilityContext.default.Provider, {
value: {
isVisible,
keepInDOM: false
}
}, _react.default.createElement(_index3.default, _extends({
open: isVisible,
title: title,
toolbar: toolbar
}, rest, {
className: (0, _classnames.default)('dnb-forms-section-block--error', rest.className)
}), children), openButton && typeof showOpenButton === 'boolean' && _react.default.createElement(_index5.HeightAnimation, {
open: showOpenButton && containerMode === 'view'
}, openButton));
}
const pushContainerError = new Error('Iterate.PushContainer');
PushContainer.OpenButton = _OpenButton.default;
PushContainer._supportsSpacingProps = true;
var _default = exports.default = PushContainer;
//# sourceMappingURL=PushContainer.js.map