@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
217 lines (216 loc) • 10.2 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/es.string.replace.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _Input = _interopRequireDefault(require("../Input"));
var _TextMask = _interopRequireDefault(require("./TextMask"));
var _useHandleCursorPosition = _interopRequireDefault(require("./hooks/useHandleCursorPosition"));
var _classnames = _interopRequireDefault(require("classnames"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _SpacingHelper = require("../space/SpacingHelper");
var _useMultiInputValues = require("./hooks/useMultiInputValues");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId"));
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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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 = (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((_ref2, index) => {
let {
id: inputId
} = _ref2,
rest = _objectWithoutProperties(_ref2, _excluded2);
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 ? 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, _ref3) => {
let {
id,
mask
} = _ref3;
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(_ref4) {
let {
id,
inputId,
label,
value,
mask,
placeholderCharacter,
delimiter,
disabled,
getInputRef,
onKeyDown,
onChange,
onBlur,
onFocus
} = _ref4,
attributes = _objectWithoutProperties(_ref4, _excluded3);
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: _ref5 => {
let {
target
} = _ref5,
event = _objectWithoutProperties(_ref5, _excluded4);
target.focus();
target.select();
if (onFocus) {
onFocus(_objectSpread({
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