UNPKG

zent

Version:

一套前端设计语言和基于React的实现

62 lines (61 loc) 3.45 kB
import { __assign, __extends } from "tslib"; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import { Children, Component } from 'react'; import cx from 'classnames'; import Icon from '../../icon'; import { isElement } from 'react-is'; var BreadcrumbSteps = (function (_super) { __extends(BreadcrumbSteps, _super); function BreadcrumbSteps() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.onStepChange = function (id) { var onStepChange = _this.props.onStepChange; onStepChange && onStepChange(id); }; _this.renderStepTitle = function (itemProps, index) { var _a = _this.props, sequence = _a.sequence, ghost = _a.ghost; var icon = itemProps.icon, title = itemProps.title; if (icon) { var iconNode = typeof icon === 'string' ? (_jsx(Icon, { type: icon, className: "zent-steps-item__icon" }, void 0)) : (icon); return (_jsxs(_Fragment, { children: [iconNode, title] }, void 0)); } if (sequence) { return (_jsxs(_Fragment, { children: [ghost ? (_jsx("span", __assign({ className: "zent-steps-sequence", "data-zv": '10.0.17' }, { children: index + 1 }), void 0)) : (index + 1 + ". "), title] }, void 0)); } return title; }; return _this; } BreadcrumbSteps.prototype.render = function () { var _this = this; var props = this.props; var className = props.className, children = props.children, current = props.current, onStepChange = props.onStepChange, type = props.type, ghost = props.ghost; var stepWidth = 100 / Children.count(children) + "%"; var isBreadcrumb = type === 'breadcrumb'; var isCard = type === 'card'; var isTabs = type === 'tabs'; var isBreadcrumbGhost = ghost && isBreadcrumb; var stepsCls = cx('zent-steps', className, { 'zent-steps-breadcrumb': isBreadcrumb, 'zent-steps-card': isCard, 'zent-steps-tabs': isTabs, 'zent-steps-breadcrumb-ghost': isBreadcrumbGhost, }); return (_jsx("div", __assign({ className: stepsCls, "data-zv": '10.0.17' }, { children: Children.map(children, function (item, index) { if (!isElement(item)) { return null; } var disabled = item.props.disabled; var isDisabled = disabled && isBreadcrumbGhost; var stepClassName = cx('zent-steps-item', { 'zent-steps-item--finished': isBreadcrumb && index <= current - 1, 'zent-steps-item--current': (isCard || isTabs || isBreadcrumbGhost) && index === current - 1, 'zent-steps-item--clickable': Boolean(onStepChange), 'zent-steps-item--disabled': isDisabled, }); return (_jsx("div", __assign({ className: stepClassName, style: { width: stepWidth }, onClick: function () { return !isDisabled && _this.onStepChange(index + 1); }, "data-zv": '10.0.17' }, { children: _jsx("div", __assign({ className: "zent-steps-step", "data-zv": '10.0.17' }, { children: _this.renderStepTitle(item.props, index) }), void 0) }), void 0)); }) }), void 0)); }; return BreadcrumbSteps; }(Component)); export default BreadcrumbSteps;