linkmore-design 1.0.25 → 1.0.28

package/lib/CkFilter/components/DragBox/sortableItem.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _linkmoreDesign = require("linkmore-design");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _utilities = require("@dnd-kit/utilities");
+
+var _excluded = ["item", "filters", "options", "checkedValues", "setFilterValue", "setCheckedValues"];
+
+var SortableItem = function SortableItem(props) {
+  var virItem = props.item,
+      filters = props.filters,
+      options = props.options,
+      checkedValues = props.checkedValues,
+      setFilterValue = props.setFilterValue,
+      setCheckedValues = props.setCheckedValues,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useSortable = (0, _sortable.useSortable)({
+    id: "drag".concat(virItem.field),
+    data: (0, _objectSpread2.default)({}, virItem)
+  }),
+      attributes = _useSortable.attributes,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var style = {
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: transition
+  }; // 是否可置顶, 第一项无置顶操作, 所以这里的index > 0
+
+  var isTop = (0, _react.useCallback)(function (item) {
+    return checkedValues.includes(item.field) && filters.findIndex(function (v) {
+      return v.field === item.field;
+    }) > 0;
+  }, [checkedValues, filters]); // 置顶操作, 防止频繁操作, 建议加上节流
+
+  var handleTop = function handleTop(e, item) {
+    e.stopPropagation();
+    setFilterValue(item, 'top');
+  }; // 单选事件
+
+
+  var onChange = function onChange(e, item) {
+    e.preventDefault();
+    e.stopPropagation(); // setFilterValue(item)
+
+    var nValue = checkedValues.includes(item.field) ? checkedValues.filter(function (v) {
+      return v !== item.field;
+    }) : [].concat((0, _toConsumableArray2.default)(checkedValues), [item.field]);
+    setCheckedValues(nValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setNodeRef,
+    style: style
+  }, attributes), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+    className: (0, _classnames.default)('filter_item', {
+      checked: checkedValues.includes(virItem.field)
+    }),
+    onClick: function onClick(e) {
+      return onChange(e, virItem);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: "pointer_move"
+  }, listeners), /*#__PURE__*/_react.default.createElement(_icons.HolderOutlined, {
+    style: {
+      color: 'var(--tip-text-color)'
+    }
+  })), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox, {
+    value: virItem.field,
+    className: "filter_item-content"
+  }, virItem.title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_item_operate"
+  }, isTop(virItem) && /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-vertical-align-top",
+    className: "hover_show icon_top",
+    onClick: function onClick(e) {
+      return handleTop(e, virItem);
+    }
+  })))));
+};
+
+var _default = SortableItem;
+exports.default = _default;

package/lib/CkFilter/components/Nested.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var _excluded = ["value", "onChange", "options"];
+
+var Nested = function Nested(_ref) {
+  var _aliveActive$body;
+
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      options = _ref.options,
+      resetProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      aliveActive = _useState2[0],
+      setAliveActive = _useState2[1];
+
+  var handleClick = function handleClick(item) {
+    setAliveActive(item);
+
+    if (!item.children) {
+      onChange({
+        subValue: item,
+        value: [(0, _objectSpread2.default)({}, item)]
+      });
+    }
+  };
+  /*
+   * @Array val 选中的数据数组: [{}, ...]
+   * @String subValue 选中的子级
+   * 
+  */
+
+
+  var handleOnChange = function handleOnChange(val, type) {
+    onChange({
+      subValue: aliveActive,
+      value: val,
+      type: type
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Space, {
+    size: 8,
+    wrap: true
+  }, options === null || options === void 0 ? void 0 : options.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: v.value,
+      className: (0, _classnames.default)('checkbox_tag', {
+        active: aliveActive.value === v.value
+      }),
+      onClick: function onClick() {
+        return handleClick(v);
+      }
+    }, v.label);
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      marginTop: 16
+    }
+  }, (_aliveActive$body = aliveActive.body) === null || _aliveActive$body === void 0 ? void 0 : _aliveActive$body.call(aliveActive, {
+    value: aliveActive.value,
+    onChange: handleOnChange,
+    item: aliveActive
+  })));
+};
+
+var _default = Nested;
+exports.default = _default;

package/lib/CkFilter/components/filterTypes.js

@@ -41,14 +41,29 @@ var _VirtualList = _interopRequireDefault(require("../../VirtualList"));
 
 var _utils = require("../utils");
 
+var _DragBox = _interopRequireDefault(require("./DragBox"));
+
+var _icon_placeholder = _interopRequireDefault(require("../icon_placeholder.png"));
+
 var _excluded = ["item"],
     _excluded2 = ["item"],
     _excluded3 = ["item"],
     _excluded4 = ["item"],
-    _excluded5 = ["item"],
-    _excluded6 = ["type"];
+    _excluded5 = ["type"];
+
+var FilterEmpty = function FilterEmpty() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_empty"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _icon_placeholder.default,
+    alt: "empty",
+    width: 81
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_empty_text"
+  }, "\u6682\u65E0\u6570\u636E"));
+}; // 输入框过滤器
+
 
-// 输入框过滤器
 var InputFilter = function InputFilter(_ref) {
   var getFilterValue = _ref.getFilterValue,
       setFilterValue = _ref.setFilterValue;
@@ -58,6 +73,13 @@ var InputFilter = function InputFilter(_ref) {
     return setFilterValue(val);
   };
 
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      var _inputRef$current;
+
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    }, 200);
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_dropdown"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -133,9 +155,7 @@ var SelectFilter = function SelectFilter(_ref2) {
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "filter_item-content"
     }, item.label));
-  }), !options.length && /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_empty"
-  }, "\u6682\u65E0\u6570\u636E")));
+  }), !options.length && /*#__PURE__*/_react.default.createElement(FilterEmpty, null)));
 }; // 嵌套结构下拉单选过滤器
 
 
@@ -162,15 +182,14 @@ var NestedFilter = function NestedFilter(_ref4) {
   }; // 单选事件
 
 
-  var onChange = function onChange(e, item) {
-    e.preventDefault();
-    setFilterValue(item.value);
-  };
-
   var handleClick = function handleClick(e, item) {
-    e.preventDefault();
-    e.stopPropagation();
-    setFilterValue(item, 'children');
+    e.preventDefault(); // 是否存在嵌套
+
+    if (item === null || item === void 0 ? void 0 : item.children) {
+      setFilterValue(item, 'children');
+    } else {
+      setFilterValue(item.value);
+    }
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -199,19 +218,12 @@ var NestedFilter = function NestedFilter(_ref4) {
         checked: item.value === getFilterValue
       }),
       onClick: function onClick(e) {
-        return onChange(e, item);
+        return handleClick(e, item);
       }
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "filter_item-content"
-    }, item.label), /*#__PURE__*/_react.default.createElement(_IconFont.default, {
-      type: "lmweb-gengduotianchong",
-      onClick: function onClick(e) {
-        return handleClick(e, item);
-      }
-    }));
-  }), !options.length && /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_empty"
-  }, "\u6682\u65E0\u6570\u636E")));
+    }, item.label));
+  }), !options.length && /*#__PURE__*/_react.default.createElement(FilterEmpty, null)));
 }; // 自定义筛选下拉选过滤器
 
 
@@ -274,9 +286,7 @@ var CustomFilter = function CustomFilter(_ref6) {
     className: "filter_item-content"
   }, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
     type: "lmweb-plus"
-  }), "\u65B0\u589E\u81EA\u5B9A\u4E49\u67E5\u8BE2")), !filters.length && /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_empty"
-  }, "\u6682\u65E0\u6570\u636E")));
+  }), "\u65B0\u589E\u81EA\u5B9A\u4E49\u67E5\u8BE2")), !filters.length && /*#__PURE__*/_react.default.createElement(FilterEmpty, null)));
 }; // 下拉多选过滤器: 要过滤的数据, 当前选中项, 触发过滤, 过滤前的数据
 
 
@@ -403,9 +413,7 @@ var CheckboxFilter = function CheckboxFilter(_ref8) {
       value: item.value,
       className: "filter_item-content"
     }, item.label));
-  }), !options.length && /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_empty"
-  }, "\u6682\u65E0\u6570\u636E")), /*#__PURE__*/_react.default.createElement("div", {
+  }), !options.length && /*#__PURE__*/_react.default.createElement(FilterEmpty, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_footer"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "footer_clear",
@@ -434,19 +442,12 @@ var MoreFilter = function MoreFilter(_ref12) {
   var _useState11 = (0, _react.useState)(filters || []),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
       options = _useState12[0],
-      setOptions = _useState12[1];
+      setOptions = _useState12[1]; // 是否存在搜索, 当数据大于8时存在搜索
 
-  console.log('more'); // 是否存在搜索, 当数据大于8时存在搜索
 
   var isSearch = (0, _react.useMemo)(function () {
     return filters.length > 8;
-  }, [filters.length]); // 是否可置顶, 第一项无置顶操作, 所以这里的index > 0
-
-  var isTop = (0, _react.useCallback)(function (item) {
-    return checkedValues.includes(item.field) && filters.findIndex(function (v) {
-      return v.field === item.field;
-    }) > 0;
-  }, [checkedValues, filters]); // 是否半选
+  }, [filters.length]); // 是否半选
 
   var indeterminate = (0, _react.useMemo)(function () {
     return checkedValues.length && checkedValues.length < options.length;
@@ -486,23 +487,6 @@ var MoreFilter = function MoreFilter(_ref12) {
 
   var handleCancel = function handleCancel() {
     setFilterValue(checkedValues, 'cancel');
-  }; // 置顶操作, 防止频繁操作, 建议加上节流
-
-
-  var handleTop = function handleTop(e, item) {
-    e.stopPropagation();
-    setFilterValue(item, 'top');
-  }; // 单选事件
-
-
-  var onChange = function onChange(e, item) {
-    e.preventDefault();
-    e.stopPropagation(); // setFilterValue(item)
-
-    var nValue = checkedValues.includes(item.field) ? checkedValues.filter(function (v) {
-      return v !== item.field;
-    }) : [].concat((0, _toConsumableArray2.default)(checkedValues), [item.field]);
-    setCheckedValues(nValue);
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -525,33 +509,13 @@ var MoreFilter = function MoreFilter(_ref12) {
   }, "\u5168\u90E8")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
     className: "filter_reset",
     onClick: handleReset
-  }, "\u91CD\u7F6E")))), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox.Group, {
-    value: checkedValues,
-    className: "filter_body"
-  }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
+  }, "\u91CD\u7F6E")))), /*#__PURE__*/_react.default.createElement(_DragBox.default, {
+    filters: filters,
     options: options,
-    className: "filter_list"
-  }, function (_ref13) {
-    var item = _ref13.item,
-        resetProps = (0, _objectWithoutProperties2.default)(_ref13, _excluded5);
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
-      className: "filter_item",
-      onClick: function onClick(e) {
-        return onChange(e, item);
-      }
-    }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox, {
-      value: item.field,
-      className: "filter_item-content"
-    }, item.title), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter_item_operate"
-    }, isTop(item) && /*#__PURE__*/_react.default.createElement(_IconFont.default, {
-      type: "lmweb-vertical-align-top",
-      className: "hover_show icon_top",
-      onClick: function onClick(e) {
-        return handleTop(e, item);
-      }
-    })));
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    checkedValues: checkedValues,
+    setFilterValue: setFilterValue,
+    setCheckedValues: setCheckedValues
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_footer"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "footer_clear",
@@ -564,11 +528,11 @@ var MoreFilter = function MoreFilter(_ref12) {
 }; // 日期范围选择器
 
 
-var DatePickerFilter = function DatePickerFilter(_ref14) {
-  var getFilterValue = _ref14.getFilterValue,
-      setFilterValue = _ref14.setFilterValue,
-      props = _ref14.props,
-      dateType = _ref14.dateType;
+var DatePickerFilter = function DatePickerFilter(_ref13) {
+  var getFilterValue = _ref13.getFilterValue,
+      setFilterValue = _ref13.setFilterValue,
+      props = _ref13.props,
+      dateType = _ref13.dateType;
   console.log(dateType, '--dateType'); // 对日期格式的转换, 日期组件仅接收moment格式
 
   var value = (0, _react.useMemo)(function () {
@@ -579,8 +543,7 @@ var DatePickerFilter = function DatePickerFilter(_ref14) {
     }
 
     return nValue;
-  }, [getFilterValue]);
-  console.log(value, '--value'); // 最近的时间段, 值为JSON转换后的字符串
+  }, [getFilterValue]); // 最近的时间段, 值为JSON转换后的字符串
 
   var ranges = (0, _react.useMemo)(function () {
     return Object.entries((0, _utils.getRanges)()).map(function (item, i) {
@@ -636,11 +599,14 @@ var DatePickerFilter = function DatePickerFilter(_ref14) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_datePicker.default.RangePicker, (0, _extends2.default)({
       picker: "date",
       separator: /*#__PURE__*/_react.default.createElement(_IconFont.default, {
-        type: "lmweb-swap-right"
+        type: "lmweb-swap-right",
+        style: {
+          color: 'var(--text-color)'
+        }
       }),
       placeholder: ['开始日期', '结束日期'],
       style: {
-        width: 200
+        width: 210
       }
     }, props, {
       value: value,
@@ -741,8 +707,7 @@ var CascaderFilter = function CascaderFilter(props) {
     }, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Button, {
       type: "primary",
       size: "small",
-      onClick: handleSure,
-      disabled: !(checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues.length)
+      onClick: handleSure
     }, "\u786E\u5B9A")));
   };
 
@@ -796,7 +761,7 @@ var CascaderFilter = function CascaderFilter(props) {
     }
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('filter_item', {
-      isfiltering: isFiltering,
+      isfiltering: isFiltering || visible,
       active: !isFiltering && visible
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -814,7 +779,7 @@ var CascaderFilter = function CascaderFilter(props) {
 
 var FilterComp = function FilterComp(props) {
   var type = props.type,
-      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded6);
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded5);
 
   switch (type) {
     case 'input':