@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
243 lines (241 loc) • 9.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactCompilerRuntime = require("react-compiler-runtime");
var _react = _interopRequireWildcard(require("react"));
var _numberInput = require("../../constants/numberInput");
var _numberInput2 = require("../../utils/numberInput");
var _Input = _interopRequireDefault(require("../input/Input"));
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); }
const NumberInput = t0 => {
"use memo";
const $ = (0, _reactCompilerRuntime.c)(42);
const {
isDecimalInput,
isMoneyInput,
isTimeInput,
isInvalid,
maxNumber: t1,
value,
shouldTriggerChangeOnFormat: t2,
placeholder,
onBlur,
isDisabled,
onChange,
shouldShowOnlyBottomBorder,
minNumber: t3,
shouldEnableKeyboardHighlighting
} = t0;
const maxNumber = t1 === undefined ? Infinity : t1;
const shouldTriggerChangeOnFormat = t2 === undefined ? true : t2;
const minNumber = t3 === undefined ? -Infinity : t3;
const [plainText, setPlainText] = (0, _react.useState)("");
const [formattedValue, setFormattedValue] = (0, _react.useState)("");
const [hasFocus, setHasFocus] = (0, _react.useState)(false);
const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = (0, _react.useState)(false);
const [isValueInvalid, setIsValueInvalid] = (0, _react.useState)(false);
const localPlaceholder = placeholder ?? (isMoneyInput ? "\u20AC" : undefined);
const initialInputRef = (0, _react.useRef)(true);
let t4;
if ($[0] !== isDecimalInput || $[1] !== isMoneyInput || $[2] !== isTimeInput || $[3] !== maxNumber || $[4] !== minNumber || $[5] !== onChange) {
t4 = event => {
const newValue = event.target.value;
initialInputRef.current = false;
const sanitizedValueString = newValue.replace(_numberInput.NUMBER_CLEAR_REGEX, "");
if (isTimeInput && (sanitizedValueString.includes(":") && sanitizedValueString.length > 5 || !sanitizedValueString.includes(":") && sanitizedValueString.length > 4)) {
return;
}
const valueToCheck = sanitizedValueString.replaceAll(",", ".");
if (!(0, _numberInput2.isValidString)({
string: valueToCheck,
isMoneyInput,
isDecimalInput,
isTimeInput
})) {
return;
}
if (maxNumber && Number(valueToCheck) > maxNumber || minNumber && Number(valueToCheck) < minNumber) {
return;
}
if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {
setShouldRemainPlaceholder(true);
} else {
setShouldRemainPlaceholder(false);
}
setPlainText(sanitizedValueString.replaceAll(".", ","));
if (typeof onChange === "function") {
onChange(sanitizedValueString.replaceAll(".", ","));
}
};
$[0] = isDecimalInput;
$[1] = isMoneyInput;
$[2] = isTimeInput;
$[3] = maxNumber;
$[4] = minNumber;
$[5] = onChange;
$[6] = t4;
} else {
t4 = $[6];
}
const onLocalChange = t4;
let t5;
if ($[7] !== isMoneyInput || $[8] !== isTimeInput || $[9] !== maxNumber || $[10] !== minNumber || $[11] !== onBlur || $[12] !== onChange || $[13] !== plainText || $[14] !== shouldTriggerChangeOnFormat) {
t5 = () => {
const sanitizedValue = plainText;
let newIsInvalid = false;
let parsedNumber = null;
if (!isTimeInput) {
parsedNumber = (0, _numberInput2.parseFloatWithDecimals)({
stringValue: sanitizedValue.replace(",", ".").replaceAll(":", "").replace("\u20AC", ""),
decimals: isMoneyInput ? 2 : undefined
});
if (parsedNumber && parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
newIsInvalid = true;
}
setIsValueInvalid(newIsInvalid);
}
const newStringValue = plainText.length === 0 ? "" : (0, _numberInput2.formateNumber)({
number: isTimeInput ? sanitizedValue : parsedNumber,
isMoneyInput,
isTimeInput
});
setFormattedValue(`${newStringValue} ${isMoneyInput ? "\u20AC" : ""}`);
setPlainText(newStringValue.replaceAll(".", ""));
setHasFocus(false);
if (typeof onChange === "function" && shouldTriggerChangeOnFormat) {
onChange(newStringValue.replaceAll(".", ""));
}
if (typeof onBlur === "function") {
if (isTimeInput) {
onBlur(newStringValue, newIsInvalid);
} else {
onBlur(parsedNumber, newIsInvalid);
}
}
};
$[7] = isMoneyInput;
$[8] = isTimeInput;
$[9] = maxNumber;
$[10] = minNumber;
$[11] = onBlur;
$[12] = onChange;
$[13] = plainText;
$[14] = shouldTriggerChangeOnFormat;
$[15] = t5;
} else {
t5 = $[15];
}
const onLocalBlur = t5;
let t6;
if ($[16] !== formattedValue || $[17] !== onChange || $[18] !== shouldTriggerChangeOnFormat) {
t6 = () => {
setPlainText(formattedValue.replaceAll(".", "").replace("\u20AC", "").replaceAll(" ", ""));
if (typeof onChange === "function" && shouldTriggerChangeOnFormat) {
onChange(formattedValue.replaceAll(".", "").replace("\u20AC", "").replaceAll(" ", ""));
}
setIsValueInvalid(false);
setHasFocus(true);
};
$[16] = formattedValue;
$[17] = onChange;
$[18] = shouldTriggerChangeOnFormat;
$[19] = t6;
} else {
t6 = $[19];
}
const onLocalFocus = t6;
let t7;
let t8;
if ($[20] !== hasFocus || $[21] !== isMoneyInput || $[22] !== isTimeInput || $[23] !== maxNumber || $[24] !== minNumber || $[25] !== plainText) {
t7 = () => {
let parsedNumber_0 = null;
if (!isTimeInput) {
parsedNumber_0 = (0, _numberInput2.parseFloatWithDecimals)({
stringValue: plainText.replace(",", ".").replaceAll(":", "").replace("\u20AC", "").replaceAll(" ", ""),
decimals: isMoneyInput ? 2 : undefined
});
if (!hasFocus) {
if (parsedNumber_0 === null && initialInputRef.current) {
setIsValueInvalid(false);
} else {
setIsValueInvalid(parsedNumber_0 === null || parsedNumber_0 > maxNumber || parsedNumber_0 < minNumber);
}
}
}
setFormattedValue(plainText.length === 0 ? "" : `${(0, _numberInput2.formateNumber)({
number: isTimeInput ? plainText : parsedNumber_0,
isMoneyInput,
isTimeInput
})}${isMoneyInput ? " \u20AC" : ""}`);
};
t8 = [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText];
$[20] = hasFocus;
$[21] = isMoneyInput;
$[22] = isTimeInput;
$[23] = maxNumber;
$[24] = minNumber;
$[25] = plainText;
$[26] = t7;
$[27] = t8;
} else {
t7 = $[26];
t8 = $[27];
}
(0, _react.useEffect)(t7, t8);
let t10;
let t9;
if ($[28] !== value) {
t9 = () => {
if (typeof value === "string") {
setPlainText(value.replace("\u20AC", "").replaceAll(" ", ""));
}
};
t10 = [value];
$[28] = value;
$[29] = t10;
$[30] = t9;
} else {
t10 = $[29];
t9 = $[30];
}
(0, _react.useEffect)(t9, t10);
const t11 = hasFocus ? plainText : formattedValue;
const t12 = typeof isInvalid === "boolean" ? isInvalid : isValueInvalid;
let t13;
if ($[31] !== isDisabled || $[32] !== localPlaceholder || $[33] !== onLocalBlur || $[34] !== onLocalChange || $[35] !== onLocalFocus || $[36] !== shouldEnableKeyboardHighlighting || $[37] !== shouldRemainPlaceholder || $[38] !== shouldShowOnlyBottomBorder || $[39] !== t11 || $[40] !== t12) {
t13 = /*#__PURE__*/_react.default.createElement(_Input.default, {
shouldRemainPlaceholder: shouldRemainPlaceholder,
shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
inputMode: "decimal",
onChange: onLocalChange,
value: t11,
placeholder: localPlaceholder,
onBlur: onLocalBlur,
onFocus: onLocalFocus,
isDisabled: isDisabled,
isInvalid: t12,
shouldShowCenteredContent: shouldShowOnlyBottomBorder,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
});
$[31] = isDisabled;
$[32] = localPlaceholder;
$[33] = onLocalBlur;
$[34] = onLocalChange;
$[35] = onLocalFocus;
$[36] = shouldEnableKeyboardHighlighting;
$[37] = shouldRemainPlaceholder;
$[38] = shouldShowOnlyBottomBorder;
$[39] = t11;
$[40] = t12;
$[41] = t13;
} else {
t13 = $[41];
}
return t13;
};
NumberInput.displayName = 'NumberInput';
var _default = exports.default = NumberInput;
//# sourceMappingURL=NumberInput.js.map