@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
250 lines (243 loc) • 9.58 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var CheckboxList = require('../CheckboxList/CheckboxList.js');
var Creatable = require('../Creatable/Creatable.js');
var ComboBoxMultiSelect = require('../ComboBoxMultiSelect/ComboBoxMultiSelect.js');
var DateInput = require('../DateInput/DateInput.js');
var RadioGroup = require('../RadioGroup/RadioGroup.js');
var ComboBox = require('../ComboBox/ComboBox.js');
var TextArea = require('../TextArea/TextArea.js');
var TextInput = require('../TextInput/TextInput.js');
var Toggle = require('../Toggle/Toggle.js');
var DataDrivenInputTypes = require('../../constants/DataDrivenInputTypes.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function formatSelectOptions(options = []) {
return options.map((option) => ({ label: option.value, value: option.key }));
}
function formatCheckBoxListOptions(options = []) {
return options.map((option) => ({ labelText: option.value, id: option.key }));
}
function formatRadioGroupOptions(options = []) {
return options.map((option) => ({
labelText: option.value,
value: option.key,
}));
}
function validateRegex(pattern, value) {
const regexTester = new RegExp(pattern);
let hasError = false;
if (Array.isArray(value))
hasError = !value.every((val) => regexTester.test(val));
else
hasError = !regexTester.test(value);
return hasError;
}
const determineInitialValues = (input) => {
let value = "";
const valueToCheck = input.value || input.defaultValue || input.values || input.defaultValues;
if (valueToCheck) {
switch (valueToCheck) {
case "false": {
value = false;
break;
}
case "true": {
value = true;
break;
}
default: {
value = valueToCheck;
}
}
}
return value;
};
function DataDrivenInput(props) {
const { CheckboxList: CheckboxList$1 = CheckboxList.default, Creatable: Creatable$1 = Creatable.default, DateInput: DateInput$1 = DateInput.default, MultiSelect = ComboBoxMultiSelect.default, RadioGroup: RadioGroup$1 = RadioGroup.default, Select = ComboBox.default, TextArea: TextArea$1 = TextArea.default, TextEditor = TextArea.default, TextInput: TextInput$1 = TextInput.default, Toggle: Toggle$1 = Toggle.default, formikProps, ...inputProps } = props;
const {
// eslint-disable-next-line no-unused-vars
conditionallyRender, customComponent, disabled, description = "", defaultValue, defaultValues, label, helperText = "", pattern, patternInvalidText, invalid, invalidText,
// eslint-disable-next-line no-unused-vars
invalidValues, key, governingOptions, governingDisabled, minValueLength, maxValueLength, onBlur, onChange, options, placeholder, readOnly, required,
// eslint-disable-next-line no-unused-vars
requiredForKey,
// eslint-disable-next-line no-unused-vars
requiredValueOf, type, value, values, ...restInputProps } = inputProps;
let Component;
let componentProps = {};
let inputValue = value || values;
let regexError = inputValue && Boolean(pattern) && validateRegex(pattern, inputValue);
let invalidInput = regexError || invalid;
let invalidTextMessage = regexError && patternInvalidText ? patternInvalidText : invalidText;
React__default.default.useEffect(() => {
// eslint-disable-next-line
inputValue = determineInitialValues({
value,
values,
defaultValue,
defaultValues,
});
});
const allInputProps = {
id: key,
name: key,
key,
disabled,
helperText,
label,
onBlur,
onChange,
readOnly,
required,
tooltipContent: description,
};
if (Object.values(DataDrivenInputTypes.CHECKBOX_TYPES).includes(type)) {
const checkboxOptions = formatCheckBoxListOptions(options);
Component = CheckboxList$1;
componentProps = {
...allInputProps,
initialSelectedItems: inputValue,
options: checkboxOptions,
...restInputProps,
};
}
else if (Object.values(DataDrivenInputTypes.CREATABLE_TYPES).includes(type)) {
Component = Creatable$1;
componentProps = {
...allInputProps,
createKeyValuePair: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR || type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
nonDeletable: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
invalid: invalidInput,
invalidText: invalidTextMessage,
placeholder,
value: inputValue,
...restInputProps,
};
}
else if (Object.values(DataDrivenInputTypes.DATE_TYPES).includes(type)) {
Component = DateInput$1;
componentProps = {
...allInputProps,
invalid,
invalidText,
placeholder,
type,
value: inputValue,
...restInputProps,
};
}
else if (Object.values(DataDrivenInputTypes.MULTI_SELECT_TYPES).includes(type)) {
const items = formatSelectOptions(options);
Component = MultiSelect;
componentProps = {
...allInputProps,
items,
initialSelectedItems: Array.isArray(inputValue)
? items.filter((item) => inputValue.includes(item.value))
: typeof inputValue === "string"
? inputValue
: [],
itemToString: (input) => input && input.label,
invalid,
invalidText,
placeholder,
...restInputProps,
};
}
else if (Object.values(DataDrivenInputTypes.RADIO_TYPES).includes(type)) {
const radioOptions = formatRadioGroupOptions(options);
Component = RadioGroup$1;
componentProps = {
...allInputProps,
options: radioOptions,
valueSelected: inputValue,
...restInputProps,
};
}
else if (Object.values(DataDrivenInputTypes.SELECT_TYPES).includes(type)) {
const items = governingOptions || formatSelectOptions(options);
const selectedItem = items.find((item) => item.value === value) ?? { label: "", value: "" };
Component = Select;
componentProps = {
...allInputProps,
disabled: governingDisabled || disabled,
invalid,
invalidText,
initialSelectedItem: selectedItem,
selectedItem,
itemToString: (input) => input && input.label,
items,
placeholder,
...restInputProps,
};
}
else if (Object.values(DataDrivenInputTypes.TEXT_AREA_TYPES).includes(type)) {
Component = TextArea$1;
componentProps = {
...allInputProps,
invalid: invalidInput,
invalidText: invalidTextMessage,
placeholder,
value: inputValue,
...restInputProps,
};
}
else if (type.startsWith(DataDrivenInputTypes.TEXT_EDITOR_TYPES.TEXT_EDITOR)) {
Component = TextEditor;
componentProps = {
...allInputProps,
invalid: invalidInput,
invalidText: invalidTextMessage,
placeholder,
value: inputValue,
...restInputProps,
};
}
else if (Object.values(DataDrivenInputTypes.TEXT_INPUT_TYPES).includes(type)) {
Component = TextInput$1;
componentProps = {
...allInputProps,
maxLength: maxValueLength,
minLength: minValueLength,
max: maxValueLength,
min: minValueLength,
invalid: invalidInput,
invalidText: invalidTextMessage,
placeholder,
type: type === DataDrivenInputTypes.TEXT_INPUT_TYPES.SECURED ? DataDrivenInputTypes.TEXT_INPUT_TYPES.PASSWORD : type,
value: inputValue,
...restInputProps,
};
}
else if (Object.values(DataDrivenInputTypes.BOOLEAN_TYPES).includes(type)) {
Component = Toggle$1;
componentProps = {
...allInputProps,
invalid,
invalidText,
onChange: undefined,
onToggle: onChange,
toggled: value === true || value === "true",
...restInputProps,
};
}
if (customComponent) {
Component = customComponent;
return (React__default.default.createElement(Component, { ...allInputProps, ...componentProps, value: inputValue, ...restInputProps, formikProps: formikProps }));
}
else {
if (Component) {
return React__default.default.createElement(Component, { ...componentProps });
}
}
return null;
}
exports.default = DataDrivenInput;