71 lines
4.8 KiB
JavaScript
71 lines
4.8 KiB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
//@ts-nocheck
|
|
import { useState, useRef, useCallback } from 'react';
|
|
import { isChrome } from '@zhst/func';
|
|
var EMIT_CHANGE_AFTER_COMPOSITION_END = isChrome();
|
|
var defaultGetEventValue = function defaultGetEventValue(e) {
|
|
return e.target.value;
|
|
};
|
|
export default function useIMEComposition(propValue, onChangeProp, getEventValueProp, onCompositionStartProp, onCompositionEndProp) {
|
|
var getEventValue = getEventValueProp || defaultGetEventValue;
|
|
var isCompositionRef = useRef(false);
|
|
var _useState = useState(propValue),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
compositionValue = _useState2[0],
|
|
setCompositionValue = _useState2[1];
|
|
var compositionValueRef = useRef(compositionValue);
|
|
var onChangeRef = useRef(onChangeProp);
|
|
var onCompositionStartRef = useRef(onCompositionStartProp);
|
|
var onCompositionEndRef = useRef(onCompositionEndProp);
|
|
compositionValueRef.current = compositionValue;
|
|
onChangeRef.current = onChangeProp;
|
|
onCompositionStartRef.current = onCompositionStartProp;
|
|
onCompositionEndRef.current = onCompositionEndProp;
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
var onCompositionValueChange = useCallback(function () {
|
|
var _onChangeRef$current;
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
if (isCompositionRef.current) {
|
|
setCompositionValue(getEventValue.apply(void 0, args));
|
|
// 若输入法正在输入，则不触发上层组件的事件
|
|
return;
|
|
}
|
|
return (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 ? void 0 : _onChangeRef$current.call.apply(_onChangeRef$current, [onChangeRef].concat(args));
|
|
}, [onChangeRef]);
|
|
var onCompositionStart = useCallback(function (e) {
|
|
var _onCompositionStartRe;
|
|
isCompositionRef.current = true;
|
|
(_onCompositionStartRe = onCompositionStartRef.current) === null || _onCompositionStartRe === void 0 || _onCompositionStartRe.call(onCompositionStartRef, e);
|
|
}, [onCompositionStartRef]);
|
|
var onCompositionEnd = useCallback(function (e) {
|
|
var _onCompositionEndRef$;
|
|
isCompositionRef.current = false;
|
|
(_onCompositionEndRef$ = onCompositionEndRef.current) === null || _onCompositionEndRef$ === void 0 || _onCompositionEndRef$.call(onCompositionEndRef, e);
|
|
// chrome 的 onCompositionEnd 事件在 onChange 后触发，需要在 onCompositionEnd 后额外触发一次 onChange 事件
|
|
if (EMIT_CHANGE_AFTER_COMPOSITION_END) {
|
|
var _onChangeRef$current2;
|
|
e.type = 'change';
|
|
//todo: 此处优化
|
|
(_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, compositionValueRef.current, e);
|
|
}
|
|
}, [onCompositionEndRef, onChangeRef]);
|
|
|
|
// 只处理受控的组件
|
|
var isControlled = propValue !== undefined;
|
|
var passCompositionHandler = isControlled;
|
|
var passCompositionValue = isControlled && isCompositionRef.current;
|
|
return {
|
|
value: passCompositionValue ? compositionValue : propValue,
|
|
onChange: passCompositionHandler ? onCompositionValueChange : onChangeProp,
|
|
onCompositionStart: passCompositionHandler ? onCompositionStart : onCompositionStartProp,
|
|
onCompositionEnd: passCompositionHandler ? onCompositionEnd : onCompositionEndProp
|
|
};
|
|
} |