Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rc-steps

Package Overview
Dependencies
Maintainers
7
Versions
74
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-steps - npm Package Compare versions

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;

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 @@

'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);

'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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc