Comparing version 3.4.1 to 3.5.0
import Steps from './Steps'; | ||
import Step from './Step'; | ||
Steps.Step = Step; | ||
export { Step }; | ||
export default Steps; |
334
es/Step.js
@@ -1,6 +0,29 @@ | ||
import _extends from 'babel-runtime/helpers/extends'; | ||
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
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; } | ||
import React from 'react'; | ||
@@ -14,155 +37,169 @@ import PropTypes from 'prop-types'; | ||
var Step = function (_React$Component) { | ||
var Step = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
_inherits(Step, _React$Component); | ||
function Step() { | ||
var _temp, _this, _ret; | ||
var _getPrototypeOf2; | ||
var _this; | ||
_classCallCheck(this, Step); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
_args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), _possibleConstructorReturn(_this, _ret); | ||
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Step)).call.apply(_getPrototypeOf2, [this].concat(_args))); | ||
_defineProperty(_assertThisInitialized(_this), "onClick", function () { | ||
var _this$props = _this.props, | ||
onClick = _this$props.onClick, | ||
onStepClick = _this$props.onStepClick, | ||
stepIndex = _this$props.stepIndex; | ||
if (onClick) { | ||
onClick.apply(void 0, arguments); | ||
} | ||
onStepClick(stepIndex); | ||
}); | ||
return _this; | ||
} | ||
Step.prototype.renderIconNode = function renderIconNode() { | ||
var _classNames; | ||
_createClass(Step, [{ | ||
key: "renderIconNode", | ||
value: 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, | ||
icons = _props.icons; | ||
var _this$props2 = this.props, | ||
prefixCls = _this$props2.prefixCls, | ||
progressDot = _this$props2.progressDot, | ||
stepNumber = _this$props2.stepNumber, | ||
status = _this$props2.status, | ||
title = _this$props2.title, | ||
description = _this$props2.description, | ||
icon = _this$props2.icon, | ||
iconPrefix = _this$props2.iconPrefix, | ||
icons = _this$props2.icons; | ||
var iconNode; | ||
var iconClassName = classNames("".concat(prefixCls, "-icon"), "".concat(iconPrefix, "icon"), (_classNames = {}, _defineProperty(_classNames, "".concat(iconPrefix, "icon-").concat(icon), icon && isString(icon)), _defineProperty(_classNames, "".concat(iconPrefix, "icon-check"), !icon && status === 'finish' && icons && !icons.finish), _defineProperty(_classNames, "".concat(iconPrefix, "icon-close"), !icon && status === 'error' && icons && !icons.error), _classNames)); | ||
var iconDot = React.createElement("span", { | ||
className: "".concat(prefixCls, "-icon-dot") | ||
}); // `progressDot` enjoy the highest priority | ||
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' && icons && !icons.finish, _classNames[iconPrefix + 'icon-close'] = !icon && status === 'error' && icons && !icons.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 }) | ||
); | ||
if (progressDot) { | ||
if (typeof progressDot === 'function') { | ||
iconNode = React.createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, progressDot(iconDot, { | ||
index: stepNumber - 1, | ||
status: status, | ||
title: title, | ||
description: description | ||
})); | ||
} else { | ||
iconNode = React.createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, iconDot); | ||
} | ||
} else if (icon && !isString(icon)) { | ||
iconNode = React.createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, icon); | ||
} else if (icons && icons.finish && status === 'finish') { | ||
iconNode = React.createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, icons.finish); | ||
} else if (icons && icons.error && status === 'error') { | ||
iconNode = React.createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, icons.error); | ||
} else if (icon || status === 'finish' || status === 'error') { | ||
iconNode = React.createElement("span", { | ||
className: iconClassName | ||
}); | ||
} else { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
iconDot | ||
); | ||
iconNode = React.createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, stepNumber); | ||
} | ||
} else if (icon && !isString(icon)) { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icon | ||
); | ||
} else if (icons && icons.finish && status === 'finish') { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icons.finish | ||
); | ||
} else if (icons && icons.error && status === 'error') { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icons.error | ||
); | ||
} else if (icon || status === 'finish' || status === 'error') { | ||
iconNode = React.createElement('span', { className: iconClassName }); | ||
} else { | ||
iconNode = React.createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
stepNumber | ||
); | ||
return iconNode; | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _classNames2; | ||
return iconNode; | ||
}; | ||
var _this$props3 = this.props, | ||
className = _this$props3.className, | ||
prefixCls = _this$props3.prefixCls, | ||
style = _this$props3.style, | ||
itemWidth = _this$props3.itemWidth, | ||
active = _this$props3.active, | ||
_this$props3$status = _this$props3.status, | ||
status = _this$props3$status === void 0 ? 'wait' : _this$props3$status, | ||
iconPrefix = _this$props3.iconPrefix, | ||
icon = _this$props3.icon, | ||
wrapperStyle = _this$props3.wrapperStyle, | ||
adjustMarginRight = _this$props3.adjustMarginRight, | ||
stepNumber = _this$props3.stepNumber, | ||
disabled = _this$props3.disabled, | ||
description = _this$props3.description, | ||
title = _this$props3.title, | ||
subTitle = _this$props3.subTitle, | ||
progressDot = _this$props3.progressDot, | ||
tailContent = _this$props3.tailContent, | ||
icons = _this$props3.icons, | ||
stepIndex = _this$props3.stepIndex, | ||
onStepClick = _this$props3.onStepClick, | ||
onClick = _this$props3.onClick, | ||
restProps = _objectWithoutProperties(_this$props3, ["className", "prefixCls", "style", "itemWidth", "active", "status", "iconPrefix", "icon", "wrapperStyle", "adjustMarginRight", "stepNumber", "disabled", "description", "title", "subTitle", "progressDot", "tailContent", "icons", "stepIndex", "onStepClick", "onClick"]); | ||
Step.prototype.render = function render() { | ||
var _classNames2; | ||
var classString = classNames("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(status), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-item-custom"), icon), _defineProperty(_classNames2, "".concat(prefixCls, "-item-active"), active), _defineProperty(_classNames2, "".concat(prefixCls, "-item-disabled"), disabled === true), _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, | ||
icons = _props2.icons, | ||
stepIndex = _props2.stepIndex, | ||
onStepClick = _props2.onStepClick, | ||
onClick = _props2.onClick, | ||
restProps = _objectWithoutProperties(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot', 'tailContent', 'icons', 'stepIndex', 'onStepClick', 'onClick']); | ||
var stepItemStyle = _objectSpread({}, style); | ||
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; | ||
} | ||
if (itemWidth) { | ||
stepItemStyle.width = itemWidth; | ||
} | ||
var accessibilityProps = {}; | ||
if (onStepClick) { | ||
accessibilityProps.role = 'button'; | ||
accessibilityProps.tabIndex = 0; | ||
accessibilityProps.onClick = this.onClick; | ||
} | ||
if (adjustMarginRight) { | ||
stepItemStyle.marginRight = adjustMarginRight; | ||
} | ||
return React.createElement( | ||
'div', | ||
_extends({ | ||
onClick: onClick | ||
}, accessibilityProps, restProps, { | ||
var accessibilityProps = {}; | ||
if (onStepClick && !disabled) { | ||
accessibilityProps.role = 'button'; | ||
accessibilityProps.tabIndex = 0; | ||
accessibilityProps.onClick = this.onClick; | ||
} | ||
return React.createElement("div", _extends({}, restProps, { | ||
className: classString, | ||
style: stepItemStyle | ||
}), | ||
React.createElement( | ||
'div', | ||
{ 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-title' }, | ||
title | ||
), | ||
description && React.createElement( | ||
'div', | ||
{ className: prefixCls + '-item-description' }, | ||
description | ||
) | ||
) | ||
); | ||
}; | ||
}), React.createElement("div", _extends({ | ||
onClick: onClick | ||
}, accessibilityProps, { | ||
className: "".concat(prefixCls, "-item-container") | ||
}), React.createElement("div", { | ||
className: "".concat(prefixCls, "-item-tail") | ||
}, tailContent), React.createElement("div", { | ||
className: "".concat(prefixCls, "-item-icon") | ||
}, this.renderIconNode()), React.createElement("div", { | ||
className: "".concat(prefixCls, "-item-content") | ||
}, React.createElement("div", { | ||
className: "".concat(prefixCls, "-item-title") | ||
}, title, subTitle && React.createElement("div", { | ||
title: subTitle, | ||
className: "".concat(prefixCls, "-item-subtitle") | ||
}, subTitle)), description && React.createElement("div", { | ||
className: "".concat(prefixCls, "-item-description") | ||
}, description)))); | ||
} | ||
}]); | ||
@@ -172,3 +209,3 @@ return Step; | ||
Step.propTypes = { | ||
_defineProperty(Step, "propTypes", { | ||
className: PropTypes.string, | ||
@@ -179,2 +216,4 @@ prefixCls: PropTypes.string, | ||
itemWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
active: PropTypes.bool, | ||
disabled: PropTypes.bool, | ||
status: PropTypes.string, | ||
@@ -188,2 +227,3 @@ iconPrefix: PropTypes.string, | ||
title: PropTypes.any, | ||
subTitle: PropTypes.any, | ||
progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), | ||
@@ -197,22 +237,4 @@ tailContent: PropTypes.any, | ||
onStepClick: PropTypes.func | ||
}; | ||
}); | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onClick = function () { | ||
var _props3 = _this2.props, | ||
onClick = _props3.onClick, | ||
onStepClick = _props3.onStepClick, | ||
stepIndex = _props3.stepIndex; | ||
if (onClick) { | ||
onClick.apply(undefined, arguments); | ||
} | ||
onStepClick(stepIndex); | ||
}; | ||
}; | ||
export default Step; | ||
export { Step as default }; |
229
es/Steps.js
@@ -1,6 +0,29 @@ | ||
import _extends from 'babel-runtime/helpers/extends'; | ||
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; | ||
import _inherits from 'babel-runtime/helpers/inherits'; | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
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; } | ||
/* eslint react/no-did-mount-set-state: 0 */ | ||
@@ -14,11 +37,15 @@ import React, { cloneElement, Children, Component } from 'react'; | ||
var Steps = function (_Component) { | ||
var Steps = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
_inherits(Steps, _Component); | ||
function Steps(props) { | ||
var _this; | ||
_classCallCheck(this, Steps); | ||
var _this = _possibleConstructorReturn(this, _Component.call(this, props)); | ||
_this = _possibleConstructorReturn(this, _getPrototypeOf(Steps).call(this, props)); | ||
_this.onStepClick = function (next) { | ||
_defineProperty(_assertThisInitialized(_this), "onStepClick", function (next) { | ||
var _this$props = _this.props, | ||
@@ -31,10 +58,13 @@ onChange = _this$props.onChange, | ||
} | ||
}; | ||
}); | ||
_this.calcStepOffsetWidth = function () { | ||
_defineProperty(_assertThisInitialized(_this), "calcStepOffsetWidth", function () { | ||
if (isFlexSupported()) { | ||
return; | ||
} | ||
// Just for IE9 | ||
var domNode = findDOMNode(_this); | ||
var lastStepOffsetWidth = _this.state.lastStepOffsetWidth; // Just for IE9 | ||
var domNode = findDOMNode(_assertThisInitialized(_this)); | ||
if (domNode.children.length > 0) { | ||
@@ -44,13 +74,17 @@ if (_this.calcTimeout) { | ||
} | ||
_this.calcTimeout = setTimeout(function () { | ||
// +1 for fit edge bug of digit width, like 35.4px | ||
var lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1; | ||
// Reduce shake bug | ||
if (_this.state.lastStepOffsetWidth === lastStepOffsetWidth || Math.abs(_this.state.lastStepOffsetWidth - lastStepOffsetWidth) <= 3) { | ||
var offsetWidth = (domNode.lastChild.offsetWidth || 0) + 1; // Reduce shake bug | ||
if (lastStepOffsetWidth === offsetWidth || Math.abs(lastStepOffsetWidth - offsetWidth) <= 3) { | ||
return; | ||
} | ||
_this.setState({ lastStepOffsetWidth: lastStepOffsetWidth }); | ||
_this.setState({ | ||
lastStepOffsetWidth: offsetWidth | ||
}); | ||
}); | ||
} | ||
}; | ||
}); | ||
@@ -65,67 +99,76 @@ _this.state = { | ||
Steps.prototype.componentDidMount = function componentDidMount() { | ||
this.calcStepOffsetWidth(); | ||
if (!isFlexSupported()) { | ||
this.setState({ | ||
flexSupported: false | ||
}); | ||
} | ||
}; | ||
_createClass(Steps, [{ | ||
key: "componentDidMount", | ||
value: function componentDidMount() { | ||
this.calcStepOffsetWidth(); | ||
Steps.prototype.componentDidUpdate = function componentDidUpdate() { | ||
this.calcStepOffsetWidth(); | ||
}; | ||
Steps.prototype.componentWillUnmount = function componentWillUnmount() { | ||
if (this.calcTimeout) { | ||
clearTimeout(this.calcTimeout); | ||
if (!isFlexSupported()) { | ||
this.setState({ | ||
flexSupported: false | ||
}); | ||
} | ||
} | ||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) { | ||
this.calcStepOffsetWidth.cancel(); | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate() { | ||
this.calcStepOffsetWidth(); | ||
} | ||
}; | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
if (this.calcTimeout) { | ||
clearTimeout(this.calcTimeout); | ||
} | ||
Steps.prototype.render = function render() { | ||
var _classNames, | ||
_this2 = this; | ||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) { | ||
this.calcStepOffsetWidth.cancel(); | ||
} | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _classNames, | ||
_this2 = this; | ||
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, | ||
icons = _props.icons, | ||
onChange = _props.onChange, | ||
restProps = _objectWithoutProperties(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot', 'initial', 'icons', 'onChange']); | ||
var _this$props2 = this.props, | ||
prefixCls = _this$props2.prefixCls, | ||
_this$props2$style = _this$props2.style, | ||
style = _this$props2$style === void 0 ? {} : _this$props2$style, | ||
className = _this$props2.className, | ||
children = _this$props2.children, | ||
direction = _this$props2.direction, | ||
type = _this$props2.type, | ||
labelPlacement = _this$props2.labelPlacement, | ||
iconPrefix = _this$props2.iconPrefix, | ||
status = _this$props2.status, | ||
size = _this$props2.size, | ||
current = _this$props2.current, | ||
progressDot = _this$props2.progressDot, | ||
initial = _this$props2.initial, | ||
icons = _this$props2.icons, | ||
onChange = _this$props2.onChange, | ||
restProps = _objectWithoutProperties(_this$props2, ["prefixCls", "style", "className", "children", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "initial", "icons", "onChange"]); | ||
var _state = this.state, | ||
lastStepOffsetWidth = _state.lastStepOffsetWidth, | ||
flexSupported = _state.flexSupported; | ||
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[prefixCls + '-flex-not-supported'] = !flexSupported, _classNames)); | ||
return React.createElement( | ||
'div', | ||
_extends({ className: classString, style: style }, restProps), | ||
Children.map(filteredChildren, function (child, index) { | ||
var isNav = type === 'navigation'; | ||
var _this$state = this.state, | ||
lastStepOffsetWidth = _this$state.lastStepOffsetWidth, | ||
flexSupported = _this$state.flexSupported; | ||
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, "".concat(prefixCls, "-").concat(direction), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_classNames, "".concat(prefixCls, "-label-").concat(adjustedlabelPlacement), direction === 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-dot"), !!progressDot), _defineProperty(_classNames, "".concat(prefixCls, "-navigation"), isNav), _defineProperty(_classNames, "".concat(prefixCls, "-flex-not-supported"), !flexSupported), _classNames)); | ||
return React.createElement("div", _extends({ | ||
className: classString, | ||
style: style | ||
}, restProps), Children.map(filteredChildren, function (child, index) { | ||
if (!child) { | ||
return null; | ||
} | ||
var stepNumber = initial + index; | ||
var childProps = _extends({ | ||
stepNumber: '' + (stepNumber + 1), | ||
var childProps = _objectSpread({ | ||
stepNumber: "".concat(stepNumber + 1), | ||
stepIndex: stepNumber, | ||
@@ -139,10 +182,18 @@ prefixCls: prefixCls, | ||
}, child.props); | ||
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) { | ||
childProps.itemWidth = 100 / lastIndex + '%'; | ||
childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1); | ||
} | ||
// fix tail color | ||
if (!flexSupported && direction !== 'vertical') { | ||
if (isNav) { | ||
childProps.itemWidth = "".concat(100 / (lastIndex + 1), "%"); | ||
childProps.adjustMarginRight = 0; | ||
} else if (index !== lastIndex) { | ||
childProps.itemWidth = "".concat(100 / lastIndex, "%"); | ||
childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1); | ||
} | ||
} // fix tail color | ||
if (status === 'error' && index === current - 1) { | ||
childProps.className = prefixCls + '-next-error'; | ||
childProps.className = "".concat(prefixCls, "-next-error"); | ||
} | ||
if (!child.props.status) { | ||
@@ -157,6 +208,8 @@ if (stepNumber === current) { | ||
} | ||
childProps.active = stepNumber === current; | ||
return cloneElement(child, childProps); | ||
}) | ||
); | ||
}; | ||
})); | ||
} | ||
}]); | ||
@@ -166,3 +219,4 @@ return Steps; | ||
Steps.propTypes = { | ||
_defineProperty(Steps, "propTypes", { | ||
type: PropTypes.string, | ||
prefixCls: PropTypes.string, | ||
@@ -185,4 +239,6 @@ className: PropTypes.string, | ||
onChange: PropTypes.func | ||
}; | ||
Steps.defaultProps = { | ||
}); | ||
_defineProperty(Steps, "defaultProps", { | ||
type: 'default', | ||
prefixCls: 'rc-steps', | ||
@@ -197,3 +253,4 @@ iconPrefix: 'rc', | ||
progressDot: false | ||
}; | ||
export default Steps; | ||
}); | ||
export { Steps as default }; |
@@ -0,8 +1,9 @@ | ||
// eslint-disable-next-line import/prefer-default-export | ||
export function isFlexSupported() { | ||
if (typeof window !== 'undefined' && window.document && window.document.documentElement) { | ||
var documentElement = window.document.documentElement; | ||
return 'flex' in documentElement.style || 'webkitFlex' in documentElement.style || 'Flex' in documentElement.style || 'msFlex' in documentElement.style; | ||
} | ||
return false; | ||
} |
# History | ||
---- | ||
## 3.5.0 | ||
- Support `navigation` type & `disabled` prop. | ||
## 3.4.0 | ||
@@ -5,0 +9,0 @@ |
@@ -1,19 +0,22 @@ | ||
'use strict'; | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Step = undefined; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
Object.defineProperty(exports, "Step", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Step["default"]; | ||
} | ||
}); | ||
exports["default"] = void 0; | ||
var _Steps = require('./Steps'); | ||
var _Steps = _interopRequireDefault(require("./Steps")); | ||
var _Steps2 = _interopRequireDefault(_Steps); | ||
var _Step = _interopRequireDefault(require("./Step")); | ||
var _Step = require('./Step'); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
var _Step2 = _interopRequireDefault(_Step); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
_Steps2['default'].Step = _Step2['default']; | ||
exports.Step = _Step2['default']; | ||
exports['default'] = _Steps2['default']; | ||
_Steps["default"].Step = _Step["default"]; | ||
var _default = _Steps["default"]; | ||
exports["default"] = _default; |
394
lib/Step.js
@@ -1,39 +0,44 @@ | ||
'use strict'; | ||
"use strict"; | ||
exports.__esModule = true; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports["default"] = void 0; | ||
var _extends2 = require('babel-runtime/helpers/extends'); | ||
var _react = _interopRequireDefault(require("react")); | ||
var _extends3 = _interopRequireDefault(_extends2); | ||
var _propTypes = _interopRequireDefault(require("prop-types")); | ||
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); | ||
var _classnames = _interopRequireDefault(require("classnames")); | ||
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var _react = require('react'); | ||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
var _react2 = _interopRequireDefault(_react); | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
var _propTypes = require('prop-types'); | ||
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
var _classnames = require('classnames'); | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
var _classnames2 = _interopRequireDefault(_classnames); | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
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; } | ||
function isString(str) { | ||
@@ -43,203 +48,202 @@ return typeof str === 'string'; | ||
var Step = function (_React$Component) { | ||
(0, _inherits3['default'])(Step, _React$Component); | ||
var Step = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
_inherits(Step, _React$Component); | ||
function Step() { | ||
var _temp, _this, _ret; | ||
var _getPrototypeOf2; | ||
(0, _classCallCheck3['default'])(this, Step); | ||
var _this; | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
_classCallCheck(this, Step); | ||
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
_args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret); | ||
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Step)).call.apply(_getPrototypeOf2, [this].concat(_args))); | ||
_defineProperty(_assertThisInitialized(_this), "onClick", function () { | ||
var _this$props = _this.props, | ||
onClick = _this$props.onClick, | ||
onStepClick = _this$props.onStepClick, | ||
stepIndex = _this$props.stepIndex; | ||
if (onClick) { | ||
onClick.apply(void 0, arguments); | ||
} | ||
onStepClick(stepIndex); | ||
}); | ||
return _this; | ||
} | ||
Step.prototype.renderIconNode = function renderIconNode() { | ||
var _classNames; | ||
_createClass(Step, [{ | ||
key: "renderIconNode", | ||
value: 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, | ||
icons = _props.icons; | ||
var _this$props2 = this.props, | ||
prefixCls = _this$props2.prefixCls, | ||
progressDot = _this$props2.progressDot, | ||
stepNumber = _this$props2.stepNumber, | ||
status = _this$props2.status, | ||
title = _this$props2.title, | ||
description = _this$props2.description, | ||
icon = _this$props2.icon, | ||
iconPrefix = _this$props2.iconPrefix, | ||
icons = _this$props2.icons; | ||
var iconNode; | ||
var iconClassName = (0, _classnames["default"])("".concat(prefixCls, "-icon"), "".concat(iconPrefix, "icon"), (_classNames = {}, _defineProperty(_classNames, "".concat(iconPrefix, "icon-").concat(icon), icon && isString(icon)), _defineProperty(_classNames, "".concat(iconPrefix, "icon-check"), !icon && status === 'finish' && icons && !icons.finish), _defineProperty(_classNames, "".concat(iconPrefix, "icon-close"), !icon && status === 'error' && icons && !icons.error), _classNames)); | ||
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' && icons && !icons.finish, _classNames[iconPrefix + 'icon-close'] = !icon && status === 'error' && icons && !icons.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 }) | ||
); | ||
var iconDot = _react["default"].createElement("span", { | ||
className: "".concat(prefixCls, "-icon-dot") | ||
}); // `progressDot` enjoy the highest priority | ||
if (progressDot) { | ||
if (typeof progressDot === 'function') { | ||
iconNode = _react["default"].createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, progressDot(iconDot, { | ||
index: stepNumber - 1, | ||
status: status, | ||
title: title, | ||
description: description | ||
})); | ||
} else { | ||
iconNode = _react["default"].createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, iconDot); | ||
} | ||
} else if (icon && !isString(icon)) { | ||
iconNode = _react["default"].createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, icon); | ||
} else if (icons && icons.finish && status === 'finish') { | ||
iconNode = _react["default"].createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, icons.finish); | ||
} else if (icons && icons.error && status === 'error') { | ||
iconNode = _react["default"].createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, icons.error); | ||
} else if (icon || status === 'finish' || status === 'error') { | ||
iconNode = _react["default"].createElement("span", { | ||
className: iconClassName | ||
}); | ||
} else { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
iconDot | ||
); | ||
iconNode = _react["default"].createElement("span", { | ||
className: "".concat(prefixCls, "-icon") | ||
}, stepNumber); | ||
} | ||
} else if (icon && !isString(icon)) { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icon | ||
); | ||
} else if (icons && icons.finish && status === 'finish') { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icons.finish | ||
); | ||
} else if (icons && icons.error && status === 'error') { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
icons.error | ||
); | ||
} else if (icon || status === 'finish' || status === 'error') { | ||
iconNode = _react2['default'].createElement('span', { className: iconClassName }); | ||
} else { | ||
iconNode = _react2['default'].createElement( | ||
'span', | ||
{ className: prefixCls + '-icon' }, | ||
stepNumber | ||
); | ||
return iconNode; | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _classNames2; | ||
return iconNode; | ||
}; | ||
var _this$props3 = this.props, | ||
className = _this$props3.className, | ||
prefixCls = _this$props3.prefixCls, | ||
style = _this$props3.style, | ||
itemWidth = _this$props3.itemWidth, | ||
active = _this$props3.active, | ||
_this$props3$status = _this$props3.status, | ||
status = _this$props3$status === void 0 ? 'wait' : _this$props3$status, | ||
iconPrefix = _this$props3.iconPrefix, | ||
icon = _this$props3.icon, | ||
wrapperStyle = _this$props3.wrapperStyle, | ||
adjustMarginRight = _this$props3.adjustMarginRight, | ||
stepNumber = _this$props3.stepNumber, | ||
disabled = _this$props3.disabled, | ||
description = _this$props3.description, | ||
title = _this$props3.title, | ||
subTitle = _this$props3.subTitle, | ||
progressDot = _this$props3.progressDot, | ||
tailContent = _this$props3.tailContent, | ||
icons = _this$props3.icons, | ||
stepIndex = _this$props3.stepIndex, | ||
onStepClick = _this$props3.onStepClick, | ||
onClick = _this$props3.onClick, | ||
restProps = _objectWithoutProperties(_this$props3, ["className", "prefixCls", "style", "itemWidth", "active", "status", "iconPrefix", "icon", "wrapperStyle", "adjustMarginRight", "stepNumber", "disabled", "description", "title", "subTitle", "progressDot", "tailContent", "icons", "stepIndex", "onStepClick", "onClick"]); | ||
Step.prototype.render = function render() { | ||
var _classNames2; | ||
var classString = (0, _classnames["default"])("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(status), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-item-custom"), icon), _defineProperty(_classNames2, "".concat(prefixCls, "-item-active"), active), _defineProperty(_classNames2, "".concat(prefixCls, "-item-disabled"), disabled === true), _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, | ||
icons = _props2.icons, | ||
stepIndex = _props2.stepIndex, | ||
onStepClick = _props2.onStepClick, | ||
onClick = _props2.onClick, | ||
restProps = (0, _objectWithoutProperties3['default'])(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot', 'tailContent', 'icons', 'stepIndex', 'onStepClick', 'onClick']); | ||
var stepItemStyle = _objectSpread({}, style); | ||
if (itemWidth) { | ||
stepItemStyle.width = itemWidth; | ||
} | ||
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; | ||
} | ||
if (adjustMarginRight) { | ||
stepItemStyle.marginRight = adjustMarginRight; | ||
} | ||
var accessibilityProps = {}; | ||
if (onStepClick) { | ||
accessibilityProps.role = 'button'; | ||
accessibilityProps.tabIndex = 0; | ||
accessibilityProps.onClick = this.onClick; | ||
} | ||
var accessibilityProps = {}; | ||
return _react2['default'].createElement( | ||
'div', | ||
(0, _extends3['default'])({ | ||
onClick: onClick | ||
}, accessibilityProps, restProps, { | ||
if (onStepClick && !disabled) { | ||
accessibilityProps.role = 'button'; | ||
accessibilityProps.tabIndex = 0; | ||
accessibilityProps.onClick = this.onClick; | ||
} | ||
return _react["default"].createElement("div", _extends({}, restProps, { | ||
className: classString, | ||
style: stepItemStyle | ||
}), | ||
_react2['default'].createElement( | ||
'div', | ||
{ 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-title' }, | ||
title | ||
), | ||
description && _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-item-description' }, | ||
description | ||
) | ||
) | ||
); | ||
}; | ||
}), _react["default"].createElement("div", _extends({ | ||
onClick: onClick | ||
}, accessibilityProps, { | ||
className: "".concat(prefixCls, "-item-container") | ||
}), _react["default"].createElement("div", { | ||
className: "".concat(prefixCls, "-item-tail") | ||
}, tailContent), _react["default"].createElement("div", { | ||
className: "".concat(prefixCls, "-item-icon") | ||
}, this.renderIconNode()), _react["default"].createElement("div", { | ||
className: "".concat(prefixCls, "-item-content") | ||
}, _react["default"].createElement("div", { | ||
className: "".concat(prefixCls, "-item-title") | ||
}, title, subTitle && _react["default"].createElement("div", { | ||
title: subTitle, | ||
className: "".concat(prefixCls, "-item-subtitle") | ||
}, subTitle)), description && _react["default"].createElement("div", { | ||
className: "".concat(prefixCls, "-item-description") | ||
}, description)))); | ||
} | ||
}]); | ||
return Step; | ||
}(_react2['default'].Component); | ||
}(_react["default"].Component); | ||
Step.propTypes = { | ||
className: _propTypes2['default'].string, | ||
prefixCls: _propTypes2['default'].string, | ||
style: _propTypes2['default'].object, | ||
wrapperStyle: _propTypes2['default'].object, | ||
itemWidth: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string]), | ||
status: _propTypes2['default'].string, | ||
iconPrefix: _propTypes2['default'].string, | ||
icon: _propTypes2['default'].node, | ||
adjustMarginRight: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string]), | ||
stepNumber: _propTypes2['default'].string, | ||
stepIndex: _propTypes2['default'].number, | ||
description: _propTypes2['default'].any, | ||
title: _propTypes2['default'].any, | ||
progressDot: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].func]), | ||
tailContent: _propTypes2['default'].any, | ||
icons: _propTypes2['default'].shape({ | ||
finish: _propTypes2['default'].node, | ||
error: _propTypes2['default'].node | ||
exports["default"] = Step; | ||
_defineProperty(Step, "propTypes", { | ||
className: _propTypes["default"].string, | ||
prefixCls: _propTypes["default"].string, | ||
style: _propTypes["default"].object, | ||
wrapperStyle: _propTypes["default"].object, | ||
itemWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]), | ||
active: _propTypes["default"].bool, | ||
disabled: _propTypes["default"].bool, | ||
status: _propTypes["default"].string, | ||
iconPrefix: _propTypes["default"].string, | ||
icon: _propTypes["default"].node, | ||
adjustMarginRight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]), | ||
stepNumber: _propTypes["default"].string, | ||
stepIndex: _propTypes["default"].number, | ||
description: _propTypes["default"].any, | ||
title: _propTypes["default"].any, | ||
subTitle: _propTypes["default"].any, | ||
progressDot: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].func]), | ||
tailContent: _propTypes["default"].any, | ||
icons: _propTypes["default"].shape({ | ||
finish: _propTypes["default"].node, | ||
error: _propTypes["default"].node | ||
}), | ||
onClick: _propTypes2['default'].func, | ||
onStepClick: _propTypes2['default'].func | ||
}; | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this2 = this; | ||
this.onClick = function () { | ||
var _props3 = _this2.props, | ||
onClick = _props3.onClick, | ||
onStepClick = _props3.onStepClick, | ||
stepIndex = _props3.stepIndex; | ||
if (onClick) { | ||
onClick.apply(undefined, arguments); | ||
} | ||
onStepClick(stepIndex); | ||
}; | ||
}; | ||
exports['default'] = Step; | ||
module.exports = exports['default']; | ||
onClick: _propTypes["default"].func, | ||
onStepClick: _propTypes["default"].func | ||
}); |
286
lib/Steps.js
@@ -1,57 +0,65 @@ | ||
'use strict'; | ||
"use strict"; | ||
exports.__esModule = true; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports["default"] = void 0; | ||
var _extends2 = require('babel-runtime/helpers/extends'); | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _extends3 = _interopRequireDefault(_extends2); | ||
var _propTypes = _interopRequireDefault(require("prop-types")); | ||
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); | ||
var _reactDom = require("react-dom"); | ||
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); | ||
var _classnames = _interopRequireDefault(require("classnames")); | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
var _debounce = _interopRequireDefault(require("lodash/debounce")); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _utils = require("./utils"); | ||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } | ||
var _inherits2 = require('babel-runtime/helpers/inherits'); | ||
function _extends() { _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; }; return _extends.apply(this, arguments); } | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } | ||
var _react = require('react'); | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
var _react2 = _interopRequireDefault(_react); | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
var _propTypes = require('prop-types'); | ||
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var _reactDom = require('react-dom'); | ||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
var _classnames = require('classnames'); | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
var _classnames2 = _interopRequireDefault(_classnames); | ||
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
var _debounce = require('lodash/debounce'); | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
var _debounce2 = _interopRequireDefault(_debounce); | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
var _utils = require('./utils'); | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
/* eslint react/no-did-mount-set-state: 0 */ | ||
var Steps = function (_Component) { | ||
(0, _inherits3['default'])(Steps, _Component); | ||
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; } | ||
var Steps = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
_inherits(Steps, _Component); | ||
function Steps(props) { | ||
(0, _classCallCheck3['default'])(this, Steps); | ||
var _this; | ||
var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props)); | ||
_classCallCheck(this, Steps); | ||
_this.onStepClick = function (next) { | ||
_this = _possibleConstructorReturn(this, _getPrototypeOf(Steps).call(this, props)); | ||
_defineProperty(_assertThisInitialized(_this), "onStepClick", function (next) { | ||
var _this$props = _this.props, | ||
@@ -64,10 +72,13 @@ onChange = _this$props.onChange, | ||
} | ||
}; | ||
}); | ||
_this.calcStepOffsetWidth = function () { | ||
_defineProperty(_assertThisInitialized(_this), "calcStepOffsetWidth", function () { | ||
if ((0, _utils.isFlexSupported)()) { | ||
return; | ||
} | ||
// Just for IE9 | ||
var domNode = (0, _reactDom.findDOMNode)(_this); | ||
var lastStepOffsetWidth = _this.state.lastStepOffsetWidth; // Just for IE9 | ||
var domNode = (0, _reactDom.findDOMNode)(_assertThisInitialized(_this)); | ||
if (domNode.children.length > 0) { | ||
@@ -77,13 +88,17 @@ if (_this.calcTimeout) { | ||
} | ||
_this.calcTimeout = setTimeout(function () { | ||
// +1 for fit edge bug of digit width, like 35.4px | ||
var lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1; | ||
// Reduce shake bug | ||
if (_this.state.lastStepOffsetWidth === lastStepOffsetWidth || Math.abs(_this.state.lastStepOffsetWidth - lastStepOffsetWidth) <= 3) { | ||
var offsetWidth = (domNode.lastChild.offsetWidth || 0) + 1; // Reduce shake bug | ||
if (lastStepOffsetWidth === offsetWidth || Math.abs(lastStepOffsetWidth - offsetWidth) <= 3) { | ||
return; | ||
} | ||
_this.setState({ lastStepOffsetWidth: lastStepOffsetWidth }); | ||
_this.setState({ | ||
lastStepOffsetWidth: offsetWidth | ||
}); | ||
}); | ||
} | ||
}; | ||
}); | ||
@@ -94,70 +109,82 @@ _this.state = { | ||
}; | ||
_this.calcStepOffsetWidth = (0, _debounce2['default'])(_this.calcStepOffsetWidth, 150); | ||
_this.calcStepOffsetWidth = (0, _debounce["default"])(_this.calcStepOffsetWidth, 150); | ||
return _this; | ||
} | ||
Steps.prototype.componentDidMount = function componentDidMount() { | ||
this.calcStepOffsetWidth(); | ||
if (!(0, _utils.isFlexSupported)()) { | ||
this.setState({ | ||
flexSupported: false | ||
}); | ||
} | ||
}; | ||
_createClass(Steps, [{ | ||
key: "componentDidMount", | ||
value: function componentDidMount() { | ||
this.calcStepOffsetWidth(); | ||
Steps.prototype.componentDidUpdate = function componentDidUpdate() { | ||
this.calcStepOffsetWidth(); | ||
}; | ||
Steps.prototype.componentWillUnmount = function componentWillUnmount() { | ||
if (this.calcTimeout) { | ||
clearTimeout(this.calcTimeout); | ||
if (!(0, _utils.isFlexSupported)()) { | ||
this.setState({ | ||
flexSupported: false | ||
}); | ||
} | ||
} | ||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) { | ||
this.calcStepOffsetWidth.cancel(); | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate() { | ||
this.calcStepOffsetWidth(); | ||
} | ||
}; | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
if (this.calcTimeout) { | ||
clearTimeout(this.calcTimeout); | ||
} | ||
Steps.prototype.render = function render() { | ||
var _classNames, | ||
_this2 = this; | ||
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) { | ||
this.calcStepOffsetWidth.cancel(); | ||
} | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _classNames, | ||
_this2 = this; | ||
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, | ||
icons = _props.icons, | ||
onChange = _props.onChange, | ||
restProps = (0, _objectWithoutProperties3['default'])(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot', 'initial', 'icons', 'onChange']); | ||
var _state = this.state, | ||
lastStepOffsetWidth = _state.lastStepOffsetWidth, | ||
flexSupported = _state.flexSupported; | ||
var _this$props2 = this.props, | ||
prefixCls = _this$props2.prefixCls, | ||
_this$props2$style = _this$props2.style, | ||
style = _this$props2$style === void 0 ? {} : _this$props2$style, | ||
className = _this$props2.className, | ||
children = _this$props2.children, | ||
direction = _this$props2.direction, | ||
type = _this$props2.type, | ||
labelPlacement = _this$props2.labelPlacement, | ||
iconPrefix = _this$props2.iconPrefix, | ||
status = _this$props2.status, | ||
size = _this$props2.size, | ||
current = _this$props2.current, | ||
progressDot = _this$props2.progressDot, | ||
initial = _this$props2.initial, | ||
icons = _this$props2.icons, | ||
onChange = _this$props2.onChange, | ||
restProps = _objectWithoutProperties(_this$props2, ["prefixCls", "style", "className", "children", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "initial", "icons", "onChange"]); | ||
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[prefixCls + '-flex-not-supported'] = !flexSupported, _classNames)); | ||
var isNav = type === 'navigation'; | ||
var _this$state = this.state, | ||
lastStepOffsetWidth = _this$state.lastStepOffsetWidth, | ||
flexSupported = _this$state.flexSupported; | ||
return _react2['default'].createElement( | ||
'div', | ||
(0, _extends3['default'])({ className: classString, style: style }, restProps), | ||
_react.Children.map(filteredChildren, function (child, index) { | ||
var filteredChildren = _react["default"].Children.toArray(children).filter(function (c) { | ||
return !!c; | ||
}); | ||
var lastIndex = filteredChildren.length - 1; | ||
var adjustedlabelPlacement = progressDot ? 'vertical' : labelPlacement; | ||
var classString = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-").concat(direction), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_classNames, "".concat(prefixCls, "-label-").concat(adjustedlabelPlacement), direction === 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-dot"), !!progressDot), _defineProperty(_classNames, "".concat(prefixCls, "-navigation"), isNav), _defineProperty(_classNames, "".concat(prefixCls, "-flex-not-supported"), !flexSupported), _classNames)); | ||
return _react["default"].createElement("div", _extends({ | ||
className: classString, | ||
style: style | ||
}, restProps), _react.Children.map(filteredChildren, function (child, index) { | ||
if (!child) { | ||
return null; | ||
} | ||
var stepNumber = initial + index; | ||
var childProps = (0, _extends3['default'])({ | ||
stepNumber: '' + (stepNumber + 1), | ||
var childProps = _objectSpread({ | ||
stepNumber: "".concat(stepNumber + 1), | ||
stepIndex: stepNumber, | ||
@@ -171,10 +198,18 @@ prefixCls: prefixCls, | ||
}, child.props); | ||
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) { | ||
childProps.itemWidth = 100 / lastIndex + '%'; | ||
childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1); | ||
} | ||
// fix tail color | ||
if (!flexSupported && direction !== 'vertical') { | ||
if (isNav) { | ||
childProps.itemWidth = "".concat(100 / (lastIndex + 1), "%"); | ||
childProps.adjustMarginRight = 0; | ||
} else if (index !== lastIndex) { | ||
childProps.itemWidth = "".concat(100 / lastIndex, "%"); | ||
childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1); | ||
} | ||
} // fix tail color | ||
if (status === 'error' && index === current - 1) { | ||
childProps.className = prefixCls + '-next-error'; | ||
childProps.className = "".concat(prefixCls, "-next-error"); | ||
} | ||
if (!child.props.status) { | ||
@@ -189,6 +224,8 @@ if (stepNumber === current) { | ||
} | ||
childProps.active = stepNumber === current; | ||
return (0, _react.cloneElement)(child, childProps); | ||
}) | ||
); | ||
}; | ||
})); | ||
} | ||
}]); | ||
@@ -198,22 +235,27 @@ return Steps; | ||
Steps.propTypes = { | ||
prefixCls: _propTypes2['default'].string, | ||
className: _propTypes2['default'].string, | ||
iconPrefix: _propTypes2['default'].string, | ||
direction: _propTypes2['default'].string, | ||
labelPlacement: _propTypes2['default'].string, | ||
children: _propTypes2['default'].any, | ||
status: _propTypes2['default'].string, | ||
size: _propTypes2['default'].string, | ||
progressDot: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].func]), | ||
style: _propTypes2['default'].object, | ||
initial: _propTypes2['default'].number, | ||
current: _propTypes2['default'].number, | ||
icons: _propTypes2['default'].shape({ | ||
finish: _propTypes2['default'].node, | ||
error: _propTypes2['default'].node | ||
exports["default"] = Steps; | ||
_defineProperty(Steps, "propTypes", { | ||
type: _propTypes["default"].string, | ||
prefixCls: _propTypes["default"].string, | ||
className: _propTypes["default"].string, | ||
iconPrefix: _propTypes["default"].string, | ||
direction: _propTypes["default"].string, | ||
labelPlacement: _propTypes["default"].string, | ||
children: _propTypes["default"].any, | ||
status: _propTypes["default"].string, | ||
size: _propTypes["default"].string, | ||
progressDot: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].func]), | ||
style: _propTypes["default"].object, | ||
initial: _propTypes["default"].number, | ||
current: _propTypes["default"].number, | ||
icons: _propTypes["default"].shape({ | ||
finish: _propTypes["default"].node, | ||
error: _propTypes["default"].node | ||
}), | ||
onChange: _propTypes2['default'].func | ||
}; | ||
Steps.defaultProps = { | ||
onChange: _propTypes["default"].func | ||
}); | ||
_defineProperty(Steps, "defaultProps", { | ||
type: 'default', | ||
prefixCls: 'rc-steps', | ||
@@ -228,4 +270,2 @@ iconPrefix: 'rc', | ||
progressDot: false | ||
}; | ||
exports['default'] = Steps; | ||
module.exports = exports['default']; | ||
}); |
@@ -1,12 +0,16 @@ | ||
'use strict'; | ||
"use strict"; | ||
exports.__esModule = true; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.isFlexSupported = isFlexSupported; | ||
// eslint-disable-next-line import/prefer-default-export | ||
function isFlexSupported() { | ||
if (typeof window !== 'undefined' && window.document && window.document.documentElement) { | ||
var documentElement = window.document.documentElement; | ||
return 'flex' in documentElement.style || 'webkitFlex' in documentElement.style || 'Flex' in documentElement.style || 'msFlex' in documentElement.style; | ||
} | ||
return false; | ||
} |
{ | ||
"name": "rc-steps", | ||
"version": "3.4.1", | ||
"version": "3.5.0", | ||
"description": "steps ui component for react", | ||
@@ -47,3 +47,5 @@ "keywords": [ | ||
"coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls", | ||
"now-build": "npm run build" | ||
"now-build": "npm run build", | ||
"pre-commit": "rc-tools run pre-commit", | ||
"lint-staged": "lint-staged" | ||
}, | ||
@@ -65,3 +67,3 @@ "jest": { | ||
"devDependencies": { | ||
"coveralls": "^2.11.15", | ||
"coveralls": "^3.0.4", | ||
"enzyme": "^3.0.0", | ||
@@ -74,10 +76,17 @@ "enzyme-adapter-react-16": "^1.0.1", | ||
"rc-dialog": "6.x", | ||
"rc-tools": "7.x", | ||
"rc-tools": "9.x", | ||
"react": "^16.0.0", | ||
"react-dom": "^16.0.0", | ||
"react-test-renderer": "^16.0.0" | ||
"react-test-renderer": "^16.0.0", | ||
"lint-staged": "^9.0.0" | ||
}, | ||
"pre-commit": [ | ||
"lint" | ||
"lint-staged" | ||
], | ||
"lint-staged": { | ||
"*.{js,jsx,ts,tsx}": [ | ||
"npm run pre-commit", | ||
"git add" | ||
] | ||
}, | ||
"dependencies": { | ||
@@ -84,0 +93,0 @@ "babel-runtime": "^6.23.0", |
@@ -54,2 +54,8 @@ # rc-steps | ||
<tr> | ||
<td>type</td> | ||
<td>string</td> | ||
<td>default</td> | ||
<td>diretypetion of Steps, enum: `default` or `navigation`</td> | ||
</tr> | ||
<tr> | ||
<td>direction</td> | ||
@@ -124,2 +130,8 @@ <td>string</td> | ||
<tr> | ||
<td>subTitle</td> | ||
<td>ReactNode</td> | ||
<td></td> | ||
<td>subTitle of step item</td> | ||
</tr> | ||
<tr> | ||
<td>description</td> | ||
@@ -148,2 +160,8 @@ <td>ReactNode</td> | ||
</tr> | ||
<tr> | ||
<td>disabled</td> | ||
<td>bool</td> | ||
<td>false</td> | ||
<td>disabled step when onChange exist</td> | ||
</tr> | ||
</tbody> | ||
@@ -150,0 +168,0 @@ </table> |
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
78414
1814
177
13