linkmore-design/lib/complex-filter/widgets/CascaderRender.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 _hooks = require("../hooks");
var _DelayInput = _interopRequireDefault(require("./DelayInput"));
// 重置级联弹框
const DropdownRender = ({
  dom,
  itemProps,
  setSearchValue,
  checkedValues
}) => {
  const {
    onChange,
    onCancel,
    locale,
    componentProps
  } = itemProps;
  const inputRef = (0, _react.useRef)(null);
  const delayedFn = (0, _hooks.useDelayedFn)();

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

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

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

  // 取消
  const handleReset = () => onCancel?.(false);
  (0, _react.useEffect)(() => {
    delayedFn(() => inputRef.current?.focus?.({
      cursor: 'all'
    }));
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_dropdown"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/_react.default.createElement(_DelayInput.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 = props => {
  const {
    options: filters = [],
    value = [],
    onChange,
    visible,
    componentProps,
    children = /*#__PURE__*/_react.default.createElement("div", null),
    fieldNames
  } = props;

  // const [options, setOptions] = useState(filters)
  const [checkedValues, setCheckedValues] = (0, _react.useState)([]);
  const [searchValue, setSearchValue] = (0, _react.useState)('');
  const defaultValue = (0, _react.useMemo)(() => value, [value]);
  const handleChange = item => {
    setCheckedValues(item);
    if (!componentProps?.multiple) {
      onChange(item);
    }
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cascader.default, (0, _extends2.default)({
    fieldNames: fieldNames
  }, componentProps, {
    options: filters,
    onChange: handleChange,
    defaultValue: defaultValue,
    open: visible,
    showSearch: true,
    searchValue: searchValue,
    dropdownRender: dom => /*#__PURE__*/_react.default.createElement(DropdownRender, {
      dom: dom,
      setSearchValue: setSearchValue,
      itemProps: props,
      checkedValues: checkedValues,
      setCheckedValues: setCheckedValues
    })
  }), children));
};
var _default = CascaderFilter;
exports.default = _default;