linkmore-design 1.1.13-alpha.0 → 1.1.13-alpha.10

package/lib/LmFilter/components/DropdownFIlter.js

@@ -61,133 +61,215 @@ var FilterControl = function FilterControl(_ref) {
     })
   };
   return widgets[type] || null;
-};
+}; // 提示文字 占位符
 
-var getPlacehodler = function getPlacehodler(props) {
-  var type = props.type,
-      itemProps = props.props; // 日期显示的处理
+
+var ItemPlacehodler = /*#__PURE__*/_react.default.memo(function (_ref2) {
+  var item = _ref2.item;
+  var type = item.type,
+      itemProps = item.props,
+      dateType = item.dateType,
+      datetype = item.datetype,
+      placeholder = item.placeholder; // 日期显示的处理
 
   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, {
+    // 兼容大小写
+    if (['range', 'rangePicker'].includes(dateType || datetype)) {
+      var pls = placeholder !== null && placeholder !== void 0 ? placeholder : ['开始日期', '结束日期'];
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pls === null || pls === void 0 ? void 0 : pls[0], /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
         type: "lmweb-swap-right",
         style: {
           fontSize: 14
         }
-      }), "\u7ED3\u675F\u65E5\u671F", /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
+      }), pls === null || pls === void 0 ? void 0 : pls[1], /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
         style: {
           fontSize: 12
         }
       }));
     }
 
-    var placeholder = {
+    var unit = {
       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, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder !== null && placeholder !== void 0 ? placeholder : "\u9009\u62E9".concat(unit[itemProps === null || itemProps === void 0 ? void 0 : itemProps.picker] || '日期'), /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
       style: {
         fontSize: 12
       }
     }));
   }
 
-  return '全部';
-}; // 根据不同的类型展示文本内容
+  return /*#__PURE__*/_react.default.createElement("span", null, placeholder !== null && placeholder !== void 0 ? placeholder : '全部');
+}); // 根据不同的类型展示文本内容
 
 
-var getLabel = function getLabel(resetInstance, item) {
-  var filterValue = resetInstance.filterValue;
+var ItemLabel = /*#__PURE__*/_react.default.memo(function (_ref3) {
+  var instance = _ref3.instance,
+      item = _ref3.item;
+  var filterValue = instance.filterValue;
   var type = item.type,
-      data = item.data; // 不存在筛选时
+      data = item.data;
+  /*
+   * 是否返回字符串类型
+   * return string | type:  'input', 'select', 'checkbox', 'cascader'
+   * return Jsx | type: 'date'
+   */
+
+  var isString = (0, _react.useMemo)(function () {
+    return ['input', 'select', 'checkbox', 'cascader'].includes(type);
+  }, [type]); // 存在筛选数据时 ⬇️
+
+  var String = (0, _react.useMemo)(function () {
+    try {
+      var _data$find;
+
+      // 级联数据转换平级结构
+      if (['cascader'].includes(type)) {
+        var nArr = (0, _utils.getFlatItem)(item, filterValue);
+        var labels = nArr === null || nArr === void 0 ? void 0 : nArr.map(function (v) {
+          var _item$props, _item$props$fieldName;
+
+          return v[(item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : (_item$props$fieldName = _item$props.fieldNames) === null || _item$props$fieldName === void 0 ? void 0 : _item$props$fieldName.label) || 'label'];
+        });
+
+        switch (labels.length) {
+          case 0:
+            // 数据未查找到时
+            return filterValue;
+
+          case 1:
+            return labels[0];
+
+          case 2:
+            return "".concat(labels[0], "\u3001").concat(labels[1]);
+
+          default:
+            return "".concat(labels[0], "\u3001+").concat(labels.length - 1, "...");
+        }
+      }
 
-  if (!(0, _utils.getIsHas)(filterValue)) {
-    return getPlacehodler(item);
-  } // 存在筛选数据时 ⬇️
+      if (Array.isArray(filterValue)) {
+        var _data$filter;
 
+        // 日期
+        if (['date'].includes(type)) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filterValue[0], /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+            type: "lmweb-swap-right",
+            style: {
+              fontSize: 14,
+              color: 'var(--text-color)'
+            }
+          }), filterValue[1]);
+        } // 多选
 
-  try {
-    var _data$find;
 
-    // 级联数据转换平级结构
-    if (['cascader'].includes(type)) {
-      var nArr = (0, _utils.getFlatItem)(item, filterValue);
-      var labels = nArr === null || nArr === void 0 ? void 0 : nArr.map(function (v) {
-        var _item$props, _item$props$fieldName;
+        var _labels = data === null || data === void 0 ? void 0 : (_data$filter = data.filter(function (v) {
+          return (0, _utils.toStringIsEqual)(v.value, filterValue, 'includes');
+        })) === null || _data$filter === void 0 ? void 0 : _data$filter.map(function (v) {
+          return v.label;
+        });
 
-        return v[(item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : (_item$props$fieldName = _item$props.fieldNames) === null || _item$props$fieldName === void 0 ? void 0 : _item$props$fieldName.label) || 'label'];
-      });
+        if (!_labels.length) {
+          _labels = filterValue;
+        } // 受控模式未查找到显示的内容时展示
 
-      switch (labels.length) {
-        case 0:
-          // 数据未查找到时
-          return filterValue;
 
-        case 1:
-          return labels[0];
+        switch (_labels.length) {
+          case 1:
+            return _labels[0];
 
-        case 2:
-          return "".concat(labels[0], "\u3001").concat(labels[1]);
+          case 2:
+            return "".concat(_labels[0], "\u3001").concat(_labels[1]);
 
-        default:
-          return "".concat(labels[0], "\u3001+").concat(labels.length - 1, "...");
-      }
-    }
+          default:
+            return "".concat(_labels[0], "\u3001+").concat(_labels.length - 1, "...");
+        }
+      } // 输入框
 
-    if (Array.isArray(filterValue)) {
-      var _data$filter;
 
-      // 日期
-      if (['date'].includes(type)) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filterValue[0], /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
-          type: "lmweb-swap-right",
-          style: {
-            fontSize: 14,
-            color: 'var(--text-color)'
-          }
-        }), filterValue[1]);
-      } // 多选
+      if (['input', 'date'].includes(type)) {
+        return filterValue;
+      } // 单选框 受控模式未查找到显示的内容时展示filterValue
 
 
-      var _labels = data === null || data === void 0 ? void 0 : (_data$filter = data.filter(function (v) {
-        return (0, _utils.toStringIsEqual)(v.value, filterValue, 'includes');
-      })) === null || _data$filter === void 0 ? void 0 : _data$filter.map(function (v) {
-        return v.label;
-      });
+      var label = (data === null || data === void 0 ? void 0 : (_data$find = data.find(function (v) {
+        return (0, _utils.toStringIsEqual)(v === null || v === void 0 ? void 0 : v.value, filterValue);
+      })) === null || _data$find === void 0 ? void 0 : _data$find.label) || filterValue;
+      return label;
+    } catch (error) {
+      return filterValue;
+    }
+  }, [type, data, filterValue]);
+
+  if (isString) {
+    return /*#__PURE__*/_react.default.createElement("span", null, String);
+  }
 
-      if (!_labels.length) {
-        _labels = filterValue;
-      } // 受控模式未查找到显示的内容时展示
+  return String;
+});
 
+var FilterItem = /*#__PURE__*/_react.default.memo(function (_ref4) {
+  var instance = _ref4.instance,
+      item = _ref4.item;
+  var filterValue = instance.filterValue,
+      setFilterValue = instance.setFilterValue;
+  var title = item.title,
+      colon = item.colon,
+      clearIconTrigger = item.clearIconTrigger; // 是否有筛选值/是否处于筛选状态
 
-      switch (_labels.length) {
-        case 1:
-          return _labels[0];
+  var active = (0, _react.useMemo)(function () {
+    return (0, _utils.getIsHas)(filterValue);
+  }, [filterValue]); // 冒号
 
-        case 2:
-          return "".concat(_labels[0], "\u3001").concat(_labels[1]);
+  var showColon = (0, _react.useMemo)(function () {
+    return (colon !== null && colon !== void 0 ? colon : ':') ? ':' : null;
+  }, [colon]);
 
-        default:
-          return "".concat(_labels[0], "\u3001+").concat(_labels.length - 1, "...");
-      }
-    } // 输入框
+  var handleClear = function handleClear(e) {
+    if (active) {
+      e.stopPropagation();
+      setFilterValue((0, _utils.getValueForType)(item.type));
+    }
+  }; // Icon展示方式
+
+
+  var Icon = function Icon() {
+    // hover时出现清空
+    if (clearIconTrigger === 'hover') {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+        type: "lmweb-close-circle-fill",
+        onClick: handleClear,
+        className: "icon_clear"
+      }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+        type: "lmweb-down",
+        className: "icon_down"
+      }));
+    } // 日期类型并且未选中时返回日期自带icon
 
 
-    if (['input', 'date'].includes(type)) {
-      return filterValue;
-    } // 单选框 受控模式未查找到显示的内容时展示filterValue
+    if (item.type === 'date' && !active) return null; // 选中时展示清楚按钮
 
+    return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+      type: active ? 'lmweb-close-circle-fill' : 'lmweb-down',
+      onClick: handleClear
+    });
+  };
 
-    var label = (data === null || data === void 0 ? void 0 : (_data$find = data.find(function (v) {
-      return (0, _utils.toStringIsEqual)(v === null || v === void 0 ? void 0 : v.value, filterValue);
-    })) === null || _data$find === void 0 ? void 0 : _data$find.label) || filterValue;
-    return label;
-  } catch (error) {
-    return filterValue;
-  }
-};
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (title || showColon) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_item_label"
+  }, title, showColon), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_item_value"
+  }, active ? /*#__PURE__*/_react.default.createElement(ItemLabel, {
+    instance: instance,
+    item: item
+  }) : /*#__PURE__*/_react.default.createElement(ItemPlacehodler, {
+    item: item
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_item_icon addon_after"
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)));
+});
 /*
  * css样式控制
  * expand: 展开样式
@@ -195,9 +277,9 @@ var getLabel = function getLabel(resetInstance, item) {
  */
 
 
-var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref2) {
-  var instance = _ref2.instance,
-      item = _ref2.item;
+var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref5) {
+  var instance = _ref5.instance,
+      item = _ref5.item;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -205,11 +287,22 @@ var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref2) {
       setVisible = _useState2[1];
 
   var filterValue = instance.filterValue,
-      size = instance.size; // 触发查询时关闭下拉框
+      size = instance.size;
+  var popupClassName = item.popupClassName,
+      className = item.className,
+      style = item.style; // 是否有筛选值/是否处于筛选状态
+
+  var active = (0, _react.useMemo)(function () {
+    return (0, _utils.getIsHas)(filterValue);
+  }, [filterValue]); // 触发查询时关闭下拉框
 
   var setFilterValue = function setFilterValue(obj) {
     instance.setFilterValue(obj);
     setVisible(false);
+  };
+
+  var onVisibleChange = function onVisibleChange(v) {
+    return setVisible(v);
   }; // 重组Instance 加入下拉关闭控制
 
 
@@ -218,19 +311,7 @@ var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref2) {
     setVisible: setVisible
   }, instance), {}, {
     setFilterValue: setFilterValue
-  }); // 是否有筛选值/是否处于筛选状态
-
-  var active = (0, _react.useMemo)(function () {
-    return (0, _utils.getIsHas)(filterValue);
-  }, [filterValue]);
-
-  var handleClear = function handleClear(e) {
-    if (active) {
-      e.stopPropagation();
-      setFilterValue((0, _utils.getValueForType)(item.type));
-    }
-  };
-
+  });
   return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Dropdown, {
     trigger: ['click'],
     visible: resetInstance.visible,
@@ -239,27 +320,21 @@ var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref2) {
       instance: resetInstance,
       item: item
     }),
-    overlayClassName: "filter_dropdown_container_".concat(item.type),
-    onVisibleChange: function onVisibleChange(v) {
-      return setVisible(v);
-    } // 未开启则需手动控制下拉展示组件的初始化
+    overlayClassName: (0, _classnames.default)("filter_dropdown_container_".concat(item.type), popupClassName),
+    onVisibleChange: onVisibleChange // 未开启则需手动控制下拉展示组件的初始化
     ,
     destroyPopupOnHide: true
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('lm_filter_basic_item', size, {
+    className: (0, _classnames.default)('lm_filter_basic_item', className, size, {
       expand: visible,
       active: active
-    })
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_item_label"
-  }, item === null || item === void 0 ? void 0 : item.title, ":"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_item_value"
-  }, getLabel(resetInstance, item)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_item_icon addon_after"
-  }, item.type !== 'date' || active ? /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
-    type: active ? 'lmweb-close-circle-fill' : 'lmweb-down',
-    onClick: handleClear
-  }) : null)));
+    }),
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(FilterItem, {
+    key: item.title,
+    instance: resetInstance,
+    item: item
+  })));
 });
 
 var _default = DropdownFilter;

package/lib/LmFilter/components/SelectFilter.js

@@ -39,7 +39,8 @@ var SelectFilter = function SelectFilter(_ref) {
       setFilterValue = instance.setFilterValue,
       visible = instance.visible;
   var _itemProps$data = itemProps.data,
-      filters = _itemProps$data === void 0 ? [] : _itemProps$data;
+      filters = _itemProps$data === void 0 ? [] : _itemProps$data,
+      showSearch = itemProps.showSearch;
   var delayedFn = (0, _hooks.useDelayedFn)();
   var inputRef = (0, _react.useRef)(null); // 搜索后的筛选项
 
@@ -50,8 +51,8 @@ var SelectFilter = function SelectFilter(_ref) {
 
 
   var isSearch = (0, _react.useMemo)(function () {
-    return filters.length > 8;
-  }, [filters.length]); // 自定义节点字段
+    return filters.length > 8 && !!(showSearch !== null && showSearch !== void 0 ? showSearch : true);
+  }, [filters.length, showSearch]); // 自定义节点字段
 
   var fieldNames = (0, _react.useMemo)(function () {
     return (0, _objectSpread2.default)({

package/lib/LmFilter/filterFns/index.js

@@ -501,12 +501,10 @@ var useCoreOptions = function useCoreOptions(_ref) {
     var field = item.field;
 
     if (field) {
-      // 将结果转换为字符串
-      var isArray = Array.isArray(itemValue);
-
+      // 将结果转换为字符串(级联数据需要递归)
       var transformString = function transformString(val) {
-        return isArray ? val.map(function (v) {
-          return String(v);
+        return Array.isArray(val) ? val.map(function (v) {
+          return transformString(v);
         }) : String(val);
       };
 
@@ -518,7 +516,7 @@ var useCoreOptions = function useCoreOptions(_ref) {
         fieldName: field,
         fieldType: item.valueType || 'string',
         type: item.type,
-        value: isArray ? stringValue : [stringValue],
+        value: Array.isArray(itemValue) ? stringValue : [stringValue],
         operator: item.operator || 'equal'
       })); // 数据清除时不返回结构体
 

package/lib/LmFilter/index.js

@@ -9,8 +9,5 @@ exports.default = void 0;
 
 var _LmFilter = _interopRequireDefault(require("./LmFilter"));
 
-var _components = _interopRequireDefault(require("./components"));
-
-_LmFilter.default.FilterControl = _components.default;
 var _default = _LmFilter.default;
 exports.default = _default;