@flozy/editor 10.4.7 → 10.4.8

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js

@@ -67,7 +67,7 @@ const SelectV1 = props => {
     setAvailableOptionsMap(obj);
   }, [availableOptions]);
   useEffect(() => {
-    const resolved = selectedOptions?.map(sel => availableOptionsMap?.[sel?.id]) ?? [];
+    const resolved = selectedOptions?.filter(sel => sel?.id && availableOptionsMap?.[sel.id])?.map(sel => availableOptionsMap[sel?.id]) ?? [];
     setResolvedSelectedOptions(resolved);
   }, [selectedOptions, availableOptionsMap]);
   useEffect(() => {

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -14,11 +14,12 @@ const EditOption = props => {
     onClose,
     mode,
     onEvent,
-    translation = () => {}
+    translation
   } = props;
   const [edit, setEdit] = useState({
     ...(mode?.edit || {})
   });
+  const [errorMessage, setErrorMessage] = useState("");
   const editData = useRef({
     ...edit
   });
@@ -31,10 +32,13 @@ const EditOption = props => {
   const selectedOption = edit?.options[optionIndex] || {};
   const pickerStyles = ColorPickerStyles(theme);
   const hideBackButton = edit?.hideBackButton || false;
+  const errorMessageRef = useRef(errorMessage);
+  useEffect(() => {
+    errorMessageRef.current = errorMessage;
+  }, [errorMessage]);
   useEffect(() => {
     return () => {
-      // on un-mount update the option change
-      if (editData?.current) {
+      if (editData?.current && !errorMessageRef.current) {
         delete editData?.current?.edited;
         onEvent("updateProperty", {
           ...editData?.current
@@ -43,18 +47,24 @@ const EditOption = props => {
     };
   }, []);
   const onChange = e => {
-    const updatedOptions = edit?.options.map((m, i) => {
+    const {
+      name,
+      value,
+      delete: isDelete
+    } = e?.target || {};
+    const targetValue = value?.toLowerCase();
+    const updatedOptions = edit?.options?.map((m, i) => {
       if (i === edit?.optionIndex) {
         return {
           ...m,
-          [e.target.name]: e?.target?.value
+          [name]: value
         };
       }
       return m;
     });
 
-    // for delete
-    if (edit?.optionIndex > -1 && e?.target?.delete) {
+    // If deleting the option
+    if (edit?.optionIndex > -1 && isDelete) {
       updatedOptions.splice(edit?.optionIndex, 1);
     }
     const latest = {
@@ -68,14 +78,28 @@ const EditOption = props => {
       ...latest,
       edited: true
     };
+    if (name === "value" && !value?.trim()) {
+      setErrorMessage("Option name must not be empty");
+      return;
+    }
+    const isDuplicate = name === "value" && targetValue && edit?.options?.some((op, i) => i !== edit?.optionIndex && op?.value?.toLowerCase?.() === targetValue);
+    if (isDuplicate) {
+      setErrorMessage("Option name must be unique");
+      return;
+    }
+    setErrorMessage(""); // Clear error on valid input
 
-    // if delete go back
-    if (e?.target?.delete) {
-      onEvent("editProperty", {
-        edit: {
-          ...latest
-        }
-      });
+    // If delete go back
+    if (isDelete) {
+      if (hideBackButton) {
+        onClose();
+      } else {
+        onEvent("editProperty", {
+          edit: {
+            ...latest
+          }
+        });
+      }
     }
   };
   const onBack = () => {
@@ -137,7 +161,9 @@ const EditOption = props => {
           value: selectedOption?.value,
           onChange: onChange,
           fullWidth: true,
-          placeholder: translation("Option Name")
+          placeholder: translation("Option Name"),
+          helperText: errorMessage,
+          error: !!errorMessage
         }),
         labelPlacement: "top"
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "10.4.7",
+  "version": "10.4.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"