@flozy/editor 10.5.6 → 10.5.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 +128 -14
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +49 -11
- 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/DataTypes/Components/{MultiSelect.js → SelectV1.js} +125 -69
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +10 -10
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +28 -9
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +12 -5
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +40 -14
- package/dist/Editor/Elements/Divider/Divider.js +1 -1
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +3 -3
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +0 -1
- package/dist/Editor/Elements/Form/FormField.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
- 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 +7 -7
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- 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/style.js +2 -2
- package/dist/Editor/Elements/Table/AddRowCol.js +8 -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 +24 -5
- 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 +4 -4
- 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 +73 -13
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +12 -5
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -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 +28 -0
- 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 +45 -65
- package/dist/Editor/common/LinkSettings/index.js +14 -28
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +164 -244
- 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 +4 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
- 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 +0 -1
- package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
- 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 -7
- package/dist/Editor/common/Select/styles.js +30 -2
- package/dist/Editor/common/Shorthands/elements.js +54 -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/textOptions.js +15 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +76 -0
- package/dist/Editor/common/iconslist.js +21 -0
- package/dist/Editor/commonStyle.js +116 -61
- package/dist/Editor/helper/deserialize/index.js +6 -4
- 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 +9 -3
- 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 +14 -5
- 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 +161 -37
- package/dist/Editor/utils/accordion.js +26 -7
- 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/formfield.js +1 -0
- package/dist/Editor/utils/helper.js +142 -28
- 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
package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/{MultiSelect.js → SelectV1.js}
RENAMED
@@ -10,10 +10,10 @@ import List from "@mui/material/List";
|
|
10
10
|
import ListItem from "@mui/material/ListItem";
|
11
11
|
import ListItemButton from "@mui/material/ListItemButton";
|
12
12
|
import IconButton from "@mui/material/IconButton";
|
13
|
-
import SwipeableDrawer from "@mui/material/SwipeableDrawer";
|
14
13
|
import Tooltip from "@mui/material/Tooltip";
|
15
14
|
import { CloseIcon } from "../../../../../common/iconslist";
|
16
15
|
import { useEditorContext } from "../../../../../hooks/useMouseMove";
|
16
|
+
import SwipeableDrawer from "@mui/material/SwipeableDrawer";
|
17
17
|
import Icon from "../../../../../common/Icon";
|
18
18
|
import { colors } from "../../../../Color Picker/defaultColors";
|
19
19
|
import PropertySettings from "../../Options";
|
@@ -26,41 +26,73 @@ const generateRandomColor = () => {
|
|
26
26
|
const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS?.length);
|
27
27
|
return DEFAULT_COLORS[randomIndex];
|
28
28
|
};
|
29
|
-
const
|
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 => {
|
30
35
|
const {
|
31
|
-
options = [],
|
32
36
|
value,
|
33
|
-
|
34
|
-
|
37
|
+
options = [],
|
38
|
+
selectMultiple,
|
35
39
|
property,
|
36
40
|
wrapColumn = false,
|
41
|
+
onChange,
|
42
|
+
onUpdate,
|
37
43
|
translation
|
38
44
|
} = props;
|
39
45
|
const [anchorEl, setAnchorEl] = useState(null);
|
40
46
|
const [anchorElOption, setAnchorElOption] = useState(null);
|
41
47
|
const [currentIndex, setCurrentIndex] = useState(null);
|
42
|
-
const [selectedOptions, setSelectedOptions] = useState(
|
43
|
-
const [availableOptions, setAvailableOptions] = useState(
|
48
|
+
const [selectedOptions, setSelectedOptions] = useState([]);
|
49
|
+
const [availableOptions, setAvailableOptions] = useState([]);
|
44
50
|
const [showSnackBar, setShowSnackBar] = useState(false);
|
45
51
|
const [chipColor, setChipColor] = useState(generateRandomColor());
|
46
52
|
const [inputValue, setInputValue] = useState("");
|
53
|
+
const [availableOptionsMap, setAvailableOptionsMap] = useState({});
|
54
|
+
const [resolvedSelectedOptions, setResolvedSelectedOptions] = useState([]);
|
47
55
|
const {
|
48
56
|
theme
|
49
57
|
} = useEditorContext();
|
50
58
|
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
51
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?.filter(sel => sel?.id && availableOptionsMap?.[sel.id])?.map(sel => availableOptionsMap[sel?.id]) ?? [];
|
71
|
+
setResolvedSelectedOptions(resolved);
|
72
|
+
}, [selectedOptions, availableOptionsMap]);
|
73
|
+
useEffect(() => {
|
74
|
+
const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
|
75
|
+
setAvailableOptions(enrichedAvailable);
|
76
|
+
const enrichedSelected = hasIds(value) ? value : value?.map(sel => {
|
77
|
+
const match = enrichedAvailable.find(opt => opt?.value === sel?.value);
|
78
|
+
return match ? {
|
79
|
+
id: match.id
|
80
|
+
} : sel;
|
81
|
+
});
|
82
|
+
setSelectedOptions(enrichedSelected);
|
83
|
+
}, []);
|
52
84
|
const mode = useMemo(() => ({
|
53
85
|
type: "editOptionMulti",
|
54
86
|
edit: {
|
55
|
-
label: "Multi Select",
|
87
|
+
label: selectMultiple ? "Multi Select" : "Select",
|
56
88
|
visible: true,
|
57
89
|
key: property,
|
58
|
-
type: "multi-select",
|
59
|
-
options:
|
90
|
+
type: selectMultiple ? "multi-select" : "select",
|
91
|
+
options: availableOptions || [],
|
60
92
|
optionIndex: currentIndex,
|
61
93
|
hideBackButton: true
|
62
94
|
}
|
63
|
-
}), [
|
95
|
+
}), [availableOptions, property, currentIndex, selectMultiple]);
|
64
96
|
const customScrollStyles = {
|
65
97
|
scrollbarWidth: "thin",
|
66
98
|
scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
|
@@ -81,10 +113,12 @@ const MultiSelectWithPopover = props => {
|
|
81
113
|
}
|
82
114
|
}, [inputValue, chipColor]);
|
83
115
|
useEffect(() => {
|
84
|
-
|
85
|
-
|
116
|
+
const enriched = hasIds(options) ? options : generateStableIds(options);
|
117
|
+
const isDifferent = JSON.stringify(enriched) !== JSON.stringify(availableOptions);
|
118
|
+
if (isDifferent) {
|
119
|
+
setAvailableOptions(enriched);
|
86
120
|
}
|
87
|
-
}, [options
|
121
|
+
}, [options]);
|
88
122
|
const handleOpenPopover = useCallback(event => {
|
89
123
|
setAnchorEl(event.currentTarget);
|
90
124
|
}, []);
|
@@ -93,17 +127,40 @@ const MultiSelectWithPopover = props => {
|
|
93
127
|
setAnchorEl(null);
|
94
128
|
}, []);
|
95
129
|
const handleAddOption = newValue => {
|
96
|
-
const trimmedValue = newValue?.trim();
|
130
|
+
const trimmedValue = newValue?.trim?.();
|
97
131
|
if (!trimmedValue) return;
|
132
|
+
const isDuplicate = availableOptions.some(opt => opt.value.toLowerCase() === trimmedValue.toLowerCase());
|
133
|
+
if (isDuplicate) {
|
134
|
+
const existing = availableOptions.find(opt => opt?.value?.toLowerCase() === trimmedValue?.toLowerCase());
|
135
|
+
const alreadySelected = selectedOptions?.some(sel => sel?.id === existing?.id);
|
136
|
+
if (!alreadySelected) {
|
137
|
+
const updatedSelected = selectMultiple ? [...selectedOptions, {
|
138
|
+
id: existing.id
|
139
|
+
}] : [{
|
140
|
+
id: existing.id
|
141
|
+
}];
|
142
|
+
setSelectedOptions(updatedSelected);
|
143
|
+
onChange?.(updatedSelected);
|
144
|
+
}
|
145
|
+
setInputValue("");
|
146
|
+
setChipColor("");
|
147
|
+
return;
|
148
|
+
}
|
98
149
|
const newOption = {
|
99
150
|
value: trimmedValue,
|
100
|
-
color: chipColor
|
151
|
+
color: chipColor,
|
152
|
+
id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
|
101
153
|
};
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
154
|
+
const updatedAvailableOptions = [...availableOptions, newOption];
|
155
|
+
const updatedSelectedOptions = selectMultiple ? [...selectedOptions, {
|
156
|
+
id: newOption.id
|
157
|
+
}] : [{
|
158
|
+
id: newOption.id
|
159
|
+
}];
|
160
|
+
setAvailableOptions(updatedAvailableOptions);
|
161
|
+
setSelectedOptions(updatedSelectedOptions);
|
162
|
+
onUpdate?.(updatedAvailableOptions);
|
163
|
+
onChange?.(updatedSelectedOptions);
|
107
164
|
setInputValue("");
|
108
165
|
setChipColor("");
|
109
166
|
};
|
@@ -114,11 +171,6 @@ const MultiSelectWithPopover = props => {
|
|
114
171
|
const onEditOption = (type, data) => {
|
115
172
|
const updateData = data?.edit ? data?.edit?.options : data?.options;
|
116
173
|
onUpdate(updateData);
|
117
|
-
if (data?.edit?.options) {
|
118
|
-
const updatedSelectedOptions = selectedOptions?.filter(selOption => updateData?.some(availOption => availOption?.value === selOption?.value && availOption?.color === selOption?.color));
|
119
|
-
setSelectedOptions(updatedSelectedOptions);
|
120
|
-
onClose();
|
121
|
-
}
|
122
174
|
};
|
123
175
|
const handleEditOption = (e, index) => {
|
124
176
|
e.stopPropagation();
|
@@ -127,12 +179,20 @@ const MultiSelectWithPopover = props => {
|
|
127
179
|
setAnchorEl(null);
|
128
180
|
};
|
129
181
|
const handleSelectOption = option => {
|
130
|
-
|
131
|
-
|
132
|
-
setSelectedOptions(updatedOptions);
|
133
|
-
onChange(updatedOptions);
|
134
|
-
} else {
|
182
|
+
const isAlreadySelected = selectedOptions.some(opt => opt?.id === option?.id);
|
183
|
+
if (isAlreadySelected) {
|
135
184
|
setShowSnackBar(true);
|
185
|
+
return;
|
186
|
+
}
|
187
|
+
const updatedOptions = selectMultiple ? [...selectedOptions, {
|
188
|
+
id: option?.id
|
189
|
+
}] : [{
|
190
|
+
id: option?.id
|
191
|
+
}];
|
192
|
+
setSelectedOptions(updatedOptions);
|
193
|
+
onChange(updatedOptions);
|
194
|
+
if (!selectMultiple) {
|
195
|
+
handleClosePopover();
|
136
196
|
}
|
137
197
|
};
|
138
198
|
const handleClearSelection = () => {
|
@@ -140,11 +200,9 @@ const MultiSelectWithPopover = props => {
|
|
140
200
|
};
|
141
201
|
const handleDeleteChip = (event, option) => {
|
142
202
|
event.stopPropagation();
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
return updatedOptions;
|
147
|
-
});
|
203
|
+
const updatedOptions = selectedOptions?.filter(selected => selected?.id !== option?.id);
|
204
|
+
setSelectedOptions(updatedOptions);
|
205
|
+
onChange(selectMultiple ? updatedOptions : updatedOptions[0] || null);
|
148
206
|
};
|
149
207
|
const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
|
150
208
|
const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
|
@@ -162,7 +220,7 @@ const MultiSelectWithPopover = props => {
|
|
162
220
|
cursor: "pointer"
|
163
221
|
},
|
164
222
|
onClick: handleOpenPopover,
|
165
|
-
children:
|
223
|
+
children: resolvedSelectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
|
166
224
|
label: option?.value,
|
167
225
|
onDelete: event => {
|
168
226
|
handleDeleteChip(event, option);
|
@@ -230,16 +288,12 @@ const MultiSelectWithPopover = props => {
|
|
230
288
|
},
|
231
289
|
disableClearable: true,
|
232
290
|
options: [],
|
233
|
-
getOptionLabel:
|
234
|
-
value:
|
291
|
+
getOptionLabel: () => "",
|
292
|
+
value: resolvedSelectedOptions,
|
235
293
|
onChange: (event, newValues) => {
|
236
|
-
const
|
237
|
-
|
238
|
-
|
239
|
-
} : value);
|
240
|
-
const isDuplicate = addedOptions?.some(newOpt => (selectedOptions || [])?.some(opt => opt.value === newOpt.value));
|
241
|
-
if (!isDuplicate) {
|
242
|
-
setSelectedOptions([...selectedOptions, ...addedOptions]);
|
294
|
+
const stringOptions = newValues.filter(val => typeof val === "string" && val.trim());
|
295
|
+
for (const str of stringOptions) {
|
296
|
+
handleAddOption(str);
|
243
297
|
}
|
244
298
|
},
|
245
299
|
inputValue: inputValue,
|
@@ -303,30 +357,32 @@ const MultiSelectWithPopover = props => {
|
|
303
357
|
},
|
304
358
|
placeholder: "Create new one..."
|
305
359
|
}),
|
306
|
-
renderTags: (tagValues, getTagProps) =>
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
|
316
|
-
sx: {
|
317
|
-
backgroundColor: option?.color,
|
318
|
-
color: '#0F172A',
|
319
|
-
"& .MuiChip-deleteIcon": {
|
320
|
-
flexShrink: 0,
|
321
|
-
"& path": {
|
322
|
-
stroke: '#0F172A !important'
|
323
|
-
}
|
360
|
+
renderTags: (tagValues, getTagProps) => {
|
361
|
+
return tagValues?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
|
362
|
+
variant: "filled",
|
363
|
+
label: option?.value,
|
364
|
+
...getTagProps({
|
365
|
+
index
|
366
|
+
}),
|
367
|
+
onDelete: event => {
|
368
|
+
handleDeleteChip(event, option);
|
324
369
|
},
|
325
|
-
|
326
|
-
|
370
|
+
deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
|
371
|
+
sx: {
|
372
|
+
backgroundColor: option?.color,
|
373
|
+
color: '#0F172A',
|
374
|
+
"& .MuiChip-deleteIcon": {
|
375
|
+
flexShrink: 0,
|
376
|
+
"& path": {
|
377
|
+
stroke: '#0F172A !important'
|
378
|
+
}
|
379
|
+
},
|
380
|
+
"&:hover": {
|
381
|
+
opacity: 0.8
|
382
|
+
}
|
327
383
|
}
|
328
|
-
}
|
329
|
-
}
|
384
|
+
}, index));
|
385
|
+
}
|
330
386
|
}), /*#__PURE__*/_jsx(Divider, {
|
331
387
|
sx: {
|
332
388
|
mt: '12px',
|
@@ -451,4 +507,4 @@ const MultiSelectWithPopover = props => {
|
|
451
507
|
}) : null]
|
452
508
|
});
|
453
509
|
};
|
454
|
-
export default
|
510
|
+
export default SelectV1;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { useDataView } from "../../Providers/DataViewProvider";
|
3
|
-
import
|
3
|
+
import SelectV1 from "./Components/SelectV1";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
const MultiSelectType = props => {
|
6
6
|
const {
|
@@ -24,30 +24,30 @@ const MultiSelectType = props => {
|
|
24
24
|
const coloredValues = [...(value || [])]?.map(m => {
|
25
25
|
return {
|
26
26
|
...m,
|
27
|
-
color: options
|
27
|
+
color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
|
28
28
|
};
|
29
29
|
});
|
30
30
|
const handleChange = data => {
|
31
31
|
onChange(rowIndex, {
|
32
|
-
[property]: data?.filter(f => f?.
|
32
|
+
[property]: data?.filter(f => f?.id)
|
33
33
|
});
|
34
34
|
};
|
35
35
|
const handleUpdate = data => {
|
36
36
|
const updateData = {
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
37
|
+
label: "Multi Select",
|
38
|
+
visible: true,
|
39
|
+
key: property,
|
40
|
+
type: "multi-select",
|
41
|
+
options: data
|
42
42
|
};
|
43
43
|
onUpdateProperty(updateData);
|
44
44
|
};
|
45
|
-
return /*#__PURE__*/_jsx(
|
45
|
+
return /*#__PURE__*/_jsx(SelectV1, {
|
46
46
|
value: coloredValues,
|
47
47
|
onChange: handleChange,
|
48
48
|
onUpdate: handleUpdate,
|
49
49
|
options: options,
|
50
|
-
|
50
|
+
selectMultiple: true,
|
51
51
|
limitTags: 2,
|
52
52
|
placeholder: label,
|
53
53
|
disabled: readOnly,
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { useDataView } from "../../Providers/DataViewProvider";
|
3
|
-
import
|
3
|
+
import SelectV1 from "./Components/SelectV1";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
const SelectType = props => {
|
6
6
|
const {
|
@@ -8,28 +8,47 @@ const SelectType = props => {
|
|
8
8
|
property,
|
9
9
|
value,
|
10
10
|
options,
|
11
|
-
readOnly
|
11
|
+
readOnly,
|
12
|
+
translation
|
12
13
|
} = props;
|
13
14
|
const {
|
14
|
-
onChange
|
15
|
+
onChange,
|
16
|
+
onUpdateProperty
|
15
17
|
} = useDataView();
|
18
|
+
const label = "";
|
16
19
|
const coloredValues = [...(value || [])]?.map(m => {
|
17
20
|
return {
|
18
21
|
...m,
|
19
|
-
color: options
|
22
|
+
color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
|
20
23
|
};
|
21
24
|
});
|
22
25
|
const handleChange = data => {
|
23
26
|
onChange(rowIndex, {
|
24
|
-
[property]: data?.filter(f => f?.
|
27
|
+
[property]: data?.filter(f => f?.id)
|
25
28
|
});
|
26
29
|
};
|
27
|
-
|
30
|
+
const handleUpdate = data => {
|
31
|
+
const updateData = {
|
32
|
+
"label": "Select",
|
33
|
+
"visible": true,
|
34
|
+
"key": property,
|
35
|
+
"type": "select",
|
36
|
+
"options": data
|
37
|
+
};
|
38
|
+
onUpdateProperty(updateData);
|
39
|
+
};
|
40
|
+
return /*#__PURE__*/_jsx(SelectV1, {
|
28
41
|
value: coloredValues,
|
29
|
-
onChange: handleChange,
|
30
42
|
options: options,
|
31
|
-
|
32
|
-
disabled: readOnly
|
43
|
+
selectMultiple: false,
|
44
|
+
disabled: readOnly,
|
45
|
+
limitTags: 2,
|
46
|
+
placeholder: label,
|
47
|
+
property: property,
|
48
|
+
wrapColumn: false,
|
49
|
+
onChange: handleChange,
|
50
|
+
onUpdate: handleUpdate,
|
51
|
+
translation: translation
|
33
52
|
});
|
34
53
|
};
|
35
54
|
export default SelectType;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useState } from "react";
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
2
2
|
import { Box, List, ListItemButton, ListItemText, ListItemIcon, TextField, Chip } from "@mui/material";
|
3
3
|
import { colors } from "../../../Color Picker/defaultColors";
|
4
4
|
import Icon from "../../../../common/Icon";
|
@@ -20,8 +20,14 @@ const AddOptions = props => {
|
|
20
20
|
const [value, setValue] = useState("");
|
21
21
|
const [error, setError] = useState("");
|
22
22
|
const {
|
23
|
-
options
|
23
|
+
options = []
|
24
24
|
} = edit;
|
25
|
+
const inputRef = useRef();
|
26
|
+
useEffect(() => {
|
27
|
+
if (inputRef?.current) {
|
28
|
+
inputRef.current.focus();
|
29
|
+
}
|
30
|
+
}, [addBox, options]);
|
25
31
|
const onAddBox = () => {
|
26
32
|
setAddBox(!addBox);
|
27
33
|
};
|
@@ -40,7 +46,8 @@ const AddOptions = props => {
|
|
40
46
|
...edit,
|
41
47
|
options: [{
|
42
48
|
value: value,
|
43
|
-
color: getRandomColor()
|
49
|
+
color: getRandomColor(),
|
50
|
+
id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
|
44
51
|
}, ...(options || [])]
|
45
52
|
});
|
46
53
|
setValue("");
|
@@ -60,7 +67,6 @@ const AddOptions = props => {
|
|
60
67
|
};
|
61
68
|
const onBlur = () => {
|
62
69
|
setValue("");
|
63
|
-
setAddBox(false);
|
64
70
|
setError("");
|
65
71
|
};
|
66
72
|
return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
|
@@ -79,6 +85,7 @@ const AddOptions = props => {
|
|
79
85
|
})
|
80
86
|
}), addBox ? /*#__PURE__*/_jsx(Box, {
|
81
87
|
children: /*#__PURE__*/_jsx(TextField, {
|
88
|
+
inputRef: inputRef,
|
82
89
|
className: "mt",
|
83
90
|
size: "small",
|
84
91
|
fullWidth: true,
|
@@ -87,7 +94,7 @@ const AddOptions = props => {
|
|
87
94
|
onChange: handleChange,
|
88
95
|
onBlur: onBlur,
|
89
96
|
helperText: error
|
90
|
-
})
|
97
|
+
}, `input_${options?.length}`)
|
91
98
|
}) : null, /*#__PURE__*/_jsx(List, {
|
92
99
|
children: options?.map((m, i) => {
|
93
100
|
return /*#__PURE__*/_jsxs(ListItemButton, {
|
@@ -19,6 +19,7 @@ const EditOption = props => {
|
|
19
19
|
const [edit, setEdit] = useState({
|
20
20
|
...(mode?.edit || {})
|
21
21
|
});
|
22
|
+
const [errorMessage, setErrorMessage] = useState("");
|
22
23
|
const editData = useRef({
|
23
24
|
...edit
|
24
25
|
});
|
@@ -31,10 +32,13 @@ const EditOption = props => {
|
|
31
32
|
const selectedOption = edit?.options[optionIndex] || {};
|
32
33
|
const pickerStyles = ColorPickerStyles(theme);
|
33
34
|
const hideBackButton = edit?.hideBackButton || false;
|
35
|
+
const errorMessageRef = useRef(errorMessage);
|
36
|
+
useEffect(() => {
|
37
|
+
errorMessageRef.current = errorMessage;
|
38
|
+
}, [errorMessage]);
|
34
39
|
useEffect(() => {
|
35
40
|
return () => {
|
36
|
-
|
37
|
-
if (editData?.current) {
|
41
|
+
if (editData?.current && !errorMessageRef.current) {
|
38
42
|
delete editData?.current?.edited;
|
39
43
|
onEvent("updateProperty", {
|
40
44
|
...editData?.current
|
@@ -43,18 +47,24 @@ const EditOption = props => {
|
|
43
47
|
};
|
44
48
|
}, []);
|
45
49
|
const onChange = e => {
|
46
|
-
const
|
50
|
+
const {
|
51
|
+
name,
|
52
|
+
value,
|
53
|
+
delete: isDelete
|
54
|
+
} = e?.target || {};
|
55
|
+
const targetValue = value?.toLowerCase();
|
56
|
+
const updatedOptions = edit?.options?.map((m, i) => {
|
47
57
|
if (i === edit?.optionIndex) {
|
48
58
|
return {
|
49
59
|
...m,
|
50
|
-
[
|
60
|
+
[name]: value
|
51
61
|
};
|
52
62
|
}
|
53
63
|
return m;
|
54
64
|
});
|
55
65
|
|
56
|
-
//
|
57
|
-
if (edit?.optionIndex > -1 &&
|
66
|
+
// If deleting the option
|
67
|
+
if (edit?.optionIndex > -1 && isDelete) {
|
58
68
|
updatedOptions.splice(edit?.optionIndex, 1);
|
59
69
|
}
|
60
70
|
const latest = {
|
@@ -68,14 +78,28 @@ const EditOption = props => {
|
|
68
78
|
...latest,
|
69
79
|
edited: true
|
70
80
|
};
|
81
|
+
if (name === "value" && !value?.trim()) {
|
82
|
+
setErrorMessage("Option name must not be empty");
|
83
|
+
return;
|
84
|
+
}
|
85
|
+
const isDuplicate = name === "value" && targetValue && edit?.options?.some((op, i) => i !== edit?.optionIndex && op?.value?.toLowerCase?.() === targetValue);
|
86
|
+
if (isDuplicate) {
|
87
|
+
setErrorMessage("Option name must be unique");
|
88
|
+
return;
|
89
|
+
}
|
90
|
+
setErrorMessage(""); // Clear error on valid input
|
71
91
|
|
72
|
-
//
|
73
|
-
if (
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
92
|
+
// If delete go back
|
93
|
+
if (isDelete) {
|
94
|
+
if (hideBackButton) {
|
95
|
+
onClose();
|
96
|
+
} else {
|
97
|
+
onEvent("editProperty", {
|
98
|
+
edit: {
|
99
|
+
...latest
|
100
|
+
}
|
101
|
+
});
|
102
|
+
}
|
79
103
|
}
|
80
104
|
};
|
81
105
|
const onBack = () => {
|
@@ -137,7 +161,9 @@ const EditOption = props => {
|
|
137
161
|
value: selectedOption?.value,
|
138
162
|
onChange: onChange,
|
139
163
|
fullWidth: true,
|
140
|
-
placeholder: translation("Option Name")
|
164
|
+
placeholder: translation("Option Name"),
|
165
|
+
helperText: errorMessage,
|
166
|
+
error: !!errorMessage
|
141
167
|
}),
|
142
168
|
labelPlacement: "top"
|
143
169
|
})
|
@@ -89,7 +89,7 @@ const VideoPlaceholder = props => {
|
|
89
89
|
},
|
90
90
|
children: [/*#__PURE__*/_jsx(Icon, {
|
91
91
|
icon: "video"
|
92
|
-
}), TYPE_LABELS[type] ||
|
92
|
+
}), translation(TYPE_LABELS[type] || "Embed Video or Other")]
|
93
93
|
}) : /*#__PURE__*/_jsxs(Box, {
|
94
94
|
sx: {
|
95
95
|
color: "#64748B !important",
|
@@ -4,7 +4,6 @@ import { Node } from "slate";
|
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
|
6
6
|
import DeleteIcon from "@mui/icons-material/Delete";
|
7
|
-
import BackupIcon from "@mui/icons-material/Backup";
|
8
7
|
import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
|
9
8
|
import FormPopup from "./FormPopup";
|
10
9
|
import ButtonPopup from "../Button/ButtonPopup";
|
@@ -160,7 +159,8 @@ const Form = props => {
|
|
160
159
|
[pair[0]]: pair[1],
|
161
160
|
placeholder: placeholder,
|
162
161
|
form_name: formName,
|
163
|
-
tagName: tagName
|
162
|
+
tagName: tagName,
|
163
|
+
uid: fieldData?.uid
|
164
164
|
});
|
165
165
|
}
|
166
166
|
let params = {
|
@@ -207,7 +207,7 @@ const Form = props => {
|
|
207
207
|
}, {
|
208
208
|
at: path
|
209
209
|
});
|
210
|
-
// adding form field style to the current form node
|
210
|
+
// adding form field style to the current form node
|
211
211
|
const currentNode = Node.get(editor, path);
|
212
212
|
if (currentNode) {
|
213
213
|
currentNode.children.forEach((item, index) => {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Transforms
|
2
|
+
import { Transforms } from "slate";
|
3
3
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
4
|
import { IconButton, Tooltip, Grid, useTheme } from "@mui/material";
|
5
5
|
import FormElements from "./FormElements";
|