@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
395 lines (394 loc) • 16.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useTranslation = exports.useNumberMask = exports.useMaskParams = exports.useMask = exports.useLocalValue = exports.useInputElement = exports.useFilteredProps = exports.useEventMapping = 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 _classnames = _interopRequireDefault(require("classnames"));
var _NumberUtils = require("../number-format/NumberUtils");
var _componentHelper = require("../../shared/component-helper");
var _createTextMaskInputElement = require("./text-mask/createTextMaskInputElement");
var _TextMask = _interopRequireDefault(require("./TextMask"));
var _createNumberMask = _interopRequireDefault(require("./addons/createNumberMask"));
var _InputMaskedContext = _interopRequireDefault(require("./InputMaskedContext"));
var _InputMaskedUtils = require("./InputMaskedUtils");
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 _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; }
const useLayoutEffect = typeof window === 'undefined' ? _react.default.useEffect : _react.default.useLayoutEffect;
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
} = props,
attributes = _objectWithoutProperties(props, _excluded);
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();
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.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 = _ref => {
let {
setLocalValue
} = _ref;
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
};
};
exports.useEventMapping = useEventMapping;
const useCallEvent = _ref2 => {
let {
setLocalValue
} = _ref2;
const maskParamsRef = _react.default.useRef();
maskParamsRef.current = useMaskParams();
const {
props
} = _react.default.useContext(_InputMaskedContext.default);
const isNumberMask = useNumberMask();
const decimalSeparators = /[,.'·]/;
let isUnidentified = false;
const callEvent = (_ref3, name) => {
let {
event,
value
} = _ref3;
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 === '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) {
(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 _objectSpread({}, (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