linkmore-design 1.0.54 → 1.0.55

package/lib/LmFilter/baseFilter/fuzzySearch.js

@@ -0,0 +1,53 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _InputSearchClose = _interopRequireDefault(require("../components/InputSearchClose"));
+
+var FuzzySearch = function FuzzySearch(_ref) {
+  var instance = _ref.instance;
+  var inputRef = (0, _react.useRef)(null);
+  var state = instance.state,
+      setFilterValue = instance.setFilterValue,
+      size = instance.size,
+      placeholder = instance.placeholder,
+      searchKey = instance.searchKey; // 默认值
+
+  var defaultValue = (0, _react.useMemo)(function () {
+    var _state$basicFilter;
+
+    return ((_state$basicFilter = state.basicFilter) === null || _state$basicFilter === void 0 ? void 0 : _state$basicFilter[searchKey]) || '';
+  }, [state.basicFilter]);
+
+  var onSearch = function onSearch(val) {
+    setFilterValue(val, searchKey);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!defaultValue) {
+      inputRef.current.setValue('');
+    }
+  }, [state.basicFilter]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_filter_search"
+  }, /*#__PURE__*/_react.default.createElement(_InputSearchClose.default, {
+    ref: inputRef,
+    allowClear: true,
+    defaultValue: defaultValue,
+    size: size,
+    placeholder: placeholder,
+    onSearch: onSearch
+  }));
+};
+
+var _default = FuzzySearch;
+exports.default = _default;

package/lib/LmFilter/baseFilter/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _fuzzySearch = _interopRequireDefault(require("../components/fuzzySearch"));
+var _fuzzySearch = _interopRequireDefault(require("./fuzzySearch"));
 
 var _components = _interopRequireDefault(require("../components"));
 

package/lib/LmFilter/clearFilter/index.js

@@ -17,8 +17,10 @@ var LmFilterClear = /*#__PURE__*/_react.default.memo(function (_ref) {
       dispatch = instance.dispatch;
 
   var handleClear = function handleClear() {
-    // dispatch();
     console.log('state', state);
+    dispatch({
+      type: 'reset'
+    });
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {

package/lib/LmFilter/components/CascaderFilter.js

@@ -118,53 +118,30 @@ var CascaderFilter = function CascaderFilter(_ref2) {
       return v.value;
     });
   }, [checkedValues]);
-
-  var onChange = function onChange(item, selectedOptions) {
-    console.log('item', item, selectedOptions);
-    var nValue = [];
-
-    if (selectedOptions.length === 1) {
-      nValue = selectedOptions[0][1] ? [selectedOptions[0][1]] : selectedOptions[0][0].children;
-    }
-
-    if (selectedOptions.length > 1) {
-      var arr = selectedOptions.map(function (v) {
-        return v[1] ? v[1] : v[0].children;
+  var defaultValue = (0, _react.useMemo)(function () {
+    var flatKeys = function flatKeys(arr) {
+      return arr.map(function (v) {
+        return v.value;
       });
-      nValue = arr.flat(2);
-    }
+    };
 
-    console.log('nValue', nValue);
-    setCheckedValues(nValue); // setFilterValue(nValue);
-    // if (!item.length) {
-    //   setCheckedValues(itemProps.multiple ? [] : '');
-    //   setFilterValue(undefined);
-    //   return;
-    // }
-    // if (itemProps.multiple) {
-    //   const arr = [];
-    //   selectedOptions.map((vals) => {
-    //     return vals.length > 1
-    //       ? arr.push(vals.map((v) => v.label).join('/'))
-    //       : vals[0].children.map((v) => arr.push(`${vals[0].label}/${v.label}`));
-    //   });
-    //   const showLabel = arr.length < 3 ? arr.join('、') : `${arr[0]}、+${arr.length}`;
-    //   setCheckedValues(item);
-    // } else {
-    //   setFilterValue(item);
-    //   setCheckedValues(item);
-    // }
+    var nKey = filterValue.map(function (v) {
+      return Array.isArray(v) ? flatKeys(v) : v.value;
+    });
+    return nKey;
+  }, [filterValue]);
+
+  var onChange = function onChange(item, selectedOptions) {
+    console.log('item', item, '===', selectedOptions);
+    setCheckedValues(selectedOptions);
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cascader.default, {
     multiple: true,
-    options: options // value={checkedValues}
-    ,
+    options: options,
     onChange: onChange,
+    defaultValue: defaultValue,
     open: visible,
-    getPopupContainer: function getPopupContainer(triggerNode) {
-      return triggerNode;
-    },
     dropdownRender: function dropdownRender(dom) {
       return /*#__PURE__*/_react.default.createElement(DropdownRender, {
         dom: dom,
@@ -174,8 +151,7 @@ var CascaderFilter = function CascaderFilter(_ref2) {
         setCheckedValues: setCheckedValues,
         setOptions: setOptions
       });
-    } // onDropdownVisibleChange={(v) => setVisible(v)}
-
+    }
   }, /*#__PURE__*/_react.default.createElement("div", null)));
 };
 

package/lib/LmFilter/components/DateFilter.js

@@ -19,8 +19,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _linkmoreDesign = require("linkmore-design");
 
-var _moment = _interopRequireDefault(require("moment"));
-
 var _utils = require("../utils");
 
 var RangePicker = function RangePicker(_ref) {
@@ -29,10 +27,7 @@ var RangePicker = function RangePicker(_ref) {
       onChange = _ref.onChange,
       itemProps = _ref.itemProps,
       visible = _ref.visible;
-  var value = (0, _react.useMemo)(function () {
-    return filterValue ? [(0, _moment.default)(filterValue[0]), (0, _moment.default)(filterValue[1])] : null;
-  }, [filterValue]); // 最近的时间段, 值为JSON转换后的字符串
-
+  // 最近的时间段, 值为JSON转换后的字符串
   var ranges = (0, _react.useMemo)(function () {
     return Object.entries((0, _utils.getRanges)()).map(function (item, i) {
       return {
@@ -44,7 +39,7 @@ var RangePicker = function RangePicker(_ref) {
   }, []); // 选中时间段的触发
 
   var handleOnChange = function handleOnChange(dates, dateStrings) {
-    onChange(dates, getIsHas(dateStrings.filter(function (v) {
+    onChange(dates, (0, _utils.getIsHas)(dateStrings.filter(function (v) {
       return !!v;
     })) ? dateStrings : null);
   }; // 最近的时间触发事件
@@ -92,7 +87,6 @@ var RangePicker = function RangePicker(_ref) {
       width: 210
     }
   }, itemProps, {
-    value: value,
     onChange: handleOnChange,
     open: visible,
     panelRender: panelRender,
@@ -100,7 +94,7 @@ var RangePicker = function RangePicker(_ref) {
     bordered: false,
     size: "small",
     inputReadOnly: true
-  }), /*#__PURE__*/_react.default.createElement("div", null)));
+  })));
 }; // 日期范围选择器
 
 
@@ -110,18 +104,16 @@ var DatePickerFilter = function DatePickerFilter(_ref2) {
   var filterValue = instance.filterValue,
       setFilterValue = instance.setFilterValue,
       visible = instance.visible;
-  var props = itemProps.props,
-      dateType = itemProps.dateType; // 对日期格式的转换, 日期组件仅接收moment格式
-
-  var value = (0, _react.useMemo)(function () {
-    return filterValue ? (0, _moment.default)(filterValue) : null;
-  }, [filterValue]); // 选中时间段的触发
+  var _itemProps$props = itemProps.props,
+      props = _itemProps$props === void 0 ? {
+    picker: 'date'
+  } : _itemProps$props; // 选中时间段的触发
 
   var onChange = function onChange(dates, dateStrings) {
-    setFilterValue(getIsHas(dateStrings) ? dateStrings : null);
+    setFilterValue((0, _utils.getIsHas)(dateStrings) ? dateStrings : null);
   };
 
-  if (dateType === 'rangePicker') {
+  if (['range', 'rangePicker'].includes(itemProps.dateType || itemProps.datetype)) {
     return /*#__PURE__*/_react.default.createElement(RangePicker, {
       filterValue: filterValue,
       setFilterValue: setFilterValue,
@@ -134,13 +126,13 @@ var DatePickerFilter = function DatePickerFilter(_ref2) {
   return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
     placeholder: "\u9009\u62E9\u65F6\u95F4"
   }, props, {
-    value: value,
     onChange: onChange,
     open: visible,
     bordered: false,
     size: "small",
-    inputReadOnly: true
-  }), /*#__PURE__*/_react.default.createElement("div", null));
+    inputReadOnly: true,
+    dropdownClassName: "lm_filter_dropdown_picker"
+  }));
 };
 
 var _default = DatePickerFilter;

package/lib/LmFilter/components/DropdownFIlter.js

@@ -19,6 +19,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _linkmoreDesign = require("linkmore-design");
 
+var _icons = require("@ant-design/icons");
+
 var _InputFilter = _interopRequireDefault(require("./InputFilter"));
 
 var _SelectFilter = _interopRequireDefault(require("./SelectFilter"));
@@ -61,13 +63,75 @@ var FilterControl = function FilterControl(_ref) {
   return widgets[type] || null;
 };
 
-var getLabel = function getLabel(val) {
+var getPlacehodler = function getPlacehodler(props) {
+  var type = props.type,
+      dateType = props.dateType,
+      itemProps = props.props; // 日期显示的处理
+
+  if (['date'].includes(type)) {
+    if (['range', 'rangePicker'].includes(props.dateType || props.datetype)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u5F00\u59CB\u65E5\u671F", /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+        type: "lmweb-swap-right",
+        style: {
+          fontSize: 14
+        }
+      }), "\u7ED3\u675F\u65E5\u671F", /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
+        style: {
+          fontSize: 12
+        }
+      }));
+    }
+
+    var placeholder = {
+      'week': '周',
+      'month': '月份',
+      'quarter': '季度',
+      'year': '年份'
+    };
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u9009\u62E9", placeholder[itemProps === null || itemProps === void 0 ? void 0 : itemProps.picker] || '日期', /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
+      style: {
+        fontSize: 12
+      }
+    }));
+  }
+
+  return '全部';
+}; // 根据不同的类型展示文本内容
+
+
+var getLabel = function getLabel(filterValue, item) {
+  var _val;
+
+  var val = filterValue;
+  var type = item.type; // 不存在筛选时
+
   if (!(0, _utils.getIsHas)(val)) {
-    return '全部';
+    return getPlacehodler(item);
   } // 存在筛选数据时
 
 
   if (Array.isArray(val)) {
+    // 日期
+    if (['date'].includes(type)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, val[0], /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+        type: "lmweb-swap-right",
+        style: {
+          fontSize: 14,
+          color: 'var(--text-color)'
+        }
+      }), val[1]);
+    } // 级联数据转换平级结构
+
+
+    if (['cascader'].includes(type)) {
+      var _filterValue$map;
+
+      val = (_filterValue$map = filterValue.map(function (v) {
+        return v[1] ? v[1] : v[0].children;
+      })) === null || _filterValue$map === void 0 ? void 0 : _filterValue$map.flat(2);
+    } // 多选
+
+
     switch (val.length) {
       case 1:
         return val[0].label;
@@ -78,12 +142,18 @@ var getLabel = function getLabel(val) {
       default:
         return "".concat(val[0].label, "\u3001+").concat(val.length - 1, "...");
     }
-  }
+  } // 输入框
+
+
+  if (['input', 'date'].includes(type)) {
+    return val;
+  } // 单选框
+
 
-  return (val === null || val === void 0 ? void 0 : val.label) || val;
+  return (_val = val) === null || _val === void 0 ? void 0 : _val.label;
 };
 /*
- * 样式控制
+ * css样式控制
  * expand: 展开样式
  * active: 选中样式
 */
@@ -147,15 +217,13 @@ var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref2) {
     className: "filter_item_label"
   }, item === null || item === void 0 ? void 0 : item.title, ":"), /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_item_value"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "checked"
-  }, getLabel(filterValue))), /*#__PURE__*/_react.default.createElement("div", {
+  }, getLabel(filterValue, item)), /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_item_icon"
-  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+  }, item.type !== 'date' || active ? /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
     type: active ? 'lmweb-close-circle-fill' : 'lmweb-down',
     className: "addonAfter",
     onClick: handleClear
-  }))));
+  }) : null)));
 });
 
 var _default = DropdownFilter;

package/lib/LmFilter/components/index.js

@@ -31,8 +31,10 @@ var _excluded = ["instance", "item", "value", "onChange", "options"],
  * 其余参数皆为单独使用时传入
 */
 var FilterControl = /*#__PURE__*/_react.default.memo(function (props) {
-  var instance = props.instance,
-      item = props.item,
+  var _props$instance = props.instance,
+      instance = _props$instance === void 0 ? {} : _props$instance,
+      _props$item = props.item,
+      item = _props$item === void 0 ? {} : _props$item,
       value = props.value,
       onChange = props.onChange,
       options = props.options,
@@ -58,24 +60,65 @@ var FilterControl = /*#__PURE__*/_react.default.memo(function (props) {
 
   var transformFilterValue = (0, _react.useMemo)(function () {
     // 检查是否受控模式
-    var nValue = value || aliveValue;
+    var checkedValue = value || aliveValue;
     var getOptions = (resetItem === null || resetItem === void 0 ? void 0 : resetItem.data) || [];
+    var nValue = checkedValue;
 
-    if (!Array.isArray((0, _utils.getValueForType)(resetItem.type))) {
-      return (getOptions === null || getOptions === void 0 ? void 0 : getOptions.find(function (v) {
-        return v.value === nValue;
-      })) || '';
-    } else {
-      return (getOptions === null || getOptions === void 0 ? void 0 : getOptions.filter(function (v) {
-        return nValue.includes(v.value);
+    if (['select'].includes(resetItem.type)) {
+      nValue = getOptions === null || getOptions === void 0 ? void 0 : getOptions.find(function (v) {
+        return v.value === checkedValue;
+      });
+    }
+
+    if (['checkbox'].includes(resetItem.type)) {
+      nValue = (getOptions === null || getOptions === void 0 ? void 0 : getOptions.filter(function (v) {
+        return checkedValue.includes(v.value);
       })) || [];
     }
+
+    if (['cascader'].includes(resetItem.type)) {
+      // 查询值
+      // const getRow = (val, arr) => {
+      //   let nRow = '';
+      //   arr.forEach(item => {
+      //     nRow = item.value === val ? item : getRow(val, item.children);
+      //   })
+      //   return nRow;
+      // };
+      // checkedValue?.map(v => {
+      //   return Array.isArray(v) ? getRow(v) : getRow(v);
+      // })
+      return '';
+    }
+
+    return nValue;
   }, [value, aliveValue, resetItem.data, resetItem.type]); // 单独使用时抛出选中的值: val => obj || Array
 
   var handleChange = function handleChange(val) {
-    var nValue = Array.isArray(val) ? val.map(function (v) {
-      return v.value;
-    }) : val.value;
+    var nValue = val;
+
+    if (['cascader'].includes(resetItem.type)) {
+      var flatKeys = function flatKeys(arr) {
+        return arr.map(function (v) {
+          return v.value;
+        });
+      };
+
+      nValue = val.map(function (v) {
+        return Array.isArray(v) ? flatKeys(v) : v.value;
+      });
+    }
+
+    if (['select'].includes(resetItem.type)) {
+      nValue = val.value;
+    }
+
+    if (['checkbox'].includes(resetItem.type)) {
+      nValue = val.map(function (v) {
+        return v.value;
+      });
+    }
+
     setAliveValue === null || setAliveValue === void 0 ? void 0 : setAliveValue(nValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
   }; // 重组instance

package/lib/LmFilter/hooks/useDelayedFn.js

@@ -13,12 +13,14 @@ var _lodash = require("lodash");
 var useDelayedFn = function useDelayedFn() {
   var wait = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 200;
   var delayedQuery = (0, _react.useCallback)((0, _lodash.debounce)(function (fn) {
-    if (typeof fn === 'function') {
-      fn === null || fn === void 0 ? void 0 : fn();
-    } else {
-      fn;
-    }
-  }, wait), []);
+    typeof fn === 'function' ? fn === null || fn === void 0 ? void 0 : fn() : fn;
+  }, wait), []); // 防止异步任务数导致的内存泄漏
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      delayedQuery.cancel();
+    };
+  }, []);
   return delayedQuery;
 };
 

package/lib/LmFilter/style/style.css

@@ -30,6 +30,9 @@
   background-color: var(--color-4);
 }
 .lm_filter_basic_item .filter_item_value {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   color: var(--text-color);
   transition: 0.3s;
 }
@@ -50,6 +53,13 @@
 .lm_filter_basic_item.active .filter_item_icon {
   transform: rotateX(180deg);
 }
+.ant-dropdown.filter_dropdown_container_cascader > div {
+  transform: translateY(-4px);
+}
+.ant-dropdown.filter_dropdown_container_date .ant-picker {
+  visibility: hidden;
+  transform: translateY(-28px);
+}
 .ant-dropdown .filter_dropdown {
   display: flex;
   flex-flow: column;
@@ -187,3 +197,9 @@
 .ant-dropdown .filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
   top: initial;
 }
+.lm_filter_dropdown_picker {
+  padding: 0 !important;
+}
+.lm_filter_dropdown_picker .ant-picker-range-arrow {
+  display: none;
+}

package/lib/LmFilter/utils.js

@@ -5,11 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getFlat = getFlat;
 exports.getIsHas = getIsHas;
 exports.getRanges = getRanges;
 exports.getValueForType = getValueForType;
 exports.uniqueFunc = uniqueFunc;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -52,4 +55,17 @@ function getRanges() {
     '近一月': [(0, _dayjs.default)().subtract(1, 'month').format('YYYY-MM-DD'), (0, _dayjs.default)().format('YYYY-MM-DD')],
     '近一年': [(0, _dayjs.default)().subtract(1, 'year').format('YYYY-MM-DD'), (0, _dayjs.default)().format('YYYY-MM-DD')]
   };
+}
+
+function getFlat(arr) {
+  var nValue = [];
+  arr.forEach(function (item) {
+    if (item.length > 1) {
+      var suf = item.splice(1);
+      getFlat(suf);
+    } else {
+      nValue.push.apply(nValue, (0, _toConsumableArray2.default)(item[0].children));
+    }
+  });
+  return nValue;
 }

package/lib/LmFilter/wrapper/FilterRoot.js

@@ -44,6 +44,12 @@ var reducer = function reducer(state, action) {
         resize: resize
       });
 
+    case 'reset':
+      // 一键清空
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        basicFilter: {}
+      });
+
     default:
       throw new Error();
   }

package/lib/QuickMenu/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface IMenuData {
+    menuId: string;
+    title: string | React.ReactNode;
+}
+export interface IQuickMenuProps {
+    className?: string;
+    style?: React.CSSProperties;
+    top?: number;
+    menuData: IMenuData[];
+    warpElement: any;
+}
+declare const LMQuickMenu: React.FC<IQuickMenuProps>;
+export default LMQuickMenu;