linkmore-design/es/complex-filter/widgets/CascaderRender.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useMemo, useRef, useState } from 'react';
import Button from "../../button";
import Cascader from "../../cascader";
import { useDelayedFn } from "../hooks";
import DelayInput from "./DelayInput";

// 重置级联弹框
var DropdownRender = function DropdownRender(_ref) {
  var dom = _ref.dom,
    itemProps = _ref.itemProps,
    setSearchValue = _ref.setSearchValue,
    checkedValues = _ref.checkedValues;
  var onChange = itemProps.onChange,
    onCancel = itemProps.onCancel,
    locale = itemProps.locale,
    componentProps = itemProps.componentProps;
  var inputRef = useRef(null);
  var delayedFn = useDelayedFn();

  // const resetFieldNames = componentProps?.fieldNames || fieldNames

  var isShowFoot = useMemo(function () {
    return componentProps === null || componentProps === void 0 ? void 0 : componentProps.multiple;
  }, [componentProps]);
  var handleFilter = function handleFilter(val) {
    setSearchValue(val);
    // const serachValues = filters.filter((v) => v[resetFieldNames?.label || 'label']?.indexOf(val) > -1)
    // setOptions(serachValues)
  };

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

  // 取消
  var handleReset = function handleReset() {
    return onCancel === null || onCancel === void 0 ? void 0 : onCancel(false);
  };
  useEffect(function () {
    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'
      });
    });
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_dropdown"
  }, /*#__PURE__*/React.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/React.createElement(DelayInput, {
    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(props) {
  var _props$options = props.options,
    filters = _props$options === void 0 ? [] : _props$options,
    _props$value = props.value,
    value = _props$value === void 0 ? [] : _props$value,
    onChange = props.onChange,
    visible = props.visible,
    componentProps = props.componentProps,
    _props$children = props.children,
    children = _props$children === void 0 ? /*#__PURE__*/React.createElement("div", null) : _props$children,
    fieldNames = props.fieldNames;

  // const [options, setOptions] = useState(filters)
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    checkedValues = _useState2[0],
    setCheckedValues = _useState2[1];
  var _useState3 = useState(''),
    _useState4 = _slicedToArray(_useState3, 2),
    searchValue = _useState4[0],
    setSearchValue = _useState4[1];
  var defaultValue = useMemo(function () {
    return value;
  }, [value]);
  var handleChange = function handleChange(item) {
    setCheckedValues(item);
    if (!(componentProps !== null && componentProps !== void 0 && componentProps.multiple)) {
      onChange(item);
    }
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cascader, _extends({
    fieldNames: fieldNames
  }, componentProps, {
    options: filters,
    onChange: handleChange,
    defaultValue: defaultValue,
    open: visible,
    showSearch: true,
    searchValue: searchValue,
    dropdownRender: function dropdownRender(dom) {
      return /*#__PURE__*/React.createElement(DropdownRender, {
        dom: dom,
        setSearchValue: setSearchValue,
        itemProps: props,
        checkedValues: checkedValues,
        setCheckedValues: setCheckedValues
      });
    }
  }), children));
};
export default CascaderFilter;