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

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "onChange", "onSearch"];
import React, { useRef, useState, forwardRef, useImperativeHandle } from 'react';
import Input from "../../input";
import { useDelayedFn } from "../hooks";

// 搜索输入框, 增加Ref关闭功能
var InputSearchClose = /*#__PURE__*/forwardRef(function (props, ref) {
  var inputRef = useRef(null);
  var value = props.value,
    onChange = props.onChange,
    onSearch = props.onSearch,
    resetProps = _objectWithoutProperties(props, _excluded);
  var _useState = useState(value),
    _useState2 = _slicedToArray(_useState, 2),
    aliveValue = _useState2[0],
    setAliveValue = _useState2[1];
  var delayedQuery = useDelayedFn(500);

  // 内容改变触发 => 延迟触发
  var handleChange = function handleChange(e) {
    e === null || e === void 0 ? void 0 : e.persist();
    setAliveValue === null || setAliveValue === void 0 ? void 0 : setAliveValue(e.target.value);
    delayedQuery(function () {
      return onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
    });
  };

  // 搜索触发 => 立即触发 & 解除上一次的延迟触发
  var handleSearch = function handleSearch(val) {
    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
    delayedQuery.cancel();
  };
  useImperativeHandle(ref, function () {
    return _objectSpread(_objectSpread({}, inputRef.current), {}, {
      setValue: function setValue(val) {
        return setAliveValue(val);
      }
    });
  });
  return /*#__PURE__*/React.createElement(Input.Search, _extends({
    ref: inputRef,
    allowClear: true,
    value: aliveValue,
    onSearch: handleSearch,
    onChange: handleChange
  }, resetProps, {
    size: "middle"
  }));
});
export default InputSearchClose;