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

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useRef, useMemo, useEffect } from 'react';
import Button from "../../button";
import Cascader from "../../cascader";
import InputSearchClose from "./InputSearchClose";
import { useDelayedFn } from "../hooks";
// 重置级联弹框
var DropdownRender = function DropdownRender(_ref) {
  var dom = _ref.dom,
    instance = _ref.instance,
    item = _ref.item,
    setOptions = _ref.setOptions,
    checkedValues = _ref.checkedValues;
  var setFilterValue = instance.setFilterValue,
    visible = instance.visible,
    setVisible = instance.setVisible,
    locale = instance.locale;
  var _item$data = item.data,
    filters = _item$data === void 0 ? [] : _item$data;
  var inputRef = useRef(null);
  var delayedFn = useDelayedFn();
  var isShowFoot = useMemo(function () {
    var _item$props;
    return item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.multiple;
  }, [item]);
  var handleFilter = function handleFilter(val) {
    var serachValues = filters.filter(function (v) {
      var _v, _item$props2, _item$props2$fieldNam;
      return ((_v = v[(item === null || item === void 0 ? void 0 : (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : (_item$props2$fieldNam = _item$props2.fieldNames) === null || _item$props2$fieldNam === void 0 ? void 0 : _item$props2$fieldNam.label) || 'label']) === null || _v === void 0 ? void 0 : _v.indexOf(val)) > -1;
    });
    setOptions(serachValues);
  };

  // 确定
  var handleSure = function handleSure() {
    setFilterValue(checkedValues);
    setVisible === null || setVisible === void 0 ? void 0 : setVisible(false);
  };

  // 取消
  var handleReset = function handleReset() {
    return setVisible === null || setVisible === void 0 ? void 0 : setVisible(false);
  };
  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'
        });
      });
    }
  }, [visible]);
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_dropdown"
  }, /*#__PURE__*/React.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/React.createElement(InputSearchClose, {
    ref: inputRef,
    onSearch: handleFilter,
    onChange: handleFilter
  })), dom, isShowFoot && /*#__PURE__*/React.createElement("div", {
    className: "filter_footer"
  }, /*#__PURE__*/React.createElement("div", {
    className: "footer_clear",
    onClick: handleReset
  }, locale.cancel), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    size: "small",
    onClick: handleSure
  }, locale.ok)));
};
var CascaderFilter = function CascaderFilter(_ref2) {
  var instance = _ref2.instance,
    itemProps = _ref2.item;
  var _instance$filterValue = instance.filterValue,
    filterValue = _instance$filterValue === void 0 ? [] : _instance$filterValue,
    setFilterValue = instance.setFilterValue,
    visible = instance.visible,
    setVisible = instance.setVisible,
    _instance$children = instance.children,
    children = _instance$children === void 0 ? /*#__PURE__*/React.createElement("div", null) : _instance$children;
  var _itemProps$data = itemProps.data,
    filters = _itemProps$data === void 0 ? [] : _itemProps$data;
  var _useState = useState(filters),
    _useState2 = _slicedToArray(_useState, 2),
    options = _useState2[0],
    setOptions = _useState2[1];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    checkedValues = _useState4[0],
    setCheckedValues = _useState4[1];
  var defaultValue = useMemo(function () {
    return filterValue;
  }, [filterValue]);
  var onChange = function onChange(item) {
    var _itemProps$props;
    setCheckedValues(item);
    if (!(itemProps !== null && itemProps !== void 0 && (_itemProps$props = itemProps.props) !== null && _itemProps$props !== void 0 && _itemProps$props.multiple)) {
      setFilterValue(item);
    }
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cascader, _extends({}, itemProps.props, {
    options: options,
    onChange: onChange,
    defaultValue: defaultValue,
    open: visible,
    onDropdownVisibleChange: function onDropdownVisibleChange(vis) {
      return setVisible(vis);
    },
    dropdownRender: function dropdownRender(dom) {
      return /*#__PURE__*/React.createElement(DropdownRender, {
        dom: dom,
        instance: instance,
        item: itemProps,
        checkedValues: checkedValues,
        setCheckedValues: setCheckedValues,
        setOptions: setOptions
      });
    }
  }), children));
};
export default CascaderFilter;