dlt-for-react 1.0.1

package/lib/components/NHSteps/index.js

@@ -0,0 +1,400 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _row = require('antd/lib/row');
+
+var _row2 = _interopRequireDefault(_row);
+
+var _col = require('antd/lib/col');
+
+var _col2 = _interopRequireDefault(_col);
+
+var _button = require('antd/lib/button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _popover = require('antd/lib/popover');
+
+var _popover2 = _interopRequireDefault(_popover);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _assign = require('babel-runtime/core-js/object/assign');
+
+var _assign2 = _interopRequireDefault(_assign);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _steps = require('antd/lib/steps');
+
+var _steps2 = _interopRequireDefault(_steps);
+
+require('antd/lib/row/style');
+
+require('antd/lib/col/style');
+
+require('antd/lib/button/style');
+
+require('antd/lib/popover/style');
+
+require('antd/lib/steps/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+require('../../../assets/steps/index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Step = _steps2.default.Step;
+
+/**
+ * * 统一封装步骤条组件
+ * * 类型：受控组件
+ * Author: zengxiangkai@ly-sky.com
+ * Created on: 2018-09-17 
+ * Version: 1.0
+ * Modify log:
+ * 2019-04-23
+ *     1、增加resultPage属性，为true时，最后一个步骤为结果页。当againText不为空时，resultPage默认为true
+ * 2019-04-03
+ *     1、增加againText、onAgain属性，如果againText不为空字符串，则最后一步为结果页，可进行“再次添加”操作;
+ *     2、增加progressDot属性，可设置Step样式为点状步骤条，默认为false；
+ *     3、增加customButton属性，可设置额外自定义按钮，并可自行控制其显示在哪个步骤
+ */
+
+var IndexComponent = function (_React$Component) {
+    (0, _inherits3.default)(IndexComponent, _React$Component);
+    (0, _createClass3.default)(IndexComponent, null, [{
+        key: 'getDerivedStateFromProps',
+        value: function getDerivedStateFromProps(nextProps) {
+            // Should be a controlled component.
+
+            var updateState = {};
+
+            if ('value' in nextProps) {
+                var value = nextProps.value;
+                (0, _assign2.default)(updateState, { value: value });
+            }
+
+            if ((0, _keys2.default)(updateState).length > 0) {
+                return updateState;
+            }
+
+            return null;
+        }
+    }]);
+
+    function IndexComponent(props) {
+        (0, _classCallCheck3.default)(this, IndexComponent);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (IndexComponent.__proto__ || (0, _getPrototypeOf2.default)(IndexComponent)).call(this, props));
+
+        _initialiseProps.call(_this);
+
+        var value = _this.props.value || 0;
+        _this.state = {
+            value: value || 0 //当前步骤下标
+        };
+        return _this;
+    }
+
+    /**
+     * * 下一步回调
+     * @memberof IndexComponent
+     */
+
+
+    /**
+     * * 上一步回调
+     * @memberof IndexComponent
+     */
+
+
+    /**
+     * * 完成回调
+     * @memberof IndexComponent
+     */
+
+
+    /**
+     * * 再次添加
+     *
+     * @memberof IndexComponent
+     */
+
+
+    (0, _createClass3.default)(IndexComponent, [{
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var value = this.state.value;
+            var _props = this.props,
+                children = _props.children,
+                _props$steps = _props.steps,
+                steps = _props$steps === undefined ? [] : _props$steps,
+                progressDot = _props.progressDot,
+                nextText = _props.nextText,
+                prevText = _props.prevText,
+                finishText = _props.finishText,
+                againText = _props.againText,
+                customButton = _props.customButton;
+            var resultPage = this.props.resultPage;
+
+
+            if (againText) {
+                resultPage = true;
+            }
+
+            return _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex', justify: 'center' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 24 },
+                        _react2.default.createElement(
+                            _steps2.default,
+                            { progressDot: progressDot, current: value },
+                            steps.map(function (item, index) {
+                                var _item$title = item.title,
+                                    title = _item$title === undefined ? '' : _item$title,
+                                    _item$icon = item.icon,
+                                    icon = _item$icon === undefined ? '' : _item$icon,
+                                    _item$description = item.description,
+                                    description = _item$description === undefined ? '' : _item$description;
+
+                                return _react2.default.createElement(Step, {
+                                    key: index,
+                                    icon: icon,
+                                    title: description != '' ? _react2.default.createElement(
+                                        _popover2.default,
+                                        { placement: 'bottomLeft', content: description },
+                                        title
+                                    ) : title
+                                });
+                            })
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            { className: 'xgui-steps-content' },
+                            _react2.default.Children.map(children, function (child, index) {
+                                if (index === value) {
+
+                                    return child;
+                                }
+                                return null;
+                            })
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            { className: 'xgui-steps-action' },
+                            (resultPage ? value > 0 && value < steps.length - 1 : value > 0 && value < steps.length) && _react2.default.createElement(
+                                _button2.default,
+                                { style: { marginRight: 8 }, onClick: function onClick() {
+                                        return _this2.handlePrev();
+                                    } },
+                                prevText
+                            ),
+                            (resultPage ? value < steps.length - 2 : value < steps.length - 1) && _react2.default.createElement(
+                                _button2.default,
+                                { type: 'primary', onClick: function onClick() {
+                                        return _this2.handleNext();
+                                    } },
+                                nextText
+                            ),
+                            customButton ? customButton : null,
+                            (steps.length === 1 || resultPage ? value === steps.length - 2 : value === steps.length - 1) && _react2.default.createElement(
+                                _button2.default,
+                                { type: 'primary', onClick: function onClick() {
+                                        return _this2.handleFinish();
+                                    } },
+                                finishText
+                            ),
+                            againText && value === steps.length - 1 && steps.length !== 1 && _react2.default.createElement(
+                                _button2.default,
+                                { type: 'primary', onClick: function onClick() {
+                                        return _this2.handleAgain();
+                                    } },
+                                againText
+                            )
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return IndexComponent;
+}(_react2.default.Component);
+
+var _initialiseProps = function _initialiseProps() {
+    var _this3 = this;
+
+    this.handleNext = function () {
+        var value = _this3.state.value;
+        var _props$steps2 = _this3.props.steps,
+            steps = _props$steps2 === undefined ? [] : _props$steps2;
+
+
+        if (value + 1 >= steps.length) {
+            value = steps.length - 1;
+        } else {
+            value += 1;
+        }
+
+        var _props2 = _this3.props,
+            onNext = _props2.onNext,
+            onChange = _props2.onChange;
+
+        if (onNext) {
+            onNext(value, function (status) {
+                if (status) {
+                    _this3.setState({ value: value });
+                    if (onChange) {
+                        onChange(value);
+                    }
+                }
+            });
+        } else {
+            _this3.setState({ value: value });
+            if (onChange) {
+                onChange(value);
+            }
+        }
+    };
+
+    this.handlePrev = function () {
+        var value = _this3.state.value;
+
+
+        if (value - 1 < 0) {
+            value = 0;
+        } else {
+            value -= 1;
+        }
+
+        _this3.setState({ value: value });
+        var _props3 = _this3.props,
+            onPrev = _props3.onPrev,
+            onChange = _props3.onChange;
+
+        if (onPrev) {
+            onPrev(value);
+        }
+        if (onChange) {
+            onChange(value);
+        }
+    };
+
+    this.handleFinish = function () {
+        var _props4 = _this3.props,
+            onFinish = _props4.onFinish,
+            onChange = _props4.onChange;
+        var value = _this3.state.value;
+        var _props$steps3 = _this3.props.steps,
+            steps = _props$steps3 === undefined ? [] : _props$steps3;
+
+
+        if (value + 1 >= steps.length) {
+            value = steps.length - 1;
+        } else {
+            value += 1;
+        }
+
+        if (onFinish) {
+            onFinish(value, function (status) {
+                if (status) {
+                    _this3.setState({ value: value });
+                    if (onChange) {
+                        onChange(value);
+                    }
+                }
+            });
+        } else {
+            _this3.setState({ value: value });
+            if (onChange) {
+                onChange(value);
+            }
+        }
+    };
+
+    this.handleAgain = function () {
+        var _props5 = _this3.props,
+            onAgain = _props5.onAgain,
+            onChange = _props5.onChange;
+
+        _this3.setState({ value: 0 });
+
+        if (onAgain) {
+            onAgain();
+        }
+        if (onChange) {
+            onChange(0);
+        }
+    };
+};
+
+IndexComponent.defaultProps = {
+    nextText: '下一步',
+    prevText: '上一步',
+    finishText: '完成',
+    progressDot: false,
+    resultPage: true
+};
+
+IndexComponent.propTypes = {
+    steps: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+        description: _propTypes2.default.any, //步骤描述
+        icon: _propTypes2.default.any, //步骤图标
+        title: _propTypes2.default.any //步骤标题
+    })).isRequired, //步骤配置信息
+    progressDot: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.func]), //是否是点状步骤条
+    value: _propTypes2.default.number, //当前步骤下标值
+    onChange: _propTypes2.default.func, //当前步骤下标值变化回调
+    nextText: _propTypes2.default.string, //下一步骤按钮文字
+    //下一步回调，参数有[value, callback]，其中value为下一步骤的下标，callback则是回调函数。
+    //当调用callback(true)时，则允许进入到下一步骤，否则停留在当前步骤。一般在点击下一步需要进行表单相关校验时，
+    //校验通过则调用callback(true)，否则调用callback(false)停留在当前步骤
+    onNext: _propTypes2.default.func,
+    prevText: _propTypes2.default.string, //上一步骤按钮文字
+    onPrev: _propTypes2.default.func, //上一步回调
+    finishText: _propTypes2.default.string, //完成按钮文字
+    onFinish: _propTypes2.default.func, //完成事件回调
+    againText: _propTypes2.default.string, //重新再来按钮文字
+    onAgain: _propTypes2.default.func, //重新再来事件回调
+    resultPage: _propTypes2.default.bool, //最后一个步骤是否是结果页
+    customButton: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.array]) //自定义按钮
+};
+
+exports.default = IndexComponent;