@bee-design/ui/lib/Input/useComposition.js

Bee Design React UI Library.

"use strict";
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var keycode_1 = require("../_util/keycode");
// Handle input text like Chinese
function useComposition(_a) {
    var value = _a.value, maxLength = _a.maxLength, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onPressEnter = _a.onPressEnter, beforeTriggerValueChangeCallback = _a.beforeTriggerValueChangeCallback;
    var refIsComposition = (0, react_1.useRef)(false);
    var _b = __read((0, react_1.useState)(''), 2), compositionValue = _b[0], setCompositionValue = _b[1];
    var triggerValueChangeCallback = function (newValue, e) {
        if (beforeTriggerValueChangeCallback) {
            beforeTriggerValueChangeCallback(newValue);
        }
        if (onChange &&
            // https://github.com/bee-design/bee-design/issues/520
            // Avoid triggering onChange repeatedly for the same value
            // Compositionend is earlier than onchange in Firefox, different with chrome
            newValue !== value &&
            (maxLength === undefined || newValue.length <= maxLength)) {
            onChange(newValue, e);
        }
    };
    return {
        compositionValue: compositionValue,
        triggerValueChangeCallback: triggerValueChangeCallback,
        compositionHandler: function (e) {
            refIsComposition.current = e.type !== 'compositionend';
            if (!refIsComposition.current) {
                setCompositionValue(undefined);
                triggerValueChangeCallback(e.target.value, e);
            }
        },
        valueChangeHandler: function (e) {
            var newValue = e.target.value;
            if (!refIsComposition.current) {
                compositionValue && setCompositionValue(undefined);
                triggerValueChangeCallback(newValue, e);
            }
            else {
                // https://github.com/bee-design/bee-design/issues/397
                // compositionupdate => onchange
                refIsComposition.current = false;
                setCompositionValue(newValue);
            }
        },
        keyDownHandler: function (e) {
            var keyCode = e.keyCode || e.which;
            if (!refIsComposition.current) {
                onKeyDown && onKeyDown(e);
                if (keyCode === keycode_1.Enter.code) {
                    onPressEnter && onPressEnter(e);
                }
            }
        },
    };
}
exports.default = useComposition;