@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
417 lines (416 loc) • 15.4 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useTranslation = exports.useNumberMask = exports.useMaskParams = exports.useMask = exports.useLocalValue = exports.useInputElement = exports.useFilteredProps = exports.useEventMapping = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _NumberUtils = require("../number-format/NumberUtils.js");
var _componentHelper = require("../../shared/component-helper.js");
var _createTextMaskInputElement = require("./text-mask/createTextMaskInputElement.js");
var _utilities = require("./text-mask/utilities.js");
var _TextMask = _interopRequireDefault(require("./TextMask.js"));
var _createNumberMask = _interopRequireDefault(require("./addons/createNumberMask.js"));
var _InputMaskedContext = _interopRequireDefault(require("./InputMaskedContext.js"));
var _InputMaskedUtils = require("./InputMaskedUtils.js");
var _useIsomorphicLayoutEffect = require("../../shared/helpers/useIsomorphicLayoutEffect.js");
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 _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); }
const NUMBER_MINUS = '-|−|‐|‒|–|—|―';
const useFilteredProps = () => {
const {
props
} = _react.default.useContext(_InputMaskedContext.default);
const {
mask,
number_mask,
currency_mask,
number_format,
mask_options,
as_currency,
as_number,
as_percent,
locale,
show_mask,
show_guide,
pipe,
keep_char_positions,
placeholder_char,
...attributes
} = props;
return {
props,
htmlAttributes: Object.freeze(attributes)
};
};
exports.useFilteredProps = useFilteredProps;
const useTranslation = () => {
const {
props,
context
} = _react.default.useContext(_InputMaskedContext.default);
let {
locale
} = props;
if (!locale && context !== null && context !== void 0 && context.locale) {
locale = context.locale;
}
return locale;
};
exports.useTranslation = useTranslation;
const useLocalValue = () => {
const {
props,
context
} = _react.default.useContext(_InputMaskedContext.default);
const maskParams = useNumberMaskParams() || {};
const locale = useTranslation();
const [localValue, setLocalValue] = _react.default.useState(() => {
return (0, _InputMaskedUtils.correctNumberValue)({
locale,
props,
maskParams
});
});
_react.default.useEffect(() => {
const value = (0, _InputMaskedUtils.correctNumberValue)({
localValue,
locale,
props,
maskParams
});
setLocalValue(value);
}, [props, context, locale]);
return {
localValue,
setLocalValue
};
};
exports.useLocalValue = useLocalValue;
const useNumberMask = () => {
const maskParams = useNumberMaskParams();
const {
props
} = _react.default.useContext(_InputMaskedContext.default);
if (!maskParams || !(0, _InputMaskedUtils.isRequestingNumberMask)(props)) {
return null;
}
const mask = (0, _createNumberMask.default)(maskParams);
mask.maskParams = maskParams;
return mask;
};
exports.useNumberMask = useNumberMask;
const useMask = () => {
const {
props
} = _react.default.useContext(_InputMaskedContext.default);
const numberMask = useNumberMask();
if (numberMask) {
return numberMask;
}
return props.mask;
};
exports.useMask = useMask;
const useMaskParams = () => {
const {
props
} = _react.default.useContext(_InputMaskedContext.default);
const {
keep_char_positions,
show_guide,
show_mask,
placeholder_char,
placeholder
} = props;
const mask = useMask();
const maskParams = useNumberMaskParams() || {};
maskParams.showMask = !placeholder && (0, _componentHelper.isTrue)(show_mask);
maskParams.placeholderChar = placeholder_char;
if (typeof (mask === null || mask === void 0 ? void 0 : mask.placeholderChar) !== 'undefined') {
maskParams.placeholderChar = mask.placeholderChar;
}
if (maskParams.placeholderChar === null) {
maskParams.placeholderChar = _InputMaskedUtils.invisibleSpace;
}
if (typeof (mask === null || mask === void 0 ? void 0 : mask.showMask) !== 'undefined') {
maskParams.showMask = mask.showMask;
}
maskParams.showGuide = (0, _componentHelper.isTrue)(show_guide);
maskParams.keepCharPositions = (0, _componentHelper.isTrue)(keep_char_positions);
return maskParams;
};
exports.useMaskParams = useMaskParams;
const useInputElement = () => {
const {
props
} = _react.default.useContext(_InputMaskedContext.default);
const {
pipe,
inner_ref
} = props;
const mask = useMask();
const {
showMask,
showGuide,
placeholderChar,
keepCharPositions
} = useMaskParams();
const isFn = typeof inner_ref === 'function';
const refHook = _react.default.useRef(null);
const ref = !isFn && inner_ref || refHook;
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
if (isFn) {
inner_ref === null || inner_ref === void 0 || inner_ref(ref.current);
}
}, [inner_ref, isFn, ref]);
const inputElementRef = _react.default.useRef(_react.default.createElement("input", {
ref: ref
}));
return (0, _react.useCallback)((params, innerRef) => {
innerRef.current = ref.current;
return _react.default.createElement(_TextMask.default, _extends({
inputRef: ref,
inputElement: inputElementRef.current,
pipe: pipe,
mask: mask || (0, _createNumberMask.default)(),
showMask: showMask,
guide: showGuide,
keepCharPositions: keepCharPositions,
placeholderChar: placeholderChar
}, (0, _InputMaskedUtils.getSoftKeyboardAttributes)(mask) || {}, params, {
className: (0, _classnames.default)(params.className, showMask && showGuide && placeholderChar && placeholderChar !== _InputMaskedUtils.invisibleSpace && 'dnb-input-masked--guide')
}));
}, [keepCharPositions, mask, pipe, placeholderChar, ref, showGuide, showMask]);
};
exports.useInputElement = useInputElement;
const useEventMapping = ({
setLocalValue
}) => {
const callEvent = useCallEvent({
setLocalValue
});
return {
onBeforeInput: event => callEvent({
event
}, 'onBeforeInput'),
onInput: event => callEvent({
event
}, 'onInput'),
onFocus: params => callEvent(params, 'on_focus'),
onBlur: params => callEvent(params, 'on_blur'),
onMouseUp: event => callEvent({
event
}, 'on_mouse_up'),
onMouseDown: event => callEvent({
event
}, 'on_mouse_down'),
onKeyDown: params => callEvent(params, 'on_key_down'),
onSubmit: params => callEvent(params, 'on_submit'),
onChange: params => callEvent(params, 'on_change'),
on_focus: undefined,
on_blur: undefined,
on_key_down: undefined,
on_submit: undefined,
on_change: undefined
};
};
exports.useEventMapping = useEventMapping;
const useCallEvent = ({
setLocalValue
}) => {
const maskParamsRef = _react.default.useRef(null);
maskParamsRef.current = useMaskParams();
const {
props
} = _react.default.useContext(_InputMaskedContext.default);
const isNumberMask = useNumberMask();
const decimalSeparators = /[,.'·]/;
let isUnidentified = false;
const callEvent = ({
event,
value
}, name) => {
const maskParams = maskParamsRef.current;
value = value || event.target.value;
const selStart = event.target.selectionStart;
let keyCode = (0, _componentHelper.keycode)(event);
if (name === 'on_key_down' && (event.which === 229 || keyCode === undefined)) {
isUnidentified = true;
}
if (isUnidentified && name === 'onBeforeInput' && typeof (event === null || event === void 0 ? void 0 : event.data) !== 'undefined') {
name = 'on_key_down';
keyCode = event.data;
isUnidentified = false;
}
if (isUnidentified && event.key === '0') {
keyCode = '0';
isUnidentified = false;
}
if (maskParams !== null && maskParams !== void 0 && maskParams.disallowLeadingZeroes && (name === 'onInput' || name === 'on_blur')) {
const isNegative = new RegExp(`^${NUMBER_MINUS}`, 'g').test(value);
if ((isNegative ? selStart > 1 : selStart > 0) || name === 'on_blur') {
const onlyNumber = value.replace(new RegExp(`[^\\d${maskParams.decimalSymbol}]`, 'g'), '');
let leadingZeroes = 0;
for (let i = 0; i < onlyNumber.length - 1; i++) {
if (onlyNumber.charAt(i) === '0' && onlyNumber.charAt(i + 1) !== maskParams.decimalSymbol) {
leadingZeroes++;
} else {
break;
}
}
let newSelStart = selStart;
let newValue = value;
let firstNumberIndex = 0;
if (leadingZeroes > 0) {
for (let i = 0; i < value.length; i++) {
firstNumberIndex = i;
const char = value.charAt(i);
if (char !== '0' && (0, _utilities.isNumber)(parseInt(char)) || value.charAt(i + 1) === maskParams.decimalSymbol) {
break;
}
}
newValue = value.substring(0, isNegative ? 1 : 0) + value.substring(firstNumberIndex);
newSelStart = selStart > firstNumberIndex ? selStart - (value.length - newValue.length) : isNegative ? 1 : 0;
}
if (newValue !== value) {
setLocalValue(newValue);
event.target.value = newValue;
(0, _createTextMaskInputElement.safeSetSelection)(event.target, newSelStart);
value = newValue;
}
}
}
if (name === 'on_key_down' && isNumberMask && !isUnidentified && maskParams !== null && maskParams !== void 0 && maskParams.decimalSymbol) {
const hasDecimalSymbol = value.includes(maskParams.decimalSymbol);
const allowedDecimals = maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false;
if (!allowedDecimals && decimalSeparators.test(keyCode)) {
event.preventDefault();
}
const charAtSelection = value.slice(selStart, selStart + 1);
if (allowedDecimals) {
if (hasDecimalSymbol && decimalSeparators.test(keyCode)) {
if (decimalSeparators.test(charAtSelection)) {
const index = value.indexOf(maskParams.decimalSymbol);
if (index > -1) {
(0, _createTextMaskInputElement.safeSetSelection)(event.target, index + 1);
}
}
event.preventDefault();
} else if (!hasDecimalSymbol && keyCode !== maskParams.decimalSymbol && decimalSeparators.test(keyCode)) {
value = value.slice(0, selStart);
setLocalValue(value + maskParams.decimalSymbol);
event.target.value = value + maskParams.decimalSymbol;
event.preventDefault();
}
}
if (keyCode === 'delete' && charAtSelection === (maskParams.thousandsSeparatorSymbol || ' ')) {
(0, _createTextMaskInputElement.safeSetSelection)(event.target, selStart + 1);
event.preventDefault();
}
}
let num = (0, _NumberUtils.cleanNumber)(value, {
prefix: maskParams.prefix,
suffix: maskParams.suffix,
decimalSeparator: maskParams.decimalSymbol || ',',
thousandsSeparator: maskParams.thousandsSeparatorSymbol || ' '
});
if (num === '-') {
num = -0;
}
const numberValue = Number(num);
const cleanedValue = numberValue === 0 && String(num).charAt(0) !== '0' ? '' : num;
switch (name) {
case 'on_focus':
case 'on_key_down':
case 'on_mouse_down':
case 'on_mouse_up':
event.target.runCorrectCaretPosition = () => (0, _InputMaskedUtils.correctCaretPosition)(event.target, maskParamsRef, props);
if (!event.target.__getCorrectCaretPosition) {
event.target.runCorrectCaretPosition();
}
break;
}
const result = (0, _componentHelper.dispatchCustomElementEvent)(props, name, {
event,
value,
numberValue,
cleanedValue
});
if (name === 'on_change') {
setLocalValue(value);
}
return result;
};
return callEvent;
};
const useNumberMaskParams = () => {
var _currency_mask;
const {
props
} = _react.default.useContext(_InputMaskedContext.default);
const locale = useTranslation();
if (!(0, _InputMaskedUtils.isRequestingNumberMask)(props)) {
return {
...(0, _InputMaskedUtils.fromJSON)(props.mask_options)
};
}
let {
number_mask,
currency_mask,
mask_options
} = props;
const {
as_number,
as_percent,
as_currency,
value
} = props;
mask_options = (0, _InputMaskedUtils.fromJSON)(mask_options);
number_mask = (0, _componentHelper.isTrue)(number_mask) ? {} : (0, _InputMaskedUtils.fromJSON)(number_mask);
currency_mask = (0, _componentHelper.isTrue)(currency_mask) ? {} : (0, _InputMaskedUtils.fromJSON)(currency_mask, {
currency: currency_mask
});
if (!((_currency_mask = currency_mask) !== null && _currency_mask !== void 0 && _currency_mask.currency)) {
delete currency_mask.currency;
}
if ((0, _InputMaskedUtils.isRequestingLocaleSupport)(props)) {
const thousandsSeparatorSymbol = (0, _InputMaskedUtils.handleThousandsSeparator)(locale);
const decimalSymbol = (0, _InputMaskedUtils.handleDecimalSeparator)(locale);
if ((0, _componentHelper.isTrue)(as_number) || (0, _componentHelper.isTrue)(as_percent)) {
number_mask = (0, _componentHelper.extendPropsWithContext)(number_mask, null, {
decimalSymbol,
thousandsSeparatorSymbol
});
} else if (as_currency) {
var _currency_mask2;
currency_mask = (0, _componentHelper.extendPropsWithContext)(currency_mask, null, {
decimalSymbol,
thousandsSeparatorSymbol,
currency: (0, _NumberUtils.getCurrencySymbol)(locale, typeof as_currency === 'string' ? as_currency : null, (_currency_mask2 = currency_mask) === null || _currency_mask2 === void 0 ? void 0 : _currency_mask2.currencyDisplay, value)
});
}
}
let maskParams = null;
if (number_mask) {
maskParams = (0, _InputMaskedUtils.handleNumberMask)({
mask_options,
number_mask
});
if ((0, _componentHelper.isTrue)(as_percent)) {
maskParams = (0, _InputMaskedUtils.handlePercentMask)({
props,
locale,
maskParams
});
}
} else if (currency_mask) {
maskParams = (0, _InputMaskedUtils.handleCurrencyMask)({
mask_options,
currency_mask
});
}
return maskParams;
};
//# sourceMappingURL=InputMaskedHooks.js.map