@uxf/ui 11.75.1 → 11.76.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/checkbox-input/checkbox-input.stories.js +6 -7
- package/combobox/combobox.stories.js +4 -4
- package/date-picker-input/date-picker-input.stories.js +10 -10
- package/datetime-picker-input/datetime-picker-input.stories.js +8 -9
- package/dropzone/dropzone-input.js +5 -3
- package/dropzone/dropzone.stories.js +3 -3
- package/multi-combobox/multi-combobox.stories.d.ts +0 -1
- package/multi-combobox/multi-combobox.stories.js +10 -27
- package/multi-select/multi-select.stories.d.ts +0 -1
- package/multi-select/multi-select.stories.js +7 -22
- package/package.json +1 -1
|
@@ -30,11 +30,10 @@ const checkbox_input_1 = require("./checkbox-input");
|
|
|
30
30
|
function Default() {
|
|
31
31
|
const [isChecked, setIsChecked] = (0, react_1.useState)(true);
|
|
32
32
|
const onChange = (0, action_1.action)("onChange", () => setIsChecked((prev) => !prev));
|
|
33
|
-
return (react_1.default.createElement("div", { className: "
|
|
34
|
-
react_1.default.createElement(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
react_1.default.createElement(checkbox_input_1.CheckboxInput, { hiddenLabel: true, label: "hidden label", name: "checkbox-input-hidden-label-lg", onChange: onChange, size: "lg", value: isChecked }))));
|
|
33
|
+
return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
|
|
34
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Default", name: "default", onChange: onChange, value: isChecked }),
|
|
35
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, value: isChecked }),
|
|
36
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { isInvalid: true, label: "Invalid", name: "invalid", onChange: onChange, value: isChecked }),
|
|
37
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Large", name: "large", onChange: onChange, size: "lg", value: isChecked }),
|
|
38
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { hiddenLabel: true, label: "Hidden label", name: "hidden-label", onChange: onChange, value: isChecked })));
|
|
40
39
|
}
|
|
@@ -38,10 +38,10 @@ function SynchronousOptions() {
|
|
|
38
38
|
const [value, setValue] = (0, react_1.useState)(null);
|
|
39
39
|
const onChange = (0, action_1.action)("onChange", setValue);
|
|
40
40
|
return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
|
|
41
|
-
react_1.default.createElement(index_1.Combobox, { helperText: "
|
|
42
|
-
react_1.default.createElement(index_1.Combobox, { helperText: "
|
|
43
|
-
react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top",
|
|
44
|
-
react_1.default.createElement(index_1.Combobox, {
|
|
41
|
+
react_1.default.createElement(index_1.Combobox, { helperText: "Helper text", isClearable: true, label: "Default", name: "default", onChange: onChange, options: OPTIONS, placeholder: "Placeholder", value: value }),
|
|
42
|
+
react_1.default.createElement(index_1.Combobox, { helperText: "Helper text", isInvalid: true, isRequired: true, label: "Invalid", name: "Invalid", onChange: onChange, options: OPTIONS, placeholder: "Placeholder", value: value }),
|
|
43
|
+
react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", isClearable: true, label: "Dropdown top", name: "dropdown-top", onChange: onChange, options: OPTIONS, value: value }),
|
|
44
|
+
react_1.default.createElement(index_1.Combobox, { isClearable: true, label: "RenderOption", name: "render-option", onChange: onChange, options: OPTIONS, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
45
45
|
"Option: ",
|
|
46
46
|
option.label,
|
|
47
47
|
isSelected && " (selected)")), value: value })));
|
|
@@ -31,7 +31,8 @@ const date_picker_input_1 = require("./date-picker-input");
|
|
|
31
31
|
function Default() {
|
|
32
32
|
const [date, setDate] = (0, react_1.useState)(null);
|
|
33
33
|
const onChange = (0, action_1.action)("onChange", setDate);
|
|
34
|
-
|
|
34
|
+
return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
|
|
35
|
+
react_1.default.createElement(date_picker_input_1.DatePickerInput, { helperText: "Helper text", isClearable: true, label: "Default", name: "default", onChange: onChange, placeholder: "Placeholder", value: date }),
|
|
35
36
|
react_1.default.createElement(date_picker_input_1.DatePickerInput, { customButtonTitles: {
|
|
36
37
|
selectMonth: "Select month",
|
|
37
38
|
selectYear: "Select year",
|
|
@@ -41,15 +42,14 @@ function Default() {
|
|
|
41
42
|
prevDecade: "Previous decade",
|
|
42
43
|
nextYear: "Next year",
|
|
43
44
|
prevYear: "Previous year",
|
|
44
|
-
},
|
|
45
|
-
react_1.default.createElement(date_picker_input_1.DatePickerInput, {
|
|
46
|
-
react_1.default.createElement(date_picker_input_1.DatePickerInput, {
|
|
47
|
-
react_1.default.createElement(date_picker_input_1.DatePickerInput, {
|
|
48
|
-
react_1.default.createElement(date_picker_input_1.DatePickerInput, {
|
|
49
|
-
react_1.default.createElement(date_picker_input_1.DatePickerInput, {
|
|
50
|
-
react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], displayDateFormat: "MM/DD/YYYY",
|
|
45
|
+
}, label: "Custom titles", name: "custom-titles", onChange: onChange, value: date }),
|
|
46
|
+
react_1.default.createElement(date_picker_input_1.DatePickerInput, { isClearable: true, label: "Triger element", name: "trigger-element", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: date }),
|
|
47
|
+
react_1.default.createElement(date_picker_input_1.DatePickerInput, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, value: date }),
|
|
48
|
+
react_1.default.createElement(date_picker_input_1.DatePickerInput, { isReadOnly: true, label: "ReadOnly", name: "readonly", onChange: onChange, value: date }),
|
|
49
|
+
react_1.default.createElement(date_picker_input_1.DatePickerInput, { isInvalid: true, label: "Invalid", name: "invalid", onChange: onChange, value: date }),
|
|
50
|
+
react_1.default.createElement(date_picker_input_1.DatePickerInput, { isClearable: true, label: "Min/Max validation", maxDate: "2023-06-12", minDate: "2023-06-06", name: "min-max-validation", onChange: onChange, value: date }),
|
|
51
|
+
react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], displayDateFormat: "MM/DD/YYYY", label: "Date with custom format (US)", name: "custom-date-format", onChange: onChange, value: date }),
|
|
51
52
|
react_1.default.createElement(date_picker_input_1.DatePickerInput, { bottomContent: react_1.default.createElement("div", null,
|
|
52
53
|
"Bottom content",
|
|
53
|
-
react_1.default.createElement("p", null, "Here can goes anything")),
|
|
54
|
-
return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
|
|
54
|
+
react_1.default.createElement("p", null, "Here can goes anything")), label: "Bottom content", name: "bottom-content", onChange: onChange, value: date })));
|
|
55
55
|
}
|
|
@@ -31,15 +31,14 @@ const datetime_picker_input_1 = require("./datetime-picker-input");
|
|
|
31
31
|
function Default() {
|
|
32
32
|
const [date, setDate] = (0, react_1.useState)(null);
|
|
33
33
|
const onChange = (0, action_1.action)("onChange", setDate);
|
|
34
|
-
|
|
35
|
-
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, {
|
|
36
|
-
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, {
|
|
37
|
-
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, {
|
|
38
|
-
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, {
|
|
39
|
-
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, {
|
|
40
|
-
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, {
|
|
34
|
+
return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
|
|
35
|
+
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isClearable: true, label: "Default", name: "default", onChange: onChange, placeholder: "Zadejte datum...", value: date }),
|
|
36
|
+
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isClearable: true, label: "Trigger element", name: "trigger-element", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: date }),
|
|
37
|
+
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, value: date }),
|
|
38
|
+
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isReadOnly: true, label: "ReadOnly", name: "readonly", onChange: onChange, value: date }),
|
|
39
|
+
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isClearable: true, isInvalid: true, label: "Invalid", name: "invalid", onChange: onChange, value: date }),
|
|
40
|
+
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isClearable: true, label: "Min/Max validation", maxDate: "2023-06-26", minDate: "2023-06-13", name: "min-max-validation", onChange: onChange, value: date }),
|
|
41
41
|
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { bottomContent: react_1.default.createElement("div", null,
|
|
42
42
|
"Bottom content",
|
|
43
|
-
react_1.default.createElement("p", null, "Here can goes anything")),
|
|
44
|
-
return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
|
|
43
|
+
react_1.default.createElement("p", null, "Here can goes anything")), isClearable: true, label: "Bottom content", name: "bottom-content", onChange: onChange, value: date })));
|
|
45
44
|
}
|
|
@@ -32,6 +32,7 @@ const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
|
32
32
|
const react_1 = __importStar(require("react"));
|
|
33
33
|
const react_dropzone_1 = require("react-dropzone");
|
|
34
34
|
const icon_1 = require("../icon");
|
|
35
|
+
const get_dropzone_state_1 = require("../utils/get-dropzone-state");
|
|
35
36
|
function fileToFileResponse(file) {
|
|
36
37
|
return {
|
|
37
38
|
id: -Math.round(Math.random() * 100000000),
|
|
@@ -68,7 +69,7 @@ function fileRejectedHandler(err, dropzoneFile, onValuesChange, values, onUpload
|
|
|
68
69
|
return null;
|
|
69
70
|
}
|
|
70
71
|
exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
|
|
71
|
-
var _a, _b;
|
|
72
|
+
var _a, _b, _c;
|
|
72
73
|
const refValue = (0, react_1.useRef)();
|
|
73
74
|
refValue.current = props.value;
|
|
74
75
|
const handleFileDrop = async (acceptedFiles, inputRef) => {
|
|
@@ -127,12 +128,13 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
|
|
|
127
128
|
const labelOnCLick = (e) => {
|
|
128
129
|
e.stopPropagation();
|
|
129
130
|
};
|
|
130
|
-
|
|
131
|
+
const dropzoneState = (0, get_dropzone_state_1.getDropzoneState)((_a = props.value) !== null && _a !== void 0 ? _a : []);
|
|
132
|
+
return (react_1.default.createElement("div", { className: `uxf-dropzone ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, "data-name": props.name, "data-state": dropzoneState.status, style: props.style },
|
|
131
133
|
react_1.default.createElement("label", { ...getRootProps({
|
|
132
134
|
className: (0, cx_1.cx)("uxf-dropzone__label", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isNotClickable && "cursor-auto"),
|
|
133
135
|
onClick: labelOnCLick,
|
|
134
136
|
}), ref: (0, compose_refs_1.composeRefs)(ref, rootRef) },
|
|
135
|
-
react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone__label__icon", name: (
|
|
137
|
+
react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone__label__icon", name: (_c = props.icon) !== null && _c !== void 0 ? _c : "cloud" }),
|
|
136
138
|
typeof props.label === "string" ? react_1.default.createElement("span", null, props.label) : props.label,
|
|
137
139
|
react_1.default.createElement("input", { ...getInputProps({
|
|
138
140
|
className: "uxf-dropzone__input",
|
|
@@ -53,11 +53,11 @@ function Default() {
|
|
|
53
53
|
react_1.default.createElement("div", { className: "flex items-center" },
|
|
54
54
|
react_1.default.createElement(toggle_1.Toggle, { label: "Limit file size", name: "file-size-limit", onChange: () => setIsFileSizeLimited((prev) => !prev), value: isFileSizeLimited }),
|
|
55
55
|
react_1.default.createElement(text_input_1.TextInput, { className: "w-28", name: "limit-file-size", onChange: (value) => setFileSizeLimit(parseInt(value, 10)), rightElement: "MB", type: "number", value: fileSizeLimit.toString() })),
|
|
56
|
-
react_1.default.createElement(index_1.Dropzone, { accept: hasOnlyImagesAllowed ? { "image/*": [] } : undefined, isDisabled: isDisabled, label: "Use drag and drop or click to upload", maxFileSize: isFileSizeLimited ? fileSizeLimit * MB_SIZE : undefined, maxFilesCount: isFileCountLimited ? fileCountLimit : undefined, name: "
|
|
57
|
-
react_1.default.createElement(index_1.Dropzone.List, { className: "mt-6", errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", isDisabled: isDisabled, name: "
|
|
56
|
+
react_1.default.createElement(index_1.Dropzone, { accept: hasOnlyImagesAllowed ? { "image/*": [] } : undefined, isDisabled: isDisabled, label: "Use drag and drop or click to upload", maxFileSize: isFileSizeLimited ? fileSizeLimit * MB_SIZE : undefined, maxFilesCount: isFileCountLimited ? fileCountLimit : undefined, name: "default", onChange: onChange, onDropRejected: (fileRejections) => (0, handle_rejected_files_1.handleRejectedFiles)(fileRejections, fileCountLimit), onUploadFile: upload_file_mock_1.uploadFile, value: files }),
|
|
57
|
+
react_1.default.createElement(index_1.Dropzone.List, { className: "mt-6", errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", isDisabled: isDisabled, name: "default", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
|
|
58
58
|
react_1.default.createElement(show_1.Show, { when: (0, is_not_empty_1.isNotEmpty)(files) },
|
|
59
59
|
react_1.default.createElement("div", { className: "mt-6" },
|
|
60
60
|
react_1.default.createElement("p", null, "File response:"),
|
|
61
|
-
react_1.default.createElement(index_1.Dropzone.List, { className: "max-w-full bg-gray-200 p-4", name: "
|
|
61
|
+
react_1.default.createElement(index_1.Dropzone.List, { className: "max-w-full bg-gray-200 p-4", name: "default", onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { className: "max-w-full", key: file.id },
|
|
62
62
|
react_1.default.createElement("pre", { className: "whitespace-pre-wrap break-all" }, JSON.stringify(file, null, 4)))), value: files })))));
|
|
63
63
|
}
|
|
@@ -22,16 +22,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
26
|
exports.Default = Default;
|
|
30
27
|
exports.Async = Async;
|
|
31
|
-
exports.ComponentStructure = ComponentStructure;
|
|
32
28
|
const react_1 = __importStar(require("react"));
|
|
33
29
|
const action_1 = require("../utils/action");
|
|
34
|
-
const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
|
|
35
30
|
const multi_combobox_1 = require("./multi-combobox");
|
|
36
31
|
const options = [
|
|
37
32
|
{ id: "one", label: "Option red", color: "red" },
|
|
@@ -54,20 +49,15 @@ function Default() {
|
|
|
54
49
|
console.log("Select values: ", v);
|
|
55
50
|
setValue(v);
|
|
56
51
|
});
|
|
57
|
-
|
|
58
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, {
|
|
59
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, {
|
|
60
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "
|
|
61
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, {
|
|
62
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, {
|
|
63
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-6", label: "MultiCombobox with renderOption", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
|
|
52
|
+
return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
|
|
53
|
+
react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Helper text", label: "Default", name: "default", onChange: onChange, options: options, placeholder: "Placeholder", value: value }),
|
|
54
|
+
react_1.default.createElement(multi_combobox_1.MultiCombobox, { label: "With checkboxes", name: "with-checkboxes", onChange: onChange, options: options, value: value, withCheckboxes: true }),
|
|
55
|
+
react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Invalid", isInvalid: true, isRequired: true, label: "Invalid", name: "invalid", onChange: onChange, options: options, value: value }),
|
|
56
|
+
react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", label: "Dropdown top", name: "dropdown-top", onChange: onChange, options: options, value: value }),
|
|
57
|
+
react_1.default.createElement(multi_combobox_1.MultiCombobox, { label: "RenderOptions", name: "render-options", onChange: onChange, options: options, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
|
|
64
58
|
"Option: ",
|
|
65
59
|
option.label), value: value }),
|
|
66
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, {
|
|
67
|
-
"Option: ",
|
|
68
|
-
option.label), value: value })));
|
|
69
|
-
return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
70
|
-
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
|
|
60
|
+
react_1.default.createElement(multi_combobox_1.MultiCombobox, { isDisabled: true, label: "Disabled", name: "Disabled", onChange: onChange, options: options, value: value })));
|
|
71
61
|
}
|
|
72
62
|
function Async() {
|
|
73
63
|
const [value, setValue] = (0, react_1.useState)(null);
|
|
@@ -76,14 +66,7 @@ function Async() {
|
|
|
76
66
|
console.log("Select values: ", v);
|
|
77
67
|
setValue(v);
|
|
78
68
|
});
|
|
79
|
-
const loadOptions = (query) => Promise
|
|
80
|
-
|
|
81
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, {
|
|
82
|
-
return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
83
|
-
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
|
|
84
|
-
}
|
|
85
|
-
function ComponentStructure() {
|
|
86
|
-
const [value, onChange] = (0, react_1.useState)(null);
|
|
87
|
-
return (react_1.default.createElement(component_structure_analyzer_1.default, null,
|
|
88
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Start typing to see options...", id: "multi-combobox-structure", label: "MultiCombobox with helper text", name: "multi-combobox", onChange: onChange, options: options, value: value })));
|
|
69
|
+
const loadOptions = (query) => new Promise((resolve) => setTimeout(() => resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()))), 500));
|
|
70
|
+
return (react_1.default.createElement("div", { className: "p-4" },
|
|
71
|
+
react_1.default.createElement(multi_combobox_1.MultiCombobox, { label: "Async", loadOptions: loadOptions, name: "async", onChange: onChange, value: value })));
|
|
89
72
|
}
|
|
@@ -22,13 +22,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
26
|
exports.Default = Default;
|
|
30
|
-
exports.ComponentStructure = ComponentStructure;
|
|
31
|
-
const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
|
|
32
27
|
const react_1 = __importStar(require("react"));
|
|
33
28
|
const action_1 = require("../utils/action");
|
|
34
29
|
const multi_select_1 = require("./multi-select");
|
|
@@ -53,23 +48,13 @@ function Default() {
|
|
|
53
48
|
console.log("Select values: ", v);
|
|
54
49
|
setValue(v);
|
|
55
50
|
});
|
|
56
|
-
|
|
57
|
-
react_1.default.createElement(multi_select_1.MultiSelect, { dropdownMaxHeight: 350,
|
|
58
|
-
react_1.default.createElement(multi_select_1.MultiSelect, {
|
|
59
|
-
react_1.default.createElement(multi_select_1.MultiSelect, { helperText: "
|
|
60
|
-
react_1.default.createElement(multi_select_1.MultiSelect, {
|
|
61
|
-
react_1.default.createElement(multi_select_1.MultiSelect, {
|
|
62
|
-
react_1.default.createElement(multi_select_1.MultiSelect, { id: "multi-select-6", label: "MultiSelect with renderOption", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
|
|
51
|
+
return (react_1.default.createElement("div", { className: "space-y-6 p-8" },
|
|
52
|
+
react_1.default.createElement(multi_select_1.MultiSelect, { dropdownMaxHeight: 350, helperText: "Helper text", label: "Default", name: "default", onChange: onChange, options: options, placeholder: "Placeholder", value: value }),
|
|
53
|
+
react_1.default.createElement(multi_select_1.MultiSelect, { label: "With checkboxes", name: "with-checkboxes", onChange: onChange, options: options, value: value, withCheckboxes: true }),
|
|
54
|
+
react_1.default.createElement(multi_select_1.MultiSelect, { helperText: "Error message", isInvalid: true, isRequired: true, label: "Invalid", name: "invalid", onChange: onChange, options: options, value: value }),
|
|
55
|
+
react_1.default.createElement(multi_select_1.MultiSelect, { dropdownPlacement: "top", label: "Dropdown top", name: "dropdown-top", onChange: onChange, options: options, value: value }),
|
|
56
|
+
react_1.default.createElement(multi_select_1.MultiSelect, { label: "RenderOptions", name: "render-options", onChange: onChange, options: options, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
|
|
63
57
|
"Option: ",
|
|
64
58
|
option.label), value: value }),
|
|
65
|
-
react_1.default.createElement(multi_select_1.MultiSelect, {
|
|
66
|
-
"Option: ",
|
|
67
|
-
option.label), value: value })));
|
|
68
|
-
return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
69
|
-
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, component)));
|
|
70
|
-
}
|
|
71
|
-
function ComponentStructure() {
|
|
72
|
-
const [value, onChange] = (0, react_1.useState)(null);
|
|
73
|
-
return (react_1.default.createElement(component_structure_analyzer_1.default, null,
|
|
74
|
-
react_1.default.createElement(multi_select_1.MultiSelect, { helperText: "Start typing to see options...", id: "multi-select-structure", label: "MultiSelect with helper text", name: "multi-select-structure", onChange: onChange, options: options, value: value })));
|
|
59
|
+
react_1.default.createElement(multi_select_1.MultiSelect, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, options: options, value: value })));
|
|
75
60
|
}
|