dlt-for-react 1.0.12 → 1.0.14

package/lib/components/KyTableCardList/AddFieldsModal.js

@@ -0,0 +1,370 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _modal = require("antd/lib/modal");
+
+var _modal2 = _interopRequireDefault(_modal);
+
+var _checkbox = require("antd/lib/checkbox");
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+var _input = require("antd/lib/input");
+
+var _input2 = _interopRequireDefault(_input);
+
+var _icon = require("antd/lib/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _message2 = require("antd/lib/message");
+
+var _message3 = _interopRequireDefault(_message2);
+
+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/modal/style");
+
+require("antd/lib/checkbox/style");
+
+require("antd/lib/input/style");
+
+require("antd/lib/icon/style");
+
+require("antd/lib/message/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _isEqual = require("lodash/isEqual");
+
+var _isEqual2 = _interopRequireDefault(_isEqual);
+
+var _debounce = require("lodash/debounce");
+
+var _debounce2 = _interopRequireDefault(_debounce);
+
+var _classnames = require("classnames");
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCustomScrollbars = require("react-custom-scrollbars");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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;
+}(_react.Component);
+
+AddFieldsModal.defaultProps = {
+	visible: false,
+	width: 900, // 默认模态框宽度900
+	title: "添加搜索字段",
+	data: [], // 可供添加的字段列表
+	colNum: 6 // 默认一行显示6列
+};
+exports.default = AddFieldsModal;