@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
203 lines (202 loc) • 7.43 kB
JavaScript
"use client";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["id", "label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "inputMode", "suffix", "onBlur", "onFocus"],
_excluded2 = ["id"],
_excluded3 = ["id", "inputId", "label", "value", "mask", "placeholderCharacter", "delimiter", "disabled", "getInputRef", "onKeyDown", "onChange", "onBlur", "onFocus"],
_excluded4 = ["target"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useRef } from 'react';
import Input from '../Input';
import TextMask from './TextMask';
import useHandleCursorPosition from './hooks/useHandleCursorPosition';
import classnames from 'classnames';
import FormLabel from '../FormLabel';
import { createSpacingClasses } from '../space/SpacingHelper';
import { useMultiInputValue } from './hooks/useMultiInputValues';
import useId from '../../shared/helpers/useId';
function MultiInputMask(_ref) {
var _inputs$;
let {
id,
label,
labelDirection = 'horizontal',
inputs,
delimiter,
onChange: onChangeExternal,
disabled,
status,
statusState,
values: defaultValues,
className,
stretch,
inputMode,
suffix,
onBlur,
onFocus
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
id = useId(id);
const [values, onChange] = useMultiInputValue({
inputs,
defaultValues,
callback: onChangeExternal
});
const inputRefs = useRef([]);
const areInputsInFocus = useRef(false);
const {
onKeyDown
} = useHandleCursorPosition(inputRefs.current, getKeysToHandle());
const WrapperElement = label ? 'fieldset' : 'div';
return React.createElement(WrapperElement, {
className: classnames('dnb-multi-input-mask__fieldset', createSpacingClasses(props), labelDirection === 'horizontal' && 'dnb-multi-input-mask__fieldset--horizontal')
}, React.createElement(Input, _extends({}, props, {
id: id,
label: label && React.createElement(FormLabel, {
element: "legend",
forId: `${id}-${(_inputs$ = inputs[0]) === null || _inputs$ === void 0 ? void 0 : _inputs$.id}`,
disabled: disabled,
labelDirection: labelDirection,
onClick: onLegendClick
}, label),
className: classnames('dnb-multi-input-mask', className),
label_direction: labelDirection,
disabled: disabled,
status: status,
status_state: statusState,
suffix: suffix,
stretch: stretch,
input_element: inputs.map((_ref2, index) => {
let {
id: inputId
} = _ref2,
rest = _objectWithoutProperties(_ref2, _excluded2);
return React.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 ? void 0 : onFocus(values);
}
areInputsInFocus.current = true;
},
onBlur: e => {
var _e$relatedTarget, _e$relatedTarget$id;
if (!((_e$relatedTarget = e.relatedTarget) !== null && _e$relatedTarget !== void 0 && (_e$relatedTarget$id = _e$relatedTarget.id) !== null && _e$relatedTarget$id !== void 0 && _e$relatedTarget$id.includes(id))) {
onBlur === null || onBlur === void 0 ? 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)) {
inputRefs.current.push(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(_ref3) {
let {
id,
inputId,
label,
value,
mask,
placeholderCharacter,
delimiter,
disabled,
getInputRef,
onKeyDown,
onChange,
onBlur,
onFocus
} = _ref3,
attributes = _objectWithoutProperties(_ref3, _excluded3);
const shouldHighlight = !disabled && /\w+/.test(value);
return React.createElement(React.Fragment, null, React.createElement(TextMask, _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: _ref4 => {
let {
target
} = _ref4,
event = _objectWithoutProperties(_ref4, _excluded4);
target.focus();
target.select();
if (onFocus) {
onFocus(_objectSpread({
target
}, event));
}
},
onChange: event => {
onChange(inputId, removePlaceholder(event.target.value, placeholderCharacter));
}
}, attributes)), delimiter && React.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'), '');
}
export default MultiInputMask;
MultiInputMask._formElement = true;
MultiInputMask._supportsSpacingProps = true;
//# sourceMappingURL=MultiInputMask.js.map