@ozen-ui/kit
Version:
React component library
103 lines (102 loc) • 6.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepperVerticalStep = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var logger_1 = require("@ozen-ui/logger");
var useDevEffect_1 = require("../../../../hooks/useDevEffect");
var useMultiRef_1 = require("../../../../hooks/useMultiRef");
var useThemeProps_1 = require("../../../../hooks/useThemeProps");
var utils_1 = require("../../../../utils");
var Collapse_1 = require("../../../Collapse");
var Stack_1 = require("../../../Stack");
var hooks_1 = require("../../hooks");
var StepperVerticalContext_1 = require("../../StepperVerticalContext");
var StepperVerticalIconIndicator_1 = require("../StepperVerticalIconIndicator");
var classNames_1 = require("./classNames");
var components_1 = require("./components");
var constants_1 = require("./constants");
var StepperVerticalStepContext_1 = require("./StepperVerticalStepContext");
var StepperVerticalStepRootContext_1 = require("./StepperVerticalStepRootContext");
exports.StepperVerticalStep = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
name: 'StepperVerticalStep',
props: inProps,
});
var _a = props.variant, variant = _a === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_VARIANT : _a, _b = props.current, current = _b === void 0 ? constants_1.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_1.default.createElement(StepperVerticalIconIndicator_1.StepperVerticalIconIndicator, null) : _c, className = props.className, _d = props.as, as = _d === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_TAG : _d, substeps = props.substeps, subcontent = props.subcontent, _e = props.custom, custom = _e === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM : _e, openSubcontent = props.openSubcontent, onOpenSubcontentChange = props.onOpenSubcontentChange, onOpenSubstepsChange = props.onOpenSubstepsChange, openSubsteps = props.openSubsteps, other = tslib_1.__rest(props, ["variant", "current", "ellipsis", "hint", "children", "caption", "action", "indicator", "className", "as", "substeps", "subcontent", "custom", "openSubcontent", "onOpenSubcontentChange", "onOpenSubstepsChange", "openSubsteps"]);
(0, useDevEffect_1.useDevEffect)(function () {
if (subcontent && substeps) {
logger_1.logger.error('Нельзя использовать одновременно substeps и subcontent.');
}
}, [substeps, subcontent]);
(0, useDevEffect_1.useDevEffect)(function () {
if (!custom) {
return;
}
if (subcontent || substeps || caption || action) {
logger_1.logger.error('Нельзя использовать блоки при custom === true.');
}
}, [subcontent, substeps, caption, action]);
var stepperVerticalContext = (0, StepperVerticalContext_1.useStepperVerticalContext)();
var rootContext = (0, StepperVerticalStepRootContext_1.useStepperVerticalStepRootContext)();
var isSubstep = !!rootContext;
var hasSubsteps = (function () {
var resolved = (0, utils_1.resolveChildren)(substeps);
if ((0, utils_1.isArray)(resolved)) {
return resolved.length > 0;
}
return !!resolved;
})();
var hasSubcontent = (function () {
var resolved = (0, utils_1.resolveChildren)(subcontent);
if ((0, utils_1.isArray)(resolved)) {
return resolved.length > 0;
}
return !!resolved;
})();
var ellipsis = (function () {
if (ellipsisProp !== undefined) {
return ellipsisProp;
}
return stepperVerticalContext.ellipsis;
})();
var step = (0, hooks_1.useStepperVerticalCreateStep)({
onOpenSubcontentChange: onOpenSubcontentChange,
onOpenSubstepsChange: onOpenSubstepsChange,
openSubsteps: openSubsteps,
openSubcontent: openSubcontent,
}, rootContext === null || rootContext === void 0 ? void 0 : rootContext.root);
var _f = (0, hooks_1.useStepperVerticalStepHelper)(step), hasNext = _f.hasNext, hasPrevious = _f.hasPrevious;
(0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(function () { return ({ root: step }); }, [step, step.isSubStepsOpen, step.root]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(StepperVerticalStepContext_1.StepperVerticalStepContext.Provider, { value: memoizedContext },
react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({}, other, { ref: (0, useMultiRef_1.useMultiRef)([step.ref, ref]), as: as, className: (0, classNames_1.cnStepperVerticalStep)({
variant: variant,
current: current,
ellipsis: ellipsis,
substep: isSubstep,
hasNext: hasNext,
hasPrevious: hasPrevious,
}, [className]), gap: "m" }),
react_1.default.createElement("div", { className: (0, classNames_1.cnStepperVerticalStep)('Path') },
react_1.default.createElement("div", { className: (0, classNames_1.cnStepperVerticalStep)('Indicator') }, indicator)),
react_1.default.createElement(Stack_1.Stack, { direction: "column", className: (0, classNames_1.cnStepperVerticalStep)('Description', { custom: custom }) },
react_1.default.createElement(components_1.StepperVerticalStepContent, { step: step, custom: custom, action: action, caption: caption, hasSubcontent: hasSubcontent, subcontent: subcontent, hint: hint }, children)))),
hasSubsteps && (react_1.default.createElement(StepperVerticalStepRootContext_1.StepperVerticalStepRootContext.Provider, { value: memoizedRootContext },
react_1.default.createElement(Collapse_1.Collapse, { className: (0, classNames_1.cnStepperVerticalStep)('Substeps'), expanded: step.isSubStepsOpen }, substeps)))));
});
exports.StepperVerticalStep.displayName = 'StepperVerticalStep';