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

DNB Eufemia Design System UI Library

import React, { useCallback } from 'react';
import InputMaskedContext from "../InputMaskedContext.js";
import TextMask from "../TextMask.js";
import { getSoftKeyboardAttributes } from "../InputMaskedUtils.js";
import { useMask } from "./useMask.js";
import { useMaskParams } from "./useMaskParams.js";
import { createNumberMask } from "./useNumberMask.js";
import { jsx as _jsx } from "react/jsx-runtime";
const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
export const useInputElement = () => {
  const {
    props
  } = React.useContext(InputMaskedContext);
  const {
    ref: refProp,
    allowOverflow,
    overwriteMode
  } = props;
  const mask = useMask();
  const {
    showMask
  } = useMaskParams();
  const isFn = typeof refProp === 'function';
  const refHook = React.useRef(null);
  const ref = !isFn && refProp || refHook;
  useLayoutEffect(() => {
    if (isFn) {
      refProp === null || refProp === void 0 || refProp(ref.current);
    }
  }, [refProp, isFn, ref]);
  const inputElementRef = React.useRef(_jsx("input", {
    ref: ref
  }));
  return useCallback((params, inputRef) => {
    inputRef.current = ref.current;
    return _jsx(TextMask, {
      inputRef: ref,
      inputElement: inputElementRef.current,
      mask: mask || createNumberMask(),
      showMask: showMask,
      allowOverflow: allowOverflow,
      overwriteMode: overwriteMode,
      ...(getSoftKeyboardAttributes(mask) || {}),
      ...params
    });
  }, [allowOverflow, mask, overwriteMode, ref, showMask]);
};
//# sourceMappingURL=useInputElement.js.map