linkmore-design
Version:
🌈 🚀lm组件库。🚀
59 lines (56 loc) • 2.37 kB
JavaScript
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 DelayInputSearch = /*#__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: 500
}),
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 handleSearch = function handleSearch(val) {
var excitingVal = (val === null || val === void 0 ? void 0 : val.trim()) || undefined;
onSearch === null || onSearch === void 0 ? void 0 : onSearch(excitingVal);
cancel();
};
useImperativeHandle(ref, function () {
return _objectSpread(_objectSpread({}, inputRef.current), {}, {
setValue: setAliveValue
});
});
return /*#__PURE__*/React.createElement(Input.Search, _extends({
ref: inputRef,
allowClear: true,
value: aliveValue,
onSearch: handleSearch,
onChange: handleChange
}, resetProps, {
size: "middle"
}));
});
export default DelayInputSearch;