preact-arco-design/es/Input/useComposition.js

Arco Design React UI Library.

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;
};

import { useRef, useState } from "preact/compat";
import { Enter } from "../_util/keycode"; // Handle input text like Chinese

export default function useComposition(_a) {
  var value = _a.value,
      maxLength = _a.maxLength,
      onChange = _a.onChange,
      onKeyDown = _a.onKeyDown,
      onPressEnter = _a.onPressEnter,
      beforeTriggerValueChangeCallback = _a.beforeTriggerValueChangeCallback;
  var refIsComposition = useRef(false);

  var _b = __read(useState(''), 2),
      compositionValue = _b[0],
      setCompositionValue = _b[1];

  var triggerValueChangeCallback = function triggerValueChangeCallback(newValue, e) {
    if (beforeTriggerValueChangeCallback) {
      beforeTriggerValueChangeCallback(newValue);
    }

    if (onChange && // https://github.com/arco-design/arco-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 compositionHandler(e) {
      refIsComposition.current = e.type !== 'compositionend';

      if (!refIsComposition.current) {
        setCompositionValue(undefined);
        triggerValueChangeCallback(e.target.value, e);
      }
    },
    valueChangeHandler: function valueChangeHandler(e) {
      var newValue = e.target.value;

      if (!refIsComposition.current) {
        compositionValue && setCompositionValue(undefined);
        triggerValueChangeCallback(newValue, e);
      } else {
        // https://github.com/arco-design/arco-design/issues/397
        // compositionupdate => onchange
        refIsComposition.current = false;
        setCompositionValue(newValue);
      }
    },
    keyDownHandler: function keyDownHandler(e) {
      var keyCode = e.keyCode || e.which;

      if (!refIsComposition.current) {
        onKeyDown && onKeyDown(e);

        if (keyCode === Enter.code) {
          onPressEnter && onPressEnter(e);
        }
      }
    }
  };
}