Comparing version 3.1.1 to 3.2.0
186
es/Step.js
import _extends from 'babel-runtime/helpers/extends'; | ||
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties'; | ||
import _defineProperty from 'babel-runtime/helpers/defineProperty'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _createClass from 'babel-runtime/helpers/createClass'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
@@ -22,46 +20,29 @@ import _inherits from 'babel-runtime/helpers/inherits'; | ||
return _possibleConstructorReturn(this, (Step.__proto__ || Object.getPrototypeOf(Step)).apply(this, arguments)); | ||
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); | ||
} | ||
_createClass(Step, [{ | ||
key: 'renderIconNode', | ||
value: function renderIconNode() { | ||
var _classNames; | ||
Step.prototype.renderIconNode = function renderIconNode() { | ||
var _classNames; | ||
var _props = this.props, | ||
prefixCls = _props.prefixCls, | ||
progressDot = _props.progressDot, | ||
stepNumber = _props.stepNumber, | ||
status = _props.status, | ||
title = _props.title, | ||
description = _props.description, | ||
icon = _props.icon, | ||
iconPrefix = _props.iconPrefix; | ||
var _props = this.props, | ||
prefixCls = _props.prefixCls, | ||
progressDot = _props.progressDot, | ||
stepNumber = _props.stepNumber, | ||
status = _props.status, | ||
title = _props.title, | ||
description = _props.description, | ||
icon = _props.icon, | ||
iconPrefix = _props.iconPrefix; | ||
var iconNode = void 0; | ||
var iconClassName = classNames(prefixCls + '-icon', iconPrefix + 'icon', (_classNames = {}, _defineProperty(_classNames, iconPrefix + 'icon-' + icon, icon && isString(icon)), _defineProperty(_classNames, iconPrefix + 'icon-check', !icon && status === 'finish'), _defineProperty(_classNames, iconPrefix + 'icon-cross', !icon && status === 'error'), _classNames)); | ||
var iconDot = React.createElement('span', { className: prefixCls + '-icon-dot' }); | ||
// `progressDot` enjoy the highest priority | ||
if (progressDot) { | ||
if (typeof progressDot === 'function') { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
progressDot(iconDot, { index: stepNumber - 1, status: status, title: title, description: description }) | ||
); | ||
} else { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
iconDot | ||
); | ||
} | ||
} else if (icon && !isString(icon)) { | ||
var iconNode = void 0; | ||
var iconClassName = classNames(prefixCls + '-icon', iconPrefix + 'icon', (_classNames = {}, _classNames[iconPrefix + 'icon-' + icon] = icon && isString(icon), _classNames[iconPrefix + 'icon-check'] = !icon && status === 'finish', _classNames[iconPrefix + 'icon-cross'] = !icon && status === 'error', _classNames)); | ||
var iconDot = React.createElement('span', { className: prefixCls + '-icon-dot' }); | ||
// `progressDot` enjoy the highest priority | ||
if (progressDot) { | ||
if (typeof progressDot === 'function') { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icon | ||
progressDot(iconDot, { index: stepNumber - 1, status: status, title: title, description: description }) | ||
); | ||
} else if (icon || status === 'finish' || status === 'error') { | ||
iconNode = React.createElement('span', { className: iconClassName }); | ||
} else { | ||
@@ -71,69 +52,84 @@ iconNode = React.createElement( | ||
{ className: prefixCls + '-icon' }, | ||
stepNumber | ||
iconDot | ||
); | ||
} | ||
return iconNode; | ||
} else if (icon && !isString(icon)) { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icon | ||
); | ||
} else if (icon || status === 'finish' || status === 'error') { | ||
iconNode = React.createElement('span', { className: iconClassName }); | ||
} else { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
stepNumber | ||
); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _props2 = this.props, | ||
className = _props2.className, | ||
prefixCls = _props2.prefixCls, | ||
style = _props2.style, | ||
itemWidth = _props2.itemWidth, | ||
_props2$status = _props2.status, | ||
status = _props2$status === undefined ? 'wait' : _props2$status, | ||
iconPrefix = _props2.iconPrefix, | ||
icon = _props2.icon, | ||
wrapperStyle = _props2.wrapperStyle, | ||
adjustMarginRight = _props2.adjustMarginRight, | ||
stepNumber = _props2.stepNumber, | ||
description = _props2.description, | ||
title = _props2.title, | ||
progressDot = _props2.progressDot, | ||
tailContent = _props2.tailContent, | ||
restProps = _objectWithoutProperties(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot', 'tailContent']); | ||
return iconNode; | ||
}; | ||
var classString = classNames(prefixCls + '-item', prefixCls + '-item-' + status, className, _defineProperty({}, prefixCls + '-item-custom', icon)); | ||
var stepItemStyle = _extends({}, style); | ||
if (itemWidth) { | ||
stepItemStyle.width = itemWidth; | ||
} | ||
if (adjustMarginRight) { | ||
stepItemStyle.marginRight = adjustMarginRight; | ||
} | ||
return React.createElement( | ||
Step.prototype.render = function render() { | ||
var _classNames2; | ||
var _props2 = this.props, | ||
className = _props2.className, | ||
prefixCls = _props2.prefixCls, | ||
style = _props2.style, | ||
itemWidth = _props2.itemWidth, | ||
_props2$status = _props2.status, | ||
status = _props2$status === undefined ? 'wait' : _props2$status, | ||
iconPrefix = _props2.iconPrefix, | ||
icon = _props2.icon, | ||
wrapperStyle = _props2.wrapperStyle, | ||
adjustMarginRight = _props2.adjustMarginRight, | ||
stepNumber = _props2.stepNumber, | ||
description = _props2.description, | ||
title = _props2.title, | ||
progressDot = _props2.progressDot, | ||
tailContent = _props2.tailContent, | ||
restProps = _objectWithoutProperties(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot', 'tailContent']); | ||
var classString = classNames(prefixCls + '-item', prefixCls + '-item-' + status, className, (_classNames2 = {}, _classNames2[prefixCls + '-item-custom'] = icon, _classNames2)); | ||
var stepItemStyle = _extends({}, style); | ||
if (itemWidth) { | ||
stepItemStyle.width = itemWidth; | ||
} | ||
if (adjustMarginRight) { | ||
stepItemStyle.marginRight = adjustMarginRight; | ||
} | ||
return React.createElement( | ||
'div', | ||
_extends({}, restProps, { | ||
className: classString, | ||
style: stepItemStyle | ||
}), | ||
React.createElement( | ||
'div', | ||
_extends({}, restProps, { | ||
className: classString, | ||
style: stepItemStyle | ||
}), | ||
{ className: prefixCls + '-item-tail' }, | ||
tailContent | ||
), | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-item-icon' }, | ||
this.renderIconNode() | ||
), | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-item-content' }, | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-item-tail' }, | ||
tailContent | ||
{ className: prefixCls + '-item-title' }, | ||
title | ||
), | ||
React.createElement( | ||
description && React.createElement( | ||
'div', | ||
{ className: prefixCls + '-item-icon' }, | ||
this.renderIconNode() | ||
), | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-item-content' }, | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-item-title' }, | ||
title | ||
), | ||
description && React.createElement( | ||
'div', | ||
{ className: prefixCls + '-item-description' }, | ||
description | ||
) | ||
{ className: prefixCls + '-item-description' }, | ||
description | ||
) | ||
); | ||
} | ||
}]); | ||
) | ||
); | ||
}; | ||
@@ -140,0 +136,0 @@ return Step; |
170
es/Steps.js
import _extends from 'babel-runtime/helpers/extends'; | ||
import _defineProperty from 'babel-runtime/helpers/defineProperty'; | ||
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _createClass from 'babel-runtime/helpers/createClass'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
@@ -22,3 +20,3 @@ import _inherits from 'babel-runtime/helpers/inherits'; | ||
var _this = _possibleConstructorReturn(this, (Steps.__proto__ || Object.getPrototypeOf(Steps)).call(this, props)); | ||
var _this = _possibleConstructorReturn(this, _Component.call(this, props)); | ||
@@ -55,94 +53,90 @@ _this.calcStepOffsetWidth = function () { | ||
_createClass(Steps, [{ | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.calcStepOffsetWidth(); | ||
if (!isFlexSupported()) { | ||
this.setState({ | ||
flexSupported: false | ||
}); | ||
} | ||
Steps.prototype.componentDidMount = function componentDidMount() { | ||
this.calcStepOffsetWidth(); | ||
if (!isFlexSupported()) { | ||
this.setState({ | ||
flexSupported: false | ||
}); | ||
} | ||
}, { | ||
key: 'componentDidUpdate', | ||
value: function componentDidUpdate() { | ||
this.calcStepOffsetWidth(); | ||
}; | ||
Steps.prototype.componentDidUpdate = function componentDidUpdate() { | ||
this.calcStepOffsetWidth(); | ||
}; | ||
Steps.prototype.componentWillUnmount = function componentWillUnmount() { | ||
if (this.calcTimeout) { | ||
clearTimeout(this.calcTimeout); | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
if (this.calcTimeout) { | ||
clearTimeout(this.calcTimeout); | ||
} | ||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) { | ||
this.calcStepOffsetWidth.cancel(); | ||
} | ||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) { | ||
this.calcStepOffsetWidth.cancel(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _classNames; | ||
}; | ||
var _props = this.props, | ||
prefixCls = _props.prefixCls, | ||
_props$style = _props.style, | ||
style = _props$style === undefined ? {} : _props$style, | ||
className = _props.className, | ||
children = _props.children, | ||
direction = _props.direction, | ||
labelPlacement = _props.labelPlacement, | ||
iconPrefix = _props.iconPrefix, | ||
status = _props.status, | ||
size = _props.size, | ||
current = _props.current, | ||
progressDot = _props.progressDot, | ||
restProps = _objectWithoutProperties(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot']); | ||
Steps.prototype.render = function render() { | ||
var _classNames; | ||
var _state = this.state, | ||
lastStepOffsetWidth = _state.lastStepOffsetWidth, | ||
flexSupported = _state.flexSupported; | ||
var _props = this.props, | ||
prefixCls = _props.prefixCls, | ||
_props$style = _props.style, | ||
style = _props$style === undefined ? {} : _props$style, | ||
className = _props.className, | ||
children = _props.children, | ||
direction = _props.direction, | ||
labelPlacement = _props.labelPlacement, | ||
iconPrefix = _props.iconPrefix, | ||
status = _props.status, | ||
size = _props.size, | ||
current = _props.current, | ||
progressDot = _props.progressDot, | ||
initial = _props.initial, | ||
restProps = _objectWithoutProperties(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot', 'initial']); | ||
var filteredChildren = React.Children.toArray(children).filter(function (c) { | ||
return !!c; | ||
}); | ||
var lastIndex = filteredChildren.length - 1; | ||
var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement; | ||
var classString = classNames(prefixCls, prefixCls + '-' + direction, className, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-' + size, size), _defineProperty(_classNames, prefixCls + '-label-' + adjustedlabelPlacement, direction === 'horizontal'), _defineProperty(_classNames, prefixCls + '-dot', !!progressDot), _classNames)); | ||
var _state = this.state, | ||
lastStepOffsetWidth = _state.lastStepOffsetWidth, | ||
flexSupported = _state.flexSupported; | ||
return React.createElement( | ||
'div', | ||
_extends({ className: classString, style: style }, restProps), | ||
Children.map(filteredChildren, function (child, index) { | ||
if (!child) { | ||
return null; | ||
var filteredChildren = React.Children.toArray(children).filter(function (c) { | ||
return !!c; | ||
}); | ||
var lastIndex = filteredChildren.length - 1; | ||
var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement; | ||
var classString = classNames(prefixCls, prefixCls + '-' + direction, className, (_classNames = {}, _classNames[prefixCls + '-' + size] = size, _classNames[prefixCls + '-label-' + adjustedlabelPlacement] = direction === 'horizontal', _classNames[prefixCls + '-dot'] = !!progressDot, _classNames)); | ||
return React.createElement( | ||
'div', | ||
_extends({ className: classString, style: style }, restProps), | ||
Children.map(filteredChildren, function (child, index) { | ||
if (!child) { | ||
return null; | ||
} | ||
var stepNumber = initial ? initial + index : index + 1; | ||
var childProps = _extends({ | ||
stepNumber: '' + stepNumber, | ||
prefixCls: prefixCls, | ||
iconPrefix: iconPrefix, | ||
wrapperStyle: style, | ||
progressDot: progressDot | ||
}, child.props); | ||
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) { | ||
childProps.itemWidth = 100 / lastIndex + '%'; | ||
childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1); | ||
} | ||
// fix tail color | ||
if (status === 'error' && index === current - 1) { | ||
childProps.className = prefixCls + '-next-error'; | ||
} | ||
if (!child.props.status) { | ||
if (stepNumber === current) { | ||
childProps.status = status; | ||
} else if (stepNumber < current) { | ||
childProps.status = 'finish'; | ||
} else { | ||
childProps.status = 'wait'; | ||
} | ||
var childProps = _extends({ | ||
stepNumber: '' + (index + 1), | ||
prefixCls: prefixCls, | ||
iconPrefix: iconPrefix, | ||
wrapperStyle: style, | ||
progressDot: progressDot | ||
}, child.props); | ||
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) { | ||
childProps.itemWidth = 100 / lastIndex + '%'; | ||
childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1); | ||
} | ||
// fix tail color | ||
if (status === 'error' && index === current - 1) { | ||
childProps.className = prefixCls + '-next-error'; | ||
} | ||
if (!child.props.status) { | ||
if (index === current) { | ||
childProps.status = status; | ||
} else if (index < current) { | ||
childProps.status = 'finish'; | ||
} else { | ||
childProps.status = 'wait'; | ||
} | ||
} | ||
return cloneElement(child, childProps); | ||
}) | ||
); | ||
} | ||
}]); | ||
} | ||
return cloneElement(child, childProps); | ||
}) | ||
); | ||
}; | ||
@@ -163,2 +157,3 @@ return Steps; | ||
style: PropTypes.object, | ||
initial: PropTypes.number, | ||
current: PropTypes.number | ||
@@ -171,2 +166,3 @@ }; | ||
labelPlacement: 'horizontal', | ||
initial: 0, | ||
current: 0, | ||
@@ -173,0 +169,0 @@ status: 'process', |
# History | ||
---- | ||
## 3.2.0 | ||
- Add `initial` prop. | ||
## 3.1.0 | ||
@@ -5,0 +9,0 @@ |
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.__esModule = true; | ||
exports.Step = undefined; | ||
@@ -7,0 +5,0 @@ |
197
lib/Step.js
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.__esModule = true; | ||
@@ -15,6 +13,2 @@ var _extends2 = require('babel-runtime/helpers/extends'); | ||
var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); | ||
var _defineProperty3 = _interopRequireDefault(_defineProperty2); | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
@@ -24,6 +18,2 @@ | ||
var _createClass2 = require('babel-runtime/helpers/createClass'); | ||
var _createClass3 = _interopRequireDefault(_createClass2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
@@ -60,46 +50,29 @@ | ||
(0, _classCallCheck3['default'])(this, Step); | ||
return (0, _possibleConstructorReturn3['default'])(this, (Step.__proto__ || Object.getPrototypeOf(Step)).apply(this, arguments)); | ||
return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments)); | ||
} | ||
(0, _createClass3['default'])(Step, [{ | ||
key: 'renderIconNode', | ||
value: function renderIconNode() { | ||
var _classNames; | ||
Step.prototype.renderIconNode = function renderIconNode() { | ||
var _classNames; | ||
var _props = this.props, | ||
prefixCls = _props.prefixCls, | ||
progressDot = _props.progressDot, | ||
stepNumber = _props.stepNumber, | ||
status = _props.status, | ||
title = _props.title, | ||
description = _props.description, | ||
icon = _props.icon, | ||
iconPrefix = _props.iconPrefix; | ||
var _props = this.props, | ||
prefixCls = _props.prefixCls, | ||
progressDot = _props.progressDot, | ||
stepNumber = _props.stepNumber, | ||
status = _props.status, | ||
title = _props.title, | ||
description = _props.description, | ||
icon = _props.icon, | ||
iconPrefix = _props.iconPrefix; | ||
var iconNode = void 0; | ||
var iconClassName = (0, _classnames2['default'])(prefixCls + '-icon', iconPrefix + 'icon', (_classNames = {}, (0, _defineProperty3['default'])(_classNames, iconPrefix + 'icon-' + icon, icon && isString(icon)), (0, _defineProperty3['default'])(_classNames, iconPrefix + 'icon-check', !icon && status === 'finish'), (0, _defineProperty3['default'])(_classNames, iconPrefix + 'icon-cross', !icon && status === 'error'), _classNames)); | ||
var iconDot = _react2['default'].createElement('span', { className: prefixCls + '-icon-dot' }); | ||
// `progressDot` enjoy the highest priority | ||
if (progressDot) { | ||
if (typeof progressDot === 'function') { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
progressDot(iconDot, { index: stepNumber - 1, status: status, title: title, description: description }) | ||
); | ||
} else { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
iconDot | ||
); | ||
} | ||
} else if (icon && !isString(icon)) { | ||
var iconNode = void 0; | ||
var iconClassName = (0, _classnames2['default'])(prefixCls + '-icon', iconPrefix + 'icon', (_classNames = {}, _classNames[iconPrefix + 'icon-' + icon] = icon && isString(icon), _classNames[iconPrefix + 'icon-check'] = !icon && status === 'finish', _classNames[iconPrefix + 'icon-cross'] = !icon && status === 'error', _classNames)); | ||
var iconDot = _react2['default'].createElement('span', { className: prefixCls + '-icon-dot' }); | ||
// `progressDot` enjoy the highest priority | ||
if (progressDot) { | ||
if (typeof progressDot === 'function') { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icon | ||
progressDot(iconDot, { index: stepNumber - 1, status: status, title: title, description: description }) | ||
); | ||
} else if (icon || status === 'finish' || status === 'error') { | ||
iconNode = _react2['default'].createElement('span', { className: iconClassName }); | ||
} else { | ||
@@ -109,70 +82,86 @@ iconNode = _react2['default'].createElement( | ||
{ className: prefixCls + '-icon' }, | ||
stepNumber | ||
iconDot | ||
); | ||
} | ||
return iconNode; | ||
} else if (icon && !isString(icon)) { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icon | ||
); | ||
} else if (icon || status === 'finish' || status === 'error') { | ||
iconNode = _react2['default'].createElement('span', { className: iconClassName }); | ||
} else { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
stepNumber | ||
); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _props2 = this.props, | ||
className = _props2.className, | ||
prefixCls = _props2.prefixCls, | ||
style = _props2.style, | ||
itemWidth = _props2.itemWidth, | ||
_props2$status = _props2.status, | ||
status = _props2$status === undefined ? 'wait' : _props2$status, | ||
iconPrefix = _props2.iconPrefix, | ||
icon = _props2.icon, | ||
wrapperStyle = _props2.wrapperStyle, | ||
adjustMarginRight = _props2.adjustMarginRight, | ||
stepNumber = _props2.stepNumber, | ||
description = _props2.description, | ||
title = _props2.title, | ||
progressDot = _props2.progressDot, | ||
tailContent = _props2.tailContent, | ||
restProps = (0, _objectWithoutProperties3['default'])(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot', 'tailContent']); | ||
return iconNode; | ||
}; | ||
Step.prototype.render = function render() { | ||
var _classNames2; | ||
var classString = (0, _classnames2['default'])(prefixCls + '-item', prefixCls + '-item-' + status, className, (0, _defineProperty3['default'])({}, prefixCls + '-item-custom', icon)); | ||
var stepItemStyle = (0, _extends3['default'])({}, style); | ||
if (itemWidth) { | ||
stepItemStyle.width = itemWidth; | ||
} | ||
if (adjustMarginRight) { | ||
stepItemStyle.marginRight = adjustMarginRight; | ||
} | ||
return _react2['default'].createElement( | ||
var _props2 = this.props, | ||
className = _props2.className, | ||
prefixCls = _props2.prefixCls, | ||
style = _props2.style, | ||
itemWidth = _props2.itemWidth, | ||
_props2$status = _props2.status, | ||
status = _props2$status === undefined ? 'wait' : _props2$status, | ||
iconPrefix = _props2.iconPrefix, | ||
icon = _props2.icon, | ||
wrapperStyle = _props2.wrapperStyle, | ||
adjustMarginRight = _props2.adjustMarginRight, | ||
stepNumber = _props2.stepNumber, | ||
description = _props2.description, | ||
title = _props2.title, | ||
progressDot = _props2.progressDot, | ||
tailContent = _props2.tailContent, | ||
restProps = (0, _objectWithoutProperties3['default'])(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot', 'tailContent']); | ||
var classString = (0, _classnames2['default'])(prefixCls + '-item', prefixCls + '-item-' + status, className, (_classNames2 = {}, _classNames2[prefixCls + '-item-custom'] = icon, _classNames2)); | ||
var stepItemStyle = (0, _extends3['default'])({}, style); | ||
if (itemWidth) { | ||
stepItemStyle.width = itemWidth; | ||
} | ||
if (adjustMarginRight) { | ||
stepItemStyle.marginRight = adjustMarginRight; | ||
} | ||
return _react2['default'].createElement( | ||
'div', | ||
(0, _extends3['default'])({}, restProps, { | ||
className: classString, | ||
style: stepItemStyle | ||
}), | ||
_react2['default'].createElement( | ||
'div', | ||
(0, _extends3['default'])({}, restProps, { | ||
className: classString, | ||
style: stepItemStyle | ||
}), | ||
{ className: prefixCls + '-item-tail' }, | ||
tailContent | ||
), | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-item-icon' }, | ||
this.renderIconNode() | ||
), | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-item-content' }, | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-item-tail' }, | ||
tailContent | ||
{ className: prefixCls + '-item-title' }, | ||
title | ||
), | ||
_react2['default'].createElement( | ||
description && _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-item-icon' }, | ||
this.renderIconNode() | ||
), | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-item-content' }, | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-item-title' }, | ||
title | ||
), | ||
description && _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-item-description' }, | ||
description | ||
) | ||
{ className: prefixCls + '-item-description' }, | ||
description | ||
) | ||
); | ||
} | ||
}]); | ||
) | ||
); | ||
}; | ||
return Step; | ||
@@ -179,0 +168,0 @@ }(_react2['default'].Component); |
181
lib/Steps.js
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.__esModule = true; | ||
@@ -11,6 +9,2 @@ var _extends2 = require('babel-runtime/helpers/extends'); | ||
var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); | ||
var _defineProperty3 = _interopRequireDefault(_defineProperty2); | ||
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); | ||
@@ -24,6 +18,2 @@ | ||
var _createClass2 = require('babel-runtime/helpers/createClass'); | ||
var _createClass3 = _interopRequireDefault(_createClass2); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
@@ -66,3 +56,3 @@ | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, (Steps.__proto__ || Object.getPrototypeOf(Steps)).call(this, props)); | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props)); | ||
@@ -99,93 +89,90 @@ _this.calcStepOffsetWidth = function () { | ||
(0, _createClass3['default'])(Steps, [{ | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.calcStepOffsetWidth(); | ||
if (!(0, _utils.isFlexSupported)()) { | ||
this.setState({ | ||
flexSupported: false | ||
}); | ||
} | ||
Steps.prototype.componentDidMount = function componentDidMount() { | ||
this.calcStepOffsetWidth(); | ||
if (!(0, _utils.isFlexSupported)()) { | ||
this.setState({ | ||
flexSupported: false | ||
}); | ||
} | ||
}, { | ||
key: 'componentDidUpdate', | ||
value: function componentDidUpdate() { | ||
this.calcStepOffsetWidth(); | ||
}; | ||
Steps.prototype.componentDidUpdate = function componentDidUpdate() { | ||
this.calcStepOffsetWidth(); | ||
}; | ||
Steps.prototype.componentWillUnmount = function componentWillUnmount() { | ||
if (this.calcTimeout) { | ||
clearTimeout(this.calcTimeout); | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
if (this.calcTimeout) { | ||
clearTimeout(this.calcTimeout); | ||
} | ||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) { | ||
this.calcStepOffsetWidth.cancel(); | ||
} | ||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) { | ||
this.calcStepOffsetWidth.cancel(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _classNames; | ||
}; | ||
var _props = this.props, | ||
prefixCls = _props.prefixCls, | ||
_props$style = _props.style, | ||
style = _props$style === undefined ? {} : _props$style, | ||
className = _props.className, | ||
children = _props.children, | ||
direction = _props.direction, | ||
labelPlacement = _props.labelPlacement, | ||
iconPrefix = _props.iconPrefix, | ||
status = _props.status, | ||
size = _props.size, | ||
current = _props.current, | ||
progressDot = _props.progressDot, | ||
restProps = (0, _objectWithoutProperties3['default'])(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot']); | ||
var _state = this.state, | ||
lastStepOffsetWidth = _state.lastStepOffsetWidth, | ||
flexSupported = _state.flexSupported; | ||
Steps.prototype.render = function render() { | ||
var _classNames; | ||
var filteredChildren = _react2['default'].Children.toArray(children).filter(function (c) { | ||
return !!c; | ||
}); | ||
var lastIndex = filteredChildren.length - 1; | ||
var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement; | ||
var classString = (0, _classnames2['default'])(prefixCls, prefixCls + '-' + direction, className, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + size, size), (0, _defineProperty3['default'])(_classNames, prefixCls + '-label-' + adjustedlabelPlacement, direction === 'horizontal'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-dot', !!progressDot), _classNames)); | ||
var _props = this.props, | ||
prefixCls = _props.prefixCls, | ||
_props$style = _props.style, | ||
style = _props$style === undefined ? {} : _props$style, | ||
className = _props.className, | ||
children = _props.children, | ||
direction = _props.direction, | ||
labelPlacement = _props.labelPlacement, | ||
iconPrefix = _props.iconPrefix, | ||
status = _props.status, | ||
size = _props.size, | ||
current = _props.current, | ||
progressDot = _props.progressDot, | ||
initial = _props.initial, | ||
restProps = (0, _objectWithoutProperties3['default'])(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot', 'initial']); | ||
var _state = this.state, | ||
lastStepOffsetWidth = _state.lastStepOffsetWidth, | ||
flexSupported = _state.flexSupported; | ||
return _react2['default'].createElement( | ||
'div', | ||
(0, _extends3['default'])({ className: classString, style: style }, restProps), | ||
_react.Children.map(filteredChildren, function (child, index) { | ||
if (!child) { | ||
return null; | ||
var filteredChildren = _react2['default'].Children.toArray(children).filter(function (c) { | ||
return !!c; | ||
}); | ||
var lastIndex = filteredChildren.length - 1; | ||
var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement; | ||
var classString = (0, _classnames2['default'])(prefixCls, prefixCls + '-' + direction, className, (_classNames = {}, _classNames[prefixCls + '-' + size] = size, _classNames[prefixCls + '-label-' + adjustedlabelPlacement] = direction === 'horizontal', _classNames[prefixCls + '-dot'] = !!progressDot, _classNames)); | ||
return _react2['default'].createElement( | ||
'div', | ||
(0, _extends3['default'])({ className: classString, style: style }, restProps), | ||
_react.Children.map(filteredChildren, function (child, index) { | ||
if (!child) { | ||
return null; | ||
} | ||
var stepNumber = initial ? initial + index : index + 1; | ||
var childProps = (0, _extends3['default'])({ | ||
stepNumber: '' + stepNumber, | ||
prefixCls: prefixCls, | ||
iconPrefix: iconPrefix, | ||
wrapperStyle: style, | ||
progressDot: progressDot | ||
}, child.props); | ||
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) { | ||
childProps.itemWidth = 100 / lastIndex + '%'; | ||
childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1); | ||
} | ||
// fix tail color | ||
if (status === 'error' && index === current - 1) { | ||
childProps.className = prefixCls + '-next-error'; | ||
} | ||
if (!child.props.status) { | ||
if (stepNumber === current) { | ||
childProps.status = status; | ||
} else if (stepNumber < current) { | ||
childProps.status = 'finish'; | ||
} else { | ||
childProps.status = 'wait'; | ||
} | ||
var childProps = (0, _extends3['default'])({ | ||
stepNumber: '' + (index + 1), | ||
prefixCls: prefixCls, | ||
iconPrefix: iconPrefix, | ||
wrapperStyle: style, | ||
progressDot: progressDot | ||
}, child.props); | ||
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) { | ||
childProps.itemWidth = 100 / lastIndex + '%'; | ||
childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1); | ||
} | ||
// fix tail color | ||
if (status === 'error' && index === current - 1) { | ||
childProps.className = prefixCls + '-next-error'; | ||
} | ||
if (!child.props.status) { | ||
if (index === current) { | ||
childProps.status = status; | ||
} else if (index < current) { | ||
childProps.status = 'finish'; | ||
} else { | ||
childProps.status = 'wait'; | ||
} | ||
} | ||
return (0, _react.cloneElement)(child, childProps); | ||
}) | ||
); | ||
} | ||
}]); | ||
} | ||
return (0, _react.cloneElement)(child, childProps); | ||
}) | ||
); | ||
}; | ||
return Steps; | ||
@@ -205,2 +192,3 @@ }(_react.Component); | ||
style: _propTypes2['default'].object, | ||
initial: _propTypes2['default'].number, | ||
current: _propTypes2['default'].number | ||
@@ -213,2 +201,3 @@ }; | ||
labelPlacement: 'horizontal', | ||
initial: 0, | ||
current: 0, | ||
@@ -215,0 +204,0 @@ status: 'process', |
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.__esModule = true; | ||
exports.isFlexSupported = isFlexSupported; | ||
@@ -7,0 +5,0 @@ function isFlexSupported() { |
{ | ||
"name": "rc-steps", | ||
"version": "3.1.1", | ||
"version": "3.2.0", | ||
"description": "steps ui component for react", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -66,2 +66,8 @@ # rc-steps | ||
<tr> | ||
<td>initial</td> | ||
<td>number</td> | ||
<td>0</td> | ||
<td>index initial</td> | ||
</tr> | ||
<tr> | ||
<td>size</td> | ||
@@ -68,0 +74,0 @@ <td>string</td> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
147
52321
1512