@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
370 lines • 12.9 kB
JavaScript
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 = ["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"];
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, { useCallback } from 'react';
import classnames from 'classnames';
import { cleanNumber, getCurrencySymbol } from '../number-format/NumberUtils';
import { isTrue, dispatchCustomElementEvent, extendPropsWithContext, keycode } from '../../shared/component-helper';
import { safeSetSelection } from './text-mask/createTextMaskInputElement';
import TextMask from './TextMask';
import createNumberMask from './addons/createNumberMask';
import InputMaskedContext from './InputMaskedContext';
import { isRequestingLocaleSupport, isRequestingNumberMask, correctNumberValue, handlePercentMask, handleCurrencyMask, handleNumberMask, correctCaretPosition, getSoftKeyboardAttributes, handleThousandsSeparator, handleDecimalSeparator, fromJSON, invisibleSpace } from './InputMaskedUtils';
const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
export const useFilteredProps = () => {
const {
props
} = React.useContext(InputMaskedContext);
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
} = props,
attributes = _objectWithoutProperties(props, _excluded);
return {
props,
htmlAttributes: Object.freeze(attributes)
};
};
export const useTranslation = () => {
const {
props,
context
} = React.useContext(InputMaskedContext);
let {
locale
} = props;
if (!locale && context !== null && context !== void 0 && context.locale) {
locale = context.locale;
}
return locale;
};
export const useLocalValue = () => {
const {
props,
context
} = React.useContext(InputMaskedContext);
const maskParams = useNumberMaskParams() || {};
const locale = useTranslation();
const [localValue, setLocalValue] = React.useState(() => {
return correctNumberValue({
locale,
props,
maskParams
});
});
React.useEffect(() => {
const value = correctNumberValue({
localValue,
locale,
props,
maskParams
});
setLocalValue(value);
}, [props, context, locale]);
return {
localValue,
setLocalValue
};
};
export const useNumberMask = () => {
const maskParams = useNumberMaskParams();
const {
props
} = React.useContext(InputMaskedContext);
if (!maskParams || !isRequestingNumberMask(props)) {
return null;
}
const mask = createNumberMask(maskParams);
mask.maskParams = maskParams;
return mask;
};
export const useMask = () => {
const {
props
} = React.useContext(InputMaskedContext);
const numberMask = useNumberMask();
if (numberMask) {
return numberMask;
}
return props.mask;
};
export const useMaskParams = () => {
const {
props
} = React.useContext(InputMaskedContext);
const {
keep_char_positions,
show_guide,
show_mask,
placeholder_char,
placeholder
} = props;
const mask = useMask();
const maskParams = useNumberMaskParams() || {};
maskParams.showMask = !placeholder && 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 = invisibleSpace;
}
if (typeof (mask === null || mask === void 0 ? void 0 : mask.showMask) !== 'undefined') {
maskParams.showMask = mask.showMask;
}
maskParams.showGuide = isTrue(show_guide);
maskParams.keepCharPositions = isTrue(keep_char_positions);
return maskParams;
};
export const useInputElement = () => {
const {
props
} = React.useContext(InputMaskedContext);
const {
pipe,
inner_ref
} = props;
const mask = useMask();
const {
showMask,
showGuide,
placeholderChar,
keepCharPositions
} = useMaskParams();
const isFn = typeof inner_ref === 'function';
const refHook = React.useRef();
const ref = !isFn && inner_ref || refHook;
useLayoutEffect(() => {
if (isFn) {
inner_ref === null || inner_ref === void 0 ? void 0 : inner_ref(ref.current);
}
}, [inner_ref, isFn, ref]);
const inputElementRef = React.useRef(React.createElement("input", {
ref: ref
}));
return useCallback((params, innerRef) => {
innerRef.current = ref.current;
return React.createElement(TextMask, _extends({
inputRef: ref,
inputElement: inputElementRef.current,
pipe: pipe,
mask: mask || createNumberMask(),
showMask: showMask,
guide: showGuide,
keepCharPositions: keepCharPositions,
placeholderChar: placeholderChar
}, getSoftKeyboardAttributes(mask), params, {
className: classnames(params.className, showMask && showGuide && placeholderChar && placeholderChar !== invisibleSpace && 'dnb-input-masked--guide')
}));
}, [keepCharPositions, mask, pipe, placeholderChar, ref, showGuide, showMask]);
};
export const useEventMapping = ({
setLocalValue
}) => {
const callEvent = useCallEvent({
setLocalValue
});
return {
onBeforeInput: event => callEvent({
event
}, 'on_before_input'),
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
};
};
const useCallEvent = ({
setLocalValue
}) => {
const maskParamsRef = React.useRef();
maskParamsRef.current = useMaskParams();
const {
props
} = React.useContext(InputMaskedContext);
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 = keycode(event);
if (name === 'on_key_down' && (event.which === 229 || keyCode === undefined)) {
isUnidentified = true;
}
if (isUnidentified && name === 'on_before_input' && 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 (name === 'on_key_down' && !isUnidentified && maskParams !== null && maskParams !== void 0 && maskParams.disallowLeadingZeroes && (keyCode === '0' || keyCode === 'numpad 0' || value.replace(/[^\d]/g, '') === '' && decimalSeparators.test(keyCode))) {
const testValue = (value.slice(0, selStart) + '0' + value.slice(selStart + 1, value.length)).replace(/[^\d]/g, '');
if (/^0/.test(testValue)) {
event.preventDefault();
}
}
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) {
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 || ' ')) {
safeSetSelection(event.target, selStart + 1);
event.preventDefault();
}
}
let num = 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 = () => correctCaretPosition(event.target, maskParamsRef, props);
if (!event.target.__getCorrectCaretPosition) {
event.target.runCorrectCaretPosition();
}
break;
}
const result = 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.useContext(InputMaskedContext);
const locale = useTranslation();
if (!isRequestingNumberMask(props)) {
return _objectSpread({}, fromJSON(props.mask_options));
}
let {
number_mask,
currency_mask,
mask_options
} = props;
const {
as_number,
as_percent,
as_currency,
value
} = props;
mask_options = fromJSON(mask_options);
number_mask = isTrue(number_mask) ? {} : fromJSON(number_mask);
currency_mask = isTrue(currency_mask) ? {} : fromJSON(currency_mask, {
currency: currency_mask
});
if (!((_currency_mask = currency_mask) !== null && _currency_mask !== void 0 && _currency_mask.currency)) {
delete currency_mask.currency;
}
if (isRequestingLocaleSupport(props)) {
const thousandsSeparatorSymbol = handleThousandsSeparator(locale);
const decimalSymbol = handleDecimalSeparator(locale);
if (isTrue(as_number) || isTrue(as_percent)) {
number_mask = extendPropsWithContext(number_mask, null, {
decimalSymbol,
thousandsSeparatorSymbol
});
} else if (as_currency) {
var _currency_mask2;
currency_mask = extendPropsWithContext(currency_mask, null, {
decimalSymbol,
thousandsSeparatorSymbol,
currency: 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 = handleNumberMask({
mask_options,
number_mask
});
if (isTrue(as_percent)) {
maskParams = handlePercentMask({
props,
locale,
maskParams
});
}
} else if (currency_mask) {
maskParams = handleCurrencyMask({
mask_options,
currency_mask
});
}
return maskParams;
};
//# sourceMappingURL=InputMaskedHooks.js.map