@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
148 lines (147 loc) • 6.09 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _Fragment, _Fragment2, _Fragment3;
const _excluded = ["active", "activeWhen", "include", "includeWhen"],
_excluded2 = ["id", "className", "title", "index", "inactive", "include", "includeWhen", "required", "keepInDOM", "prerenderFieldProps", "children"];
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; }
import React, { useContext, useMemo } from 'react';
import classnames from 'classnames';
import WizardContext from '../Context/WizardContext';
import WizardStepContext from './StepContext';
import Flex from '../../../../components/flex/Flex';
import { convertJsxToString, warn } from '../../../../shared/component-helper';
import FieldProvider from '../../Field/Provider';
export function handleDeprecatedProps(_ref) {
let {
active,
activeWhen,
include,
includeWhen
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded);
return _objectSpread({
include: include !== null && include !== void 0 ? include : active,
includeWhen: includeWhen !== null && includeWhen !== void 0 ? includeWhen : activeWhen
}, rest);
}
function Step(props) {
const _handleDeprecatedProp = handleDeprecatedProps(props),
{
id,
className,
title,
index: indexProp,
inactive,
include = true,
includeWhen,
required,
keepInDOM: keepInDOMProp,
prerenderFieldProps,
children
} = _handleDeprecatedProp,
restProps = _objectWithoutProperties(_handleDeprecatedProp, _excluded2);
const {
check,
enableMapOverChildren,
activeIndex,
initialActiveIndex,
totalStepsRef,
stepElementRef,
stepIndexRef,
stepsRef,
keepInDOM
} = useContext(WizardContext) || {};
const wizardStepContext = useContext(WizardStepContext) || {};
const indexFromContext = wizardStepContext.index;
const totalSteps = totalStepsRef === null || totalStepsRef === void 0 ? void 0 : totalStepsRef.current;
const ariaLabel = useMemo(() => convertJsxToString(title), [title]);
const index = useMemo(() => {
if (indexProp !== undefined) {
return indexProp;
}
if (indexFromContext !== undefined) {
return indexFromContext;
}
if (stepsRef !== null && stepsRef !== void 0 && stepsRef.current) {
const {
index
} = Array.from(stepsRef.current.values()).find(({
id: currentId,
title: originalTitleProp,
stringifiedTitle
}) => {
var _originalTitleProp$pr;
if (id !== undefined) {
return id === currentId;
}
const translationId = originalTitleProp === null || originalTitleProp === void 0 ? void 0 : (_originalTitleProp$pr = originalTitleProp['props']) === null || _originalTitleProp$pr === void 0 ? void 0 : _originalTitleProp$pr.id;
if (translationId) {
var _title$props;
return translationId === (title === null || title === void 0 ? void 0 : (_title$props = title['props']) === null || _title$props === void 0 ? void 0 : _title$props.id);
}
if (stringifiedTitle) {
return stringifiedTitle === ariaLabel;
}
return originalTitleProp === title;
}) || {};
if (index !== undefined) {
return index;
}
}
if (totalSteps && stepIndexRef) {
stepIndexRef.current += 1;
}
return stepIndexRef === null || stepIndexRef === void 0 ? void 0 : stepIndexRef.current;
}, [indexProp, stepsRef, totalSteps, stepIndexRef, indexFromContext, title, id, ariaLabel]);
if (index >= totalSteps) {
enableMapOverChildren();
}
if (prerenderFieldProps) {
return children;
}
if (include === false) {
return _Fragment || (_Fragment = React.createElement(React.Fragment, null));
}
if (includeWhen && !check({
visibleWhen: includeWhen
})) {
return _Fragment2 || (_Fragment2 = React.createElement(React.Fragment, null));
}
const fieldProps = typeof required === 'boolean' ? {
required
} : undefined;
const innerRef = !prerenderFieldProps && activeIndex === index ? stepElementRef : null;
const content = React.createElement(WizardStepContext.Provider, {
value: {
index
}
}, React.createElement(Flex.Stack, _extends({
className: classnames('dnb-forms-step', className),
element: "section",
"aria-label": ariaLabel,
innerRef: innerRef,
tabIndex: -1
}, restProps), fieldProps ? React.createElement(FieldProvider, fieldProps, children) : children));
if (activeIndex !== index || includeWhen && !check({
visibleWhen: includeWhen
})) {
if (keepInDOMProp !== null && keepInDOMProp !== void 0 ? keepInDOMProp : keepInDOM) {
return React.createElement("div", {
title: "Wizard Step",
hidden: true
}, content);
} else {
if (initialActiveIndex > 0) {
warn(`initialActiveIndex={${initialActiveIndex}} is used. Fields of previews steps may not validate. You can use "keepInDOM" to always run validation.`);
}
}
return _Fragment3 || (_Fragment3 = React.createElement(React.Fragment, null));
}
return React.createElement(React.Fragment, null, content);
}
Step._supportsSpacingProps = true;
export default Step;
//# sourceMappingURL=Step.js.map