linkmore-design/lib/lm-filter/components/CascaderFilter.js

🌈 🚀lm组件库。🚀

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _button = _interopRequireDefault(require("../../button"));
var _cascader = _interopRequireDefault(require("../../cascader"));
var _InputSearchClose = _interopRequireDefault(require("./InputSearchClose"));
var _hooks = require("../hooks");
// 重置级联弹框
const DropdownRender = ({
  dom,
  instance,
  item,
  setOptions,
  checkedValues
}) => {
  const {
    setFilterValue,
    visible,
    setVisible,
    locale
  } = instance;
  const {
    data: filters = []
  } = item;
  const inputRef = (0, _react.useRef)(null);
  const delayedFn = (0, _hooks.useDelayedFn)();
  const isShowFoot = (0, _react.useMemo)(() => {
    return item?.props?.multiple;
  }, [item]);
  const handleFilter = val => {
    const serachValues = filters.filter(v => v[item?.props?.fieldNames?.label || 'label']?.indexOf(val) > -1);
    setOptions(serachValues);
  };

  // 确定
  const handleSure = () => {
    setFilterValue(checkedValues);
    setVisible?.(false);
  };

  // 取消
  const handleReset = () => setVisible?.(false);
  (0, _react.useEffect)(() => {
    if (visible) {
      delayedFn(() => inputRef.current?.focus?.({
        cursor: 'all'
      }));
    }
  }, [visible]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_dropdown"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/_react.default.createElement(_InputSearchClose.default, {
    ref: inputRef,
    onSearch: handleFilter,
    onChange: handleFilter
  })), dom, isShowFoot && /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_footer"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "footer_clear",
    onClick: handleReset
  }, locale.cancel), /*#__PURE__*/_react.default.createElement(_button.default, {
    type: "primary",
    size: "small",
    onClick: handleSure
  }, locale.ok)));
};
const CascaderFilter = ({
  instance,
  item: itemProps
}) => {
  const {
    filterValue = [],
    setFilterValue,
    visible,
    setVisible,
    children = /*#__PURE__*/_react.default.createElement("div", null)
  } = instance;
  const {
    data: filters = []
  } = itemProps;
  const [options, setOptions] = (0, _react.useState)(filters);
  const [checkedValues, setCheckedValues] = (0, _react.useState)([]);
  const defaultValue = (0, _react.useMemo)(() => filterValue, [filterValue]);
  const onChange = item => {
    setCheckedValues(item);
    if (!itemProps?.props?.multiple) {
      setFilterValue(item);
    }
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cascader.default, (0, _extends2.default)({}, itemProps.props, {
    options: options,
    onChange: onChange,
    defaultValue: defaultValue,
    open: visible,
    onDropdownVisibleChange: vis => setVisible(vis),
    dropdownRender: dom => /*#__PURE__*/_react.default.createElement(DropdownRender, {
      dom: dom,
      instance: instance,
      item: itemProps,
      checkedValues: checkedValues,
      setCheckedValues: setCheckedValues,
      setOptions: setOptions
    })
  }), children));
};
var _default = CascaderFilter;
exports.default = _default;