@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
55 lines (54 loc) • 2.33 kB
JavaScript
import { _ as __rest } from "./tslib.es6.js";
import React__default, { useContext } from "react";
import classNames from "classnames";
import { D as DataContext } from "./context3.js";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { title: "", description: "", value: 0, icon: null });
const Step = (props) => {
const _a = Object.assign(Object.assign({}, defaultProps), props), { children, title, description, value, icon, className } = _a, restProps = __rest(_a, ["children", "title", "description", "value", "icon", "className"]);
const parent = useContext(DataContext);
const dot = parent.propSteps.dot;
const getCurrentStatus = () => {
const index = value;
if (index < +parent.propSteps.value)
return "finish";
return index === +parent.propSteps.value ? "process" : "wait";
};
const handleClickStep = () => {
var _a2, _b;
((_a2 = parent.propSteps) === null || _a2 === void 0 ? void 0 : _a2.onStepClick) && ((_b = parent.propSteps) === null || _b === void 0 ? void 0 : _b.onStepClick(value));
};
const classPrefix = `nut-step`;
const classes = classNames(classPrefix, {
[`${classPrefix}-${getCurrentStatus()}`]: true
}, className);
const renderIconClass = () => {
if (icon) {
return `${classPrefix}-icon is-icon`;
}
if (!dot && !icon) {
return `${classPrefix}-icon is-text`;
}
return `${classPrefix}-icon`;
};
return React__default.createElement(
"div",
Object.assign({ className: classes }, restProps, { onClick: handleClickStep }),
React__default.createElement(
"div",
{ className: "nut-step-head" },
React__default.createElement("div", { className: "nut-step-line" }),
React__default.createElement("div", { className: renderIconClass() }, icon || !dot && React__default.createElement("span", { className: "nut-step-inner" }, value))
),
(title || description) && React__default.createElement(
"div",
{ className: "nut-step-main" },
React__default.createElement("span", { className: "nut-step-title" }, title),
description && React__default.createElement("span", { className: "nut-step-description" }, description)
)
);
};
Step.displayName = "NutStep";
export {
Step as default
};