linkmore-design 1.0.53 → 1.0.56

package/lib/LmFilter/components/DateFilter.js

@@ -0,0 +1,139 @@
+"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/date-picker/style");
+
+var _datePicker = _interopRequireDefault(require("antd/es/date-picker"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var _utils = require("../utils");
+
+var RangePicker = function RangePicker(_ref) {
+  var filterValue = _ref.filterValue,
+      setFilterValue = _ref.setFilterValue,
+      onChange = _ref.onChange,
+      itemProps = _ref.itemProps,
+      visible = _ref.visible;
+  // 最近的时间段, 值为JSON转换后的字符串
+  var ranges = (0, _react.useMemo)(function () {
+    return Object.entries((0, _utils.getRanges)()).map(function (item, i) {
+      return {
+        id: i,
+        label: item[0],
+        value: JSON.stringify(item[1])
+      };
+    });
+  }, []); // 选中时间段的触发
+
+  var handleOnChange = function handleOnChange(dates, dateStrings) {
+    onChange(dates, (0, _utils.getIsHas)(dateStrings.filter(function (v) {
+      return !!v;
+    })) ? dateStrings : null);
+  }; // 最近的时间触发事件
+
+
+  var handleLastDateOnChange = function handleLastDateOnChange(e) {
+    var nValue = JSON.parse(e.target.value);
+    setFilterValue(nValue);
+  };
+
+  var panelRender = function panelRender(panelNode) {
+    var activeValue = JSON.stringify(filterValue);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_box"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_main"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_header_tip"
+    }, filterValue && "".concat(filterValue[0], " - ").concat(filterValue[1])), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_header_operate"
+    }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Radio.Group, {
+      value: activeValue,
+      onChange: handleLastDateOnChange,
+      size: "small"
+    }, ranges.map(function (v) {
+      return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Radio.Button, {
+        key: v.label,
+        value: v.value
+      }, v.label);
+    })))), panelNode));
+  };
+
+  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(_linkmoreDesign.IconFont, {
+      type: "lmweb-swap-right",
+      style: {
+        color: 'var(--text-color)'
+      }
+    }),
+    placeholder: ['开始日期', '结束日期'],
+    style: {
+      width: 210
+    }
+  }, itemProps, {
+    onChange: handleOnChange,
+    open: visible,
+    panelRender: panelRender,
+    dropdownClassName: "lm_filter_dropdown_picker",
+    bordered: false,
+    size: "small",
+    inputReadOnly: true
+  })));
+}; // 日期范围选择器
+
+
+var DatePickerFilter = function DatePickerFilter(_ref2) {
+  var instance = _ref2.instance,
+      itemProps = _ref2.item;
+  var filterValue = instance.filterValue,
+      setFilterValue = instance.setFilterValue,
+      visible = instance.visible;
+  var _itemProps$props = itemProps.props,
+      props = _itemProps$props === void 0 ? {
+    picker: 'date'
+  } : _itemProps$props; // 选中时间段的触发
+
+  var onChange = function onChange(dates, dateStrings) {
+    setFilterValue((0, _utils.getIsHas)(dateStrings) ? dateStrings : null);
+  };
+
+  if (['range', 'rangePicker'].includes(itemProps.dateType || itemProps.datetype)) {
+    return /*#__PURE__*/_react.default.createElement(RangePicker, {
+      filterValue: filterValue,
+      setFilterValue: setFilterValue,
+      onChange: onChange,
+      itemProps: props,
+      visible: visible
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
+    placeholder: "\u9009\u62E9\u65F6\u95F4"
+  }, props, {
+    onChange: onChange,
+    open: visible,
+    bordered: false,
+    size: "small",
+    inputReadOnly: true,
+    dropdownClassName: "lm_filter_dropdown_picker"
+  }));
+};
+
+var _default = DatePickerFilter;
+exports.default = _default;

package/lib/LmFilter/components/DropdownFIlter.js

@@ -0,0 +1,229 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+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"));
+
+var _CheckboxFilter = _interopRequireDefault(require("./CheckboxFilter"));
+
+var _CascaderFilter = _interopRequireDefault(require("./CascaderFilter"));
+
+var _DateFilter = _interopRequireDefault(require("./DateFilter"));
+
+var _utils = require("../utils");
+
+// 组件渲染
+var FilterControl = function FilterControl(_ref) {
+  var instance = _ref.instance,
+      item = _ref.item;
+  var type = item.type;
+  var widgets = {
+    'input': /*#__PURE__*/_react.default.createElement(_InputFilter.default, {
+      instance: instance,
+      item: item
+    }),
+    'select': /*#__PURE__*/_react.default.createElement(_SelectFilter.default, {
+      instance: instance,
+      item: item
+    }),
+    'checkbox': /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default, {
+      instance: instance,
+      item: item
+    }),
+    'cascader': /*#__PURE__*/_react.default.createElement(_CascaderFilter.default, {
+      instance: instance,
+      item: item
+    }),
+    'date': /*#__PURE__*/_react.default.createElement(_DateFilter.default, {
+      instance: instance,
+      item: item
+    })
+  };
+  return widgets[type] || null;
+};
+
+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 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;
+
+      case 2:
+        return "".concat(val[0].label, "\u3001").concat(val[1].label);
+
+      default:
+        return "".concat(val[0].label, "\u3001+").concat(val.length - 1, "...");
+    }
+  } // 输入框
+
+
+  if (['input', 'date'].includes(type)) {
+    return val;
+  } // 单选框
+
+
+  return (_val = val) === null || _val === void 0 ? void 0 : _val.label;
+};
+/*
+ * css样式控制
+ * expand: 展开样式
+ * active: 选中样式
+*/
+
+
+var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref2) {
+  var instance = _ref2.instance,
+      item = _ref2.item;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var filterValue = instance.filterValue; // 触发查询时关闭下拉框
+
+  var setFilterValue = function setFilterValue(obj) {
+    instance.setFilterValue(obj);
+    setVisible(false);
+  }; // 重组Instance 加入下拉关闭控制
+
+
+  var resetInstance = (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    visible: visible,
+    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,
+    placement: "bottomLeft",
+    overlay: /*#__PURE__*/_react.default.createElement(FilterControl, {
+      instance: resetInstance,
+      item: item
+    }),
+    overlayClassName: "filter_dropdown_container_".concat(item.type),
+    onVisibleChange: function onVisibleChange(v) {
+      return setVisible(v);
+    } // 未开启则需手动控制下拉展示组件的初始化
+    ,
+    destroyPopupOnHide: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('lm_filter_basic_item', {
+      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(filterValue, 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)));
+});
+
+var _default = DropdownFilter;
+exports.default = _default;

package/lib/LmFilter/components/EmptyFilter.js

@@ -0,0 +1,27 @@
+"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 _icon_placeholder = _interopRequireDefault(require("../icon_placeholder.png"));
+
+var EmptyFilter = function EmptyFilter() {
+  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 _default = EmptyFilter;
+exports.default = _default;

package/lib/LmFilter/components/InputFilter.js

@@ -0,0 +1,52 @@
+"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 = exports.InputFilter = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _InputSearchClose = _interopRequireDefault(require("./InputSearchClose"));
+
+var InputFilter = function InputFilter(_ref) {
+  var instance = _ref.instance;
+  var _instance$filterValue = instance.filterValue,
+      filterValue = _instance$filterValue === void 0 ? '' : _instance$filterValue,
+      setFilterValue = instance.setFilterValue,
+      visible = instance.visible;
+  var inputRef = (0, _react.useRef)(null);
+
+  var onChange = function onChange(val) {
+    return setFilterValue(val);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (visible) {
+      var _inputRef$current;
+
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+        cursor: 'all'
+      }); // 若开启了 Dropdown => destroyPopupOnHide=true 无需重置操作 反之需开启
+      // inputRef.current?.setValue?.('');
+      // handleFilter('');
+    }
+  }, [visible]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_dropdown"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header"
+  }, /*#__PURE__*/_react.default.createElement(_InputSearchClose.default, {
+    defaultValue: filterValue,
+    ref: inputRef,
+    onSearch: onChange
+  })));
+};
+
+exports.InputFilter = InputFilter;
+var _default = InputFilter;
+exports.default = _default;

package/lib/LmFilter/components/InputSearchClose.js

@@ -0,0 +1,74 @@
+"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 _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 _linkmoreDesign = require("linkmore-design");
+
+var _hooks = require("../hooks");
+
+var _excluded = ["value", "onChange", "onSearch"];
+// 搜索输入框, 增加Ref关闭功能
+var InputSearchClose = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var inputRef = (0, _react.useRef)(null);
+  var value = props.value,
+      onChange = props.onChange,
+      onSearch = props.onSearch,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useState = (0, _react.useState)(value),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      aliveValue = _useState2[0],
+      setAliveValue = _useState2[1];
+
+  var delayedQuery = (0, _hooks.useDelayedFn)(500); // 内容改变触发 => 延迟触发
+
+  var handleChange = function handleChange(e) {
+    e === null || e === void 0 ? void 0 : e.persist();
+    setAliveValue === null || setAliveValue === void 0 ? void 0 : setAliveValue(e.target.value);
+    delayedQuery(function () {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+    });
+  }; // 搜索触发 => 立即触发 & 解除上一次的延迟触发
+
+
+  var handleSearch = function handleSearch(val) {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
+    delayedQuery.cancel();
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, inputRef.current), {}, {
+      setValue: function setValue(val) {
+        return setAliveValue(val);
+      }
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Input.Search, (0, _extends2.default)({
+    ref: inputRef,
+    allowClear: true,
+    size: "small",
+    placeholder: "\u8BF7\u8F93\u5165",
+    value: aliveValue,
+    onSearch: handleSearch,
+    onChange: handleChange
+  }, resetProps));
+});
+var _default = InputSearchClose;
+exports.default = _default;

package/lib/LmFilter/components/SelectFilter.js

@@ -0,0 +1,113 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var _InputSearchClose = _interopRequireDefault(require("./InputSearchClose"));
+
+var _EmptyFilter = _interopRequireDefault(require("./EmptyFilter"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _hooks = require("../hooks");
+
+var _excluded = ["item"];
+
+var SelectFilter = function SelectFilter(_ref) {
+  var instance = _ref.instance,
+      itemProps = _ref.item;
+  var _instance$filterValue = instance.filterValue,
+      filterValue = _instance$filterValue === void 0 ? '' : _instance$filterValue,
+      setFilterValue = instance.setFilterValue,
+      visible = instance.visible;
+  var _itemProps$data = itemProps.data,
+      filters = _itemProps$data === void 0 ? [] : _itemProps$data;
+  var delayedFn = (0, _hooks.useDelayedFn)();
+  var inputRef = (0, _react.useRef)(null); // 搜索后的筛选项
+
+  var _useState = (0, _react.useState)(filters),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      options = _useState2[0],
+      setOptions = _useState2[1]; // 是否存在搜索, 当数据大于8时存在搜索
+
+
+  var isSearch = (0, _react.useMemo)(function () {
+    return filters.length > 8;
+  }, [filters.length]);
+
+  var handleFilter = function handleFilter() {
+    var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    console.log('val', val);
+    var serachValues = filters.filter(function (v) {
+      return v.label.indexOf(val) > -1;
+    });
+    setOptions(serachValues);
+  }; // 单选事件
+
+
+  var onChange = function onChange(e, obj) {
+    e.preventDefault();
+    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue(obj);
+  }; // 展开下拉时触发: 赋值 && 聚焦 && 重置显示内容
+
+
+  (0, _react.useEffect)(function () {
+    if (visible) {
+      delayedFn(function () {
+        var _inputRef$current, _inputRef$current$foc;
+
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$foc = _inputRef$current.focus) === null || _inputRef$current$foc === void 0 ? void 0 : _inputRef$current$foc.call(_inputRef$current, {
+          cursor: 'all'
+        });
+      }); // 若开启了 Dropdown => destroyPopupOnHide=true 无需重置操作 反之需开启
+      // inputRef.current?.setValue?.('');
+      // handleFilter('');
+    }
+  }, [visible]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_dropdown"
+  }, isSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header"
+  }, /*#__PURE__*/_react.default.createElement(_InputSearchClose.default, {
+    ref: inputRef,
+    onSearch: handleFilter,
+    onChange: handleFilter
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_body"
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.VirtualList, {
+    options: options,
+    className: "filter_list"
+  }, function (_ref2) {
+    var item = _ref2.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+      className: (0, _classnames.default)('filter_item', {
+        checked: item.value === (filterValue === null || filterValue === void 0 ? void 0 : filterValue.value)
+      }),
+      onClick: function onClick(e) {
+        return onChange(e, item);
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_item-content"
+    }, item.label));
+  }), !options.length && /*#__PURE__*/_react.default.createElement(_EmptyFilter.default, null)));
+};
+
+var _default = SelectFilter;
+exports.default = _default;