linkmore-design 1.0.91 → 1.0.95

package/es/Filter/components/Select.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/list/style");
+
+var _list = _interopRequireDefault(require("antd/es/list"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _popContext = _interopRequireDefault(require("../popContext"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+var Index = function Index() {
+  var _useContext = (0, _react.useContext)(_popContext.default),
+      item = _useContext.item,
+      onChange = _useContext.onChange,
+      header = _useContext.header;
+
+  var toggle = item.toggle,
+      dataList = item.data,
+      _item$mode = item.mode,
+      mode = _item$mode === void 0 ? 'and' : _item$mode,
+      _renderItem = item.renderItem;
+
+  var _useState = (0, _react.useState)(mode),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useMode = _useState2[0],
+      setMode = _useState2[1]; // 查询关系：or||and
+
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useActive = _useState4[0],
+      setActive = _useState4[1]; // 选中状态
+
+
+  var getModeChange = function getModeChange(e) {
+    setMode(e);
+  };
+
+  var getChange = function getChange(v) {
+    var nValue = toggle ? v : v.value;
+
+    if (toggle) {
+      onChange(nValue);
+    } else {
+      var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        checkValue: [v]
+      });
+      onChange(nValue, obj, useMode);
+      setActive(v.value);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header ? /*#__PURE__*/_react.default.createElement(_header.default, {
+    getChange: getModeChange
+  }) : null, /*#__PURE__*/_react.default.createElement(_list.default, {
+    itemLayout: "horizontal",
+    dataSource: dataList,
+    renderItem: function renderItem(v, i) {
+      return /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+        className: (0, _classnames.default)({
+          active: v.value && useActive === v.value
+        }),
+        onClick: function onClick() {
+          return getChange(v);
+        }
+      }, _renderItem ? _renderItem(v, i) : v.label);
+    }
+  }));
+};
+
+var _default = Index;
+exports.default = _default;

package/es/Filter/components/Tree.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/tree/style");
+
+var _tree = _interopRequireDefault(require("antd/es/tree"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+var _popContext = _interopRequireDefault(require("../popContext"));
+
+var Index = function Index() {
+  var _useContext = (0, _react.useContext)(_popContext.default),
+      item = _useContext.item,
+      onChange = _useContext.onChange,
+      header = _useContext.header;
+
+  var data = item.data,
+      _item$mode = item.mode,
+      mode = _item$mode === void 0 ? 'and' : _item$mode;
+
+  var _useState = (0, _react.useState)(mode),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useMode = _useState2[0],
+      setMode = _useState2[1];
+
+  var getModeChange = function getModeChange(e) {
+    setMode(e);
+  };
+
+  var onSelect = function onSelect(nodeKey, node) {
+    var value = node.node;
+    var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      checkValue: [value]
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(value, obj, useMode);
+  };
+
+  var defaultConfig = {
+    // checkable: true,
+    onSelect: onSelect,
+    treeData: data
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header ? /*#__PURE__*/_react.default.createElement(_header.default, {
+    getChange: getModeChange
+  }) : null, /*#__PURE__*/_react.default.createElement(_tree.default, defaultConfig));
+};
+
+var _default = Index;
+exports.default = _default;

package/es/Filter/components/header.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/row/style");
+
+var _row = _interopRequireDefault(require("antd/es/row"));
+
+require("antd/es/radio/style");
+
+var _radio = _interopRequireDefault(require("antd/es/radio"));
+
+require("antd/es/col/style");
+
+var _col = _interopRequireDefault(require("antd/es/col"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _popContext = _interopRequireDefault(require("../popContext"));
+
+var Index = function Index(props) {
+  var _React$useContext = _react.default.useContext(_popContext.default),
+      item = _React$useContext.item;
+
+  var title = item.title,
+      _item$mode = item.mode,
+      mode = _item$mode === void 0 ? 'and' : _item$mode;
+  var getChange = props.getChange;
+
+  var onChange = function onChange(e) {
+    var value = e.target.value;
+    getChange === null || getChange === void 0 ? void 0 : getChange(value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_row.default, {
+    justify: "space-between",
+    align: "middle",
+    className: "list-popover-header"
+  }, /*#__PURE__*/_react.default.createElement(_col.default, {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement(_col.default, {
+    className: "mode"
+  }, /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    defaultValue: mode,
+    buttonStyle: "solid",
+    onChange: onChange
+  }, /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+    value: "or"
+  }, "\u6216"), /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+    value: "and"
+  }, "\u4E14"))));
+};
+
+var _default = Index;
+exports.default = _default;

package/es/Filter/components/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function get() {
+    return _Date.default;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.default;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _Select.default;
+  }
+});
+Object.defineProperty(exports, "Tree", {
+  enumerable: true,
+  get: function get() {
+    return _Tree.default;
+  }
+});
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _Select = _interopRequireDefault(require("./Select"));
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _Tree = _interopRequireDefault(require("./Tree"));
+
+var _Date = _interopRequireDefault(require("./Date"));

package/es/Filter/context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var context = /*#__PURE__*/_react.default.createContext({});
+
+var _default = context;
+exports.default = _default;

package/es/Filter/edit/editFilter.js

@@ -0,0 +1,273 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+require("antd/es/drawer/style");
+
+var _drawer = _interopRequireDefault(require("antd/es/drawer"));
+
+require("antd/es/radio/style");
+
+var _radio = _interopRequireDefault(require("antd/es/radio"));
+
+require("antd/es/space/style");
+
+var _space = _interopRequireDefault(require("antd/es/space"));
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+require("antd/es/list/style");
+
+var _list = _interopRequireDefault(require("antd/es/list"));
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+require("antd/es/tag/style");
+
+var _tag = _interopRequireDefault(require("antd/es/tag"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _context2 = _interopRequireDefault(require("../context"));
+
+var ListItem = function ListItem(props) {
+  var InputRef = (0, _react.useRef)(null); // eslint-disable-next-line no-unused-vars
+
+  var data = props.data,
+      onChange = props.onChange,
+      onClose = props.onClose;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useInputVisible = _useState2[0],
+      setInputVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(data.checkValue),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useCheckValue = _useState4[0],
+      setCheckValue = _useState4[1]; // 选中的数据
+  // Tag转输入框
+
+
+  var showInput = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return setInputVisible(true);
+
+            case 2:
+              InputRef.current.focus();
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function showInput() {
+      return _ref.apply(this, arguments);
+    };
+  }(); // 输入框失焦&回车事件
+
+
+  var handleInputConfirm = function handleInputConfirm() {
+    setInputVisible(false);
+  };
+
+  var onItemClose = function onItemClose() {
+    onClose === null || onClose === void 0 ? void 0 : onClose(data.field);
+  }; // 删除Tag
+
+
+  var onTagClose = function onTagClose(tag) {
+    var nValue = useCheckValue.filter(function (v) {
+      return v.value !== tag;
+    });
+    setCheckValue(nValue);
+  }; // Tags显示
+
+
+  var tagElem = function tagElem() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, useCheckValue.map(function (v) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tag.default, {
+        key: v.value,
+        closable: true,
+        onClose: function onClose() {
+          return onTagClose(v.value);
+        }
+      }, v.label));
+    }), useInputVisible ? /*#__PURE__*/_react.default.createElement(_input.default, {
+      ref: InputRef,
+      type: "text",
+      size: "small",
+      className: "tag-input",
+      onBlur: handleInputConfirm,
+      onPressEnter: handleInputConfirm
+    }) : /*#__PURE__*/_react.default.createElement(_tag.default, {
+      className: "site-tag-plus",
+      onClick: showInput
+    }, /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null), " \u65B0\u589E"));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+    key: data.field
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "item_box"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "item_label"
+  }, /*#__PURE__*/_react.default.createElement("div", null, data.title, "\uFF08\u4E14\uFF09"), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
+    onClick: onItemClose
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "item_tags"
+  }, tagElem()))));
+};
+
+var Index = function Index(props) {
+  var _useContext = (0, _react.useContext)(_context2.default),
+      state = _useContext.state;
+
+  var visible = props.visible,
+      onClose = props.onClose;
+  var inputRef = (0, _react.useRef)();
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      useDefault = _useState6[0],
+      setDefault = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      useList = _useState8[0],
+      setList = _useState8[1];
+
+  var _useState9 = (0, _react.useState)('editFilter'),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      useKeys = _useState10[0],
+      setKeys = _useState10[1]; // 设为默认事件
+
+
+  var onRadioChange = function onRadioChange(e) {
+    var v = e.target.value;
+    setDefault(v);
+  }; // 新增筛选项
+
+
+  var addEvent = function addEvent() {}; // 单个筛选项筛选值变化
+
+
+  var getChange = function getChange(e) {}; // 删除单个筛选项
+
+
+  var listItemOnClose = function listItemOnClose(field) {
+    var nValue = useList.filter(function (v) {
+      return v.field !== field;
+    });
+    setList(nValue);
+  }; // 重置
+
+
+  var resetClose = function resetClose() {
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    setKeys(Date.now());
+    var nValue = Object.values(state.checked);
+    setList(nValue);
+  }; // 保存数据
+
+
+  var onSave = function onSave() {
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }; // 初始化从state中获取数据
+
+
+  (0, _react.useEffect)(function () {
+    var nValue = Object.values(state.checked);
+    setList(nValue);
+  }, [state.checked]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_drawer.default, {
+    title: "\u521B\u5EFA\u6211\u7684\u7B5B\u9009",
+    width: 440,
+    placement: "right",
+    onClose: resetClose,
+    visible: visible,
+    key: useKeys,
+    extra: /*#__PURE__*/_react.default.createElement(_space.default, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+      onClick: resetClose
+    }, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_button.default, {
+      type: "primary",
+      onClick: onSave
+    }, "\u786E\u8BA4")),
+    className: "edit_filter"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "edit_filter_title"
+  }, /*#__PURE__*/_react.default.createElement(_space.default, {
+    direction: "vertical",
+    size: 16
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title_lable"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "required"
+  }, "*"), " \u540D\u79F0"), /*#__PURE__*/_react.default.createElement(_input.default, {
+    ref: inputRef,
+    prefix: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
+    placeholder: "\u8BF7\u8F93\u5165",
+    size: "middle"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title_lable"
+  }, "\u8BBE\u4E3A\u9ED8\u8BA4"), /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    onChange: onRadioChange,
+    value: useDefault
+  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: true
+  }, "\u662F"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: false
+  }, "\u5426"))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "edit_filter_body"
+  }, /*#__PURE__*/_react.default.createElement(_list.default, {
+    itemLayout: "vertical",
+    dataSource: useList,
+    rowKey: function rowKey(item) {
+      return item.field;
+    },
+    renderItem: function renderItem(item) {
+      return /*#__PURE__*/_react.default.createElement(ListItem, {
+        data: item,
+        onChange: getChange,
+        onClose: listItemOnClose
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "edit_filter_footer"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "dashed",
+    block: true,
+    onClick: addEvent,
+    size: "middle"
+  }, "\u65B0\u589E\u7B5B\u9009\u9879")))));
+};
+
+var _default = Index;
+exports.default = _default;