@dnb/eufemia/components/input-masked/InputMaskedHooks.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React, { useCallback } from 'react';
import classnames from 'classnames';
import { cleanNumber, getCurrencySymbol } from "../number-format/NumberUtils.js";
import { isTrue, dispatchCustomElementEvent, extendPropsWithContext, keycode } from "../../shared/component-helper.js";
import { safeSetSelection } from "./text-mask/createTextMaskInputElement.js";
import { isNumber } from "./text-mask/utilities.js";
import TextMask from "./TextMask.js";
import createNumberMask from "./addons/createNumberMask.js";
import InputMaskedContext from "./InputMaskedContext.js";
import { isRequestingLocaleSupport, isRequestingNumberMask, correctNumberValue, handlePercentMask, handleCurrencyMask, handleNumberMask, correctCaretPosition, getSoftKeyboardAttributes, handleThousandsSeparator, handleDecimalSeparator, fromJSON, invisibleSpace } from "./InputMaskedUtils.js";
import { useIsomorphicLayoutEffect as useLayoutEffect } from "../../shared/helpers/useIsomorphicLayoutEffect.js";
const NUMBER_MINUS = '-|−|‐|‒|–|—|―';
export const useFilteredProps = () => {
  const {
    props
  } = React.useContext(InputMaskedContext);
  const {
    mask,
    number_mask,
    currency_mask,
    number_format,
    mask_options,
    as_currency,
    as_number,
    as_percent,
    locale,
    show_mask,
    show_guide,
    pipe,
    keep_char_positions,
    placeholder_char,
    ...attributes
  } = props;
  return {
    props,
    htmlAttributes: Object.freeze(attributes)
  };
};
export const useTranslation = () => {
  const {
    props,
    context
  } = React.useContext(InputMaskedContext);
  let {
    locale
  } = props;
  if (!locale && context !== null && context !== void 0 && context.locale) {
    locale = context.locale;
  }
  return locale;
};
export const useLocalValue = () => {
  const {
    props,
    context
  } = React.useContext(InputMaskedContext);
  const maskParams = useNumberMaskParams() || {};
  const locale = useTranslation();
  const [localValue, setLocalValue] = React.useState(() => {
    return correctNumberValue({
      locale,
      props,
      maskParams
    });
  });
  React.useEffect(() => {
    const value = correctNumberValue({
      localValue,
      locale,
      props,
      maskParams
    });
    setLocalValue(value);
  }, [props, context, locale]);
  return {
    localValue,
    setLocalValue
  };
};
export const useNumberMask = () => {
  const maskParams = useNumberMaskParams();
  const {
    props
  } = React.useContext(InputMaskedContext);
  if (!maskParams || !isRequestingNumberMask(props)) {
    return null;
  }
  const mask = createNumberMask(maskParams);
  mask.maskParams = maskParams;
  return mask;
};
export const useMask = () => {
  const {
    props
  } = React.useContext(InputMaskedContext);
  const numberMask = useNumberMask();
  if (numberMask) {
    return numberMask;
  }
  return props.mask;
};
export const useMaskParams = () => {
  const {
    props
  } = React.useContext(InputMaskedContext);
  const {
    keep_char_positions,
    show_guide,
    show_mask,
    placeholder_char,
    placeholder
  } = props;
  const mask = useMask();
  const maskParams = useNumberMaskParams() || {};
  maskParams.showMask = !placeholder && isTrue(show_mask);
  maskParams.placeholderChar = placeholder_char;
  if (typeof (mask === null || mask === void 0 ? void 0 : mask.placeholderChar) !== 'undefined') {
    maskParams.placeholderChar = mask.placeholderChar;
  }
  if (maskParams.placeholderChar === null) {
    maskParams.placeholderChar = invisibleSpace;
  }
  if (typeof (mask === null || mask === void 0 ? void 0 : mask.showMask) !== 'undefined') {
    maskParams.showMask = mask.showMask;
  }
  maskParams.showGuide = isTrue(show_guide);
  maskParams.keepCharPositions = isTrue(keep_char_positions);
  return maskParams;
};
export const useInputElement = () => {
  const {
    props
  } = React.useContext(InputMaskedContext);
  const {
    pipe,
    inner_ref
  } = props;
  const mask = useMask();
  const {
    showMask,
    showGuide,
    placeholderChar,
    keepCharPositions
  } = useMaskParams();
  const isFn = typeof inner_ref === 'function';
  const refHook = React.useRef(null);
  const ref = !isFn && inner_ref || refHook;
  useLayoutEffect(() => {
    if (isFn) {
      inner_ref === null || inner_ref === void 0 || inner_ref(ref.current);
    }
  }, [inner_ref, isFn, ref]);
  const inputElementRef = React.useRef(React.createElement("input", {
    ref: ref
  }));
  return useCallback((params, innerRef) => {
    innerRef.current = ref.current;
    return React.createElement(TextMask, _extends({
      inputRef: ref,
      inputElement: inputElementRef.current,
      pipe: pipe,
      mask: mask || createNumberMask(),
      showMask: showMask,
      guide: showGuide,
      keepCharPositions: keepCharPositions,
      placeholderChar: placeholderChar
    }, getSoftKeyboardAttributes(mask) || {}, params, {
      className: classnames(params.className, showMask && showGuide && placeholderChar && placeholderChar !== invisibleSpace && 'dnb-input-masked--guide')
    }));
  }, [keepCharPositions, mask, pipe, placeholderChar, ref, showGuide, showMask]);
};
export const useEventMapping = ({
  setLocalValue
}) => {
  const callEvent = useCallEvent({
    setLocalValue
  });
  return {
    onBeforeInput: event => callEvent({
      event
    }, 'onBeforeInput'),
    onInput: event => callEvent({
      event
    }, 'onInput'),
    onFocus: params => callEvent(params, 'on_focus'),
    onBlur: params => callEvent(params, 'on_blur'),
    onMouseUp: event => callEvent({
      event
    }, 'on_mouse_up'),
    onMouseDown: event => callEvent({
      event
    }, 'on_mouse_down'),
    onKeyDown: params => callEvent(params, 'on_key_down'),
    onSubmit: params => callEvent(params, 'on_submit'),
    onChange: params => callEvent(params, 'on_change'),
    on_focus: undefined,
    on_blur: undefined,
    on_key_down: undefined,
    on_submit: undefined,
    on_change: undefined
  };
};
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 = keycode(event);
    if (name === 'on_key_down' && (event.which === 229 || keyCode === undefined)) {
      isUnidentified = true;
    }
    if (isUnidentified && name === 'onBeforeInput' && typeof (event === null || event === void 0 ? void 0 : event.data) !== 'undefined') {
      name = 'on_key_down';
      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 === 'on_blur')) {
      const isNegative = new RegExp(`^${NUMBER_MINUS}`, 'g').test(value);
      if ((isNegative ? selStart > 1 : selStart > 0) || name === 'on_blur') {
        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)) || 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 === 'on_key_down' && 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 'on_focus':
      case 'on_key_down':
      case 'on_mouse_down':
      case 'on_mouse_up':
        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 === 'on_change') {
      setLocalValue(value);
    }
    return result;
  };
  return callEvent;
};
const useNumberMaskParams = () => {
  var _currency_mask;
  const {
    props
  } = React.useContext(InputMaskedContext);
  const locale = useTranslation();
  if (!isRequestingNumberMask(props)) {
    return {
      ...fromJSON(props.mask_options)
    };
  }
  let {
    number_mask,
    currency_mask,
    mask_options
  } = props;
  const {
    as_number,
    as_percent,
    as_currency,
    value
  } = props;
  mask_options = fromJSON(mask_options);
  number_mask = isTrue(number_mask) ? {} : fromJSON(number_mask);
  currency_mask = isTrue(currency_mask) ? {} : fromJSON(currency_mask, {
    currency: currency_mask
  });
  if (!((_currency_mask = currency_mask) !== null && _currency_mask !== void 0 && _currency_mask.currency)) {
    delete currency_mask.currency;
  }
  if (isRequestingLocaleSupport(props)) {
    const thousandsSeparatorSymbol = handleThousandsSeparator(locale);
    const decimalSymbol = handleDecimalSeparator(locale);
    if (isTrue(as_number) || isTrue(as_percent)) {
      number_mask = extendPropsWithContext(number_mask, null, {
        decimalSymbol,
        thousandsSeparatorSymbol
      });
    } else if (as_currency) {
      var _currency_mask2;
      currency_mask = extendPropsWithContext(currency_mask, null, {
        decimalSymbol,
        thousandsSeparatorSymbol,
        currency: getCurrencySymbol(locale, typeof as_currency === 'string' ? as_currency : null, (_currency_mask2 = currency_mask) === null || _currency_mask2 === void 0 ? void 0 : _currency_mask2.currencyDisplay, value)
      });
    }
  }
  let maskParams = null;
  if (number_mask) {
    maskParams = handleNumberMask({
      mask_options,
      number_mask
    });
    if (isTrue(as_percent)) {
      maskParams = handlePercentMask({
        props,
        locale,
        maskParams
      });
    }
  } else if (currency_mask) {
    maskParams = handleCurrencyMask({
      mask_options,
      currency_mask
    });
  }
  return maskParams;
};
//# sourceMappingURL=InputMaskedHooks.js.map