ze-react-component-library/lib/components/PropertyFilter/FilterComponents.js

ZeroETP React Component Library

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getColumnFilterProps = exports.getColumnEnumFilterProps = exports.getColumnNumberProps = exports.getColumnDateProps = exports.getColumnSimpleSearchProps = exports.getColumnSearchProps = void 0;

require("antd/lib/input-number/style");

var _inputNumber = _interopRequireDefault(require("antd/lib/input-number"));

require("antd/lib/space/style");

var _space = _interopRequireDefault(require("antd/lib/space"));

require("antd/lib/select/style");

var _select = _interopRequireDefault(require("antd/lib/select"));

require("antd/lib/input/style");

var _input = _interopRequireDefault(require("antd/lib/input"));

require("antd/lib/auto-complete/style");

var _autoComplete = _interopRequireDefault(require("antd/lib/auto-complete"));

require("antd/lib/checkbox/style");

var _checkbox = _interopRequireDefault(require("antd/lib/checkbox"));

require("antd/lib/button/style");

var _button = _interopRequireDefault(require("antd/lib/button"));

var _react = _interopRequireWildcard(require("react"));

var _icons = require("@ant-design/icons");

var _hooks = require("@umijs/hooks");

var _request = require("../../request");

var _zeroetpApiSdk = require("zeroetp-api-sdk");

var _moment = _interopRequireDefault(require("rc-picker/es/generate/moment"));

var _generatePicker = _interopRequireDefault(require("antd/es/date-picker/generatePicker"));

var _util = require("../../util");

var _useLocale = _interopRequireDefault(require("../../hooks/useLocale"));

var _ZEOperator = _interopRequireDefault(require("../../ZEOperator"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from) {
  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
    to[j] = from[i];
  }

  return to;
};

// 解决moment版本不一致导致的ts报错
var DatePicker = (0, _generatePicker.default)(_moment.default);
var RangePicker = DatePicker.RangePicker;
var nullValue = JSON.stringify({
  $exists: false
});
var notNullValue = JSON.stringify({
  $exists: true
});

var isNullValue = function isNullValue(selectedKeys) {
  return selectedKeys[0] === nullValue;
};

var FilterFooter = function FilterFooter(_a) {
  var disableReset = _a.disableReset,
      reset = _a.reset,
      confirm = _a.confirm;
  var t = (0, _useLocale.default)().t;
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      gap: 8
    }
  }, !disableReset && /*#__PURE__*/_react.default.createElement(_button.default, {
    size: "small",
    style: {
      flex: 0.5
    },
    onClick: reset
  }, t("重置")), /*#__PURE__*/_react.default.createElement(_button.default, {
    type: "primary",
    onClick: confirm,
    icon: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
    size: "small",
    style: {
      flex: disableReset ? 1 : 0.5
    }
  }, t("搜索")));
};

var NullValueHandler = function NullValueHandler(_a) {
  var setSelectedKeys = _a.setSelectedKeys,
      selectedKeys = _a.selectedKeys;
  var t = (0, _useLocale.default)().t;
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: 8
    }
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
    checked: selectedKeys[0] === nullValue,
    onChange: function onChange(e) {
      if (e.target.checked) {
        setSelectedKeys([nullValue]);
      } else {
        setSelectedKeys([]);
      }
    }
  }, t("空值")));
};

var ExactHandler = function ExactHandler(_a) {
  var setSelectedKeys = _a.setSelectedKeys,
      selectedKeys = _a.selectedKeys,
      disabled = _a.disabled;
  var t = (0, _useLocale.default)().t;
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: 8
    }
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
    disabled: disabled,
    checked: !!selectedKeys[1],
    onChange: function onChange(e) {
      setSelectedKeys([selectedKeys[0], e.target.checked]);
    }
  }, t("完全匹配")));
};

var AutoCompleteFilter = function AutoCompleteFilter(_a) {
  var property = _a.property,
      onChange = _a.onChange,
      value = _a.value,
      getPopupContainer = _a.getPopupContainer,
      inputProps = __rest(_a, ["property", "onChange", "value", "getPopupContainer"]);

  var t = (0, _useLocale.default)().t;

  var _b = (0, _react.useState)(value),
      search = _b[0],
      setSearch = _b[1];

  var keyProp = property;

  if (property.schema && property.type === "object") {
    keyProp = (0, _zeroetpApiSdk.getNameProperty)(property.schema);
  }

  var options = (0, _hooks.useRequest)(function () {
    var _a;

    if (search) {
      return (0, _request.requestLogicform)({
        // @ts-ignore
        schema: property.schema ? property.schema._id : property.schemaID,
        groupby: [keyProp.name],
        query: (_a = {}, _a[keyProp.name] = {
          $contains: search
        }, _a)
      });
    }

    return Promise.resolve({
      result: []
    });
  }, {
    formatResult: function formatResult(res) {
      var _a;

      return ((_a = res.result) === null || _a === void 0 ? void 0 : _a.map(function (d) {
        return {
          label: d[keyProp.name],
          value: d[keyProp.name]
        };
      })) || [];
    },
    refreshDeps: [search],
    throttleInterval: 200
  }).data;

  var handleSearch = function handleSearch(v) {
    setSearch(v);
    onChange === null || onChange === void 0 ? void 0 : onChange(v);
  };

  var handleSelect = function handleSelect(v) {
    setSearch(v);
    onChange === null || onChange === void 0 ? void 0 : onChange(v);
  };

  (0, _react.useEffect)(function () {
    setSearch(value);
  }, [value]);
  return /*#__PURE__*/_react.default.createElement(_autoComplete.default, {
    onSearch: handleSearch,
    onSelect: handleSelect,
    options: options,
    value: search,
    getPopupContainer: getPopupContainer
  }, /*#__PURE__*/_react.default.createElement(_input.default, __assign({
    placeholder: t("搜索") + " " + property.name
  }, inputProps)));
}; // Search控件


var getColumnSearchProps = function getColumnSearchProps(property) {
  return {
    filterDropdown: function filterDropdown(_a) {
      var _b;

      var setSelectedKeys = _a.setSelectedKeys,
          selectedKeys = _a.selectedKeys,
          confirm = _a.confirm,
          clearFilters = _a.clearFilters,
          _reset = _a.reset,
          disableReset = _a.disableReset,
          getPopupContainer = _a.getPopupContainer,
          t = _a.t;
      var nullValueSelected = isNullValue(selectedKeys);
      var value = (0, _util.isNullQuery)(selectedKeys[0]) ? undefined : selectedKeys[0];
      var isMulti = String(value).includes(",");
      var multiOptions = String(value).split(",").filter(function (f) {
        return f;
      });
      return /*#__PURE__*/_react.default.createElement("div", {
        style: {
          padding: 8
        }
      }, isMulti ? /*#__PURE__*/_react.default.createElement(_select.default, {
        value: multiOptions,
        placeholder: t("搜索") + " " + property.name,
        mode: "tags",
        options: multiOptions.map(function (d) {
          return {
            label: d,
            value: d
          };
        }),
        onChange: function onChange(v) {
          setSelectedKeys([v.join(",")]);
        },
        style: {
          width: 188,
          marginBottom: 8,
          display: "block"
        }
      }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AutoCompleteFilter, {
        property: property,
        value: value,
        disabled: nullValueSelected,
        onChange: function onChange(v) {
          setSelectedKeys([v, selectedKeys[1]]);
        },
        getPopupContainer: getPopupContainer,
        onPressEnter: function onPressEnter() {
          return confirm();
        },
        style: {
          width: 188,
          marginBottom: 8,
          display: "block"
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        style: {
          display: "flex",
          gap: 12
        }
      }, /*#__PURE__*/_react.default.createElement(ExactHandler, {
        disabled: nullValueSelected,
        selectedKeys: selectedKeys,
        setSelectedKeys: setSelectedKeys
      }), !((_b = property.constraints) === null || _b === void 0 ? void 0 : _b.required) && /*#__PURE__*/_react.default.createElement(NullValueHandler, {
        selectedKeys: selectedKeys,
        setSelectedKeys: setSelectedKeys
      }))), /*#__PURE__*/_react.default.createElement(FilterFooter, {
        disableReset: disableReset,
        reset: function reset() {
          if (_reset) {
            _reset();
          } else {
            clearFilters && clearFilters();
            confirm();
          }
        },
        confirm: confirm
      }));
    },
    filterIcon: function filterIcon(filtered) {
      return /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, {
        style: {
          color: filtered ? "#1890ff" : undefined
        }
      });
    }
  };
};

exports.getColumnSearchProps = getColumnSearchProps;

var getColumnSimpleSearchProps = function getColumnSimpleSearchProps(dataIndex) {
  return {
    filterDropdown: function filterDropdown(_a) {
      var setSelectedKeys = _a.setSelectedKeys,
          selectedKeys = _a.selectedKeys,
          confirm = _a.confirm,
          clearFilters = _a.clearFilters,
          t = _a.t;
      var value = selectedKeys[0];
      return /*#__PURE__*/_react.default.createElement("div", {
        style: {
          padding: 8
        }
      }, /*#__PURE__*/_react.default.createElement(_input.default, {
        value: value,
        placeholder: "" + t("搜索"),
        onPressEnter: function onPressEnter() {
          confirm();
        },
        style: {
          marginBottom: 8
        },
        onChange: function onChange(e) {
          setSelectedKeys([e.target.value]);
        }
      }), /*#__PURE__*/_react.default.createElement(FilterFooter, {
        reset: function reset() {
          clearFilters && clearFilters();
          confirm();
        },
        confirm: confirm
      }));
    },
    filterIcon: function filterIcon(filtered) {
      return /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, {
        style: {
          color: filtered ? "#1890ff" : undefined
        }
      });
    },
    onFilter: function onFilter(value, record) {
      return record[dataIndex].toString().toLowerCase().includes(value.toLowerCase());
    }
  };
}; // 日期筛选控件


exports.getColumnSimpleSearchProps = getColumnSimpleSearchProps;

var getColumnDateProps = function getColumnDateProps(property) {
  return {
    filterDropdown: function filterDropdown(_a) {
      var _b;

      var setSelectedKeys = _a.setSelectedKeys,
          selectedKeys = _a.selectedKeys,
          confirm = _a.confirm,
          clearFilters = _a.clearFilters,
          getPopupContainer = _a.getPopupContainer,
          _reset2 = _a.reset,
          disableReset = _a.disableReset;
      var nullValueSelected = isNullValue(selectedKeys);
      return /*#__PURE__*/_react.default.createElement("div", {
        style: {
          padding: 8
        }
      }, /*#__PURE__*/_react.default.createElement(_ZEOperator.default, {
        type: "Date",
        operatorProps: {
          getPopupContainer: getPopupContainer
        },
        disabled: nullValueSelected,
        style: {
          marginBottom: 8,
          minWidth: 248,
          width: "100%"
        },
        valueProps: {
          getPopupContainer: getPopupContainer,
          popStyle: {
            zIndex: 1060
          }
        },
        value: selectedKeys[0],
        onChange: function onChange(v) {
          setSelectedKeys([v]);
        }
      }), !((_b = property.constraints) === null || _b === void 0 ? void 0 : _b.required) && /*#__PURE__*/_react.default.createElement(NullValueHandler, {
        selectedKeys: selectedKeys,
        setSelectedKeys: setSelectedKeys
      }), /*#__PURE__*/_react.default.createElement(FilterFooter, {
        disableReset: disableReset,
        reset: function reset() {
          if (_reset2) {
            _reset2();
          } else {
            clearFilters && clearFilters();
            confirm();
          }
        },
        confirm: confirm
      }));
    },
    filterIcon: function filterIcon(filtered) {
      return /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, {
        style: {
          color: filtered ? "#1890ff" : undefined
        }
      });
    }
  };
}; // 数字筛选控件


exports.getColumnDateProps = getColumnDateProps;

var getColumnNumberProps = function getColumnNumberProps(property) {
  return {
    filterDropdown: function filterDropdown(_a) {
      var _b;

      var setSelectedKeys = _a.setSelectedKeys,
          selectedKeys = _a.selectedKeys,
          confirm = _a.confirm,
          clearFilters = _a.clearFilters,
          _reset3 = _a.reset,
          disableReset = _a.disableReset,
          t = _a.t;
      var nullValueSelected = isNullValue(selectedKeys);
      return /*#__PURE__*/_react.default.createElement("div", {
        style: {
          padding: 8
        }
      }, /*#__PURE__*/_react.default.createElement(_space.default, {
        style: {
          marginBottom: 8
        }
      }, /*#__PURE__*/_react.default.createElement(_inputNumber.default, {
        placeholder: t("最小值"),
        style: {
          width: 112
        },
        value: nullValueSelected ? undefined : selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys["0"],
        disabled: nullValueSelected,
        onChange: function onChange(v) {
          setSelectedKeys([v === null ? undefined : v, selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys["1"]]);
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        style: {
          width: 8,
          textAlign: "center"
        }
      }, "~"), /*#__PURE__*/_react.default.createElement(_inputNumber.default, {
        placeholder: t("最大值"),
        style: {
          width: 112
        },
        value: nullValueSelected ? undefined : selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys["1"],
        disabled: nullValueSelected,
        onChange: function onChange(v) {
          setSelectedKeys([selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys["0"], v === null ? undefined : v]);
        }
      })), !((_b = property.constraints) === null || _b === void 0 ? void 0 : _b.required) && /*#__PURE__*/_react.default.createElement(NullValueHandler, {
        selectedKeys: selectedKeys,
        setSelectedKeys: setSelectedKeys
      }), /*#__PURE__*/_react.default.createElement(FilterFooter, {
        disableReset: disableReset,
        reset: function reset() {
          if (_reset3) {
            _reset3();
          } else {
            clearFilters && clearFilters();
            confirm();
          }
        },
        confirm: confirm
      }));
    },
    filterIcon: function filterIcon(filtered) {
      return /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, {
        style: {
          color: filtered ? "#1890ff" : undefined
        }
      });
    }
  };
}; // 枚举筛选控件


exports.getColumnNumberProps = getColumnNumberProps;

var getColumnEnumFilterProps = function getColumnEnumFilterProps(property) {
  return {
    filterDropdown: function filterDropdown(_a) {
      var _b, _c, _d, _e;

      var _setSelectedKeys = _a.setSelectedKeys,
          _selectedKeys = _a.selectedKeys,
          confirm = _a.confirm,
          clearFilters = _a.clearFilters,
          filters = _a.filters,
          _reset4 = _a.reset,
          disableReset = _a.disableReset,
          t = _a.t;
      var enums = filters instanceof Array ? filters : [];
      var nullValueSelected = isNullValue(_selectedKeys); //@ts-ignore

      var isNotIn = ((_b = _selectedKeys === null || _selectedKeys === void 0 ? void 0 : _selectedKeys[0]) === null || _b === void 0 ? void 0 : _b.operator) === "$nin";
      var selectedKeys = isNotIn ? //@ts-ignore
      (_d = (_c = _selectedKeys === null || _selectedKeys === void 0 ? void 0 : _selectedKeys[0]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : [] : _selectedKeys;

      var setSelectedKeys = function setSelectedKeys(v) {
        if (isNotIn) {
          _setSelectedKeys([{
            value: v,
            operator: "$nin"
          }]);
        } else {
          _setSelectedKeys(v);
        }
      };

      return /*#__PURE__*/_react.default.createElement("div", {
        style: {
          padding: 8
        }
      }, /*#__PURE__*/_react.default.createElement("p", {
        style: {
          fontWeight: "bolder"
        }
      }, isNotIn ? t("不等于") : t("等于")), enums.map(function (d) {
        return /*#__PURE__*/_react.default.createElement("div", {
          style: {
            marginBottom: 8
          },
          key: d.value
        }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
          checked: selectedKeys.includes(d.value),
          disabled: nullValueSelected,
          onChange: function onChange(e) {
            if (e.target.checked) {
              setSelectedKeys(__spreadArray(__spreadArray([], selectedKeys), [d.value]));
            } else {
              setSelectedKeys(selectedKeys.filter(function (s) {
                return s !== d.value;
              }));
            }
          }
        }, d.label));
      }), !((_e = property.constraints) === null || _e === void 0 ? void 0 : _e.required) && /*#__PURE__*/_react.default.createElement(NullValueHandler, {
        selectedKeys: selectedKeys,
        setSelectedKeys: _setSelectedKeys
      }), /*#__PURE__*/_react.default.createElement(FilterFooter, {
        disableReset: disableReset,
        reset: function reset() {
          if (_reset4) {
            _reset4();
          } else {
            clearFilters && clearFilters();
            confirm();
          }
        },
        confirm: confirm
      }));
    },
    filterIcon: function filterIcon(filtered) {
      return /*#__PURE__*/_react.default.createElement(_icons.FilterFilled, {
        style: {
          color: filtered ? "#1890ff" : undefined
        }
      });
    }
  };
};

exports.getColumnEnumFilterProps = getColumnEnumFilterProps;

var getColumnFilterProps = function getColumnFilterProps(property, customColumn, valueEnum) {
  if (property.primal_type === "date") {
    return getColumnDateProps(property);
  }

  if (property.primal_type === "number") {
    return getColumnNumberProps(property);
  }

  if (property.primal_type === "boolean") {
    return getColumnEnumFilterProps(property);
  }

  if ((0, _util.isSearchFilter)(property) && !((customColumn === null || customColumn === void 0 ? void 0 : customColumn.filters) === false)) {
    return getColumnSearchProps(property);
  }

  if (valueEnum !== undefined && Object.keys(valueEnum).length > 0) {
    return getColumnEnumFilterProps(property);
  }

  return {};
};

exports.getColumnFilterProps = getColumnFilterProps;