@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
138 lines (137 loc) • 3.96 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useContext, useMemo } from 'react';
import classnames from 'classnames';
import WizardContext from "../Context/WizardContext.js";
import WizardStepContext from "./StepContext.js";
import Flex from "../../../../components/flex/Flex.js";
import { convertJsxToString } from "../../../../shared/component-helper.js";
import FieldProvider from "../../Field/Provider/index.js";
export function handleDeprecatedProps({
active,
activeWhen,
include,
includeWhen,
...rest
}) {
return {
include: include !== null && include !== void 0 ? include : active,
includeWhen: includeWhen !== null && includeWhen !== void 0 ? includeWhen : activeWhen,
...rest
};
}
function Step(props) {
const {
id,
className,
title,
index: indexProp,
inactive,
include = true,
includeWhen,
required,
keepInDOM: keepInDOMProp,
prerenderFieldProps,
children,
...restProps
} = handleDeprecatedProps(props);
const {
check,
enableMapOverChildren,
activeIndex,
totalStepsRef,
stepElementRef,
stepIndexRef,
stepsRef,
keepInDOM
} = useContext(WizardContext) || {};
const wizardStepContext = useContext(WizardStepContext) || {};
const indexFromContext = wizardStepContext.index;
const totalSteps = totalStepsRef?.current;
const ariaLabel = useMemo(() => convertJsxToString(title), [title]);
const index = useMemo(() => {
if (indexProp !== undefined) {
return indexProp;
}
if (indexFromContext !== undefined) {
return indexFromContext;
}
if (stepsRef?.current) {
const {
index
} = Array.from(stepsRef.current.values()).find(({
id: currentId,
title: originalTitleProp,
stringifiedTitle
}) => {
if (id !== undefined) {
return id === currentId;
}
const translationId = originalTitleProp?.['props']?.id;
if (translationId) {
return translationId === title?.['props']?.id;
}
if (stringifiedTitle) {
return stringifiedTitle === ariaLabel;
}
return originalTitleProp === title;
}) || {};
if (index !== undefined) {
return index;
}
}
if (totalSteps && stepIndexRef) {
stepIndexRef.current += 1;
}
return stepIndexRef?.current;
}, [indexProp, stepsRef, totalSteps, stepIndexRef, indexFromContext, title, id, ariaLabel]);
if (!prerenderFieldProps && index >= totalSteps) {
enableMapOverChildren();
}
if (include === false) {
return null;
}
if (includeWhen && !check({
visibleWhen: includeWhen
})) {
return null;
}
const fieldProps = typeof required === 'boolean' ? {
required
} : undefined;
const childrenWithFieldProvider = fieldProps ? React.createElement(FieldProvider, fieldProps, children) : children;
if (prerenderFieldProps) {
return React.createElement(WizardStepContext.Provider, {
value: {
index
}
}, childrenWithFieldProvider);
}
const innerRef = activeIndex === index ? stepElementRef : null;
const childrenWithFlex = 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), childrenWithFieldProvider));
if (activeIndex !== index || includeWhen && !check({
visibleWhen: includeWhen
})) {
if (keepInDOMProp !== null && keepInDOMProp !== void 0 ? keepInDOMProp : keepInDOM) {
return React.createElement("div", {
title: "Wizard Step",
hidden: true
}, childrenWithFlex);
}
return null;
}
return childrenWithFlex;
}
Step._supportsSpacingProps = true;
export default Step;
//# sourceMappingURL=Step.js.map