@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
404 lines (403 loc) • 18.7 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _components = require("../../../../components");
var _componentHelper = require("../../../../shared/component-helper");
var _isAsync = require("../../../../shared/helpers/isAsync");
var _useId = _interopRequireDefault(require("../../../../shared/helpers/useId"));
var _WizardContext = _interopRequireDefault(require("../Context/WizardContext"));
var _Context = _interopRequireDefault(require("../../DataContext/Context"));
var _Handler = _interopRequireDefault(require("../../Form/Handler/Handler"));
var _useSharedState = require("../../../../shared/helpers/useSharedState");
var _useHandleLayoutEffect = _interopRequireDefault(require("./useHandleLayoutEffect"));
var _useStepAnimation = _interopRequireDefault(require("./useStepAnimation"));
var _useVisibility = _interopRequireDefault(require("../../Form/Visibility/useVisibility"));
var _DisplaySteps = require("./DisplaySteps");
var _IterateOverSteps = require("./IterateOverSteps");
var _PrerenderFieldPropsOfOtherSteps = require("./PrerenderFieldPropsOfOtherSteps");
const _excluded = ["variant", "sidebarId"],
_excluded2 = ["className", "id", "mode", "initialActiveIndex", "omitScrollManagement", "omitFocusManagement", "onStepChange", "children", "noAnimation", "expandedInitially", "prerenderFieldProps", "keepInDOM", "validationMode", "outset"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
const useLayoutEffect = typeof window === 'undefined' ? _react.default.useEffect : _react.default.useLayoutEffect;
function handleDeprecatedProps(props) {
const {
variant,
sidebarId
} = props,
rest = _objectWithoutProperties(props, _excluded);
return rest;
}
function WizardContainer(props) {
var _dataContext$setField;
const _handleDeprecatedProp = handleDeprecatedProps(props),
{
className,
id: idProp,
mode = 'strict',
initialActiveIndex = 0,
omitScrollManagement,
omitFocusManagement,
onStepChange,
children,
noAnimation = false,
expandedInitially = false,
prerenderFieldProps = true,
keepInDOM,
validationMode,
outset = true
} = _handleDeprecatedProp,
rest = _objectWithoutProperties(_handleDeprecatedProp, _excluded2);
const dataContext = (0, _react.useContext)(_Context.default);
const {
hasContext,
setFormState,
handleSubmitCall,
setShowAllErrors,
setSubmitState
} = dataContext;
const id = (0, _useId.default)(idProp);
const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
const activeIndexRef = (0, _react.useRef)(initialActiveIndex);
const totalStepsRef = (0, _react.useRef)(NaN);
const submitCountRef = (0, _react.useRef)(0);
const visitedStepsRef = (0, _react.useRef)(new Map());
const fieldErrorRef = (0, _react.useRef)(new Map());
const storeStepStateRef = (0, _react.useRef)(new Map());
const hasErrorInOtherStepRef = (0, _react.useRef)(false);
const elementRef = (0, _react.useRef)();
const stepElementRef = (0, _react.useRef)();
const preventNextStepRef = (0, _react.useRef)(false);
const stepsRef = (0, _react.useRef)(new Map());
const tmpStepsRef = (0, _react.useRef)();
const stepIndexRef = (0, _react.useRef)(-1);
const updateTitlesRef = (0, _react.useRef)();
const prerenderFieldPropsRef = (0, _react.useRef)({});
const bypassOnNavigation = validationMode === 'bypassOnNavigation';
const sharedStateRef = (0, _react.useRef)();
sharedStateRef.current = (0, _useSharedState.useSharedState)(hasContext && id ? (0, _useSharedState.createReferenceKey)(id, 'wizard') : undefined);
const hasFieldErrorInStep = (0, _react.useCallback)(index => {
return Array.from(fieldErrorRef.current.values()).some(_ref => {
let {
index: i,
hasError
} = _ref;
return i === index && hasError;
});
}, []);
const setStepAsVisited = (0, _react.useCallback)(index => {
visitedStepsRef.current.set(index, true);
}, []);
(0, _react.useEffect)(() => {
if (!initialActiveIndex) {
setStepAsVisited(activeIndexRef.current);
}
}, [initialActiveIndex, setStepAsVisited]);
const writeStepsState = (0, _react.useCallback)(function () {
let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
let forStates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['unknown', 'error'];
for (let i = 0; i < totalStepsRef.current; i++) {
if (index !== undefined && index !== i) {
continue;
}
let result = undefined;
const existingState = storeStepStateRef.current.get(i);
if (forStates.includes('unknown')) {
const state = i < activeIndexRef.current && visitedStepsRef.current.get(i) === undefined;
if (state) {
result = 'unknown';
}
}
if (forStates.includes('error')) {
const state = hasFieldErrorInStep(i);
if (state) {
result = 'error';
} else if (existingState === 'error') {
if (i === activeIndexRef.current) {
result = undefined;
} else {
result = existingState;
}
}
}
storeStepStateRef.current.set(i, result);
}
}, [hasFieldErrorInStep]);
const hasInvalidStepsState = (0, _react.useCallback)(function () {
let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
let forStates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['unknown', 'error'];
for (let i = 0; i < totalStepsRef.current; i++) {
if (index !== undefined && index !== i) {
continue;
}
const state = storeStepStateRef.current.get(i);
if (forStates.includes('unknown')) {
if (state === 'unknown') {
return true;
}
}
if (forStates.includes('error')) {
if (state === 'error') {
return true;
}
}
}
return false;
}, []);
const setFieldError = (0, _react.useCallback)((index, path, hasError) => {
fieldErrorRef.current.set(path, {
index,
hasError
});
}, []);
const preventNavigation = (0, _react.useCallback)(function () {
let shouldPrevent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
preventNextStepRef.current = shouldPrevent;
}, []);
const getStepChangeOptions = (0, _react.useCallback)(index => {
var _stepsRef$current$get, _stepsRef$current$get2;
const previousIndex = activeIndexRef.current;
const options = {
preventNavigation,
previousStep: {
index: previousIndex
}
};
const id = (_stepsRef$current$get = stepsRef.current.get(index)) === null || _stepsRef$current$get === void 0 ? void 0 : _stepsRef$current$get.id;
if (id) {
Object.assign(options, {
id
});
}
const previousId = (_stepsRef$current$get2 = stepsRef.current.get(previousIndex)) === null || _stepsRef$current$get2 === void 0 ? void 0 : _stepsRef$current$get2.id;
if (previousId) {
Object.assign(options.previousStep, {
id: previousId
});
}
return options;
}, [preventNavigation]);
const callOnStepChange = (0, _react.useCallback)(async (index, mode) => {
if ((0, _isAsync.isAsync)(onStepChange)) {
return await onStepChange(index, mode, getStepChangeOptions(index));
}
return onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(index, mode, getStepChangeOptions(index));
}, [getStepChangeOptions, onStepChange]);
const {
setFocus,
scrollToTop,
isInteractionRef
} = (0, _useHandleLayoutEffect.default)({
elementRef,
stepElementRef
});
const executeLayoutAnimationRef = (0, _react.useRef)();
(0, _useStepAnimation.default)({
activeIndexRef,
stepElementRef,
executeLayoutAnimationRef
});
const handleLayoutEffect = (0, _react.useCallback)(() => {
if (!omitFocusManagement) {
setFocus();
}
if (!omitScrollManagement) {
scrollToTop();
}
}, [omitScrollManagement, omitFocusManagement, setFocus, scrollToTop]);
const handleStepChange = (0, _react.useCallback)(async _ref2 => {
let {
index,
skipErrorCheck,
skipStepChangeCall,
skipStepChangeCallBeforeMounted,
skipStepChangeCallFromHook,
mode
} = _ref2;
let didSubmit = false;
const onSubmit = async () => {
if (!skipStepChangeCallFromHook) {
var _sharedStateRef$curre, _sharedStateRef$curre2, _sharedStateRef$curre3;
(_sharedStateRef$curre = sharedStateRef.current) === null || _sharedStateRef$curre === void 0 ? void 0 : (_sharedStateRef$curre2 = _sharedStateRef$curre.data) === null || _sharedStateRef$curre2 === void 0 ? void 0 : (_sharedStateRef$curre3 = _sharedStateRef$curre2.onStepChange) === null || _sharedStateRef$curre3 === void 0 ? void 0 : _sharedStateRef$curre3.call(_sharedStateRef$curre2, index, mode, getStepChangeOptions(index));
}
let result = undefined;
if (!skipStepChangeCall && !(skipStepChangeCallBeforeMounted && !isInteractionRef.current)) {
result = await callOnStepChange(index, mode);
}
setFormState('abort');
setShowAllErrors(bypassOnNavigation ? false : hasInvalidStepsState(index, ['error']));
if (!preventNextStepRef.current && !(result instanceof Error)) {
handleLayoutEffect();
activeIndexRef.current = index;
setStepAsVisited(activeIndexRef.current);
forceUpdate();
}
preventNextStepRef.current = false;
didSubmit = true;
return result;
};
await handleSubmitCall({
skipErrorCheck,
skipFieldValidation: skipErrorCheck,
enableAsyncBehavior: (0, _isAsync.isAsync)(onStepChange),
onSubmit: bypassOnNavigation ? () => null : onSubmit
});
if (!didSubmit) {
if (bypassOnNavigation) {
await onSubmit();
} else {
if (mode === 'next') {
writeStepsState(activeIndexRef.current, ['error']);
if (!hasInvalidStepsState(activeIndexRef.current)) {
await onSubmit();
}
}
}
}
}, [bypassOnNavigation, callOnStepChange, getStepChangeOptions, handleLayoutEffect, handleSubmitCall, hasInvalidStepsState, isInteractionRef, onStepChange, setFormState, setShowAllErrors, setStepAsVisited, writeStepsState]);
const setActiveIndex = (0, _react.useCallback)((index, options) => {
if (index === activeIndexRef.current) {
return;
}
const mode = index > activeIndexRef.current ? 'next' : 'previous';
handleStepChange(_objectSpread({
index,
skipErrorCheck: mode === 'previous',
mode
}, options));
}, [handleStepChange]);
const handlePrevious = (0, _react.useCallback)(() => {
setActiveIndex(activeIndexRef.current - 1);
}, [setActiveIndex]);
const handleNext = (0, _react.useCallback)(() => {
setActiveIndex(activeIndexRef.current + 1);
}, [setActiveIndex]);
const handleChange = (0, _react.useCallback)(_ref3 => {
let {
current_step
} = _ref3;
setActiveIndex(current_step, mode === 'loose' ? {
skipErrorCheck: true
} : undefined);
}, [mode, setActiveIndex]);
const setFormError = (0, _react.useCallback)(error => {
setSubmitState === null || setSubmitState === void 0 ? void 0 : setSubmitState({
error
});
}, [setSubmitState]);
const handleSubmit = (0, _react.useCallback)(_ref4 => {
let {
preventSubmit
} = _ref4;
submitCountRef.current += 1;
if (hasInvalidStepsState()) {
return preventSubmit();
}
if (activeIndexRef.current + 1 < totalStepsRef.current) {
handleNext();
preventSubmit();
}
}, [hasInvalidStepsState, handleNext]);
(_dataContext$setField = dataContext.setFieldEventListener) === null || _dataContext$setField === void 0 ? void 0 : _dataContext$setField.call(dataContext, undefined, 'onSubmit', handleSubmit);
const {
check
} = (0, _useVisibility.default)();
const mapOverChildrenRef = (0, _react.useRef)(false);
const enableMapOverChildren = (0, _react.useCallback)(() => {
mapOverChildrenRef.current = true;
}, []);
const activeIndex = activeIndexRef.current;
const providerValue = (0, _react.useMemo)(() => {
return {
id,
activeIndex,
initialActiveIndex,
stepElementRef,
stepsRef,
updateTitlesRef,
activeIndexRef,
stepIndexRef,
totalStepsRef,
submitCountRef,
prerenderFieldProps,
prerenderFieldPropsRef,
hasErrorInOtherStepRef,
keepInDOM,
enableMapOverChildren,
mapOverChildrenRef,
check,
setActiveIndex,
handlePrevious,
hasInvalidStepsState,
writeStepsState,
setFieldError,
handleNext,
setFormError
};
}, [id, activeIndex, initialActiveIndex, prerenderFieldProps, keepInDOM, enableMapOverChildren, check, setActiveIndex, handlePrevious, hasInvalidStepsState, writeStepsState, setFieldError, handleNext, setFormError]);
useLayoutEffect(() => {
if (id && hasContext) {
sharedStateRef.current.extend(providerValue);
}
}, [hasContext, id, providerValue]);
useLayoutEffect(() => {
var _updateTitlesRef$curr;
(_updateTitlesRef$curr = updateTitlesRef.current) === null || _updateTitlesRef$curr === void 0 ? void 0 : _updateTitlesRef$curr.call(updateTitlesRef);
}, [stepsRef.current]);
const stepsLengthDidChange = (0, _react.useCallback)(() => {
const tmpCount = tmpStepsRef.current;
if (tmpCount === undefined) {
return false;
}
const count = totalStepsRef.current;
return count !== 0 && tmpCount !== 0 && count !== tmpCount;
}, []);
useLayoutEffect(() => {
if (stepsLengthDidChange()) {
var _executeLayoutAnimati;
callOnStepChange(activeIndexRef.current, 'stepListModified');
(_executeLayoutAnimati = executeLayoutAnimationRef.current) === null || _executeLayoutAnimati === void 0 ? void 0 : _executeLayoutAnimati.call(executeLayoutAnimationRef);
}
tmpStepsRef.current = totalStepsRef.current;
}, [totalStepsRef.current, callOnStepChange, stepsLengthDidChange]);
if (!hasContext) {
(0, _componentHelper.warn)('You may wrap Wizard.Container in Form.Handler');
return _react.default.createElement(_Handler.default, null, _react.default.createElement(WizardContainer, _extends({}, props, {
id: id
})));
}
return _react.default.createElement(_WizardContext.default.Provider, {
value: providerValue
}, _react.default.createElement(_components.Space, _extends({
className: (0, _classnames.default)('dnb-forms-wizard-layout', className),
innerRef: elementRef
}, rest), _react.default.createElement(_DisplaySteps.DisplaySteps, {
mode: mode,
noAnimation: noAnimation,
expandedInitially: expandedInitially,
handleChange: handleChange,
outset: outset
}), _react.default.createElement("div", {
className: "dnb-forms-wizard-layout__contents"
}, _react.default.createElement(_IterateOverSteps.IterateOverSteps, null, children))), prerenderFieldProps && !keepInDOM && _react.default.createElement(_PrerenderFieldPropsOfOtherSteps.PrerenderFieldPropsOfOtherSteps, {
prerenderFieldPropsRef: prerenderFieldPropsRef
}));
}
WizardContainer._supportsSpacingProps = true;
var _default = exports.default = WizardContainer;
//# sourceMappingURL=WizardContainer.js.map