@overmap-ai/core 1.0.35-add-image-to-forms.16 → 1.0.35-add-image-to-forms.17

package/dist/forms/fields/BaseField/BaseField.d.ts

@@ -30,7 +30,7 @@ export declare abstract class BaseField<TValue extends FieldValue, TIdentifier e
     private readonly formValidators;
     private readonly fieldValidators;
     readonly label: string;
-    readonly image: File | undefined;
+    readonly image: File | Promise<File> | undefined;
     /**
      * By default, validation doesn't execute on `onChange` events when editing fields
      * until the field has been `touched`. This can be overridden by setting this to `false`

package/dist/forms/fields/BaseField/layouts.d.ts

@@ -7,7 +7,7 @@ interface InputWithLabelProps {
     inputId: string;
     labelId: string;
     label: string;
-    image: File | undefined;
+    image: File | Promise<File> | undefined;
     children: ReactNode;
     flexProps?: ComponentProps<typeof Flex>;
 }

package/dist/forms/fields/SelectField/BaseSelectField.d.ts

@@ -19,7 +19,7 @@ export declare abstract class BaseSelectField<TValue extends FieldValue, TIdenti
         options: SelectFieldOption[];
         label: string;
         required: boolean;
-        image?: File | undefined;
+        image?: File | Promise<File> | undefined;
         description?: string | null | undefined;
         identifier: string;
         type: TIdentifier;

package/dist/forms/typings.d.ts

@@ -25,7 +25,7 @@ export interface BaseSerializedObject<TIdentifier extends FieldTypeIdentifier =
 export interface BaseSerializedField<TIdentifier extends FieldTypeIdentifier = FieldTypeIdentifier> extends BaseSerializedObject<TIdentifier> {
     label: string;
     required: boolean;
-    image?: File;
+    image?: File | Promise<File>;
 }
 /** All the possible field values */
 export type FieldValue = string | number | boolean | string[] | SelectFieldOption[] | File[] | Date | Marker | null;

package/dist/overmap-core.js

@@ -5330,6 +5330,9 @@ const separateImageFromFields = (payload) => {
     const newSectionFields = [];
     for (const field of sectionFields) {
       if (field.image) {
+        if (!(field.image instanceof File)) {
+          throw new Error(`Expected image to be a File, got ${typeof field.image} instead.`);
+        }
         images[field.identifier] = field.image;
         delete field.image;
       }
@@ -6859,16 +6862,24 @@ const FullScreenImagePreview = memo((props) => {
 FullScreenImagePreview.displayName = "FullScreenImagePreview";
 const InputWithLabel = (props) => {
   const { label, children, size, severity, inputId, labelId, image, flexProps } = props;
+  const [resolvedImage, setResolvedImage] = useState(void 0);
   const [showImagePreview, setShowImagePreview] = useState(false);
-  const imageURL = image ? URL.createObjectURL(image) : void 0;
+  useEffect(() => {
+    if (image instanceof Promise) {
+      image.then(setResolvedImage).catch(console.error);
+    } else {
+      setResolvedImage(image);
+    }
+  }, [image]);
+  const resolvedImageURL = resolvedImage ? URL.createObjectURL(resolvedImage) : void 0;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", ...flexProps, children: [
-    image && /* @__PURE__ */ jsxs(Fragment, { children: [
+    resolvedImage && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "img",
         {
           className: styles$6.previewImage,
-          src: imageURL,
-          alt: image.name,
+          src: resolvedImageURL,
+          alt: resolvedImage.name,
           onClick: () => {
             setShowImagePreview(true);
           }
@@ -6877,9 +6888,9 @@ const InputWithLabel = (props) => {
       showImagePreview && /* @__PURE__ */ jsx(
         FullScreenImagePreview,
         {
-          file: image,
-          url: imageURL,
-          name: image.name,
+          file: resolvedImage,
+          url: resolvedImageURL,
+          name: resolvedImage.name,
           setShowPreview: setShowImagePreview
         }
       )
@@ -10677,6 +10688,9 @@ const useFieldTypeItems = (onSelect = () => null) => {
     });
   }, [onSelect]);
 };
+const isSection = (field) => {
+  return field.type === "section";
+};
 const FieldSettingsPopover = memo((props) => {
   const { popoverInputs, hasError } = props;
   return /* @__PURE__ */ jsx(
@@ -10706,6 +10720,8 @@ FieldSettingsPopover.displayName = "FieldSettingsPopover";
 const FieldBuilder = memo((props) => {
   var _a2, _b, _c, _d, _e, _f;
   const { parentPath, index: index2, initial, conditionalSourceFields } = props;
+  const { values, setFieldValue, errors } = useFormikContext();
+  const fieldTypeItems = useFieldTypeItems();
   const RADIX_SM_MIN_WIDTH = 576;
   const [isLargeScreen, setIsLargeScreen] = useState(
     window.matchMedia(`(min-width: ${RADIX_SM_MIN_WIDTH}px)`).matches
@@ -10720,23 +10736,38 @@ const FieldBuilder = memo((props) => {
       mediaQuery.removeEventListener("change", handleMediaQueryChange);
     };
   }, []);
+  const [resolvedImage, setResolvedImage] = useState(void 0);
   const [showImagePreview, setShowImagePreview] = useState(false);
-  const { values, setFieldValue, errors } = useFormikContext();
-  const fieldTypeItems = useFieldTypeItems();
-  const isSection = useCallback((field) => {
-    return field.type === "section";
-  }, []);
+  useEffect(() => {
+    if (!isSection(initial)) {
+      if (initial.image instanceof Promise) {
+        initial.image.then(setResolvedImage).catch(console.error);
+      } else {
+        setResolvedImage(initial.image);
+      }
+    } else {
+      setResolvedImage(void 0);
+    }
+  }, [initial]);
+  const resolvedImageURL = resolvedImage ? URL.createObjectURL(resolvedImage) : void 0;
+  const handleImageDelete = useCallback(
+    (event) => {
+      event.stopPropagation();
+      void setFieldValue(`${parentPath}.${index2}.image`, null).then();
+    },
+    [index2, parentPath, setFieldValue]
+  );
   useEffect(() => {
     if (isSection(initial) && !initial.conditional) {
       void setFieldValue(`${parentPath}.${index2}.condition`, null).then();
     }
-  }, [index2, initial, isSection, parentPath, setFieldValue]);
+  }, [index2, initial, parentPath, setFieldValue]);
   const conditionLabel = useMemo(
     () => {
       var _a3, _b2;
       return isSection(initial) ? (_b2 = findFieldByIdentifier(values.fields, (_a3 = initial.condition) == null ? void 0 : _a3.identifier)) == null ? void 0 : _b2.label : void 0;
     },
-    [initial, isSection, values.fields]
+    [initial, values.fields]
   );
   const conditionComparison = isSection(initial) ? Array.isArray((_a2 = initial.condition) == null ? void 0 : _a2.value) ? "contains all of" : "equals" : void 0;
   let conditionValue = void 0;
@@ -10746,17 +10777,6 @@ const FieldBuilder = memo((props) => {
     }
     conditionValue = Array.isArray((_c = initial.condition) == null ? void 0 : _c.value) ? initial.condition.value.map((v) => typeof v === "string" ? v : v.label).join(", ") : (_e = (_d = initial.condition) == null ? void 0 : _d.value) == null ? void 0 : _e.toString();
   }
-  let imageURL = void 0;
-  if (!isSection(initial) && initial.image) {
-    imageURL = URL.createObjectURL(initial.image);
-  }
-  const handleImageDelete = useCallback(
-    (event) => {
-      event.stopPropagation();
-      void setFieldValue(`${parentPath}.${index2}.image`, null).then();
-    },
-    [index2, parentPath, setFieldValue]
-  );
   const handleInputChangeForInput = useCallback((event) => {
     if (event.target.parentNode instanceof HTMLElement) {
       event.target.parentNode.dataset.replicatedValue = event.target.value;
@@ -10859,14 +10879,14 @@ const FieldBuilder = memo((props) => {
           /* @__PURE__ */ jsx(Badge, { className: styles.typeBadge, children: (_f = fieldTypeItems.flat().find((item) => item.value === type)) == null ? void 0 : _f.content }),
           showPopoverInputs && /* @__PURE__ */ jsx(FieldSettingsPopover, { popoverInputs, hasError: popoverHasErrors })
         ] }),
-        !isSection(initial) && initial.image && /* @__PURE__ */ jsxs(Fragment, { children: [
+        resolvedImage && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { className: styles.imageContainer, children: [
             /* @__PURE__ */ jsx(
               "img",
               {
                 className: styles.previewImage,
-                src: imageURL,
-                alt: initial.image.name,
+                src: resolvedImageURL,
+                alt: resolvedImage.name,
                 onClick: () => {
                   setShowImagePreview(true);
                 }
@@ -10887,9 +10907,9 @@ const FieldBuilder = memo((props) => {
           showImagePreview && /* @__PURE__ */ jsx(
             FullScreenImagePreview,
             {
-              file: initial.image,
-              url: imageURL,
-              name: initial.image.name,
+              file: resolvedImage,
+              url: resolvedImageURL,
+              name: resolvedImage.name,
               setShowPreview: setShowImagePreview
             }
           )