@flozy/editor 10.4.5 → 10.4.7
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/dist/Editor/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +134 -18
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +26 -10
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +482 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +513 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +27 -11
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +29 -9
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +17 -6
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +4 -3
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +184 -171
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +31 -8
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
- package/dist/Editor/common/LinkSettings/index.js +82 -80
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +67 -38
- package/dist/Editor/common/Select/index.js +44 -5
- package/dist/Editor/common/Select/styles.js +30 -2
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +177 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +186 -62
- package/dist/Editor/helper/index.js +5 -1
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +380 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +9 -2
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- package/package.json +4 -4
@@ -0,0 +1,513 @@
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
2
|
+
import Autocomplete from "@mui/material/Autocomplete";
|
3
|
+
import Box from "@mui/material/Box";
|
4
|
+
import Chip from "@mui/material/Chip";
|
5
|
+
import Divider from "@mui/material/Divider";
|
6
|
+
import Popover from "@mui/material/Popover";
|
7
|
+
import TextField from "@mui/material/TextField";
|
8
|
+
import Typography from "@mui/material/Typography";
|
9
|
+
import List from "@mui/material/List";
|
10
|
+
import ListItem from "@mui/material/ListItem";
|
11
|
+
import ListItemButton from "@mui/material/ListItemButton";
|
12
|
+
import IconButton from "@mui/material/IconButton";
|
13
|
+
import Tooltip from "@mui/material/Tooltip";
|
14
|
+
import { CloseIcon } from "../../../../../common/iconslist";
|
15
|
+
import { useEditorContext } from "../../../../../hooks/useMouseMove";
|
16
|
+
import SwipeableDrawer from "@mui/material/SwipeableDrawer";
|
17
|
+
import Icon from "../../../../../common/Icon";
|
18
|
+
import { colors } from "../../../../Color Picker/defaultColors";
|
19
|
+
import PropertySettings from "../../Options";
|
20
|
+
import SnackbarAlert from "../../../../../common/SnackBar";
|
21
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
22
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
23
|
+
const EXCLUDED_COLORS = new Set(["#000000", "#0F172A", "#2563EB", "#FFFFFF", "#64748B"]);
|
24
|
+
const DEFAULT_COLORS = colors?.filter(f => !f?.includes("linear") && !EXCLUDED_COLORS?.has(f));
|
25
|
+
const generateRandomColor = () => {
|
26
|
+
const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS?.length);
|
27
|
+
return DEFAULT_COLORS[randomIndex];
|
28
|
+
};
|
29
|
+
const hasIds = arr => Array.isArray(arr) && arr.every(item => 'id' in item);
|
30
|
+
const generateStableIds = arr => arr.map((item, index) => ({
|
31
|
+
...item,
|
32
|
+
id: `multi_${item.value}_${index}`
|
33
|
+
}));
|
34
|
+
const SelectV1 = props => {
|
35
|
+
const {
|
36
|
+
value,
|
37
|
+
options = [],
|
38
|
+
selectMultiple,
|
39
|
+
property,
|
40
|
+
wrapColumn = false,
|
41
|
+
onChange,
|
42
|
+
onUpdate,
|
43
|
+
translation
|
44
|
+
} = props;
|
45
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
46
|
+
const [anchorElOption, setAnchorElOption] = useState(null);
|
47
|
+
const [currentIndex, setCurrentIndex] = useState(null);
|
48
|
+
const [selectedOptions, setSelectedOptions] = useState([]);
|
49
|
+
const [availableOptions, setAvailableOptions] = useState([]);
|
50
|
+
const [showSnackBar, setShowSnackBar] = useState(false);
|
51
|
+
const [chipColor, setChipColor] = useState(generateRandomColor());
|
52
|
+
const [inputValue, setInputValue] = useState("");
|
53
|
+
const [availableOptionsMap, setAvailableOptionsMap] = useState({});
|
54
|
+
const [resolvedSelectedOptions, setResolvedSelectedOptions] = useState([]);
|
55
|
+
const {
|
56
|
+
theme
|
57
|
+
} = useEditorContext();
|
58
|
+
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
59
|
+
const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
|
60
|
+
useEffect(() => {
|
61
|
+
const obj = {};
|
62
|
+
for (const opt of availableOptions) {
|
63
|
+
if (opt?.id != null) {
|
64
|
+
obj[opt.id] = opt;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
setAvailableOptionsMap(obj);
|
68
|
+
}, [availableOptions]);
|
69
|
+
useEffect(() => {
|
70
|
+
const resolved = selectedOptions?.map(sel => availableOptionsMap?.[sel?.id]) ?? [];
|
71
|
+
setResolvedSelectedOptions(resolved);
|
72
|
+
}, [selectedOptions, availableOptionsMap]);
|
73
|
+
useEffect(() => {
|
74
|
+
// console.log("Options received:", options);
|
75
|
+
const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
|
76
|
+
// console.log("Enriched available options:", enrichedAvailable);
|
77
|
+
setAvailableOptions(enrichedAvailable);
|
78
|
+
const enrichedSelected = hasIds(value) ? value : value?.map(sel => {
|
79
|
+
const match = enrichedAvailable.find(opt => opt?.value === sel?.value);
|
80
|
+
return match ? {
|
81
|
+
id: match.id
|
82
|
+
} : sel;
|
83
|
+
});
|
84
|
+
// console.log("Enriched selected options:", enrichedSelected);
|
85
|
+
setSelectedOptions(enrichedSelected);
|
86
|
+
}, []);
|
87
|
+
const mode = useMemo(() => ({
|
88
|
+
type: "editOptionMulti",
|
89
|
+
edit: {
|
90
|
+
label: selectMultiple ? "Multi Select" : "Select",
|
91
|
+
visible: true,
|
92
|
+
key: property,
|
93
|
+
type: selectMultiple ? "multi-select" : "select",
|
94
|
+
options: availableOptions || [],
|
95
|
+
optionIndex: currentIndex,
|
96
|
+
hideBackButton: true
|
97
|
+
}
|
98
|
+
}), [availableOptions, property, currentIndex, selectMultiple]);
|
99
|
+
const customScrollStyles = {
|
100
|
+
scrollbarWidth: "thin",
|
101
|
+
scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
|
102
|
+
"&::-webkit-scrollbar": {
|
103
|
+
width: "6px"
|
104
|
+
},
|
105
|
+
"&::-webkit-scrollbar-thumb": {
|
106
|
+
backgroundColor: theme?.palette?.editor?.brainPopupScroll,
|
107
|
+
borderRadius: "3px"
|
108
|
+
},
|
109
|
+
"&::-webkit-scrollbar-track": {
|
110
|
+
display: "none"
|
111
|
+
}
|
112
|
+
};
|
113
|
+
useEffect(() => {
|
114
|
+
if (inputValue?.trim() && !chipColor) {
|
115
|
+
setChipColor(generateRandomColor());
|
116
|
+
}
|
117
|
+
}, [inputValue, chipColor]);
|
118
|
+
useEffect(() => {
|
119
|
+
const enriched = hasIds(options) ? options : generateStableIds(options);
|
120
|
+
const isDifferent = JSON.stringify(enriched) !== JSON.stringify(availableOptions);
|
121
|
+
if (isDifferent) {
|
122
|
+
setAvailableOptions(enriched);
|
123
|
+
}
|
124
|
+
}, [options]);
|
125
|
+
const handleOpenPopover = useCallback(event => {
|
126
|
+
setAnchorEl(event.currentTarget);
|
127
|
+
}, []);
|
128
|
+
const handleClosePopover = useCallback(e => {
|
129
|
+
e?.stopPropagation();
|
130
|
+
setAnchorEl(null);
|
131
|
+
}, []);
|
132
|
+
const handleAddOption = newValue => {
|
133
|
+
const trimmedValue = newValue?.trim?.();
|
134
|
+
if (!trimmedValue) return;
|
135
|
+
const isDuplicate = availableOptions.some(opt => opt.value.toLowerCase() === trimmedValue.toLowerCase());
|
136
|
+
if (isDuplicate) {
|
137
|
+
const existing = availableOptions.find(opt => opt?.value?.toLowerCase() === trimmedValue?.toLowerCase());
|
138
|
+
const alreadySelected = selectedOptions?.some(sel => sel?.id === existing?.id);
|
139
|
+
if (!alreadySelected) {
|
140
|
+
const updatedSelected = selectMultiple ? [...selectedOptions, {
|
141
|
+
id: existing.id
|
142
|
+
}] : [{
|
143
|
+
id: existing.id
|
144
|
+
}];
|
145
|
+
setSelectedOptions(updatedSelected);
|
146
|
+
onChange?.(updatedSelected);
|
147
|
+
}
|
148
|
+
setInputValue("");
|
149
|
+
setChipColor("");
|
150
|
+
return;
|
151
|
+
}
|
152
|
+
const newOption = {
|
153
|
+
value: trimmedValue,
|
154
|
+
color: chipColor,
|
155
|
+
id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
|
156
|
+
};
|
157
|
+
const updatedAvailableOptions = [...availableOptions, newOption];
|
158
|
+
const updatedSelectedOptions = selectMultiple ? [...selectedOptions, {
|
159
|
+
id: newOption.id
|
160
|
+
}] : [{
|
161
|
+
id: newOption.id
|
162
|
+
}];
|
163
|
+
setAvailableOptions(updatedAvailableOptions);
|
164
|
+
setSelectedOptions(updatedSelectedOptions);
|
165
|
+
onUpdate?.(updatedAvailableOptions);
|
166
|
+
onChange?.(updatedSelectedOptions);
|
167
|
+
setInputValue("");
|
168
|
+
setChipColor("");
|
169
|
+
};
|
170
|
+
const onClose = () => {
|
171
|
+
setAnchorEl(anchorElOption);
|
172
|
+
setAnchorElOption(null);
|
173
|
+
};
|
174
|
+
const onEditOption = (type, data) => {
|
175
|
+
const updateData = data?.edit ? data?.edit?.options : data?.options;
|
176
|
+
onUpdate(updateData);
|
177
|
+
};
|
178
|
+
const handleEditOption = (e, index) => {
|
179
|
+
e.stopPropagation();
|
180
|
+
setCurrentIndex(index);
|
181
|
+
setAnchorElOption(anchorEl);
|
182
|
+
setAnchorEl(null);
|
183
|
+
};
|
184
|
+
const handleSelectOption = option => {
|
185
|
+
const isAlreadySelected = selectedOptions.some(opt => opt?.id === option?.id);
|
186
|
+
if (isAlreadySelected) {
|
187
|
+
setShowSnackBar(true);
|
188
|
+
return;
|
189
|
+
}
|
190
|
+
const updatedOptions = selectMultiple ? [...selectedOptions, {
|
191
|
+
id: option?.id
|
192
|
+
}] : [{
|
193
|
+
id: option?.id
|
194
|
+
}];
|
195
|
+
setSelectedOptions(updatedOptions);
|
196
|
+
onChange(updatedOptions);
|
197
|
+
if (!selectMultiple) {
|
198
|
+
handleClosePopover();
|
199
|
+
}
|
200
|
+
};
|
201
|
+
const handleClearSelection = () => {
|
202
|
+
setSelectedOptions([]);
|
203
|
+
};
|
204
|
+
const handleDeleteChip = (event, option) => {
|
205
|
+
event.stopPropagation();
|
206
|
+
const updatedOptions = selectedOptions?.filter(selected => selected?.id !== option?.id);
|
207
|
+
setSelectedOptions(updatedOptions);
|
208
|
+
onChange(selectMultiple ? updatedOptions : updatedOptions[0] || null);
|
209
|
+
};
|
210
|
+
const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
|
211
|
+
const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
|
212
|
+
const open = Boolean(anchorEl);
|
213
|
+
const openEditOption = Boolean(anchorElOption);
|
214
|
+
const id = open ? "autocomplete-popover" : undefined;
|
215
|
+
return /*#__PURE__*/_jsxs("div", {
|
216
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
217
|
+
sx: {
|
218
|
+
display: "flex",
|
219
|
+
flexWrap: wrapColumn ? "wrap" : "nowrap",
|
220
|
+
overflowX: wrapColumn ? "hidden" : "auto",
|
221
|
+
gap: 0.5,
|
222
|
+
padding: "8px",
|
223
|
+
cursor: "pointer"
|
224
|
+
},
|
225
|
+
onClick: handleOpenPopover,
|
226
|
+
children: resolvedSelectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
|
227
|
+
label: option?.value,
|
228
|
+
onDelete: event => {
|
229
|
+
handleDeleteChip(event, option);
|
230
|
+
},
|
231
|
+
deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
|
232
|
+
variant: "filled",
|
233
|
+
sx: {
|
234
|
+
backgroundColor: option?.color,
|
235
|
+
color: '#0F172A',
|
236
|
+
"& .MuiChip-deleteIcon": {
|
237
|
+
flexShrink: 0,
|
238
|
+
"& path": {
|
239
|
+
stroke: '#0F172A !important'
|
240
|
+
}
|
241
|
+
},
|
242
|
+
"&:hover": {
|
243
|
+
opacity: 0.8
|
244
|
+
}
|
245
|
+
}
|
246
|
+
}, index))
|
247
|
+
}), /*#__PURE__*/_jsx(PopoverComponent, {
|
248
|
+
id: id,
|
249
|
+
open: open,
|
250
|
+
anchorEl: anchorEl,
|
251
|
+
anchor: "bottom",
|
252
|
+
onClose: e => handleClosePopover(e),
|
253
|
+
anchorOrigin: {
|
254
|
+
vertical: "top",
|
255
|
+
horizontal: "left"
|
256
|
+
},
|
257
|
+
transformOrigin: {
|
258
|
+
vertical: "top",
|
259
|
+
horizontal: "left"
|
260
|
+
},
|
261
|
+
sx: {
|
262
|
+
"& .MuiPaper-root": {
|
263
|
+
borderRadius: "20px",
|
264
|
+
background: theme?.palette?.editor?.textFormatBgColor,
|
265
|
+
border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
|
266
|
+
boxShadow: "0px 4px 10px 0px #00000029"
|
267
|
+
}
|
268
|
+
},
|
269
|
+
disableAutoFocus: true,
|
270
|
+
disableEnforceFocus: true,
|
271
|
+
disableRestoreFocus: true,
|
272
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
273
|
+
sx: {
|
274
|
+
width: isMobile ? "100%" : 300
|
275
|
+
},
|
276
|
+
children: [/*#__PURE__*/_jsx(Autocomplete, {
|
277
|
+
multiple: true,
|
278
|
+
freeSolo: true,
|
279
|
+
disablePortal: true,
|
280
|
+
PopperComponent: () => null,
|
281
|
+
sx: {
|
282
|
+
"& .MuiFormControl-root": {
|
283
|
+
maxHeight: "250px",
|
284
|
+
overflowY: "auto",
|
285
|
+
overflowX: "hidden",
|
286
|
+
pr: '12px',
|
287
|
+
pl: '12px',
|
288
|
+
marginTop: '12px',
|
289
|
+
...customScrollStyles
|
290
|
+
}
|
291
|
+
},
|
292
|
+
disableClearable: true,
|
293
|
+
options: [],
|
294
|
+
getOptionLabel: () => "",
|
295
|
+
value: resolvedSelectedOptions,
|
296
|
+
onChange: (event, newValues) => {
|
297
|
+
const stringOptions = newValues.filter(val => typeof val === "string" && val.trim());
|
298
|
+
for (const str of stringOptions) {
|
299
|
+
handleAddOption(str);
|
300
|
+
}
|
301
|
+
},
|
302
|
+
inputValue: inputValue,
|
303
|
+
onInputChange: (event, newInputValue) => setInputValue(newInputValue),
|
304
|
+
onKeyDown: event => {
|
305
|
+
if (event.key === "Enter" && inputValue.trim()) {
|
306
|
+
event.preventDefault();
|
307
|
+
handleAddOption(inputValue);
|
308
|
+
}
|
309
|
+
},
|
310
|
+
filterOptions: (options, params) => options?.filter(option => option?.value?.toLowerCase()?.includes(params?.inputValue?.toLowerCase())),
|
311
|
+
renderInput: params => /*#__PURE__*/_jsx(TextField, {
|
312
|
+
...params,
|
313
|
+
variant: "standard",
|
314
|
+
InputProps: {
|
315
|
+
...params.InputProps,
|
316
|
+
disableUnderline: true,
|
317
|
+
sx: {
|
318
|
+
display: "flex",
|
319
|
+
flexWrap: "wrap",
|
320
|
+
fontFamily: "Inter",
|
321
|
+
fontWeight: 400,
|
322
|
+
fontSize: "12px",
|
323
|
+
color: theme?.palette?.editor?.secondaryTextColor,
|
324
|
+
"&::placeholder": {
|
325
|
+
color: theme?.palette?.editor?.secondaryTextColor
|
326
|
+
},
|
327
|
+
"& .MuiAutocomplete-input": {
|
328
|
+
minWidth: "100px !important"
|
329
|
+
}
|
330
|
+
},
|
331
|
+
endAdornment: /*#__PURE__*/_jsx(Tooltip, {
|
332
|
+
arrow: true,
|
333
|
+
title: "Clear Selected",
|
334
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
335
|
+
onClick: handleClearSelection,
|
336
|
+
sx: {
|
337
|
+
padding: 0,
|
338
|
+
minWidth: "unset",
|
339
|
+
"& .MuiSvgIcon-root": {
|
340
|
+
fontSize: 20
|
341
|
+
},
|
342
|
+
'& rect': {
|
343
|
+
fill: theme?.palette?.editor?.closeButtonSvgStroke
|
344
|
+
},
|
345
|
+
'&:hover': {
|
346
|
+
backgroundColor: 'transparent'
|
347
|
+
}
|
348
|
+
},
|
349
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
350
|
+
icon: "resetIconNew"
|
351
|
+
})
|
352
|
+
})
|
353
|
+
})
|
354
|
+
},
|
355
|
+
sx: {
|
356
|
+
backgroundColor: "transparent",
|
357
|
+
fontFamily: 'Inter',
|
358
|
+
fontWeight: 400,
|
359
|
+
fontSize: '12px'
|
360
|
+
},
|
361
|
+
placeholder: "Create new one..."
|
362
|
+
}),
|
363
|
+
renderTags: (tagValues, getTagProps) => {
|
364
|
+
return tagValues?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
|
365
|
+
variant: "filled",
|
366
|
+
label: option?.value,
|
367
|
+
...getTagProps({
|
368
|
+
index
|
369
|
+
}),
|
370
|
+
onDelete: event => {
|
371
|
+
handleDeleteChip(event, option);
|
372
|
+
},
|
373
|
+
deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
|
374
|
+
sx: {
|
375
|
+
backgroundColor: option?.color,
|
376
|
+
color: '#0F172A',
|
377
|
+
"& .MuiChip-deleteIcon": {
|
378
|
+
flexShrink: 0,
|
379
|
+
"& path": {
|
380
|
+
stroke: '#0F172A !important'
|
381
|
+
}
|
382
|
+
},
|
383
|
+
"&:hover": {
|
384
|
+
opacity: 0.8
|
385
|
+
}
|
386
|
+
}
|
387
|
+
}, index));
|
388
|
+
}
|
389
|
+
}), /*#__PURE__*/_jsx(Divider, {
|
390
|
+
sx: {
|
391
|
+
mt: '12px',
|
392
|
+
borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
|
393
|
+
boxShadow: theme?.palette?.editor?.dividerDropShadow
|
394
|
+
}
|
395
|
+
}), /*#__PURE__*/_jsx(Box, {
|
396
|
+
sx: {
|
397
|
+
pl: '4px'
|
398
|
+
},
|
399
|
+
children: /*#__PURE__*/_jsxs(List, {
|
400
|
+
sx: {
|
401
|
+
maxHeight: "250px",
|
402
|
+
overflowY: "auto",
|
403
|
+
...customScrollStyles
|
404
|
+
},
|
405
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
406
|
+
sx: {
|
407
|
+
mb: 1,
|
408
|
+
pl: '8px',
|
409
|
+
color: theme?.palette?.editor?.secondaryTextColor,
|
410
|
+
fontFamily: 'Inter',
|
411
|
+
fontWeight: 400,
|
412
|
+
fontSize: '12px'
|
413
|
+
},
|
414
|
+
children: "Choose an option or create one"
|
415
|
+
}), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
|
416
|
+
sx: {
|
417
|
+
padding: 0
|
418
|
+
},
|
419
|
+
disablePadding: true,
|
420
|
+
children: /*#__PURE__*/_jsxs(ListItemButton, {
|
421
|
+
onClick: () => handleSelectOption(option),
|
422
|
+
sx: {
|
423
|
+
paddingTop: "4px",
|
424
|
+
paddingBottom: "4px",
|
425
|
+
justifyContent: 'space-between',
|
426
|
+
'&:hover': {
|
427
|
+
'& path': {
|
428
|
+
stroke: theme?.palette?.editor?.activeColor
|
429
|
+
},
|
430
|
+
borderRadius: '12px'
|
431
|
+
}
|
432
|
+
},
|
433
|
+
children: [/*#__PURE__*/_jsx(Chip, {
|
434
|
+
label: option?.value,
|
435
|
+
sx: {
|
436
|
+
backgroundColor: option?.color,
|
437
|
+
color: '#0F172A',
|
438
|
+
fontWeight: 500,
|
439
|
+
fontSize: "12px",
|
440
|
+
fontFamily: "Inter",
|
441
|
+
padding: "4px 12px",
|
442
|
+
borderRadius: "16px",
|
443
|
+
maxWidth: "180px",
|
444
|
+
whiteSpace: "nowrap",
|
445
|
+
overflow: "hidden",
|
446
|
+
textOverflow: "ellipsis"
|
447
|
+
}
|
448
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
449
|
+
size: "small",
|
450
|
+
sx: {
|
451
|
+
'& path': {
|
452
|
+
stroke: theme?.palette?.editor?.closeButtonSvgStroke
|
453
|
+
},
|
454
|
+
'&:hover': {
|
455
|
+
backgroundColor: 'transparent'
|
456
|
+
}
|
457
|
+
},
|
458
|
+
onClick: e => handleEditOption(e, index),
|
459
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
460
|
+
icon: "rightArrow"
|
461
|
+
})
|
462
|
+
})]
|
463
|
+
})
|
464
|
+
}, index)), inputValue?.trim() && !isExactMatch && /*#__PURE__*/_jsx(ListItem, {
|
465
|
+
disablePadding: true,
|
466
|
+
children: /*#__PURE__*/_jsxs(ListItemButton, {
|
467
|
+
onClick: () => handleAddOption(inputValue),
|
468
|
+
sx: {
|
469
|
+
display: "flex",
|
470
|
+
alignItems: "center"
|
471
|
+
},
|
472
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
473
|
+
sx: {
|
474
|
+
color: theme?.palette?.editor?.secondaryTextColor,
|
475
|
+
marginRight: "6px",
|
476
|
+
fontSize: "14px",
|
477
|
+
fontFamily: "Inter"
|
478
|
+
},
|
479
|
+
children: "Create"
|
480
|
+
}), /*#__PURE__*/_jsx(Chip, {
|
481
|
+
label: `${inputValue}`,
|
482
|
+
sx: {
|
483
|
+
backgroundColor: chipColor,
|
484
|
+
color: '#0F172A',
|
485
|
+
fontWeight: 500,
|
486
|
+
fontSize: "12px",
|
487
|
+
fontFamily: "Inter",
|
488
|
+
borderRadius: "16px",
|
489
|
+
maxWidth: "180px",
|
490
|
+
whiteSpace: "nowrap",
|
491
|
+
overflow: "hidden",
|
492
|
+
textOverflow: "ellipsis"
|
493
|
+
}
|
494
|
+
})]
|
495
|
+
})
|
496
|
+
})]
|
497
|
+
})
|
498
|
+
})]
|
499
|
+
})
|
500
|
+
}), openEditOption ? /*#__PURE__*/_jsx(PropertySettings, {
|
501
|
+
open: openEditOption,
|
502
|
+
anchorEl: anchorElOption,
|
503
|
+
mode: mode,
|
504
|
+
onClose: onClose,
|
505
|
+
onEvent: onEditOption,
|
506
|
+
translation: translation
|
507
|
+
}) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
|
508
|
+
message: "Option already selected!",
|
509
|
+
setShowSnackBar: setShowSnackBar
|
510
|
+
}) : null]
|
511
|
+
});
|
512
|
+
};
|
513
|
+
export default SelectV1;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { useDataView } from "../../Providers/DataViewProvider";
|
3
|
-
import
|
3
|
+
import MultiSelectWithPopover from "./Components/MultiSelect";
|
4
|
+
import SelectV1 from "./Components/SelectV1";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
const MultiSelectType = props => {
|
6
7
|
const {
|
@@ -10,35 +11,50 @@ const MultiSelectType = props => {
|
|
10
11
|
options,
|
11
12
|
label = "",
|
12
13
|
readOnly,
|
13
|
-
settings
|
14
|
+
settings,
|
15
|
+
translation
|
14
16
|
} = props;
|
17
|
+
const {
|
18
|
+
onChange,
|
19
|
+
onUpdateProperty
|
20
|
+
} = useDataView();
|
15
21
|
const {
|
16
22
|
wrapColumn
|
17
23
|
} = settings;
|
18
|
-
const {
|
19
|
-
onChange
|
20
|
-
} = useDataView();
|
21
24
|
const value = Array.isArray(pValue) ? pValue : [];
|
22
25
|
const coloredValues = [...(value || [])]?.map(m => {
|
23
26
|
return {
|
24
27
|
...m,
|
25
|
-
color: options
|
28
|
+
color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
|
26
29
|
};
|
27
30
|
});
|
28
31
|
const handleChange = data => {
|
29
32
|
onChange(rowIndex, {
|
30
|
-
[property]: data?.filter(f => f?.
|
33
|
+
[property]: data?.filter(f => f?.id)
|
31
34
|
});
|
32
35
|
};
|
33
|
-
|
34
|
-
|
36
|
+
const handleUpdate = data => {
|
37
|
+
const updateData = {
|
38
|
+
label: "Multi Select",
|
39
|
+
visible: true,
|
40
|
+
key: property,
|
41
|
+
type: "multi-select",
|
42
|
+
options: data
|
43
|
+
};
|
44
|
+
onUpdateProperty(updateData);
|
45
|
+
};
|
46
|
+
return /*#__PURE__*/_jsx(SelectV1, {
|
35
47
|
value: coloredValues,
|
36
48
|
onChange: handleChange,
|
49
|
+
onUpdate: handleUpdate,
|
37
50
|
options: options,
|
38
|
-
|
51
|
+
selectMultiple: true,
|
39
52
|
limitTags: 2,
|
40
53
|
placeholder: label,
|
41
|
-
disabled: readOnly
|
54
|
+
disabled: readOnly,
|
55
|
+
property: property,
|
56
|
+
wrapColumn: wrapColumn,
|
57
|
+
translation: translation
|
42
58
|
});
|
43
59
|
};
|
44
60
|
export default MultiSelectType;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { useDataView } from "../../Providers/DataViewProvider";
|
3
|
-
import Select from "./Components/Select";
|
3
|
+
// import Select from "./Components/Select";
|
4
|
+
import SelectV1 from "./Components/SelectV1";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
const SelectType = props => {
|
6
7
|
const {
|
@@ -8,28 +9,47 @@ const SelectType = props => {
|
|
8
9
|
property,
|
9
10
|
value,
|
10
11
|
options,
|
11
|
-
readOnly
|
12
|
+
readOnly,
|
13
|
+
translation
|
12
14
|
} = props;
|
13
15
|
const {
|
14
|
-
onChange
|
16
|
+
onChange,
|
17
|
+
onUpdateProperty
|
15
18
|
} = useDataView();
|
19
|
+
const label = "";
|
16
20
|
const coloredValues = [...(value || [])]?.map(m => {
|
17
21
|
return {
|
18
22
|
...m,
|
19
|
-
color: options
|
23
|
+
color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
|
20
24
|
};
|
21
25
|
});
|
22
26
|
const handleChange = data => {
|
23
27
|
onChange(rowIndex, {
|
24
|
-
[property]: data?.filter(f => f?.
|
28
|
+
[property]: data?.filter(f => f?.id)
|
25
29
|
});
|
26
30
|
};
|
27
|
-
|
31
|
+
const handleUpdate = data => {
|
32
|
+
const updateData = {
|
33
|
+
"label": "Select",
|
34
|
+
"visible": true,
|
35
|
+
"key": property,
|
36
|
+
"type": "select",
|
37
|
+
"options": data
|
38
|
+
};
|
39
|
+
onUpdateProperty(updateData);
|
40
|
+
};
|
41
|
+
return /*#__PURE__*/_jsx(SelectV1, {
|
28
42
|
value: coloredValues,
|
29
|
-
onChange: handleChange,
|
30
43
|
options: options,
|
31
|
-
|
32
|
-
disabled: readOnly
|
44
|
+
selectMultiple: false,
|
45
|
+
disabled: readOnly,
|
46
|
+
limitTags: 2,
|
47
|
+
placeholder: label,
|
48
|
+
property: property,
|
49
|
+
wrapColumn: false,
|
50
|
+
onChange: handleChange,
|
51
|
+
onUpdate: handleUpdate,
|
52
|
+
translation: translation
|
33
53
|
});
|
34
54
|
};
|
35
55
|
export default SelectType;
|