@dnb/eufemia/components/input-masked/hooks/useCallEvent.js

DNB Eufemia Design System UI Library

import React from 'react';
import { cleanNumber } from "../../number-format/NumberUtils.js";
import { dispatchCustomElementEvent } from "../../../shared/component-helper.js";
import { safeSetSelection } from "../text-mask/safeSetSelection.js";
import { isNumber } from "../text-mask/utilities.js";
import InputMaskedContext from "../InputMaskedContext.js";
import { correctCaretPosition } from "../InputMaskedUtils.js";
import { useMaskParams } from "./useMaskParams.js";
import { useNumberMask } from "./useNumberMask.js";
const NUMBER_MINUS = '-|−|‐|‒|–|—|―';
export const useCallEvent = ({
  setLocalValue
}) => {
  const maskParamsRef = React.useRef(null);
  maskParamsRef.current = useMaskParams();
  const {
    props
  } = React.useContext(InputMaskedContext);
  const isNumberMask = useNumberMask();
  const decimalSeparators = /[,.'·]/;
  let isUnidentified = false;
  const callEvent = ({
    event,
    value
  }, name) => {
    const maskParams = maskParamsRef.current;
    value = value || event.target.value;
    const selStart = event.target.selectionStart;
    let keyCode = event.key;
    if (name === 'onKeyDown' && (event.isComposing || keyCode === 'Unidentified')) {
      isUnidentified = true;
    }
    if (isUnidentified && name === 'onBeforeInput' && typeof (event === null || event === void 0 ? void 0 : event.data) !== 'undefined') {
      name = 'onKeyDown';
      keyCode = event.data;
      isUnidentified = false;
    }
    if (isUnidentified && event.key === '0') {
      keyCode = '0';
      isUnidentified = false;
    }
    if (maskParams !== null && maskParams !== void 0 && maskParams.disallowLeadingZeroes && (name === 'onInput' || name === 'onBlur')) {
      const isNegative = new RegExp(`^${NUMBER_MINUS}`, 'g').test(value);
      if ((isNegative ? selStart > 1 : selStart > 0) || name === 'onBlur') {
        const onlyNumber = value.replace(new RegExp(`[^\\d${maskParams.decimalSymbol}]`, 'g'), '');
        let leadingZeroes = 0;
        for (let i = 0; i < onlyNumber.length - 1; i++) {
          if (onlyNumber.charAt(i) === '0' && onlyNumber.charAt(i + 1) !== maskParams.decimalSymbol) {
            leadingZeroes++;
          } else {
            break;
          }
        }
        let newSelStart = selStart;
        let newValue = value;
        let firstNumberIndex = 0;
        if (leadingZeroes > 0) {
          for (let i = 0; i < value.length; i++) {
            firstNumberIndex = i;
            const char = value.charAt(i);
            if (char !== '0' && isNumber(parseInt(char, 10)) || value.charAt(i + 1) === maskParams.decimalSymbol) {
              break;
            }
          }
          newValue = value.substring(0, isNegative ? 1 : 0) + value.substring(firstNumberIndex);
          newSelStart = selStart > firstNumberIndex ? selStart - (value.length - newValue.length) : isNegative ? 1 : 0;
        }
        if (newValue !== value) {
          setLocalValue(newValue);
          event.target.value = newValue;
          safeSetSelection(event.target, newSelStart);
          value = newValue;
        }
      }
    }
    if (name === 'onKeyDown' && isNumberMask && !isUnidentified && maskParams !== null && maskParams !== void 0 && maskParams.decimalSymbol) {
      const hasDecimalSymbol = value.includes(maskParams.decimalSymbol);
      const allowedDecimals = maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false;
      if (!allowedDecimals && decimalSeparators.test(keyCode)) {
        event.preventDefault();
      }
      const charAtSelection = value.slice(selStart, selStart + 1);
      if (allowedDecimals) {
        if (hasDecimalSymbol && decimalSeparators.test(keyCode)) {
          if (decimalSeparators.test(charAtSelection)) {
            const index = value.indexOf(maskParams.decimalSymbol);
            if (index > -1) {
              safeSetSelection(event.target, index + 1);
            }
          }
          event.preventDefault();
        } else if (!hasDecimalSymbol && keyCode !== maskParams.decimalSymbol && decimalSeparators.test(keyCode)) {
          value = value.slice(0, selStart);
          setLocalValue(value + maskParams.decimalSymbol);
          event.target.value = value + maskParams.decimalSymbol;
          event.preventDefault();
        }
      }
      if (keyCode === 'Delete' && charAtSelection === (maskParams.thousandsSeparatorSymbol || ' ')) {
        safeSetSelection(event.target, selStart + 1);
        event.preventDefault();
      }
    }
    let num = cleanNumber(value, {
      prefix: maskParams.prefix,
      suffix: maskParams.suffix,
      decimalSeparator: maskParams.decimalSymbol || ',',
      thousandsSeparator: maskParams.thousandsSeparatorSymbol || ' '
    });
    if (num === '-') {
      num = -0;
    }
    const numberValue = Number(num);
    const cleanedValue = numberValue === 0 && String(num).charAt(0) !== '0' ? '' : num;
    switch (name) {
      case 'onFocus':
      case 'onKeyDown':
      case 'onMouseDown':
      case 'onMouseUp':
        event.target.runCorrectCaretPosition = () => correctCaretPosition(event.target, maskParamsRef, props);
        if (!event.target.__getCorrectCaretPosition) {
          event.target.runCorrectCaretPosition();
        }
        break;
    }
    const result = dispatchCustomElementEvent(props, name, {
      event,
      value,
      numberValue,
      cleanedValue
    });
    if (name === 'onChange') {
      setLocalValue(value);
    }
    return result;
  };
  return callEvent;
};
//# sourceMappingURL=useCallEvent.js.map