kwikid-components-react
Version:
KwikID's Component Library in React
115 lines (114 loc) • 4.17 kB
JavaScript
"use strict";
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 _InputText = require("./InputText.helper");
var _InputText2 = require("./InputText.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KwikUIInputText = _ref => {
let {
customStyles = {
wrapper: {},
container: {},
label: {},
input: {}
},
disabled = false,
textCase = "default",
id = "input",
label = undefined,
messages = [],
placeholder = undefined,
postfix = undefined,
prefix = undefined,
required = true,
shape = "curved",
size = "m",
updateOn = "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 => {
const convertedValue = (0, _InputText.convertTextCase)(textCase, newValue);
if (onInputValidate) {
const validation = onInputValidate(id, convertedValue);
setValid(validation === null || validation === void 0 ? void 0 : validation.isValid);
} else {
setValid(true);
}
if (onInput && !disabled) {
onInput(id, convertedValue);
}
};
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(_InputText2.KwikUIStyleInputTextWrapper, {
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.wrapper
}, /*#__PURE__*/_react.default.createElement(_InputText2.KwikUIStyleInputTextContainer, {
style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
size: size,
shape: shape,
disabled: disabled,
className: "\n input input-text\n ".concat(valid == false ? "input-error" : "", "\n ").concat(valid != false && inputFocused ? "input-focused" : "", "\n ")
}, label && /*#__PURE__*/_react.default.createElement(_InputText2.KwikUIStyleInputTextLabel, {
size: size,
disabled: disabled,
style: customStyles === null || customStyles === void 0 ? void 0 : 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", {
type: "text",
id: id,
disabled: disabled,
placeholder: placeholder,
value: value,
onFocus: e => {
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 === null || customStyles === void 0 ? void 0 : customStyles.input
}), (0, _kwikidToolkit.isNotEmptyValue)(postfix) && /*#__PURE__*/_react.default.createElement("div", {
id: "postfix"
}, postfix)), (0, _kwikidToolkit.isNotEmptyValue)(messages) && /*#__PURE__*/_react.default.createElement(_InputText2.KwikUIStyleInputTextMessagesContainer, null, /*#__PURE__*/_react.default.createElement(_Messages.default, {
messages: messages,
size: size
})));
};
var _default = exports.default = KwikUIInputText;