@overmap-ai/core 1.0.34 → 1.0.35-add-image-to-forms.1

package/dist/forms/builder/FieldActions.d.ts

@@ -1,10 +1,13 @@
-/// <reference types="react" />
+import { ChangeEvent } from "react";
+import { FieldTypeIdentifier } from "../typings.ts";
 interface FieldActionsProps {
     index: number;
+    type: FieldTypeIdentifier;
     sectionIndex?: number;
     remove: () => void;
     duplicate: () => void;
     move: (direction: "up" | "down") => void;
+    upload?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const FieldActions: import("react").MemoExoticComponent<(props: FieldActionsProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -93,3 +93,6 @@ export declare const FieldTypeToEmptyFieldMapping: {
         required: boolean;
     };
 };
+export declare const maxFileSizeMB = 50;
+export declare const maxFileSizeKB: number;
+export declare const maxFileSizeB: number;

package/dist/overmap-core.js

@@ -6567,6 +6567,24 @@ var GearIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
     clipRule: "evenodd"
   }));
 });
+var _excluded$2C = ["color"];
+var ImageIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$2C);
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M2.5 1H12.5C13.3284 1 14 1.67157 14 2.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V2.5C1 1.67157 1.67157 1 2.5 1ZM2.5 2C2.22386 2 2 2.22386 2 2.5V8.3636L3.6818 6.6818C3.76809 6.59551 3.88572 6.54797 4.00774 6.55007C4.12975 6.55216 4.24568 6.60372 4.32895 6.69293L7.87355 10.4901L10.6818 7.6818C10.8575 7.50607 11.1425 7.50607 11.3182 7.6818L13 9.3636V2.5C13 2.22386 12.7761 2 12.5 2H2.5ZM2 12.5V9.6364L3.98887 7.64753L7.5311 11.4421L8.94113 13H2.5C2.22386 13 2 12.7761 2 12.5ZM12.5 13H10.155L8.48336 11.153L11 8.6364L13 10.6364V12.5C13 12.7761 12.7761 13 12.5 13ZM6.64922 5.5C6.64922 5.03013 7.03013 4.64922 7.5 4.64922C7.96987 4.64922 8.35078 5.03013 8.35078 5.5C8.35078 5.96987 7.96987 6.35078 7.5 6.35078C7.03013 6.35078 6.64922 5.96987 6.64922 5.5ZM7.5 3.74922C6.53307 3.74922 5.74922 4.53307 5.74922 5.5C5.74922 6.46693 6.53307 7.25078 7.5 7.25078C8.46693 7.25078 9.25078 6.46693 9.25078 5.5C9.25078 4.53307 8.46693 3.74922 7.5 3.74922Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
 var _excluded$2E = ["color"];
 var InputIcon = /* @__PURE__ */ forwardRef(function(_ref, forwardedRef) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
@@ -9442,7 +9460,6 @@ const emptyUploadField = {
   maximum_size: void 0,
   maximum_files: 1
 };
-const largestSupportedSize = 50;
 const _UploadField = class _UploadField extends BaseField {
   constructor(options) {
     const { extensions, maximum_files, maximum_size, ...base } = options;
@@ -9480,11 +9497,11 @@ const _UploadField = class _UploadField extends BaseField {
         field: new NumberField({
           // TODO: Default value
           label: "What is the maximum size of each file?",
-          description: `Maximum file size in megabytes (between 1MB–${largestSupportedSize}MB).`,
+          description: `Maximum file size in megabytes (between 1MB–${maxFileSizeMB}MB).`,
           required: false,
           identifier: `${path}maximum_size`,
           minimum: 1,
-          maximum: largestSupportedSize,
+          maximum: maxFileSizeMB,
           integers: true
         }),
         showDirectly: false
@@ -9524,7 +9541,7 @@ const _UploadField = class _UploadField extends BaseField {
   }
   getFieldValidators() {
     const validators = super.getFieldValidators();
-    const maxFileSizeInMB = this.maxFileSize ?? largestSupportedSize;
+    const maxFileSizeInMB = this.maxFileSize ?? maxFileSizeMB;
     const maxFileSizeInB = maxFileSizeInMB * 1e3 * 1e3;
     const maxFiles = this.maxFiles || 1;
     validators.push((value) => {
@@ -9586,6 +9603,9 @@ const FieldTypeToEmptyFieldMapping = {
   "multi-string": emptyMultiStringField,
   "multi-select": emptyMultiSelectField
 };
+const maxFileSizeMB = 50;
+const maxFileSizeKB = maxFileSizeMB * 1e3;
+const maxFileSizeB = maxFileSizeKB * 1e3;
 const deserializeField = (serializedField) => {
   const fieldType = serializedField.type;
   const fieldCls = FieldTypeToClsMapping[fieldType];
@@ -10263,8 +10283,12 @@ const forMobile = (mobile, display) => ({
   sm: mobile ? "none" : display
 });
 const FieldActions = memo((props) => {
-  const { index: index2, sectionIndex, remove: remove2, duplicate, move } = props;
+  const { index: index2, type, sectionIndex, remove: remove2, duplicate, move, upload } = props;
+  if (type !== "section" && !upload) {
+    throw new Error("Upload function prop must be defined for non-section fields.");
+  }
   const { values } = useFormikContext();
+  const fileInputRef = useRef(null);
   const actions = useMemo(() => {
     const actions2 = [
       {
@@ -10275,11 +10299,24 @@ const FieldActions = memo((props) => {
       },
       {
         Icon: TrashIcon,
-        buttonProps: { onClick: remove2 },
         key: "delete",
-        text: "Delete"
+        text: "Delete",
+        buttonProps: { onClick: remove2 }
       }
     ];
+    if (type !== "section") {
+      actions2.unshift({
+        Icon: ImageIcon,
+        key: "upload",
+        text: "Upload image",
+        buttonProps: {
+          onClick: () => {
+            var _a2;
+            (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+          }
+        }
+      });
+    }
     if (sectionIndex === void 0 && index2 !== values.fields.length - 1 || sectionIndex !== void 0 && (sectionIndex < values.fields.length - 1 || index2 !== values.fields[sectionIndex].fields.length - 1)) {
       actions2.unshift({
         Icon: ArrowDownIcon,
@@ -10305,7 +10342,7 @@ const FieldActions = memo((props) => {
       });
     }
     return actions2;
-  }, [duplicate, index2, move, remove2, sectionIndex, values.fields]);
+  }, [duplicate, index2, move, remove2, sectionIndex, type, values.fields]);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(Flex, { display: forMobile(false, "flex"), direction: "column", gap: "5", mx: "2", children: actions.map((Action) => /* @__PURE__ */ jsx(
       IconButton,
@@ -10334,7 +10371,8 @@ const FieldActions = memo((props) => {
           };
         })
       }
-    ) })
+    ) }),
+    type !== "section" && /* @__PURE__ */ jsx("input", { style: { display: "none" }, ref: fileInputRef, type: "file", accept: "image/*", onChange: upload })
   ] });
 });
 FieldActions.displayName = "FieldActions";
@@ -10605,6 +10643,7 @@ const FieldWithActions = memo((props) => {
   const { field, index: index2, sectionIndex, takenLabels, remove: remove2 } = props;
   const { setFieldValue, values } = useFormikContext();
   const { reorderField } = useFieldReordering();
+  const { showError } = useToast();
   const parentPath = `fields.${sectionIndex}.fields`;
   const editFieldProps = useMemo(
     () => ({
@@ -10648,6 +10687,25 @@ const FieldWithActions = memo((props) => {
     },
     [sectionIndex, values.fields, index2, reorderField, setFieldValue]
   );
+  const uploadImage = useCallback(
+    (event) => {
+      const { files } = event.target;
+      console.log(files);
+      if (files && files.length === 1) {
+        const file = files.item(0);
+        if (!file)
+          return;
+        if (file.size > maxFileSizeB) {
+          showError({
+            title: "File upload error",
+            description: `The file ${file.name} exceeded the maximum file size`
+          });
+          return;
+        }
+      }
+    },
+    [showError]
+  );
   return /* @__PURE__ */ jsx(Draggable, { draggableId: field.identifier, index: index2, children: (draggableProvided) => /* @__PURE__ */ jsx(
     Card,
     {
@@ -10666,10 +10724,12 @@ const FieldWithActions = memo((props) => {
           FieldActions,
           {
             index: index2,
+            type: field.type,
             sectionIndex,
             remove: remove2,
             duplicate: duplicateField,
-            move: moveField
+            move: moveField,
+            upload: uploadImage
           }
         )
       ] })
@@ -10871,6 +10931,7 @@ const FieldSectionWithActions = memo((props) => {
             FieldActions,
             {
               index: sectionIndex,
+              type: field.type,
               remove: removeSection,
               duplicate: duplicateSection,
               move: moveSection