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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _index = _interopRequireDefault(require("../String/index.js"));
var _useTranslation = _interopRequireDefault(require("../../hooks/useTranslation.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../../../shared/helpers/withComponentMarkers.js"));
var _validators = require("./validators.js");
var _masks = require("./masks.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function BankAccountNumber(props) {
  const translations = (0, _useTranslation.default)().BankAccountNumber;
  const {
    validate = true,
    omitMask = false,
    bankAccountType = 'norwegianBban',
    onChangeValidator,
    onBlurValidator: onBlurValidatorProp,
    label: labelProp,
    width,
    value,
    defaultValue,
    onChange: onChangeProp,
    onBlur: onBlurProp,
    ...restProps
  } = props;
  const valueRef = (0, _react.useRef)(value !== null && value !== void 0 ? value : defaultValue);
  const [maskValue, setMaskValue] = (0, _react.useState)(value !== null && value !== void 0 ? value : defaultValue);
  (0, _react.useEffect)(() => {
    if (value !== undefined && (0, _masks.hasVariableMask)(bankAccountType)) {
      setMaskValue(value);
    }
  }, [value, bankAccountType]);
  const cleanValue = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(newValue => {
    valueRef.current = newValue;
    onChangeProp === null || onChangeProp === void 0 || onChangeProp(newValue);
  }, [onChangeProp]);
  const handleBlur = (0, _react.useCallback)((...args) => {
    if ((0, _masks.hasVariableMask)(bankAccountType)) {
      setMaskValue(valueRef.current);
    }
    onBlurProp === null || onBlurProp === void 0 || onBlurProp(...args);
  }, [bankAccountType, onBlurProp]);
  const label = (0, _react.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 = (0, _react.useMemo)(() => {
    return {
      'Field.errorRequired': translations.errorRequired,
      'Field.errorPattern': translations.errorBankAccountNumber,
      ...props.errorMessages
    };
  }, [translations.errorRequired, translations.errorBankAccountNumber, props.errorMessages]);
  const bankAccountNumberValidator = (0, _react.useCallback)(value => {
    if (bankAccountType !== 'norwegianBban') {
      return undefined;
    }
    return (0, _validators.norwegianBbanValidator)(value, {
      errorBankAccountNumber: translations.errorBankAccountNumber,
      errorBankAccountNumberLength: translations.errorBankAccountNumberLength
    });
  }, [bankAccountType, translations]);
  const onBlurValidator = onBlurValidatorProp !== null && onBlurValidatorProp !== void 0 ? onBlurValidatorProp : bankAccountNumberValidator;
  const mask = (0, _react.useMemo)(() => (0, _masks.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 : (0, _masks.getWidth)(bankAccountType),
    inputMode: (0, _masks.getInputMode)(bankAccountType),
    onChangeValidator: validate ? onChangeValidator : undefined,
    onBlurValidator: validate ? onBlurValidatorToUse : undefined,
    exportValidators: {
      bankAccountNumberValidator
    }
  };
  return (0, _jsxRuntime.jsx)(_index.default, {
    ...stringFieldProps
  });
}
(0, _withComponentMarkers.default)(BankAccountNumber, {
  _supportsSpacingProps: true
});
var _default = exports.default = BankAccountNumber;
//# sourceMappingURL=BankAccountNumber.js.map