dlt-for-react 1.1.16 → 1.1.18

package/lib/components/KyTableCardList/AddFieldsModal.js

@@ -1,7 +1,7 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-	value: true
+  value: true
 });
 
 var _modal = require("antd/lib/modal");
@@ -74,7 +74,7 @@ var _classnames = require("classnames");
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _reactCustomScrollbars = require("react-custom-scrollbars");
+var _reactCustomScrollbarsPatched = require("react-custom-scrollbars-patched");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -83,288 +83,286 @@ var currentLine = 0; /**
                       */
 
 var AddFieldsModal = function (_Component) {
-	(0, _inherits3.default)(AddFieldsModal, _Component);
-
-	function AddFieldsModal(props) {
-		(0, _classCallCheck3.default)(this, AddFieldsModal);
-
-		var _this = (0, _possibleConstructorReturn3.default)(this, (AddFieldsModal.__proto__ || (0, _getPrototypeOf2.default)(AddFieldsModal)).call(this, props));
-
-		_this.debounceSearch = function (value) {
-			_this.setState({ searchValue: value }, function () {
-				_this.changeItem();
-			});
-			// 搜索字段为空，重置currentLine
-			if (value == "") {
-				currentLine = 0;
-			}
-		};
-
-		_this.handleSearchChange = function (e) {
-			var value = e.target.value;
-
-			_this.debounceSearch(value);
-		};
-
-		_this.onChange = function (checkedList) {
-			var data = _this.props.data;
-
-			_this.setState({
-				checkedList: checkedList,
-				indeterminate: !!checkedList.length && checkedList.length < data.length,
-				checkAll: checkedList.length === data.length
-			});
-		};
-
-		_this.onCheckAllChange = function (e) {
-			var data = _this.props.data;
-
-			_this.setState({
-				checkedList: e.target.checked ? data.map(function (item) {
-					return item.dataIndex;
-				}) : [],
-				indeterminate: false,
-				checkAll: e.target.checked
-			});
-		};
-
-		_this.handleOk = function () {
-			var _this$props = _this.props,
-			    data = _this$props.data,
-			    onOk = _this$props.onOk;
-			var checkedList = _this.state.checkedList;
-
-			if (!checkedList || checkedList.length < 1) {
-				_message3.default.info('请至少选择一个字段');
-				return;
-			}
-			var result = [];
-			data.forEach(function (item) {
-				if (checkedList.includes(item.dataIndex)) {
-					var nitem = (0, _extends3.default)({}, item);
-					nitem.defaultSearch = true;
-					result.push(nitem);
-				}
-			});
-			onOk && onOk(result);
-		};
-
-		_this.handleCancel = function () {
-			var onCancel = _this.props.onCancel;
-
-			_this.setState({
-				searchValue: ""
-			});
-			onCancel && onCancel();
-		};
-
-		_this.handleKeyUp = function (e) {
-			// Enter键盘事件
-			if (e.keyCode == 13) {
-				_this.changeItem();
-			}
-		};
-
-		_this.changeItem = function () {
-			var elements = document.getElementById("" + _this.listID).getElementsByClassName("textHighLight");
-			if (elements.length) {
-				// 最后一个高亮
-				if (currentLine === elements.length) {
-					currentLine = 0;
-				}
-				// 清除高亮
-				for (var index = 0; index < elements.length; index++) {
-					var element = elements[index];
-					element.classList.remove("active");
-				}
-				// 添加高亮
-				elements[currentLine].classList.add("active");
-				// currentLine + 1
-				currentLine++;
-			}
-		};
-
-		_this.listID = "fields-" + Math.random().toString(36);
-		_this.state = {
-			searchValue: "", // 搜索字段
-			checkedList: _this.props.checkedList || [], // 选中项
-			indeterminate: false, // 控制全选样式状态
-			checkAll: false // 是否全选
-		};
-		_this.debounceSearch = (0, _debounce2.default)(_this.debounceSearch, 500);
-		return _this;
-	}
-
-	(0, _createClass3.default)(AddFieldsModal, [{
-		key: "componentWillReceiveProps",
-		value: function componentWillReceiveProps(nextProps) {
-			if ("checkedList" in nextProps && !(0, _isEqual2.default)(nextProps.checkedList, this.props.checkedList)) {
-				var checkedList = nextProps.checkedList,
-				    data = nextProps.data;
-
-				this.setState({
-					checkedList: checkedList,
-					checkAll: checkedList.length === data.length,
-					indeterminate: !!checkedList.length && checkedList.length < data.length
-				});
-			}
-		}
-
-		// 搜索
-
-
-		// 单个选择
-
-
-		// 全选
-
-
-		// 保存
-
-
-		// Enter键切换高亮
-
-	}, {
-		key: "render",
-		value: function render() {
-			var _props = this.props,
-			    wrapClassName = _props.wrapClassName,
-			    visible = _props.visible,
-			    width = _props.width,
-			    title = _props.title,
-			    data = _props.data,
-			    colNum = _props.colNum,
-			    onCancel = _props.onCancel;
-			var _state = this.state,
-			    searchValue = _state.searchValue,
-			    indeterminate = _state.indeterminate,
-			    checkAll = _state.checkAll,
-			    checkedList = _state.checkedList;
-
-			var reg = new RegExp(searchValue, "ig");
-			return _react2.default.createElement(
-				_modal2.default,
-				{
-					wrapClassName: (0, _classnames2.default)(wrapClassName, "addSearchFieldsModal"),
-					width: width,
-					title: title,
-					okText: "\u4FDD\u5B58",
-					visible: visible,
-					onCancel: this.handleCancel,
-					onOk: this.handleOk
-				},
-				_react2.default.createElement(
-					"div",
-					{ className: "searchBox" },
-					_react2.default.createElement(_input2.default, {
-						placeholder: "\u641C\u7D22\u5B57\u6BB5",
-						prefix: _react2.default.createElement(_icon2.default, { type: "search", style: { color: "#999" } }),
-						onChange: this.handleSearchChange,
-						onKeyUp: this.handleKeyUp,
-						style: { width: 280 }
-					})
-				),
-				_react2.default.createElement(
-					"div",
-					{ className: "checkAllBox" },
-					_react2.default.createElement(
-						_checkbox2.default,
-						{
-							indeterminate: indeterminate,
-							onChange: this.onCheckAllChange,
-							checked: checkAll
-						},
-						_react2.default.createElement(
-							"b",
-							null,
-							"\u5168\u9009"
-						)
-					),
-					_react2.default.createElement(
-						"span",
-						{ className: "tip" },
-						"\u5DF2\u9009\u62E9\uFF1A",
-						_react2.default.createElement(
-							"span",
-							{ className: "num" },
-							checkedList.length
-						)
-					)
-				),
-				_react2.default.createElement(
-					_reactCustomScrollbars.Scrollbars,
-					{ style: { height: 300 }, autoHide: true },
-					_react2.default.createElement(
-						_checkbox2.default.Group,
-						{
-							style: { width: "100%" },
-							value: checkedList,
-							onChange: this.onChange
-						},
-						_react2.default.createElement(
-							"table",
-							{ id: this.listID },
-							_react2.default.createElement(
-								"tbody",
-								null,
-								data.map(function (row, i) {
-									if (i % colNum === 0) {
-										return _react2.default.createElement(
-											"tr",
-											{ key: i },
-											data.slice(i, i % colNum === 0 ? i + colNum : i % colNum).map(function (item, j) {
-												var _label = item.title;
-												// 对label做高亮匹配
-												if (searchValue) {
-													var match = _label && _label.match(reg) || [];
-													_label = _label && _label.split(reg).map(function (_it, _idx) {
-														return _idx > 0 ? [_react2.default.createElement(
-															"span",
-															{
-																key: _idx,
-																className: "textHighLight"
-															},
-															match[0]
-														), _it] : _it;
-													});
-												}
-												return _react2.default.createElement(
-													"td",
-													{ key: j },
-													_react2.default.createElement(
-														_checkbox2.default,
-														{
-															value: item.dataIndex
-														},
-														_label
-													)
-												);
-											})
-										);
-									} else {
-										return null;
-									}
-								})
-							)
-						)
-					)
-				),
-				_react2.default.createElement(
-					"style",
-					{ jsx: "true", global: "true" },
-					"\n                            .addSearchFieldsModal .searchBox{\n\t\t\t\t\t\t\t\tmargin-bottom: 16px;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .checkAllBox{\n\t\t\t\t\t\t\t\tmargin: 0 0 8px 9px;\n\t\t\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .checkAllBox .tip{\n\t\t\t\t\t\t\t\tcolor: #bbb;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .checkAllBox .num{\n\t\t\t\t\t\t\t\tcolor: #fc0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal table{\n\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\tborder: 1px solid #e8e8e8;\n\t\t\t\t\t\t\t\tborder-right: 0;\n\t\t\t\t\t\t\t\tborder-bottom: 0;\n\t\t\t\t\t\t\t\tborder-radius: 4px 4px 0 0;\n\t\t\t\t\t\t\t\tborder-collapse: separate;\n\t\t\t\t\t\t\t\tborder-spacing: 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal  table  td{\n\t\t\t\t\t\t\t\tborder-right: 1px solid #e8e8e8;\n\t\t\t\t\t\t\t\tborder-bottom: 1px solid #e8e8e8;\n\t\t\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal  table  td:hover{\n\t\t\t\t\t\t\t\tbackground-color: #eef7fe;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal  table  .ant-checkbox-wrapper{\n\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\t\tpadding: 6px 8px;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .textHighLight{\n\t\t\t\t\t\t\t\tbackground-color: #fff5cc;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .textHighLight .active{\n\t\t\t\t\t\t\t\tbackground-color: #ffdc52;\n\t\t\t\t\t\t\t}\n                        "
-				)
-			);
-		}
-	}]);
-	return AddFieldsModal;
+  (0, _inherits3.default)(AddFieldsModal, _Component);
+
+  function AddFieldsModal(props) {
+    (0, _classCallCheck3.default)(this, AddFieldsModal);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (AddFieldsModal.__proto__ || (0, _getPrototypeOf2.default)(AddFieldsModal)).call(this, props));
+
+    _this.debounceSearch = function (value) {
+      _this.setState({ searchValue: value }, function () {
+        _this.changeItem();
+      });
+      // 搜索字段为空，重置currentLine
+      if (value == "") {
+        currentLine = 0;
+      }
+    };
+
+    _this.handleSearchChange = function (e) {
+      var value = e.target.value;
+
+      _this.debounceSearch(value);
+    };
+
+    _this.onChange = function (checkedList) {
+      var data = _this.props.data;
+
+      _this.setState({
+        checkedList: checkedList,
+        indeterminate: !!checkedList.length && checkedList.length < data.length,
+        checkAll: checkedList.length === data.length
+      });
+    };
+
+    _this.onCheckAllChange = function (e) {
+      var data = _this.props.data;
+
+      _this.setState({
+        checkedList: e.target.checked ? data.map(function (item) {
+          return item.dataIndex;
+        }) : [],
+        indeterminate: false,
+        checkAll: e.target.checked
+      });
+    };
+
+    _this.handleOk = function () {
+      var _this$props = _this.props,
+          data = _this$props.data,
+          onOk = _this$props.onOk;
+      var checkedList = _this.state.checkedList;
+
+      if (!checkedList || checkedList.length < 1) {
+        _message3.default.info("请至少选择一个字段");
+        return;
+      }
+      var result = [];
+      data.forEach(function (item) {
+        if (checkedList.includes(item.dataIndex)) {
+          var nitem = (0, _extends3.default)({}, item);
+          nitem.defaultSearch = true;
+          result.push(nitem);
+        }
+      });
+      onOk && onOk(result);
+    };
+
+    _this.handleCancel = function () {
+      var onCancel = _this.props.onCancel;
+
+      _this.setState({
+        searchValue: ""
+      });
+      onCancel && onCancel();
+    };
+
+    _this.handleKeyUp = function (e) {
+      // Enter键盘事件
+      if (e.keyCode == 13) {
+        _this.changeItem();
+      }
+    };
+
+    _this.changeItem = function () {
+      var elements = document.getElementById("" + _this.listID).getElementsByClassName("textHighLight");
+      if (elements.length) {
+        // 最后一个高亮
+        if (currentLine === elements.length) {
+          currentLine = 0;
+        }
+        // 清除高亮
+        for (var index = 0; index < elements.length; index++) {
+          var element = elements[index];
+          element.classList.remove("active");
+        }
+        // 添加高亮
+        elements[currentLine].classList.add("active");
+        // currentLine + 1
+        currentLine++;
+      }
+    };
+
+    _this.listID = "fields-" + Math.random().toString(36);
+    _this.state = {
+      searchValue: "", // 搜索字段
+      checkedList: _this.props.checkedList || [], // 选中项
+      indeterminate: false, // 控制全选样式状态
+      checkAll: false // 是否全选
+    };
+    _this.debounceSearch = (0, _debounce2.default)(_this.debounceSearch, 500);
+    return _this;
+  }
+
+  (0, _createClass3.default)(AddFieldsModal, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if ("checkedList" in nextProps && !(0, _isEqual2.default)(nextProps.checkedList, this.props.checkedList)) {
+        var checkedList = nextProps.checkedList,
+            data = nextProps.data;
+
+        this.setState({
+          checkedList: checkedList,
+          checkAll: checkedList.length === data.length,
+          indeterminate: !!checkedList.length && checkedList.length < data.length
+        });
+      }
+    }
+
+    // 搜索
+
+
+    // 单个选择
+
+
+    // 全选
+
+
+    // 保存
+
+
+    // Enter键切换高亮
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          wrapClassName = _props.wrapClassName,
+          visible = _props.visible,
+          width = _props.width,
+          title = _props.title,
+          data = _props.data,
+          colNum = _props.colNum,
+          onCancel = _props.onCancel;
+      var _state = this.state,
+          searchValue = _state.searchValue,
+          indeterminate = _state.indeterminate,
+          checkAll = _state.checkAll,
+          checkedList = _state.checkedList;
+
+      var reg = new RegExp(searchValue, "ig");
+      return _react2.default.createElement(
+        _modal2.default,
+        {
+          wrapClassName: (0, _classnames2.default)(wrapClassName, "addSearchFieldsModal"),
+          width: width,
+          title: title,
+          okText: "\u4FDD\u5B58",
+          visible: visible,
+          onCancel: this.handleCancel,
+          onOk: this.handleOk
+        },
+        _react2.default.createElement(
+          "div",
+          { className: "searchBox" },
+          _react2.default.createElement(_input2.default, {
+            placeholder: "\u641C\u7D22\u5B57\u6BB5",
+            prefix: _react2.default.createElement(_icon2.default, { type: "search", style: { color: "#999" } }),
+            onChange: this.handleSearchChange,
+            onKeyUp: this.handleKeyUp,
+            style: { width: 280 }
+          })
+        ),
+        _react2.default.createElement(
+          "div",
+          { className: "checkAllBox" },
+          _react2.default.createElement(
+            _checkbox2.default,
+            {
+              indeterminate: indeterminate,
+              onChange: this.onCheckAllChange,
+              checked: checkAll
+            },
+            _react2.default.createElement(
+              "b",
+              null,
+              "\u5168\u9009"
+            )
+          ),
+          _react2.default.createElement(
+            "span",
+            { className: "tip" },
+            "\u5DF2\u9009\u62E9\uFF1A",
+            _react2.default.createElement(
+              "span",
+              { className: "num" },
+              checkedList.length
+            )
+          )
+        ),
+        _react2.default.createElement(
+          _reactCustomScrollbarsPatched.Scrollbars,
+          { style: { height: 300 }, autoHide: true },
+          _react2.default.createElement(
+            _checkbox2.default.Group,
+            {
+              style: { width: "100%" },
+              value: checkedList,
+              onChange: this.onChange
+            },
+            _react2.default.createElement(
+              "table",
+              { id: this.listID },
+              _react2.default.createElement(
+                "tbody",
+                null,
+                data.map(function (row, i) {
+                  if (i % colNum === 0) {
+                    return _react2.default.createElement(
+                      "tr",
+                      { key: i },
+                      data.slice(i, i % colNum === 0 ? i + colNum : i % colNum).map(function (item, j) {
+                        var _label = item.title;
+                        // 对label做高亮匹配
+                        if (searchValue) {
+                          var match = _label && _label.match(reg) || [];
+                          _label = _label && _label.split(reg).map(function (_it, _idx) {
+                            return _idx > 0 ? [_react2.default.createElement(
+                              "span",
+                              {
+                                key: _idx,
+                                className: "textHighLight"
+                              },
+                              match[0]
+                            ), _it] : _it;
+                          });
+                        }
+                        return _react2.default.createElement(
+                          "td",
+                          { key: j },
+                          _react2.default.createElement(
+                            _checkbox2.default,
+                            { value: item.dataIndex },
+                            _label
+                          )
+                        );
+                      })
+                    );
+                  } else {
+                    return null;
+                  }
+                })
+              )
+            )
+          )
+        ),
+        _react2.default.createElement(
+          "style",
+          { jsx: "true", global: "true" },
+          "\n            .addSearchFieldsModal .searchBox {\n              margin-bottom: 16px;\n            }\n            .addSearchFieldsModal .checkAllBox {\n              margin: 0 0 8px 9px;\n              font-size: 12px;\n            }\n            .addSearchFieldsModal .checkAllBox .tip {\n              color: #bbb;\n            }\n            .addSearchFieldsModal .checkAllBox .num {\n              color: #fc0;\n            }\n            .addSearchFieldsModal table {\n              width: 100%;\n              border: 1px solid #e8e8e8;\n              border-right: 0;\n              border-bottom: 0;\n              border-radius: 4px 4px 0 0;\n              border-collapse: separate;\n              border-spacing: 0;\n            }\n            .addSearchFieldsModal table td {\n              border-right: 1px solid #e8e8e8;\n              border-bottom: 1px solid #e8e8e8;\n              font-size: 12px;\n            }\n            .addSearchFieldsModal table td:hover {\n              background-color: #eef7fe;\n            }\n            .addSearchFieldsModal table .ant-checkbox-wrapper {\n              width: 100%;\n              height: 100%;\n              padding: 6px 8px;\n            }\n            .addSearchFieldsModal .textHighLight {\n              background-color: #fff5cc;\n            }\n            .addSearchFieldsModal .textHighLight .active {\n              background-color: #ffdc52;\n            }\n          "
+        )
+      );
+    }
+  }]);
+  return AddFieldsModal;
 }(_react.Component);
 
 AddFieldsModal.defaultProps = {
-	visible: false,
-	width: 900, // 默认模态框宽度900
-	title: "添加搜索字段",
-	data: [], // 可供添加的字段列表
-	colNum: 6 // 默认一行显示6列
+  visible: false,
+  width: 900, // 默认模态框宽度900
+  title: "添加搜索字段",
+  data: [], // 可供添加的字段列表
+  colNum: 6 // 默认一行显示6列
 };
 exports.default = AddFieldsModal;