1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
8 |
|
9 | var _react = require('react');
|
10 |
|
11 | var _react2 = _interopRequireDefault(_react);
|
12 |
|
13 | var _reactDom = require('react-dom');
|
14 |
|
15 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
16 |
|
17 | var _classnames = require('classnames');
|
18 |
|
19 | var _classnames2 = _interopRequireDefault(_classnames);
|
20 |
|
21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
22 |
|
23 | function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
24 |
|
25 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
26 |
|
27 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
28 |
|
29 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
30 |
|
31 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
32 |
|
33 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
34 |
|
35 | var propTypes = {
|
36 | prefixCls: _react.PropTypes.string,
|
37 | iconPrefix: _react.PropTypes.string,
|
38 | labelPlacement: _react.PropTypes.string,
|
39 | children: _react.PropTypes.any,
|
40 | current: _react.PropTypes.number,
|
41 | status: _react.PropTypes.oneOf(['wait', 'process', 'finish', 'error']),
|
42 | direction: _react.PropTypes.oneOf(['horizontal', 'vertical']),
|
43 | size: _react.PropTypes.oneOf(['default', 'small'])
|
44 | };
|
45 |
|
46 | var defaultProps = {
|
47 | prefixCls: 'u-steps',
|
48 | iconPrefix: 'u',
|
49 | direction: 'horizontal',
|
50 | labelPlacement: 'horizontal',
|
51 | current: 0,
|
52 | status: 'process',
|
53 | size: 'default'
|
54 | };
|
55 |
|
56 | var Steps = function (_React$Component) {
|
57 | _inherits(Steps, _React$Component);
|
58 |
|
59 | function Steps(props) {
|
60 | _classCallCheck(this, Steps);
|
61 |
|
62 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
63 |
|
64 | _this.calcLastStepOffsetWidth = function () {
|
65 | var domNode = _reactDom2["default"].findDOMNode(_this);
|
66 | if (domNode.children.length > 0) {
|
67 | if (_this.calcTimeout) {
|
68 | clearTimeout(_this.calcTimeout);
|
69 | }
|
70 | _this.calcTimeout = setTimeout(function () {
|
71 |
|
72 | var lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1;
|
73 | if (_this.state.lastStepOffsetWidth === lastStepOffsetWidth) {
|
74 | return;
|
75 | }
|
76 | _this.setState({ lastStepOffsetWidth: lastStepOffsetWidth });
|
77 | });
|
78 | }
|
79 | };
|
80 |
|
81 | _this.state = {
|
82 | lastStepOffsetWidth: 0
|
83 | };
|
84 | return _this;
|
85 | }
|
86 |
|
87 | Steps.prototype.componentDidMount = function componentDidMount() {
|
88 | this.calcLastStepOffsetWidth();
|
89 | };
|
90 |
|
91 | Steps.prototype.componentDidUpdate = function componentDidUpdate() {
|
92 | this.calcLastStepOffsetWidth();
|
93 | };
|
94 |
|
95 | Steps.prototype.componentWillUnmount = function componentWillUnmount() {
|
96 | if (this.calcTimeout) {
|
97 | clearTimeout(this.calcTimeout);
|
98 | }
|
99 | };
|
100 |
|
101 | Steps.prototype.render = function render() {
|
102 | var _classNames,
|
103 | _this2 = this;
|
104 |
|
105 | var props = this.props;
|
106 |
|
107 | var prefixCls = props.prefixCls,
|
108 | _props$style = props.style,
|
109 | style = _props$style === undefined ? {} : _props$style,
|
110 | className = props.className,
|
111 | children = props.children,
|
112 | direction = props.direction,
|
113 | labelPlacement = props.labelPlacement,
|
114 | iconPrefix = props.iconPrefix,
|
115 | status = props.status,
|
116 | size = props.size,
|
117 | current = props.current,
|
118 | restProps = _objectWithoutProperties(props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current']);
|
119 |
|
120 | var lastIndex = children.length - 1;
|
121 | var reLayouted = this.state.lastStepOffsetWidth > 0;
|
122 | var classString = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, prefixCls + '-' + size, size), _defineProperty(_classNames, prefixCls + '-' + direction, true), _defineProperty(_classNames, prefixCls + '-label-' + labelPlacement, direction === 'horizontal'), _defineProperty(_classNames, prefixCls + '-hidden', !reLayouted), _defineProperty(_classNames, className, className), _classNames));
|
123 |
|
124 | return _react2["default"].createElement(
|
125 | 'div',
|
126 | _extends({ className: classString, style: style }, restProps),
|
127 | _react2["default"].Children.map(children, function (ele, idx) {
|
128 | var tailWidth = direction === 'vertical' || idx === lastIndex || !reLayouted ? null : 100 / lastIndex + '%';
|
129 | var adjustMarginRight = direction === 'vertical' || idx === lastIndex ? null : -Math.round(_this2.state.lastStepOffsetWidth / lastIndex + 1);
|
130 | var np = {
|
131 | stepNumber: (idx + 1).toString(),
|
132 | stepLast: idx === lastIndex,
|
133 | tailWidth: tailWidth,
|
134 | adjustMarginRight: adjustMarginRight,
|
135 | prefixCls: prefixCls,
|
136 | iconPrefix: iconPrefix,
|
137 | wrapperStyle: style
|
138 | };
|
139 |
|
140 |
|
141 | if (status === 'error' && idx === current - 1) {
|
142 | np.className = props.prefixCls + '-next-error';
|
143 | }
|
144 |
|
145 | if (!ele.props.status) {
|
146 | if (idx === current) {
|
147 | np.status = status;
|
148 | } else if (idx < current) {
|
149 | np.status = 'finish';
|
150 | } else {
|
151 | np.status = 'wait';
|
152 | }
|
153 | }
|
154 | return _react2["default"].cloneElement(ele, np);
|
155 | }, this)
|
156 | );
|
157 | };
|
158 |
|
159 | return Steps;
|
160 | }(_react2["default"].Component);
|
161 |
|
162 | Steps.defaultProps = defaultProps;
|
163 | Steps.propTypes = propTypes;
|
164 |
|
165 | exports["default"] = Steps;
|
166 | module.exports = exports['default']; |
\ | No newline at end of file |