linkmore-design/lib/lm-filter/components/InputSearchClose.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 _input = _interopRequireDefault(require("../../input"));
var _hooks = require("../hooks");
// 搜索输入框, 增加Ref关闭功能
const InputSearchClose = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const inputRef = (0, _react.useRef)(null);
  const {
    value,
    onChange,
    onSearch,
    ...resetProps
  } = props;
  const [aliveValue, setAliveValue] = (0, _react.useState)(value);
  const delayedQuery = (0, _hooks.useDelayedFn)(500);

  // 内容改变触发 => 延迟触发
  const handleChange = e => {
    e?.persist();
    setAliveValue?.(e.target.value);
    delayedQuery(() => onChange?.(e.target.value));
  };

  // 搜索触发 => 立即触发 & 解除上一次的延迟触发
  const handleSearch = val => {
    onSearch?.(val);
    delayedQuery.cancel();
  };
  (0, _react.useImperativeHandle)(ref, () => ({
    ...inputRef.current,
    setValue: val => setAliveValue(val)
  }));
  return /*#__PURE__*/_react.default.createElement(_input.default.Search, (0, _extends2.default)({
    ref: inputRef,
    allowClear: true,
    value: aliveValue,
    onSearch: handleSearch,
    onChange: handleChange
  }, resetProps, {
    size: "middle"
  }));
});
var _default = InputSearchClose;
exports.default = _default;