@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
314 lines (313 loc) • 12.6 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(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 _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 _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 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,
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)(undefined);
const switchContainerModeRef = (0, _react.useRef)(undefined);
const containerModeRef = (0, _react.useRef)(undefined);
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 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 _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 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 === null || outerContext === void 0 || (_outerContext$props2 = outerContext.props) === null || _outerContext$props2 === void 0 ? void 0 : _outerContext$props2.schema, absolutePath, relativePath]);
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(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);
},
children: (0, _jsxRuntime.jsx)(_PushContainerContext.default, {
value: newItemContextProps,
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 === 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 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.default)('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