kwikid-components-react
Version:
KwikID's Component Library in React
77 lines (76 loc) • 2.97 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 _InputCheckbox = require("./InputCheckbox.defaults");
var _InputCheckbox2 = require("./InputCheckbox.definition");
var _InputCheckbox3 = require("./InputCheckbox.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KwikUIInputCheckbox = _ref => {
let {
customStyles = {
wrapper: {},
container: {},
label: {},
input: {}
},
disabled = false,
id = _InputCheckbox.KWIKUI_INPUT_CHECKBOX__DEFAULTS.id,
label = undefined,
messages = [],
placeholder = undefined,
required = true,
shape = _InputCheckbox2.IKwikUIInputCheckboxShape.CURVED,
size = _InputCheckbox2.IKwikUIInputCheckboxSize.M,
updateOn = "change",
value = false,
onInput = undefined,
onInputValidate = undefined
} = _ref;
const [valid, setValid] = _react.default.useState(undefined);
const labelText = placeholder || label;
const handleOnInput = newValue => {
if (onInputValidate) {
const validation = onInputValidate(id, newValue);
setValid(validation === null || validation === void 0 ? void 0 : validation.isValid);
} else {
setValid(true);
}
if (onInput && !disabled) {
onInput(id, newValue);
}
};
return /*#__PURE__*/_react.default.createElement(_InputCheckbox3.KwikUIStyleInputCheckboxWrapper, {
style: customStyles.wrapper
}, /*#__PURE__*/_react.default.createElement(_InputCheckbox3.KwikUIStyleInputCheckboxContainer, {
size: size,
shape: shape,
disabled: disabled,
style: customStyles.container,
onClick: () => {
handleOnInput(!value);
},
className: "\n input input-checbox\n ".concat(valid === false ? "input-error" : "", "\n ")
}, /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
id: id,
disabled: disabled,
checked: value,
className: "input-checkbox",
onChange: e => !disabled && handleOnInput(e.target.checked),
style: customStyles.input
}), labelText && /*#__PURE__*/_react.default.createElement(_InputCheckbox3.KwikUIStyleInputCheckboxLabel, {
size: size,
disabled: disabled,
style: customStyles.label,
onClick: () => !disabled && handleOnInput(!value)
}, required && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "*\xA0"), labelText)), (0, _kwikidToolkit.isNotEmptyValue)(messages) && /*#__PURE__*/_react.default.createElement(_InputCheckbox3.KwikUIStyleInputCheckboxMessagesContainer, null, /*#__PURE__*/_react.default.createElement(_Messages.default, {
messages: messages,
size: size
})));
};
var _default = exports.default = KwikUIInputCheckbox;