zent
Version:
一套前端设计语言和基于React的实现
62 lines (61 loc) • 3.45 kB
JavaScript
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;