@dnb/eufemia/extensions/forms/Field/BankAccountNumber/BankAccountNumber.js

DNB Eufemia Design System UI Library

"use client";

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import StringField from "../String/index.js";
import useTranslation from "../../hooks/useTranslation.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { norwegianBbanValidator } from "./validators.js";
import { getMask, getInputMode, getWidth, hasVariableMask } from "./masks.js";
import { jsx as _jsx } from "react/jsx-runtime";
function BankAccountNumber(props) {
  const translations = useTranslation().BankAccountNumber;
  const {
    validate = true,
    omitMask = false,
    bankAccountType = 'norwegianBban',
    onChangeValidator,
    onBlurValidator: onBlurValidatorProp,
    label: labelProp,
    width,
    value,
    defaultValue,
    onChange: onChangeProp,
    onBlur: onBlurProp,
    ...restProps
  } = props;
  const valueRef = useRef(value !== null && value !== void 0 ? value : defaultValue);
  const [maskValue, setMaskValue] = useState(value !== null && value !== void 0 ? value : defaultValue);
  useEffect(() => {
    if (value !== undefined && hasVariableMask(bankAccountType)) {
      setMaskValue(value);
    }
  }, [value, bankAccountType]);
  const cleanValue = useCallback(val => {
    if (!val) {
      return val;
    }
    if (bankAccountType === 'iban') {
      return val.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
    }
    return val.replace(/[^0-9]/g, '');
  }, [bankAccountType]);
  const fromInput = useCallback(event => {
    if ((event === null || event === void 0 ? void 0 : event.value) === '') {
      return restProps.emptyValue;
    }
    return cleanValue(event === null || event === void 0 ? void 0 : event.value);
  }, [cleanValue, restProps.emptyValue]);
  const handleChange = useCallback(newValue => {
    valueRef.current = newValue;
    onChangeProp === null || onChangeProp === void 0 || onChangeProp(newValue);
  }, [onChangeProp]);
  const handleBlur = useCallback((...args) => {
    if (hasVariableMask(bankAccountType)) {
      setMaskValue(valueRef.current);
    }
    onBlurProp === null || onBlurProp === void 0 || onBlurProp(...args);
  }, [bankAccountType, onBlurProp]);
  const label = useMemo(() => {
    if (labelProp !== undefined) {
      return labelProp;
    }
    switch (bankAccountType) {
      case 'swedishBban':
        return translations.labelSwedishBban;
      case 'swedishBankgiro':
        return translations.labelSwedishBankgiro;
      case 'swedishPlusgiro':
        return translations.labelSwedishPlusgiro;
      case 'iban':
        return translations.labelIban;
      default:
        return translations.label;
    }
  }, [labelProp, bankAccountType, translations]);
  const errorMessages = useMemo(() => {
    return {
      'Field.errorRequired': translations.errorRequired,
      'Field.errorPattern': translations.errorBankAccountNumber,
      ...props.errorMessages
    };
  }, [translations.errorRequired, translations.errorBankAccountNumber, props.errorMessages]);
  const bankAccountNumberValidator = useCallback(value => {
    if (bankAccountType !== 'norwegianBban') {
      return undefined;
    }
    return norwegianBbanValidator(value, {
      errorBankAccountNumber: translations.errorBankAccountNumber,
      errorBankAccountNumberLength: translations.errorBankAccountNumberLength
    });
  }, [bankAccountType, translations]);
  const onBlurValidator = onBlurValidatorProp !== null && onBlurValidatorProp !== void 0 ? onBlurValidatorProp : bankAccountNumberValidator;
  const mask = useMemo(() => getMask(bankAccountType, omitMask, maskValue), [bankAccountType, omitMask, maskValue]);
  const onBlurValidatorToUse = onBlurValidator === false ? undefined : onBlurValidator;
  const stringFieldProps = {
    ...restProps,
    className: 'dnb-forms-field-bank-account-number',
    label,
    errorMessages,
    mask,
    value,
    defaultValue,
    fromInput,
    onChange: handleChange,
    onBlur: handleBlur,
    width: width !== null && width !== void 0 ? width : getWidth(bankAccountType),
    inputMode: getInputMode(bankAccountType),
    onChangeValidator: validate ? onChangeValidator : undefined,
    onBlurValidator: validate ? onBlurValidatorToUse : undefined,
    exportValidators: {
      bankAccountNumberValidator
    }
  };
  return _jsx(StringField, {
    ...stringFieldProps
  });
}
withComponentMarkers(BankAccountNumber, {
  _supportsSpacingProps: true
});
export default BankAccountNumber;
//# sourceMappingURL=BankAccountNumber.js.map