dlt-for-react 1.0.3 → 1.0.5

package/lib/components/KyBtnBox/index.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+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 _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+require('antd/lib/row/style');
+
+require('antd/lib/col/style');
+
+require('antd/lib/button/style');
+
+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 }; }
+
+/**
+ * 底部操作按钮
+ */
+var KyBtnBox = function (_Component) {
+  (0, _inherits3.default)(KyBtnBox, _Component);
+
+  function KyBtnBox(props) {
+    (0, _classCallCheck3.default)(this, KyBtnBox);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (KyBtnBox.__proto__ || (0, _getPrototypeOf2.default)(KyBtnBox)).call(this, props));
+
+    _this.stopLoading = function () {
+      _this.setState({ loading: false });
+    };
+
+    _this.handleSave = function (e) {
+      e.preventDefault();
+      _this.setState({ loading: true });
+      _this.props.onSave(_this.stopLoading);
+    };
+
+    _this.state = {
+      loading: false
+    };
+    return _this;
+  }
+
+  (0, _createClass3.default)(KyBtnBox, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          onCancel = _props.onCancel,
+          onSave = _props.onSave,
+          okText = _props.okText,
+          cancelText = _props.cancelText,
+          disabled = _props.disabled,
+          className = _props.className,
+          span = _props.span,
+          offset = _props.offset;
+      var loading = this.state.loading;
+
+      return _react2.default.createElement(
+        _row2.default,
+        { className: 'kyBtnBox' },
+        _react2.default.createElement(
+          _col2.default,
+          { span: span, offset: offset, className: (0, _classnames2.default)('kyBtnBox-col', className) },
+          _react2.default.createElement(
+            _button2.default,
+            {
+              type: 'primary',
+              style: { marginRight: 8 },
+              onMouseDown: this.handleSave,
+              loading: loading,
+              disabled: disabled
+            },
+            okText
+          ),
+          _react2.default.createElement(
+            _button2.default,
+            { onClick: onCancel },
+            cancelText
+          )
+        )
+      );
+    }
+  }]);
+  return KyBtnBox;
+}(_react.Component);
+
+exports.default = KyBtnBox;
+
+
+KyBtnBox.defaultProps = {
+  okText: '确定',
+  cancelText: '取消',
+  onCancel: function onCancel() {},
+  onSave: function onSave() {},
+  disabled: false,
+  span: 20,
+  offset: 4
+};

package/lib/components/KyCheckBox/index.js

@@ -0,0 +1,361 @@
+"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 _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require("babel-runtime/helpers/createClass");
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require("babel-runtime/helpers/inherits");
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _checkbox = require("antd/lib/checkbox");
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+require("antd/lib/row/style");
+
+require("antd/lib/col/style");
+
+require("antd/lib/checkbox/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _NHFetch = require("../../utils/NHFetch");
+
+var _NHFetch2 = _interopRequireDefault(_NHFetch);
+
+var _equalsObj = require("../../utils/equalsObj");
+
+var _equalsObj2 = _interopRequireDefault(_equalsObj);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var CheckboxGroup = _checkbox2.default.Group;
+
+/**
+ * @Description: Checkbox多选框组件
+ * @author weishihuai
+ * @date 2019/3/20 14:36
+ * 更新日志：
+ * 2019-05-27：增加gridLayout布局样式，默认false by zengxiangkai
+ * 说明:
+ * 1. 使用sign标识从后台查询数据源时，以'DMK_'加上对应代码库标识,如: sign={'DMK_WJCF_WJLX'};
+ * 2. 使用自定义数据源时,需注意格式. 如: [{label: 'A', value: 'A'},{label: 'B', value: 'B'},{label: 'C', value: 'C'}];
+ * 3. 使用checkBoxGroupDisabled属性可动态配置整个复选框禁用、启用状态;
+ * 4. 使用checkBoxDisabledValueArr属性可控制按钮组中哪些checkbox需要被禁用;
+ * 5. 使用filterType集合filterData可以过滤指定按钮, 如: filterType={'save'} filterData={['A']};
+ * 6. 使用columnsNum属性可控制一行显示几个复选框,不传默认显示4个, 取值范围: [1,2,3,4,6,8];
+ *
+ * 使用示例:
+    <KyCheckBox sign={'DMK_XTGL_WJLX'}
+                checkBoxGroupDisabled={false}
+                defaultValue={['Apple']}
+                onChange={this.onChange}
+                columnsNum={1}
+                dataSource={[
+                            {label: 'A', value: 'A'},
+                            {label: 'B', value: 'B'},
+                            {label: 'C', value: 'C'},
+                              ]}
+                filterType={'remove'}
+                filterData={['A']}
+                checkBoxDisabledValueArr={['A', 'B']}
+    />
+ *
+ */
+
+var KyCheckBox = function (_React$Component) {
+    (0, _inherits3.default)(KyCheckBox, _React$Component);
+
+    function KyCheckBox(props) {
+        (0, _classCallCheck3.default)(this, KyCheckBox);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (KyCheckBox.__proto__ || (0, _getPrototypeOf2.default)(KyCheckBox)).call(this, props));
+
+        _this.getDataSource = function (sign) {
+            if (!sign) {
+                _this.getCustomDataSource();
+            } else {
+                var _this$props = _this.props,
+                    baseUrl = _this$props.baseUrl,
+                    interfaceUrl = _this$props.interfaceUrl;
+
+                var path = baseUrl + interfaceUrl;
+                (0, _NHFetch2.default)(path, 'GET', { sign: sign, t: new Date().getTime() }).then(function (res) {
+                    if (res) {
+                        var data = res.data;
+                        if (data) {
+                            _this.setState({
+                                data: [].concat((0, _toConsumableArray3.default)(data))
+                            });
+                        } else {
+                            _this.getCustomDataSource();
+                        }
+                    }
+                });
+            }
+        };
+
+        _this.getCustomDataSource = function () {
+            var _this$props$dataSourc = _this.props.dataSource,
+                dataSource = _this$props$dataSourc === undefined ? [] : _this$props$dataSourc;
+
+            if (dataSource && dataSource.length > 0) {
+                _this.setState({
+                    data: [].concat((0, _toConsumableArray3.default)(dataSource))
+                });
+            }
+        };
+
+        _this.onCheckBoxChange = function (checkedValues) {
+            var onChange = _this.props.onChange;
+
+            if (onChange && typeof onChange === 'function') {
+                onChange(checkedValues);
+            }
+            _this.setState({
+                value: checkedValues
+            });
+        };
+
+        _this.isCheckBoxIsDisabled = function (checkBoxDisabledValueArr, value) {
+            if (checkBoxDisabledValueArr && checkBoxDisabledValueArr.length <= 0) {
+                return false;
+            }
+            var val = checkBoxDisabledValueArr.find(function (key) {
+                return value === key || value === key;
+            });
+            return val !== undefined;
+        };
+
+        _this.buildCheckBoxOptions = function (filteredData) {
+            var _this$props2 = _this.props,
+                checkBoxDisabledValueArr = _this$props2.checkBoxDisabledValueArr,
+                gridLayout = _this$props2.gridLayout,
+                columnsNum = _this$props2.columnsNum;
+
+
+            var spanNum = 24 / columnsNum;
+
+            if (gridLayout) {
+
+                var options = filteredData.map(function (option) {
+                    return _react2.default.createElement(
+                        _col2.default,
+                        { span: spanNum },
+                        _react2.default.createElement(
+                            _checkbox2.default,
+                            {
+                                key: option.VALUE || option.value,
+                                disabled: _this.isCheckBoxIsDisabled(checkBoxDisabledValueArr, option.VALUE || option.value),
+                                value: option.VALUE || option.value
+                            },
+                            option.LABEL || option.label
+                        )
+                    );
+                });
+                return _react2.default.createElement(
+                    _row2.default,
+                    null,
+                    options
+                );
+            } else {
+
+                return filteredData.map(function (option) {
+                    return _react2.default.createElement(
+                        _checkbox2.default,
+                        {
+                            key: option.VALUE || option.value,
+                            disabled: _this.isCheckBoxIsDisabled(checkBoxDisabledValueArr, option.VALUE || option.value),
+                            value: option.VALUE || option.value
+                        },
+                        option.LABEL || option.label
+                    );
+                });
+            }
+        };
+
+        _this.state = {
+            data: [],
+            value: props.value || [] // checkbox选中值
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(KyCheckBox, [{
+        key: "componentDidMount",
+        value: function componentDidMount() {
+            var sign = this.props.sign;
+
+            this.getDataSource(sign);
+        }
+    }, {
+        key: "UNSAFE_componentWillReceiveProps",
+        value: function UNSAFE_componentWillReceiveProps(nextProps) {
+            if ('dataSource' in nextProps) {
+                var dataSource = nextProps.dataSource;
+                this.setState({
+                    data: dataSource
+                });
+            }
+            if ('value' in nextProps && !(0, _equalsObj2.default)(nextProps.value, this.props.value)) {
+                this.setState({
+                    value: nextProps.value
+                });
+            }
+        }
+
+        //根据数据源标识从后台查询DataSource
+
+
+        //使用自定义的DataSource
+
+
+        //变化时回调函数
+
+
+        //检查复选框是否需要禁用
+
+
+        //组装CheckBox Options
+
+    }, {
+        key: "render",
+        value: function render() {
+            var _state = this.state,
+                _state$data = _state.data,
+                data = _state$data === undefined ? [] : _state$data,
+                _state$value = _state.value,
+                value = _state$value === undefined ? [] : _state$value;
+            var _props = this.props,
+                checkBoxGroupDisabled = _props.checkBoxGroupDisabled,
+                defaultValue = _props.defaultValue,
+                _props$filterType = _props.filterType,
+                filterType = _props$filterType === undefined ? '' : _props$filterType,
+                _props$filterData = _props.filterData,
+                filterData = _props$filterData === undefined ? [] : _props$filterData;
+
+            var checkBoxOptions = [];
+
+            //同时指定过滤类型和需要过滤的数据VALUE
+            if (filterType && filterData) {
+                switch (filterType) {
+                    case 'remove':
+                        {
+                            //过滤掉指定key的复选框
+                            var filteredData = data.filter(function (item) {
+                                var itemVal = item.VALUE || item.value;
+                                var isExist = filterData.find(function (val) {
+                                    return val === itemVal;
+                                });
+                                return isExist === undefined;
+                            });
+                            if (filteredData && filteredData.length > 0) {
+                                checkBoxOptions = this.buildCheckBoxOptions(filteredData);
+                            }
+                            break;
+                        }
+                    case 'save':
+                        {
+                            //保留指定key值的复选框
+                            var _filteredData = data.filter(function (item) {
+                                var itemVal = item.VALUE || item.value;
+                                var isExist = filterData.find(function (val) {
+                                    return val === itemVal;
+                                });
+                                return isExist !== undefined;
+                            });
+                            if (_filteredData && _filteredData.length > 0) {
+                                checkBoxOptions = this.buildCheckBoxOptions(_filteredData);
+                            }
+                            break;
+                        }
+                    default:
+                        {
+                            checkBoxOptions = this.buildCheckBoxOptions(data);
+                            break;
+                        }
+                }
+            } else {
+                //不进行数据过滤
+                checkBoxOptions = this.buildCheckBoxOptions(data);
+            }
+            return _react2.default.createElement(
+                CheckboxGroup,
+                {
+                    onChange: this.onCheckBoxChange,
+                    disabled: checkBoxGroupDisabled,
+                    defaultValue: defaultValue,
+                    value: value
+                },
+                checkBoxOptions
+            );
+        }
+    }]);
+    return KyCheckBox;
+}(_react2.default.Component);
+
+KyCheckBox.defaultProps = {
+    checkBoxGroupDisabled: false, //按钮组启用/禁用状态
+    checkBoxDisabledValueArr: [], //需要禁用的复选框的值(数组)
+    gridLayout: false,
+    columnsNum: 4,
+    baseUrl: '/api/ky-base-resources',
+    interfaceUrl: '/proData/selectDataList'
+
+    //属性检查
+};KyCheckBox.propTypes = {
+    interfaceUrl: _propTypes2.default.string, // 数据源接口路径（默认 /proData/selectDataList）
+    baseUrl: _propTypes2.default.string, // 数据源路径（默认 /api/ky-base-resources）
+    sign: _propTypes2.default.string, //数据源标识
+    dataSource: _propTypes2.default.arrayOf( //自定义数据源
+    _propTypes2.default.shape({
+        value: _propTypes2.default.string,
+        label: _propTypes2.default.node
+    })),
+    checkBoxGroupDisabled: _propTypes2.default.bool, //整个多选框按钮组启用/禁用状态
+    defaultValue: _propTypes2.default.array, //默认选中的选项
+    value: _propTypes2.default.array, //初始值
+    onChange: _propTypes2.default.func, //选项变化时的回调函数
+    checkBoxDisabledValueArr: _propTypes2.default.array, //需要禁用的复选框Value集合
+    filterType: _propTypes2.default.oneOf(['save', 'remove']), //过滤数据类型,save - 保留  remove - 移除
+    filterData: _propTypes2.default.array, //过滤数据, save - 保留指定的filterData remove - 移除指定的filterData
+    gridLayout: _propTypes2.default.bool, //是否使用响应式布局
+    columnsNum: _propTypes2.default.oneOf([1, 2, 3, 4, 6, 8]) //响应式布局每行显示复选框的个数,默认为4个
+};
+
+exports.default = KyCheckBox;