linkmore-design 1.0.53 → 1.0.56

package/lib/LmFilter/components/index.js

@@ -0,0 +1,140 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _DropdownFIlter = _interopRequireDefault(require("./DropdownFIlter"));
+
+var _utils = require("../utils");
+
+var _excluded = ["instance", "item", "value", "onChange", "options"],
+    _excluded2 = ["getFilterValue", "setFilterValue"];
+
+// 下拉筛选组件
+
+/*
+ * 筛选组件使用时只传入 instance, item
+ * 其余参数皆为单独使用时传入
+*/
+var FilterControl = /*#__PURE__*/_react.default.memo(function (props) {
+  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,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var getFilterValue = instance.getFilterValue,
+      _setFilterValue = instance.setFilterValue,
+      resetInstanceProps = (0, _objectWithoutProperties2.default)(instance, _excluded2); // 重组item值
+
+  var resetItem = (0, _react.useMemo)(function () {
+    var data = item.data;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), resetProps), {}, {
+      data: data || options
+    });
+  }, [item, resetProps, options]); // 单独使用时的缓存数据(非受控模式) 默认值: [] || ''
+
+  var _useState = (0, _react.useState)(function () {
+    return (0, _utils.getValueForType)(resetItem.type);
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      aliveValue = _useState2[0],
+      setAliveValue = _useState2[1]; // 单独使用时将值转换为行数据
+
+
+  var transformFilterValue = (0, _react.useMemo)(function () {
+    // 检查是否受控模式
+    var checkedValue = value || aliveValue;
+    var getOptions = (resetItem === null || resetItem === void 0 ? void 0 : resetItem.data) || [];
+    var nValue = checkedValue;
+
+    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 = 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
+
+
+  var resetInstance = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, resetInstanceProps), {}, {
+    filterValue: (getFilterValue === null || getFilterValue === void 0 ? void 0 : getFilterValue(resetItem)) || transformFilterValue,
+    setFilterValue: function setFilterValue(val) {
+      return (_setFilterValue || handleChange)(val, resetItem.field);
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_DropdownFIlter.default, {
+    instance: resetInstance,
+    item: resetItem
+  });
+});
+
+var _default = FilterControl;
+exports.default = _default;

package/lib/LmFilter/customFilter/index.js

@@ -0,0 +1,17 @@
+"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 LmFilterCustom = function LmFilterCustom(e) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "LmFilterCustom");
+};
+
+var _default = LmFilterCustom;
+exports.default = _default;

package/lib/LmFilter/filterFns/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _utils = require("../utils");
+
+// 核心参数集合
+var CoreOptions = function CoreOptions(_ref) {
+  var state = _ref.state,
+      dispatch = _ref.dispatch,
+      props = _ref.props;
+  var onChange = props.onChange; // 设置筛选的值 item => Object || Array => [{label: '',  value: ''}, ...]
+
+  var setFilterValue = function setFilterValue(item, field) {
+    var basicFilter = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.basicFilter), {}, (0, _defineProperty2.default)({}, field, item));
+
+    if (!(0, _utils.getIsHas)(item)) {
+      delete basicFilter[field];
+    }
+
+    ;
+    dispatch({
+      type: 'changeBasicFilter',
+      basicFilter: basicFilter
+    });
+
+    var formatVK = function formatVK() {
+      var obj = {};
+      Object.entries(basicFilter).forEach(function (item) {
+        if (Array.isArray(item[1])) {
+          obj[item[0]] = item[1].map(function (v) {
+            return v.value;
+          });
+          return;
+        }
+
+        obj[item[0]] = item[1].value;
+      });
+      return obj;
+    }; // 触发外部事件
+
+
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      basicFilter: basicFilter,
+      formatVK: formatVK()
+    });
+  }; // 根据字段查找过滤的数据, 不存在时返回默认值
+
+
+  var getFilterValue = function getFilterValue(_ref2) {
+    var field = _ref2.field,
+        type = _ref2.type;
+    var defaultValue = (0, _utils.getValueForType)(type);
+    return state.basicFilter[field] || defaultValue;
+  };
+
+  return {
+    setFilterValue: setFilterValue,
+    getFilterValue: getFilterValue
+  };
+};
+
+var _default = CoreOptions;
+exports.default = _default;

package/lib/LmFilter/hooks/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _useDelayedFn = require("./useDelayedFn");
+
+Object.keys(_useDelayedFn).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useDelayedFn[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useDelayedFn[key];
+    }
+  });
+});

package/lib/LmFilter/hooks/useDelayedFn.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDelayedFn = exports.default = void 0;
+
+var _react = require("react");
+
+var _lodash = require("lodash");
+
+// 延迟/防抖加载函数, 默认延迟200ms
+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) {
+    typeof fn === 'function' ? fn === null || fn === void 0 ? void 0 : fn() : fn;
+  }, wait), []); // 防止异步任务数导致的内存泄漏
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      delayedQuery.cancel();
+    };
+  }, []);
+  return delayedQuery;
+};
+
+exports.useDelayedFn = useDelayedFn;
+var _default = useDelayedFn;
+exports.default = _default;

package/lib/LmFilter/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;

package/lib/LmFilter/localization.d.ts

@@ -0,0 +1,8 @@
+export declare const DefaultLocalization: {
+    globalQuery: {
+        filter: any[];
+    };
+    filterQuery: {
+        filter: any[];
+    };
+};

package/lib/LmFilter/localization.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultLocalization = void 0;
+// export interface LM_Localization {
+//   fieldName: string,
+//   operator: number,
+// }
+var DefaultLocalization = {
+  globalQuery: {
+    filter: []
+  },
+  filterQuery: {
+    filter: []
+  }
+};
+exports.DefaultLocalization = DefaultLocalization;

package/lib/LmFilter/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style.css");

package/lib/LmFilter/style/style.css

@@ -0,0 +1,212 @@
+.lm_filter_wrapper .lm_filter_container,
+.lm_filter_wrapper .lm_filter,
+.lm_filter_wrapper .lm_filter_basic {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_search {
+  max-width: 140px;
+}
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_complex {
+  display: inline-flex;
+}
+.lm_filter_basic_item {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  border-radius: 2px;
+  padding: 0 8px;
+  transition: 0.3s;
+  cursor: pointer;
+  height: 32px;
+  gap: 4px;
+}
+.lm_filter_basic_item.small {
+  height: 24px;
+}
+.lm_filter_basic_item:hover,
+.lm_filter_basic_item.expand,
+.lm_filter_basic_item.active {
+  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;
+}
+.lm_filter_basic_item .filter_item_icon {
+  font-size: 14px;
+  color: var(--text-color);
+  transition: 0.3s;
+}
+.lm_filter_basic_item .filter_item_icon.addon_before {
+  color: var(--font-color);
+}
+.lm_filter_basic_item.expand .filter_item_icon.addon_after {
+  transform: rotateX(180deg);
+}
+.lm_filter_basic_item.active .filter_item_value {
+  color: var(--primary-color);
+}
+.lm_filter_basic_item.active .filter_item_icon.addon_after {
+  transform: rotateX(180deg);
+}
+.lm_filter_basic_item.active.lm_filter_complex_item .filter_item_icon,
+.lm_filter_basic_item.active.lm_filter_complex_item .filter_item_label {
+  color: var(--primary-color);
+}
+.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;
+  box-shadow: 0 2px 6px var(--box-shadow-color);
+  background-color: #fff;
+}
+.ant-dropdown .filter_dropdown .filter_header {
+  min-height: 40px;
+  border-bottom: 1px solid #eee;
+  padding: 8px;
+}
+.ant-dropdown .filter_dropdown .filter_header .filter_header_operate {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ant-dropdown .filter_dropdown .filter_header .filter_header_operate .filter_header_operate_checked {
+  display: inline-flex;
+  align-items: center;
+}
+.ant-dropdown .filter_dropdown .filter_header .filter_header_operate .filter_reset {
+  font-size: 12px;
+  color: var(--primary-color);
+  cursor: pointer;
+}
+.ant-dropdown .filter_dropdown .filter_header .filter_header_operate .filter_tip {
+  font-size: 12px;
+  color: var(--text-color);
+}
+.ant-dropdown .filter_dropdown .filter_header .ant-input-group {
+  line-height: 1;
+}
+.ant-dropdown .filter_dropdown .filter_header input {
+  font-size: 12px;
+}
+.ant-dropdown .filter_dropdown .filter_header .ant-input-search + .filter_header_operate {
+  margin-top: 8px;
+}
+.ant-dropdown .filter_dropdown .filter_body {
+  width: 100%;
+}
+.ant-dropdown .filter_dropdown .filter_body .virtual_list {
+  min-width: 168px;
+  max-height: 224px;
+  overflow: auto;
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  height: 32px;
+  min-width: 120px;
+  padding: 0 8px;
+  transition: 0.3s;
+  white-space: nowrap;
+  cursor: pointer;
+  gap: 8px;
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item.add_more {
+  border-top: 1px solid var(--stripe-color);
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_content {
+  flex: auto;
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate .hover_show {
+  font-size: 16px;
+  color: var(--primary-color);
+  transition: 0.3s;
+  opacity: 0;
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item[disabled] {
+  display: none;
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item.checked {
+  background-color: var(--primary-select-color);
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item:hover {
+  background-color: var(--stripe-color);
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item:hover .filter_item_operate .icon_top {
+  opacity: 1;
+}
+.ant-dropdown .filter_dropdown .filter_footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  min-height: 32px;
+  padding: 6px 8px;
+  border-top: 1px solid #eee;
+  letter-spacing: 1px;
+}
+.ant-dropdown .filter_dropdown .filter_footer button {
+  font-size: 12px;
+  padding: 0 8px;
+}
+.ant-dropdown .filter_dropdown .filter_footer .footer_save {
+  color: var(--primary-color);
+  cursor: pointer;
+  transition: 0.3s;
+}
+.ant-dropdown .filter_dropdown .filter_footer .footer_clear {
+  color: var(--text-color);
+  cursor: pointer;
+  transition: 0.3s;
+}
+.ant-dropdown .filter_dropdown .filter_footer .footer_clear:hover {
+  color: var(--font-color);
+}
+.ant-dropdown .filter_dropdown .filter_empty {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  min-height: 40px;
+  color: #666;
+  padding: 16px 8px;
+  margin: auto;
+  gap: 4px;
+}
+.ant-dropdown .filter_dropdown .filter_empty .filter_empty_text {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  color: var(--font-color);
+}
+.ant-dropdown .filter_dropdown .ant-checkbox-wrapper {
+  flex: 1;
+  font-size: 12px;
+  align-items: center;
+}
+.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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+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"));
+
+// 检查是否存在内容
+function getIsHas(val) {
+  // 检查是否数字类型, 是否布尔类型
+  var flag = !!val || typeof val === 'number' || typeof val === 'boolean'; // 检查空对象和空数组
+
+  if (!!val && (0, _typeof2.default)(val) === 'object') {
+    var _Object$keys;
+
+    flag = Array.isArray(val) ? !!val.length : !!((_Object$keys = Object.keys(val)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length);
+  }
+
+  return flag;
+} // 根据类型返回对应的值
+
+
+function getValueForType(type) {
+  if (['checkbox', 'cascader'].includes(type)) {
+    return [];
+  }
+
+  return '';
+} // 数组对象去重
+
+
+function uniqueFunc(arr, guid) {
+  var res = new Map();
+  return arr.filter(function (item) {
+    return !res.has(item[guid]) && res.set(item[guid], 1);
+  });
+} // 获取最近的时间段
+
+
+function getRanges() {
+  return {
+    '近一周': [(0, _dayjs.default)().subtract(7, 'day').format('YYYY-MM-DD'), (0, _dayjs.default)().format('YYYY-MM-DD')],
+    '近一月': [(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/Filter.js

@@ -0,0 +1,33 @@
+"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 _baseFilter = _interopRequireDefault(require("../baseFilter"));
+
+var _customFilter = _interopRequireDefault(require("../customFilter"));
+
+var _complexFilter = _interopRequireDefault(require("../complexFilter"));
+
+// 筛选组合
+var LmFilter = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_filter"
+  }, /*#__PURE__*/_react.default.createElement(_customFilter.default, {
+    instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_baseFilter.default, {
+    instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_complexFilter.default, {
+    instance: instance
+  }));
+});
+
+var _default = LmFilter;
+exports.default = _default;

package/lib/LmFilter/wrapper/FilterContainer.js

@@ -0,0 +1,29 @@
+"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 _Filter = _interopRequireDefault(require("./Filter"));
+
+var _clearFilter = _interopRequireDefault(require("../clearFilter"));
+
+// 过滤组件主体区域
+var LmFilterContainer = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_filter_container"
+  }, /*#__PURE__*/_react.default.createElement(_Filter.default, {
+    instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_clearFilter.default, {
+    instance: instance
+  }));
+});
+
+var _default = LmFilterContainer;
+exports.default = _default;