`

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

 

0
顶
1
踩
分享到：
| react-resource源码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    源码解析之rc-field-form解读与实现

    **源码解析之rc-field-form解读与实现** `rc-field-form`是React社区中一个流行的表单库，它提供了一种高效、灵活的方式来处理复杂的表单逻辑和数据管理。在本文中，我们将深入探讨`rc-field-form`的核心概念、工作...

    RC-4&5温湿度记录仪器驱动+软件

    RC-4&5温湿度记录仪器是一款用于监测和记录环境温度和湿度的专业设备，广泛应用于实验室、仓库、农业研究、医疗设备以及各种工业环境。这款设备通常配备有专门的驱动程序和软件，以便用户能够有效地管理和分析收集到...

    433M无线模块的rc-switch库

    rc-switch库是专门为这些433M无线模块设计的一个软件库，它使得Arduino用户可以方便地发送和接收无线信号。 **rc-switch库简介** rc-switch库是一个开源的Arduino库，由Rene Hass开发，主要用于控制433MHz和315MHz...

    protobuf-cpp-3.16.0-rc-1-源码+已编译的静态库.zip

    protobuf-cpp-3.16.0-rc-1-源码+已编译的静态库.zip 是一个针对Qt5.9和Windows环境的Protocol Buffers（简称protobuf）的资源包，包含了protobuf 3.16.0版本的源代码以及预编译的静态库。Protocol Buffers是Google...

    gradle-4.4-rc-2-src.zip和gradle-4.4-rc-2-src.zip.sha256

    这里提到的是"gradle-4.4-rc-2-src.zip"，这是一个Gradle源代码的压缩包。版本号"4.4-rc-2"表示这是Gradle的4.4版本的第二个候选发布版（Release Candidate）。RC版通常在正式版本发布前推出，供开发者测试和反馈，...

    RC-4&5_Conventional

    RC-4&5_Conventional，安装程序

    缤纷互动视频交友 v3.1 RC-ASP源码.zip

    《缤纷互动视频交友 v3.1 RC-ASP源码》是一款基于ASP技术开发的在线视频交友平台源代码，适用于构建互动性强、用户体验丰富的社交网站。ASP（Active Server Pages）是微软公司推出的一种服务器端脚本环境，用于动态...

    前端开源库-rc-source-loader

    本文将深入探讨“rc-source-loader”，一个专为Webpack设计的加载器，它允许开发者以字符串的形式导入文件，极大地增强了代码的灵活性和可操作性。 **rc-source-loader** 是一个针对Webpack的插件，其主要功能是将...

    React-rcselect一个完美的ReactSelect组件

    首先，rc-select的核心特性在于其对React哲学的遵循，即组件化和轻量级。它将下拉选择框分解为多个可复用的子组件，这使得开发者可以轻松地调整或替换特定部分以适应项目需求。例如，你可以自定义选项列表的渲染方式...

    isoviewer-1.0-RC-27.jar

    isoviewer-1.0-RC-27.jar,支持视音频编辑的工具类，可以音视频编码，剪辑

    EIAJ RC-5320A

    Plugs and Jacks for coupling an external low votage power supply

    抄裤网络收藏夹 v2.43 RC -ASP源码.zip

    在"抄裤网络收藏夹 v2.43 RC -ASP源码.zip"压缩包中，包含的主要文件是"内容来自存起来软件站www.cqlsoft.com.txt"。这个文本文件很可能包含了软件的使用说明、版权信息、开发者联系方式或者解压后安装或部署的步骤...

    steps:React步骤

    npm install rc-steps &lt; Steps xss=removed&gt; &lt; Steps xss=removed&gt; &lt; Steps xss=removed&gt; &lt; Steps xss=removed&gt; &lt; / Steps &gt; 例子 原料药 名称 类型 默认 描述 类型 细绳 默认 步骤，枚举的重复类型：“默认...

    RC-4H中文说明书

    RC-4H中文说明，是下载和安装使用RC-4H驱动的必读文件

    【官方绿色版】gradle-4.1-rc-1-all.zip

    Gradle各个版本即将上线，官网下载不成功的，嫌官网下载速度慢的，可以直接在这里下载。本人会做一个gradle全版本的搜集。 gradle-4.1 gradle android studio 离线包

    gradle-6.1-rc-1-all.zip

    `gradle-6.1-rc-1-all.zip` 是Gradle的6.1 Release Candidate 1版本的完整包，包含了所有需要的组件，使得开发者可以直接下载并用于构建项目，避免了通过Android Studio在线下载时可能遇到的网络延迟或速度慢的问题...

    红外编码格式-philips rc6

    红外编码格式：Philips RC-6深度解析 Philips RC-6是红外编码技术中的一个高级版本，作为RC-5的后继者，它由飞利浦定义并推广，广泛应用于遥控器、家用电器和多媒体设备中。RC-6协议以其高度的灵活性和详尽的规范...

    DJI FCC for RC-N1 with Chinese.apk

    DJI FCC for RC-N1 with Chinese.apk

    RC-OOK_MIMO-VLC_源码

    【标题】"RC-OOK_MIMO-VLC_源码"涉及的是无线通信领域中的光无线通信（Visible Light Communication, VLC）技术，特别是基于重复编码（Repetition Coding, RC）的正交频分复用（Orthogonal Frequency Division ...

    包含isoviewer-1.0-RC-27.jar以及22，28等四个版本，用于Android代码对视频拼接，剪切等处理

    包含isoparser-1.1.22.jar，isoviewer-1.0-RC-27.jar，isoviewer-1.0-RC-27 (2).jar，isoviewer-1.0-RC-35.jar共四个版本的jar包。用于Android代码对视频拼接，剪切等处理。每个版本有不同的情况，个人最终使用...

Magicbox
Global site tag (gtag.js) - Google Analytics