@krmao/react-basic
Version:
### features
60 lines (59 loc) • 2.71 kB
JavaScript
;
// noinspection JSUnresolvedFunction
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var antd_1 = require("antd");
var debounce_js_1 = (0, tslib_1.__importDefault)(require("lodash/debounce.js"));
/**
* wrap ant Input with debounce and composition
*
* options: PropTypes.object 透传 Input 组件的所有属性
*
* @see https://zhuanlan.zhihu.com/p/106805657
* @see https://www.jianshu.com/p/bf9f66ac3f9c?utm_campaign=haruki
* @see https://blog.csdn.net/qq_24724109/article/details/103817607
* @see https://www.cnblogs.com/xiaonian8/p/13705311.html
*/
var BasicInputDC = function (props, ref) {
// console.log("InputDC props", props);
var onChange = props.onChange, debounceWait = props.debounceWait;
// 内部 ref
var innerRef = (0, react_1.useRef)();
// 暴露内部 innerRef 的指定部分方法 blur/focus 方法给外部 ref
(0, react_1.useImperativeHandle)(ref, function () {
return {
blur: function () { return innerRef.current.blur(); },
focus: function () { return innerRef.current.focus(); },
clear: function () { return innerRef.current.setState({ value: "" }); }
};
}, []);
// 240ms 延时, 只返回最后一次调用执行的值
var debounceOnChange = (0, react_1.useRef)((0, debounce_js_1.default)(function (event) { return !!onChange && onChange(event); }, debounceWait !== null && debounceWait !== void 0 ? debounceWait : 240));
var compositionStart = (0, react_1.useRef)(false);
(0, react_1.useEffect)(function () {
var _a;
console.log("InputDC useEffect props.value=", props.value, "innerRef=", innerRef);
innerRef.current.setState({ value: (_a = props.value) !== null && _a !== void 0 ? _a : "" });
}, [props.value, innerRef]);
function _onChange(event) {
// 中文输入法输入弹窗打开
if (event.type === "compositionstart") {
compositionStart.current = true;
return;
}
// 中文输入法输入弹窗关闭
if (event.type === "compositionend") {
compositionStart.current = false;
}
// 非中文输入法输入弹窗打开时, 回调 onChange
if (!compositionStart.current) {
debounceOnChange.current(event);
}
}
return (react_1.default.createElement(antd_1.Input, (0, tslib_1.__assign)({}, props.options, { ref: innerRef, onChange: _onChange, onCompositionEnd: _onChange, onCompositionStart: _onChange })));
};
/**
* 对外暴露 ref
*/
exports.default = (0, react_1.forwardRef)(BasicInputDC);