kwikid-components-react
Version:
KwikID's Component Library in React
139 lines (137 loc) • 4.72 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _Messages = _interopRequireDefault(require("../../messages/Messages"));
var _InputNumber = require("./InputNumber.definition");
var _InputNumber2 = require("./InputNumber.helper");
var _InputNumber3 = require("./InputNumber.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KwikUIInputNumber = _ref => {
let {
customStyles = {
wrapper: {},
container: {},
label: {},
input: {}
},
delimiter = ",",
disabled = false,
id = "input_number",
label = undefined,
max = undefined,
messages = [],
min = undefined,
placeholder = undefined,
postfix = "",
prefix = "",
required = true,
shape = _InputNumber.IKwikUIInputNumberShape.CURVED,
size = _InputNumber.IKwikUIInputNumberSize.M,
updateOn = _InputNumber.IKwikUIInputNumberUpdateOn.CHANGE,
value = undefined,
onInput = undefined,
onInputValidate = undefined,
isInputCopyDisabled = false,
isInputPasteDisabled = false,
onInputCopyDisabled = undefined,
onInputPasteDisabled = undefined
} = _ref;
const [valid, setValid] = _react.default.useState(undefined);
const [inputFocused, setInputFocused] = _react.default.useState(undefined);
const handleOnInput = newValue => {
if (newValue !== "") {
newValue = (0, _InputNumber2.reverseFormatNumber)(String(newValue), {
delimiter
});
}
if (onInputValidate) {
const validation = onInputValidate(id, newValue);
setValid(validation === null || validation === void 0 ? void 0 : validation.isValid);
} else {
setValid(true);
}
// Check if newValue is NaN (not a number)
if (isNaN(Number(newValue))) {
newValue = ""; // Set it to a default value, you can change this as needed
}
// Check min and max values
if (min !== undefined && newValue !== "" && Number(newValue) < min) {
newValue = min;
}
if (max !== undefined && newValue !== "" && Number(newValue) > max) {
newValue = max;
}
if (onInput && !disabled) {
onInput(id, newValue);
}
};
const handleOnCopy = e => {
if (isInputCopyDisabled) {
e.preventDefault();
if (onInputCopyDisabled) {
onInputCopyDisabled();
}
}
};
const handleOnPaste = e => {
if (isInputPasteDisabled) {
e.preventDefault();
if (onInputPasteDisabled) {
onInputPasteDisabled();
}
}
};
return /*#__PURE__*/_react.default.createElement(_InputNumber3.KwikUIStyleInputNumberWrapper, {
style: customStyles.wrapper
}, /*#__PURE__*/_react.default.createElement(_InputNumber3.KwikUIStyleInputNumberContainer, {
size: size,
shape: shape,
disabled: disabled,
className: "\n input input-number\n ".concat(valid == false ? "input-error" : "", "\n ").concat(valid != false && inputFocused ? "input-focused" : "", "\n "),
style: customStyles.container
}, label && /*#__PURE__*/_react.default.createElement(_InputNumber3.KwikUIStyleInputNumberLabel, {
size: size,
disabled: disabled,
style: customStyles.label
}, label, required && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0*")), (0, _kwikidToolkit.isNotEmptyValue)(prefix) && /*#__PURE__*/_react.default.createElement("div", {
id: "prefix"
}, prefix), /*#__PURE__*/_react.default.createElement("input", {
disabled: disabled,
id: id,
inputMode: "numeric",
max: max,
min: min,
placeholder: placeholder,
type: "text",
value: (0, _InputNumber2.formatNumber)(value, {
delimiter
}),
onFocus: () => {
setInputFocused(true);
},
onChange: e => {
if (updateOn === "change") {
handleOnInput(e.target.value);
}
},
onBlur: e => {
if (updateOn === "blur") {
handleOnInput(e.target.value);
}
setInputFocused(false);
},
onCopy: e => handleOnCopy(e),
onPaste: e => handleOnPaste(e),
style: customStyles.input
}), (0, _kwikidToolkit.isNotEmptyValue)(postfix) && /*#__PURE__*/_react.default.createElement("div", {
id: "postfix"
}, postfix)), (0, _kwikidToolkit.isNotEmptyValue)(messages) && /*#__PURE__*/_react.default.createElement(_InputNumber3.KwikUIStyleInputNumberMessagesContainer, null, /*#__PURE__*/_react.default.createElement(_Messages.default, {
messages: messages,
size: size
})));
};
var _default = exports.default = KwikUIInputNumber;