kwikid-components-react
Version:
KwikID's Component Library in React
187 lines (186 loc) • 8.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _lodash = _interopRequireDefault(require("lodash"));
var _react = _interopRequireDefault(require("react"));
var _io = require("react-icons/io5");
var _Button = _interopRequireDefault(require("../../button/Button"));
var _Html = _interopRequireDefault(require("../../html/Html"));
var _Messages = _interopRequireDefault(require("../../messages/Messages"));
var _InputText = _interopRequireDefault(require("../input-text/InputText"));
var _InputRadio = require("./InputRadio.definition");
var _InputRadio2 = require("./InputRadio.helper");
var _InputRadio3 = require("./InputRadio.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KwikUIInputRadio = _ref => {
let {
customStyles = {
wrapper: {},
container: {},
label: {},
itemsContainer: {},
itemContainer: {},
itemRadioButton: {},
itemRadioLabel: {},
itemRadioGapHolder: {}
},
disabled = false,
id = "input-radio",
isClearable = true,
isSearchable = false,
label = undefined,
messages = [],
options = [],
orientation = _InputRadio.IKwikUIInputRadioOrientation.VERTICAL,
required = true,
size = _InputRadio.IKwikUIInputRadioSize.M,
shape = _InputRadio.IKwikUIInputRadioShape.CURVED,
updateOn = _InputRadio.IKwikUIInputRadioUpdateOn.CHANGE,
value = undefined,
onInput = undefined,
onInputValidate = undefined
} = _ref;
const [valid, setValid] = _react.default.useState(undefined);
const inputFocused = undefined;
const [transformedOptions, setTransformedOptions] = _react.default.useState((0, _InputRadio2.transformOptions)(options));
const [selectedOption, setSelectedOption] = _react.default.useState((0, _InputRadio2.transformOptions)([(0, _kwikidToolkit.isNotEmptyValue)(value) ? value : ""])[0]);
const [searchText, setSearchText] = _react.default.useState("");
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);
}
};
_react.default.useEffect(() => {
if (!_lodash.default.isEqual(value, selectedOption) && (0, _kwikidToolkit.isNotEmptyValue)(selectedOption)) {
handleOnInput(selectedOption);
}
}, [selectedOption]);
_react.default.useEffect(() => {
const localTransformedOptions = (0, _InputRadio2.transformOptions)(options);
setTransformedOptions(localTransformedOptions);
const option = (0, _InputRadio2.findOptionWidthValueOrLabel)(localTransformedOptions, value);
handleOnInput(option);
}, [options]);
const containsText = (text, searchString) => {
if ((0, _kwikidToolkit.isNotEmptyValue)(text) && (0, _kwikidToolkit.isNotEmptyValue)(searchString)) {
return text.toLowerCase().includes(searchString.toLowerCase());
}
return true;
};
_react.default.useEffect(() => {
const filteredOptions = options.filter(option => containsText(option.label, searchText));
setTransformedOptions(filteredOptions);
}, [searchText]);
return /*#__PURE__*/_react.default.createElement(_InputRadio3.KwikUIStyleInputRadioWrapper, {
style: customStyles.wrapper
}, /*#__PURE__*/_react.default.createElement(_InputRadio3.KwikUIStyleInputRadioContainer, {
style: customStyles.container,
className: "\n input input-radio\n ".concat(valid === false ? "input-error" : "", "\n ").concat(valid !== false && inputFocused ? "input-focused" : "", "\n ")
}, label && /*#__PURE__*/_react.default.createElement(_InputRadio3.KwikUIStyleInputRadioLabel, {
size: size,
disabled: disabled,
style: customStyles.label
}, label, required && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0*")), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
gap: "1rem",
width: "100%"
}
}, isSearchable && /*#__PURE__*/_react.default.createElement(_InputText.default, {
id: "input-radio-searchtext",
size: size === "s" ? "xs" : size === "l" ? "m" : "s",
shape: shape,
disabled: disabled,
customStyles: {
wrapper: {
width: "100%",
paddingBottom: size === "s" ? "0.15rem" : size === "l" ? "0.25rem" : "0.5rem"
}
},
placeholder: "Type to search...",
postfix: /*#__PURE__*/_react.default.createElement(_io.IoSearchCircleOutline, null),
onInput: (id, value) => {
setSearchText(value);
},
onInputValidate: () => {
return undefined;
},
value: searchText
}), isClearable && /*#__PURE__*/_react.default.createElement(_Button.default, {
size: size === "s" ? "xs" : size === "l" ? "m" : "s",
shape: shape,
disabled: disabled,
customStyles: {
marginBottom: size === "s" ? "0.15rem" : size === "l" ? "0.25rem" : "0.5rem"
},
onClick: () => {
setSelectedOption((0, _InputRadio2.transformOptions)([""])[0]);
}
}, "Clear\xA0", /*#__PURE__*/_react.default.createElement(_io.IoCloseCircleOutline, null))), /*#__PURE__*/_react.default.createElement(_InputRadio3.KwikUIStyleInputRadioItemsContainer, {
orientation: orientation,
style: customStyles.itemsContainer
}, transformedOptions.map(option => {
const transformedOption = (0, _InputRadio2.transformOptions)([option])[0];
const optionKey = transformedOption.key ? transformedOption.key : transformedOption.label.toString().split(" ").join("_").toLocaleLowerCase();
const optionLabel = transformedOption.label;
const optionValue = transformedOption.value;
const optionDescription = (0, _kwikidToolkit.isNotEmptyValue)(transformedOption === null || transformedOption === void 0 ? void 0 : transformedOption.description) ? transformedOption === null || transformedOption === void 0 ? void 0 : transformedOption.description : "";
return /*#__PURE__*/_react.default.createElement(_InputRadio3.KwikUIStyleInputRadioItemContainer, {
size: size,
shape: shape,
disabled: !disabled ? option && option.disabled ? option.disabled : false : disabled,
"aria-disabled": !disabled ? option && option.disabled ? option.disabled : disabled : disabled,
key: optionKey,
onClick: () => {
if (updateOn === "change" && !disabled && !option.disabled) {
const option = (0, _InputRadio2.findOptionWidthValueOrLabel)(transformedOptions, optionValue);
setSelectedOption((0, _InputRadio2.transformOptions)([option])[0]);
}
},
onBlur: () => {
if (updateOn === "blur" && !disabled && !option.disabled) {
const option = (0, _InputRadio2.findOptionWidthValueOrLabel)(transformedOptions, optionValue);
setSelectedOption((0, _InputRadio2.transformOptions)([option])[0]);
}
},
style: customStyles.itemContainer
}, /*#__PURE__*/_react.default.createElement("input", {
type: "radio",
id: optionKey,
style: customStyles.itemRadioButton,
name: id // Make sure all radio buttons in the group have the same 'name'
,
value: optionLabel,
checked: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.key) === optionKey,
onChange: () => {
return null;
} // Dummy onChange handler to suppress React's Error Warning
,
disabled: !disabled ? option && option.disabled ? option.disabled : false : disabled
}), /*#__PURE__*/_react.default.createElement(_InputRadio3.KwikUIStyleInputRadioItemLabel, {
size: size,
htmlFor: optionKey,
style: customStyles.itemRadioLabel
}, optionLabel), /*#__PURE__*/_react.default.createElement("div", {
style: customStyles.itemRadioGapHolder
}), /*#__PURE__*/_react.default.createElement(_Html.default, {
htmlString: optionDescription
}));
}))), (0, _kwikidToolkit.isNotEmptyValue)(messages) && /*#__PURE__*/_react.default.createElement(_InputRadio3.KwikUIStyleInputRadioMessagesContainer, null, /*#__PURE__*/_react.default.createElement(_Messages.default, {
messages: messages,
size: size
})));
};
var _default = exports.default = KwikUIInputRadio;