rc-steps源码

用于设置步骤条

import { Steps, Icon } from 'antd';

const Step = Steps.Step;

ReactDOM.render(<Steps>

    <Step status="finish" title="Login" icon={<Icon type="user" />}/>

    <Step status="finish" title="Verification" icon={<Icon type="solution" />}/>

    <Step status="process" title="Pay" icon={<Icon type="credit-card" />}/>

    <Step status="wait" title="Done" icon={<Icon type="smile-o" />}/>

</Steps>, mountNode);

Steps.js源码

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
  
// 浅拷贝  
var _extends = Object.assign || function (target) {  
    for (var i = 1; i < arguments.length; i++) {   
        var source = arguments[i];   
        for (var key in source) {   
            if (Object.prototype.hasOwnProperty.call(source, key)) {   
                target[key] = source[key];   
            }   
        }   
    }   
    return target;   
};  
  
var _react = require('react');
var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);

var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) {  
    return obj && obj.__esModule ? obj : { default: obj };   
}  
  
// 以defaults设置obj对象某属性key的默认值，当obj[key]为undefined时触发
function _defaults(obj, defaults) { 
    var keys = Object.getOwnPropertyNames(defaults); 
    for (var i = 0; i < keys.length; i++) { 
        var key = keys[i]; 
        var value = Object.getOwnPropertyDescriptor(defaults, key); 
        if (value && value.configurable && obj[key] === undefined) { 
            Object.defineProperty(obj, key, value); 
        } 
    } 
    return obj; 
}

// obj对象添加方法或属性，可能采用属性描述符方式
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;   
}  

// 浅拷贝obj对象，但不包含在keys中的属性与方法
function _objectWithoutProperties(obj, keys) { 
    var target = {}; 
    for (var i in obj) { 
        if (keys.indexOf(i) >= 0) continue; 
        if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; 
        target[i] = obj[i]; 
    } 
    return target; 
}
 
// 构造函数只能使用new关键字调用  
function _classCallCheck(instance, Constructor) {   
    if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); }   
}  
 
function _possibleConstructorReturn(self, call) {  
    // 构造函数未曾实例化，ReferenceError引用错误 Uncaught ReferenceError:XXXX is not defined  
    if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); }   
    return call && (typeof call === "object" || typeof call === "function") ? call : self;   
}  
  
// 继承，设置subClass.prototype为{constuctor:subClass}，{constuctor:subClass}的原型是superClass.prototype  
// subClass.__proto__为superClass  
function _inherits(subClass, superClass) {  
    if (typeof superClass !== "function" && superClass !== null) {  
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);   
    }  
  
    // 实例可访问原型属性或方法，构造函数不能  
    // Object.create创建对象，首参为该对象的原型prototype，次参为对象的自有属性，并设置属性描述符  
    subClass.prototype = Object.create(superClass && superClass.prototype,   
        { constructor: { value: subClass, enumerable: false, writable: true, configurable: true }   
    });   
  
    // Object.setPrototypeOf(subClass, superClass)，设置subClass.__proto__为superClass  
    // Object.getPrototypeOf(subClass)，获取subClass.__proto__  
    // 构造函数可访问，实例不能  
    if (superClass) Object.setPrototypeOf ?   
        Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;   
}  

// var props={
//     prefixCls,// 样式类前缀
//     iconPrefix,// icon样式类前缀
//     style,// 样式
//     direction,// 步骤条方向 "horizontal" 或 "vertical"
//     labelPlacement,// 步骤条方向相关设置，默认为"horizontal"；direction="horizontal"向顶层包裹元素添加样式类
//     current,// 指定当前步骤，从0开始记数；用于Steps组件内计算Step元素的状态status
//     status,// 当前步骤的状态"wait"、"process"、"finish"、"error"
//         // 优先级是Step元素的props.status、其次是Steps元素的装填、其次由Steps组件计算status
//     size,// 大小 "default" 或 "small"
//     children,// 设置Step元素
// }
// <Steps {...props}>
//     <Step title="Finished" description="This is a description." />
//     <Step title="In Progress" description="This is a description." />
//     <Step title="Waiting" description="This is a description." />
// </Steps>
var Steps = function (_React$Component) {
    _inherits(Steps, _React$Component);

    function Steps(props) {
        _classCallCheck(this, Steps);

        var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

      // 计算最后一个Step元素的宽度，作为Step元素的偏移量marginRight
      _this.calcLastStepOffsetWidth = function () {
        var domNode = _reactDom2["default"].findDOMNode(_this);
        if (domNode.children.length > 0) {
          if (_this.calcTimeout) {
            clearTimeout(_this.calcTimeout);
          }
          _this.calcTimeout = setTimeout(function () {
            // +1 for fit edge bug of digit width, like 35.4px
            var lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1;
            if (_this.state.lastStepOffsetWidth === lastStepOffsetWidth) {
              return;
            }
            _this.setState({ lastStepOffsetWidth: lastStepOffsetWidth });
          });
        }
      };

      _this.state = {
        lastStepOffsetWidth: 0
      };
      return _this;
    }

    Steps.prototype.componentDidMount = function componentDidMount() {
      this.calcLastStepOffsetWidth();
    };

    Steps.prototype.componentDidUpdate = function componentDidUpdate() {
      this.calcLastStepOffsetWidth();
    };

    Steps.prototype.componentWillUnmount = function componentWillUnmount() {
      if (this.calcTimeout) {
        clearTimeout(this.calcTimeout);
      }
    };

    Steps.prototype.render = function render() {
        var _classNames,
            _this2 = this;

        var props = this.props;
        var prefixCls = props.prefixCls;
        var _props$style = props.style;
        var style = _props$style === undefined ? {} : _props$style;
        var className = props.className;
        var children = props.children;
        var direction = props.direction;
        var labelPlacement = props.labelPlacement;
        var iconPrefix = props.iconPrefix;
        var status = props.status;
        var size = props.size;
        var current = props.current;

        var restProps = _objectWithoutProperties(props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current']);

        var lastIndex = children.length - 1;
        var reLayouted = this.state.lastStepOffsetWidth > 0;
        var classString = (0, _classnames2["default"])((
                _classNames = {}, 
                _defineProperty(_classNames, prefixCls, true), 
                _defineProperty(_classNames, prefixCls + '-' + size, size), 
                _defineProperty(_classNames, prefixCls + '-' + direction, true), 
                _defineProperty(_classNames, prefixCls + '-label-' + labelPlacement, direction === 'horizontal'), 
                _defineProperty(_classNames, prefixCls + '-hidden', !reLayouted), 
                _defineProperty(_classNames, className, className), 
                _classNames
            ));

        return _react2["default"].createElement(
            'div',
            _extends({ className: classString, style: style }, restProps),
            _react2["default"].Children.map(children, function (ele, idx) {
                var tailWidth = direction === 'vertical' || idx === lastIndex || !reLayouted ? 
                        null : 100 / lastIndex + '%';
                var adjustMarginRight = direction === 'vertical' || idx === lastIndex ? 
                        null : -Math.round(_this2.state.lastStepOffsetWidth / lastIndex + 1);
                var np = {
                    stepNumber: (idx + 1).toString(),// 第几个Step元素
                    stepLast: idx === lastIndex,// 是否最后一个Step元素
                    tailWidth: tailWidth,// Step元素的宽度
                    adjustMarginRight: adjustMarginRight,
                    prefixCls: prefixCls,// 样式类前缀
                    iconPrefix: iconPrefix,// icon样式类前缀
                    wrapperStyle: style// 样式
                };

                if (status === 'error' && idx === current - 1) {
                    np.className = props.prefixCls + '-next-error';
                }

                if (!ele.props.status) {
                    if (idx === current) {
                        np.status = status;
                    } else if (idx < current) {
                        np.status = 'finish';
                    } else {
                        np.status = 'wait';
                    }
                }

                // React.cloneElement(ele,{props,key},children)使用ele的构造函数创建元素，并拷贝ele元素的props
                //    并向新创建的元素添加{props,key},children属性
                return _react2["default"].cloneElement(ele, np);
            }, this)
        );
    };

    return Steps;
}(_react2["default"].Component);

exports["default"] = Steps;

Steps.propTypes = {
    prefixCls: _react.PropTypes.string,
    iconPrefix: _react.PropTypes.string,
    direction: _react.PropTypes.string,
    labelPlacement: _react.PropTypes.string,
    children: _react.PropTypes.any,
    status: _react.PropTypes.string, 
    size: _react.PropTypes.string
};

Steps.defaultProps = {
    prefixCls: 'rc-steps',
    iconPrefix: 'rc',
    direction: 'horizontal',
    labelPlacement: 'horizontal',
    current: 0,
    status: 'process',
    size: ''
};
module.exports = exports['default'];

Step.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

// 浅拷贝  
var _extends = Object.assign || function (target) {  
    for (var i = 1; i < arguments.length; i++) {   
        var source = arguments[i];   
        for (var key in source) {   
            if (Object.prototype.hasOwnProperty.call(source, key)) {   
                target[key] = source[key];   
            }   
        }   
    }   
    return target;   
};  
 
var _react = require('react');
var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) {  
    return obj && obj.__esModule ? obj : { default: obj };   
}  
  
// 以defaults设置obj对象某属性key的默认值，当obj[key]为undefined时触发
function _defaults(obj, defaults) { 
    var keys = Object.getOwnPropertyNames(defaults); 
    for (var i = 0; i < keys.length; i++) { 
        var key = keys[i]; 
        var value = Object.getOwnPropertyDescriptor(defaults, key); 
        if (value && value.configurable && obj[key] === undefined) { 
            Object.defineProperty(obj, key, value); 
        } 
    } 
    return obj; 
}

// obj对象添加方法或属性，可能采用属性描述符方式
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;   
}  

// 浅拷贝obj对象，但不包含在keys中的属性与方法
function _objectWithoutProperties(obj, keys) { 
    var target = {}; 
    for (var i in obj) { 
        if (keys.indexOf(i) >= 0) continue; 
        if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; 
        target[i] = obj[i]; 
    } 
    return target; 
}
 
// 构造函数只能使用new关键字调用  
function _classCallCheck(instance, Constructor) {   
    if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); }   
}  
 
function _possibleConstructorReturn(self, call) {  
    // 构造函数未曾实例化，ReferenceError引用错误 Uncaught ReferenceError:XXXX is not defined  
    if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); }   
    return call && (typeof call === "object" || typeof call === "function") ? call : self;   
}  
  
// 继承，设置subClass.prototype为{constuctor:subClass}，{constuctor:subClass}的原型是superClass.prototype  
// subClass.__proto__为superClass  
function _inherits(subClass, superClass) {  
    if (typeof superClass !== "function" && superClass !== null) {  
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);   
    }  
  
    // 实例可访问原型属性或方法，构造函数不能  
    // Object.create创建对象，首参为该对象的原型prototype，次参为对象的自有属性，并设置属性描述符  
    subClass.prototype = Object.create(superClass && superClass.prototype,   
        { constructor: { value: subClass, enumerable: false, writable: true, configurable: true }   
    });   
  
    // Object.setPrototypeOf(subClass, superClass)，设置subClass.__proto__为superClass  
    // Object.getPrototypeOf(subClass)，获取subClass.__proto__  
    // 构造函数可访问，实例不能  
    if (superClass) Object.setPrototypeOf ?   
        Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;   
}  

function isString(str) {
    return typeof str === 'string';
}

// var props={
//     className,// 样式类
//     prefixCls,// 样式类前缀
//     style,// 样式
//     wrapperStyle,// 对象形式，background属性有效，用于设置图标和标题文案的背景
//     tailWidth,// 宽度
//     status,// 步骤的状态"wait"、"process"、"finish"、"error"
//     iconPrefix,// 图标样式类前缀，props.icon设置为react元素时，iconPrefix无效
//     icon,// 步骤图标，react元素(与iconPrefix相冲)、或者字符串(启用iconPrefix获取图标样式)、或者否值（默认序号图标）
//     adjustMarginRight,// 最后一个Step元素的宽度用于计算Step的偏移量marginRight
//     stepLast,// 是否最后一个Step元素
//     stepNumber,// 第几个Step元素，用于图标显示序号
//     description,// 步骤的描述
//     title,// 步骤的标题文案
// }
// {stepNumber,stepLast,tailWidth,adjustMarginRight,prefixCls,iconPrefix,wrapperStyle}允许由上层组件传入，非用户设置
// <Step title="Finished" description="This is a description." />
var Step = function (_React$Component) {
    _inherits(Step, _React$Component);

    function Step() {
        _classCallCheck(this, Step);

        return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
    }

    Step.prototype.render = function render() {
        var _classNames, _classNames2;

        var _props = this.props;
        var className = _props.className;
        var prefixCls = _props.prefixCls;
        var style = _props.style;
        var tailWidth = _props.tailWidth;
        var _props$status = _props.status;
        var status = _props$status === undefined ? 'wait' : _props$status;
        var iconPrefix = _props.iconPrefix;
        var icon = _props.icon;
        var wrapperStyle = _props.wrapperStyle;
        var adjustMarginRight = _props.adjustMarginRight;
        var stepLast = _props.stepLast;
        var stepNumber = _props.stepNumber;
        var description = _props.description;
        var title = _props.title;

        var restProps = _objectWithoutProperties(_props, ['className', 'prefixCls', 'style', 'tailWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepLast', 'stepNumber', 'description', 'title']);

        var iconClassName = (0, _classnames2["default"])((
                _classNames = {}, 
                _defineProperty(_classNames, prefixCls + '-icon', true), 
                _defineProperty(_classNames, iconPrefix + 'icon', true), 
                _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 iconNode = void 0;
        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
            );
        }

        var classString = (0, _classnames2["default"])((
                _classNames2 = {}, 
                _defineProperty(_classNames2, prefixCls + '-item', true), 
                _defineProperty(_classNames2, prefixCls + '-item-last', stepLast), 
                _defineProperty(_classNames2, prefixCls + '-status-' + status, true), 
                _defineProperty(_classNames2, prefixCls + '-custom', icon), 
                _defineProperty(_classNames2, className, !!className), 
                _classNames2
            ));

        return _react2["default"].createElement(
            'div',
            _extends({}, restProps, {
                className: classString,
                style: _extends({ width: tailWidth, marginRight: adjustMarginRight }, style)
            }),
            stepLast ? '' : _react2["default"].createElement(
                'div',
                { ref: 'tail', className: prefixCls + '-tail' },
                _react2["default"].createElement('i', null)
            ),
            _react2["default"].createElement(
                'div',
                { className: prefixCls + '-step' },
                _react2["default"].createElement(
                    'div',
                    {
                        className: prefixCls + '-head',
                        style: { background: wrapperStyle.background || wrapperStyle.backgroundColor }
                    },
                    _react2["default"].createElement(
                        'div',
                        { className: prefixCls + '-head-inner' },
                        iconNode
                    )
                ),
                _react2["default"].createElement(
                    'div',
                    { ref: 'main', className: prefixCls + '-main' },
                    _react2["default"].createElement(
                        'div',
                        {
                            className: prefixCls + '-title',
                            style: { background: wrapperStyle.background || wrapperStyle.backgroundColor }
                        },
                        title
                    ),
                    description ? _react2["default"].createElement(
                        'div',
                        { className: prefixCls + '-description' },
                        description
                    ) : ''
                )
            )
        );
    };

    return Step;
}(_react2["default"].Component);

exports["default"] = Step;

Step.propTypes = {
    className: _react.PropTypes.string,
    prefixCls: _react.PropTypes.string,
    style: _react.PropTypes.object,
    wrapperStyle: _react.PropTypes.object,
    tailWidth: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
    status: _react.PropTypes.string,
    iconPrefix: _react.PropTypes.string,
    icon: _react.PropTypes.node,
    adjustMarginRight: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
    stepLast: _react.PropTypes.bool,
    stepNumber: _react.PropTypes.string,
    description: _react.PropTypes.any,
    title: _react.PropTypes.any
};

module.exports = Step;
module.exports = exports['default'];