@dnb/eufemia/cjs/components/input-masked/MultiInputMask.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireWildcard(require("react"));
var _Input = _interopRequireDefault(require("../Input.js"));
var _TextMask = _interopRequireDefault(require("./TextMask.js"));
var _useHandleCursorPosition = _interopRequireDefault(require("./hooks/useHandleCursorPosition.js"));
var _classnames = _interopRequireDefault(require("classnames"));
var _FormLabel = _interopRequireDefault(require("../FormLabel.js"));
var _SpacingHelper = require("../space/SpacingHelper.js");
var _useMultiInputValues = require("./hooks/useMultiInputValues.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function MultiInputMask({
  id,
  label,
  labelDirection = 'horizontal',
  inputs,
  delimiter,
  onChange: onChangeExternal,
  disabled,
  status,
  statusState,
  values: defaultValues,
  className,
  stretch,
  inputMode,
  suffix,
  onBlur,
  onFocus,
  ...props
}) {
  var _inputs$;
  id = (0, _useId.default)(id);
  const [values, onChange] = (0, _useMultiInputValues.useMultiInputValue)({
    inputs,
    defaultValues,
    callback: onChangeExternal
  });
  const inputRefs = (0, _react.useRef)([]);
  const areInputsInFocus = (0, _react.useRef)(false);
  const {
    onKeyDown
  } = (0, _useHandleCursorPosition.default)(inputRefs.current, getKeysToHandle());
  const WrapperElement = label ? 'fieldset' : 'div';
  return _react.default.createElement(WrapperElement, {
    className: (0, _classnames.default)('dnb-multi-input-mask__fieldset', (0, _SpacingHelper.createSpacingClasses)(props), labelDirection === 'horizontal' && 'dnb-multi-input-mask__fieldset--horizontal')
  }, _react.default.createElement(_Input.default, _extends({}, props, {
    id: id,
    label: label && _react.default.createElement(_FormLabel.default, {
      element: "legend",
      forId: `${id}-${(_inputs$ = inputs[0]) === null || _inputs$ === void 0 ? void 0 : _inputs$.id}`,
      disabled: disabled,
      labelDirection: labelDirection,
      onClick: onLegendClick
    }, label),
    className: (0, _classnames.default)('dnb-multi-input-mask', className),
    label_direction: labelDirection,
    disabled: disabled,
    status: status,
    status_state: statusState,
    suffix: suffix,
    stretch: stretch,
    input_element: inputs.map(({
      id: inputId,
      ...rest
    }, index) => {
      return _react.default.createElement(MultiInputMaskInput, _extends({
        key: inputId,
        id: id,
        inputId: inputId,
        delimiter: index !== inputs.length - 1 ? delimiter : undefined,
        disabled: disabled,
        inputMode: inputMode,
        onKeyDown: onKeyDown,
        onChange: onChange,
        onFocus: () => {
          if (!areInputsInFocus.current) {
            onFocus === null || onFocus === void 0 || onFocus(values);
          }
          areInputsInFocus.current = true;
        },
        onBlur: e => {
          var _e$relatedTarget;
          if (!((_e$relatedTarget = e.relatedTarget) !== null && _e$relatedTarget !== void 0 && (_e$relatedTarget = _e$relatedTarget.id) !== null && _e$relatedTarget !== void 0 && _e$relatedTarget.includes(id))) {
            onBlur === null || onBlur === void 0 || onBlur(values);
            areInputsInFocus.current = false;
          }
        },
        getInputRef: getInputRef
      }, rest, {
        value: values[inputId]
      }));
    })
  })));
  function onLegendClick() {
    if (disabled) {
      return;
    }
    const firstInput = inputRefs.current[0].current;
    firstInput.focus();
    firstInput.setSelectionRange(0, 0);
  }
  function getInputRef(ref) {
    const inputRef = ref === null || ref === void 0 ? void 0 : ref.inputRef;
    if (inputRef && !inputRefs.current.includes(inputRef)) {
      var _context;
      (0, _push.default)(_context = inputRefs.current).call(_context, inputRef);
    }
    return inputRef;
  }
  function getKeysToHandle() {
    const uniqueMasks = getUniqueMasks();
    if (uniqueMasks.size === 1) {
      const pattern = uniqueMasks.values().next().value.replace(/\//g, '');
      return new RegExp(pattern);
    }
    return inputs.reduce((keys, {
      id,
      mask
    }) => {
      keys[id] = mask;
      return keys;
    }, {});
  }
  function getUniqueMasks() {
    const masks = new Set();
    inputs.forEach(input => {
      input.mask.forEach(pattern => masks.add(String(pattern)));
    });
    return masks;
  }
}
function MultiInputMaskInput({
  id,
  inputId,
  label,
  value,
  mask,
  placeholderCharacter,
  delimiter,
  disabled,
  getInputRef,
  onKeyDown,
  onChange,
  onBlur,
  onFocus,
  ...attributes
}) {
  const shouldHighlight = !disabled && /\w+/.test(value);
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_TextMask.default, _extends({
    id: `${id}-${inputId}`,
    "data-mask-id": inputId,
    className: "dnb-input__input dnb-multi-input-mask__input" + (shouldHighlight ? " dnb-multi-input-mask__input--highlight" : ""),
    disabled: disabled,
    size: mask.length,
    mask: mask,
    value: value !== null && value !== void 0 ? value : '',
    placeholderChar: placeholderCharacter,
    guide: true,
    showMask: true,
    keepCharPositions: false,
    "aria-label": label,
    ref: getInputRef,
    onKeyDown: onKeyDown,
    onBlur: onBlur,
    onFocus: ({
      target,
      ...event
    }) => {
      target.focus();
      target.select();
      if (onFocus) {
        onFocus({
          target,
          ...event
        });
      }
    },
    onChange: event => {
      onChange(inputId, removePlaceholder(event.target.value, placeholderCharacter));
    }
  }, attributes)), delimiter && _react.default.createElement("span", {
    "aria-hidden": true,
    className: 'dnb-multi-input-mask__delimiter' + (shouldHighlight ? " dnb-multi-input-mask__delimiter--highlight" : "")
  }, delimiter));
}
function removePlaceholder(value, placeholder) {
  return value.replace(RegExp(placeholder, 'gm'), '');
}
var _default = exports.default = MultiInputMask;
MultiInputMask._formElement = true;
MultiInputMask._supportsSpacingProps = true;
//# sourceMappingURL=MultiInputMask.js.map