linkmore-design/es/advanced-filter/widgets/DelayInput.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 { useDebounceFn } from 'ahooks';
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import Input from "../../input";

// 搜索输入框, 增加Ref关闭功能
var DelayInput = /*#__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 _useDebounceFn = useDebounceFn(function () {
      var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
      return typeof onChange === 'function' && (onChange === null || onChange === void 0 ? void 0 : onChange((str === null || str === void 0 ? void 0 : str.trim()) || undefined));
    }, {
      wait: 300
    }),
    run = _useDebounceFn.run,
    cancel = _useDebounceFn.cancel;

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

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