1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import ReactDOM from 'react-dom';
|
9 | import PropTypes from 'prop-types';
|
10 | import classNames from 'classnames';
|
11 | import React, { Component, Children } from 'react';
|
12 | import { polyfill } from 'react-lifecycles-compat';
|
13 | import ConfigProvider from '../../config-provider';
|
14 | import { support, events, dom, obj } from '../../util';
|
15 |
|
16 | var getHeight = function getHeight(el) {
|
17 | return dom.getStyle(el, 'height');
|
18 | };
|
19 | var setHeight = function setHeight(el, height) {
|
20 | return dom.setStyle(el, 'height', height);
|
21 | };
|
22 |
|
23 |
|
24 | var Step = (_temp = _class = function (_Component) {
|
25 | _inherits(Step, _Component);
|
26 |
|
27 | Step.getDerivedStateFromProps = function getDerivedStateFromProps(newProps) {
|
28 | if ('current' in newProps) {
|
29 | return {
|
30 | current: newProps.current
|
31 | };
|
32 | }
|
33 | };
|
34 |
|
35 | function Step(props, context) {
|
36 | _classCallCheck(this, Step);
|
37 |
|
38 | var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
|
39 |
|
40 | _this._stepRefHandler = function (ref) {
|
41 | _this.step = ref;
|
42 | };
|
43 |
|
44 | _this.state = {
|
45 | parentWidth: 'auto',
|
46 | parentHeight: 'auto',
|
47 | currentfocus: 0
|
48 | };
|
49 | _this.resize = _this.resize.bind(_this);
|
50 | return _this;
|
51 | }
|
52 |
|
53 | Step.prototype.componentDidMount = function componentDidMount() {
|
54 |
|
55 | if (!support.flex) {
|
56 | this.resize();
|
57 | events.on(window, 'resize', this.resize);
|
58 | }
|
59 | this.adjustHeight();
|
60 | };
|
61 |
|
62 | Step.prototype.componentDidUpdate = function componentDidUpdate() {
|
63 | this.adjustHeight();
|
64 | };
|
65 |
|
66 | Step.prototype.componentWillUnmount = function componentWillUnmount() {
|
67 |
|
68 | if (!support.flex) {
|
69 | events.off(window, 'resize', this.resize);
|
70 | }
|
71 | };
|
72 |
|
73 | Step.prototype.adjustHeight = function adjustHeight() {
|
74 | var _props = this.props,
|
75 | shape = _props.shape,
|
76 | direction = _props.direction,
|
77 | prefix = _props.prefix,
|
78 | labelPlacement = _props.labelPlacement;
|
79 |
|
80 | var step = ReactDOM.findDOMNode(this.step);
|
81 | if (shape !== 'arrow' && (direction === 'horizontal' || direction === 'hoz') && (labelPlacement === 'vertical' || labelPlacement === 'ver')) {
|
82 | var height = Array.prototype.slice.call(step.getElementsByClassName(prefix + 'step-item')).reduce(function (ret, re) {
|
83 | var itemHeight = getHeight(re.getElementsByClassName(prefix + 'step-item-container')[0]) + getHeight(re.getElementsByClassName(prefix + 'step-item-body')[0]);
|
84 | return Math.max(itemHeight, ret);
|
85 | }, 0);
|
86 | setHeight(step, height);
|
87 | } else {
|
88 | setHeight(step, '');
|
89 | }
|
90 | };
|
91 |
|
92 | Step.prototype.resize = function resize() {
|
93 | if (this.step) {
|
94 | this.setState({
|
95 | parentWidth: this.step.offsetWidth || 0,
|
96 | parentHeight: this.step.offsetHeight || 0
|
97 | });
|
98 | }
|
99 | };
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 | Step.prototype._getValidChildren = function _getValidChildren(children) {
|
136 | var result = [];
|
137 | React.Children.forEach(children, function (child) {
|
138 | if (React.isValidElement(child)) {
|
139 | result.push(child);
|
140 | }
|
141 | });
|
142 | return result;
|
143 | };
|
144 |
|
145 | Step.prototype.render = function render() {
|
146 | var _this2 = this,
|
147 | _classNames;
|
148 |
|
149 |
|
150 | var _props2 = this.props,
|
151 | className = _props2.className,
|
152 | current = _props2.current,
|
153 | labelPlacement = _props2.labelPlacement,
|
154 | shape = _props2.shape,
|
155 | readOnly = _props2.readOnly,
|
156 | animation = _props2.animation,
|
157 | itemRender = _props2.itemRender,
|
158 | rtl = _props2.rtl,
|
159 | stretch = _props2.stretch;
|
160 |
|
161 | var others = obj.pickOthers(Step.propTypes, this.props);
|
162 | var _props3 = this.props,
|
163 | prefix = _props3.prefix,
|
164 | direction = _props3.direction,
|
165 | children = _props3.children;
|
166 |
|
167 | prefix = this.context.prefix || prefix;
|
168 | var _state = this.state,
|
169 | parentWidth = _state.parentWidth,
|
170 | parentHeight = _state.parentHeight;
|
171 |
|
172 |
|
173 |
|
174 | direction = shape === 'arrow' ? 'hoz' : direction;
|
175 |
|
176 |
|
177 | children = this._getValidChildren(children);
|
178 |
|
179 |
|
180 | var cloneChildren = Children.map(children, function (child, index) {
|
181 | var status = index < current ? 'finish' : index === current ? 'process' : 'wait';
|
182 |
|
183 | return React.cloneElement(child, {
|
184 | prefix: prefix,
|
185 | key: index,
|
186 | index: index,
|
187 | total: children.length,
|
188 | status: child.props.status || status,
|
189 | shape: shape,
|
190 | direction: direction,
|
191 | labelPlacement: labelPlacement,
|
192 | parentWidth: parentWidth,
|
193 | parentHeight: parentHeight,
|
194 | readOnly: readOnly,
|
195 | animation: animation,
|
196 | tabIndex: 0,
|
197 |
|
198 | 'aria-current': status === 'process' ? 'step' : null,
|
199 | itemRender: child.props.itemRender ? child.props.itemRender : itemRender,
|
200 | onResize: function onResize() {
|
201 | _this2.step && _this2.adjustHeight();
|
202 | },
|
203 | stretch: stretch
|
204 | });
|
205 | });
|
206 |
|
207 | var _direction = direction === 'ver' || direction === 'vertical' ? 'vertical' : 'horizontal';
|
208 | var _labelPlacement = labelPlacement === 'ver' || labelPlacement === 'vertical' ? 'vertical' : 'horizontal';
|
209 | var stepCls = classNames((_classNames = {}, _classNames[prefix + 'step'] = true, _classNames[prefix + 'step-' + shape] = shape, _classNames[prefix + 'step-' + _direction] = _direction, _classNames[prefix + 'step-label-' + _labelPlacement] = _labelPlacement, _classNames[className] = className, _classNames));
|
210 |
|
211 | if (rtl) {
|
212 | others.dir = 'rtl';
|
213 | }
|
214 |
|
215 |
|
216 | return React.createElement(
|
217 | 'ol',
|
218 | _extends({}, others, { className: stepCls, ref: this._stepRefHandler }),
|
219 | cloneChildren
|
220 | );
|
221 | };
|
222 |
|
223 | return Step;
|
224 | }(Component), _class.propTypes = _extends({}, ConfigProvider.propTypes, {
|
225 | prefix: PropTypes.string,
|
226 | rtl: PropTypes.bool,
|
227 | |
228 |
|
229 |
|
230 | current: PropTypes.number,
|
231 | |
232 |
|
233 |
|
234 | direction: PropTypes.oneOf(['hoz', 'ver']),
|
235 | |
236 |
|
237 |
|
238 | labelPlacement: PropTypes.oneOf(['hoz', 'ver']),
|
239 | |
240 |
|
241 |
|
242 | shape: PropTypes.oneOf(['circle', 'arrow', 'dot']),
|
243 | |
244 |
|
245 |
|
246 | readOnly: PropTypes.bool,
|
247 | |
248 |
|
249 |
|
250 | animation: PropTypes.bool,
|
251 | |
252 |
|
253 |
|
254 | className: PropTypes.string,
|
255 | |
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 | itemRender: PropTypes.func,
|
262 | |
263 |
|
264 |
|
265 | stretch: PropTypes.bool
|
266 | }), _class.defaultProps = {
|
267 | prefix: 'next-',
|
268 | current: 0,
|
269 | direction: 'hoz',
|
270 | labelPlacement: 'ver',
|
271 | shape: 'circle',
|
272 | animation: true,
|
273 | itemRender: null,
|
274 | stretch: false
|
275 | }, _class.contextTypes = {
|
276 | prefix: PropTypes.string
|
277 | }, _temp);
|
278 | Step.displayName = 'Step';
|
279 |
|
280 |
|
281 | export default polyfill(Step); |
\ | No newline at end of file |