@ozen-ui/kit
Version:
React component library
100 lines (99 loc) • 6.42 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useEffect, useMemo } from 'react';
import { logger } from '@ozen-ui/logger';
import { useDevEffect } from '../../../../hooks/useDevEffect';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { isArray, polymorphicComponentWithRef, resolveChildren, } from '../../../../utils';
import { Collapse } from '../../../Collapse';
import { Stack } from '../../../Stack';
import { useStepperVerticalStepHelper, useStepperVerticalCreateStep, } from '../../hooks';
import { useStepperVerticalContext } from '../../StepperVerticalContext';
import { StepperVerticalIconIndicator } from '../StepperVerticalIconIndicator';
import { cnStepperVerticalStep } from './classNames';
import { StepperVerticalStepContent } from './components';
import { STEPPER_VERTICAL_STEP_DEFAULT_TAG, STEPPER_VERTICAL_STEP_DEFAULT_CURRENT, STEPPER_VERTICAL_STEP_DEFAULT_VARIANT, STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM, } from './constants';
import { StepperVerticalStepContext } from './StepperVerticalStepContext';
import { StepperVerticalStepRootContext, useStepperVerticalStepRootContext, } from './StepperVerticalStepRootContext';
export var StepperVerticalStep = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({
name: 'StepperVerticalStep',
props: inProps,
});
var _a = props.variant, variant = _a === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_VARIANT : _a, _b = props.current, current = _b === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_CURRENT : _b, ellipsisProp = props.ellipsis, hint = props.hint, children = props.children, caption = props.caption, action = props.action, _c = props.indicator, indicator = _c === void 0 ? React.createElement(StepperVerticalIconIndicator, null) : _c, className = props.className, _d = props.as, as = _d === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_TAG : _d, substeps = props.substeps, subcontent = props.subcontent, _e = props.custom, custom = _e === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM : _e, openSubcontent = props.openSubcontent, onOpenSubcontentChange = props.onOpenSubcontentChange, onOpenSubstepsChange = props.onOpenSubstepsChange, openSubsteps = props.openSubsteps, other = __rest(props, ["variant", "current", "ellipsis", "hint", "children", "caption", "action", "indicator", "className", "as", "substeps", "subcontent", "custom", "openSubcontent", "onOpenSubcontentChange", "onOpenSubstepsChange", "openSubsteps"]);
useDevEffect(function () {
if (subcontent && substeps) {
logger.error('Нельзя использовать одновременно substeps и subcontent.');
}
}, [substeps, subcontent]);
useDevEffect(function () {
if (!custom) {
return;
}
if (subcontent || substeps || caption || action) {
logger.error('Нельзя использовать блоки при custom === true.');
}
}, [subcontent, substeps, caption, action]);
var stepperVerticalContext = useStepperVerticalContext();
var rootContext = useStepperVerticalStepRootContext();
var isSubstep = !!rootContext;
var hasSubsteps = (function () {
var resolved = resolveChildren(substeps);
if (isArray(resolved)) {
return resolved.length > 0;
}
return !!resolved;
})();
var hasSubcontent = (function () {
var resolved = resolveChildren(subcontent);
if (isArray(resolved)) {
return resolved.length > 0;
}
return !!resolved;
})();
var ellipsis = (function () {
if (ellipsisProp !== undefined) {
return ellipsisProp;
}
return stepperVerticalContext.ellipsis;
})();
var step = useStepperVerticalCreateStep({
onOpenSubcontentChange: onOpenSubcontentChange,
onOpenSubstepsChange: onOpenSubstepsChange,
openSubsteps: openSubsteps,
openSubcontent: openSubcontent,
}, rootContext === null || rootContext === void 0 ? void 0 : rootContext.root);
var _f = useStepperVerticalStepHelper(step), hasNext = _f.hasNext, hasPrevious = _f.hasPrevious;
useEffect(function () {
if (rootContext && !(rootContext === null || rootContext === void 0 ? void 0 : rootContext.root.isSubStepsOpen)) {
step.setIsSubStepsOpen(false);
}
}, [rootContext === null || rootContext === void 0 ? void 0 : rootContext.root.isSubStepsOpen]);
var memoizedContext = useMemo(function () { return ({ variant: variant, current: current, hasSubsteps: hasSubsteps, step: step, hasSubcontent: hasSubcontent }); }, [
variant,
current,
hasSubsteps,
step,
step.isSubStepsOpen,
step.root,
step.isSubcontentOpen,
]);
var memoizedRootContext = useMemo(function () { return ({ root: step }); }, [step, step.isSubStepsOpen, step.root]);
return (React.createElement(React.Fragment, null,
React.createElement(StepperVerticalStepContext.Provider, { value: memoizedContext },
React.createElement(Stack, __assign({}, other, { ref: useMultiRef([step.ref, ref]), as: as, className: cnStepperVerticalStep({
variant: variant,
current: current,
ellipsis: ellipsis,
substep: isSubstep,
hasNext: hasNext,
hasPrevious: hasPrevious,
}, [className]), gap: "m" }),
React.createElement("div", { className: cnStepperVerticalStep('Path') },
React.createElement("div", { className: cnStepperVerticalStep('Indicator') }, indicator)),
React.createElement(Stack, { direction: "column", className: cnStepperVerticalStep('Description', { custom: custom }) },
React.createElement(StepperVerticalStepContent, { step: step, custom: custom, action: action, caption: caption, hasSubcontent: hasSubcontent, subcontent: subcontent, hint: hint }, children)))),
hasSubsteps && (React.createElement(StepperVerticalStepRootContext.Provider, { value: memoizedRootContext },
React.createElement(Collapse, { className: cnStepperVerticalStep('Substeps'), expanded: step.isSubStepsOpen }, substeps)))));
});
StepperVerticalStep.displayName = 'StepperVerticalStep';