@plasmicpkgs/antd5 0.0.158 → 0.0.159

package/dist/index.js

@@ -8866,9 +8866,19 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+function getThumbUrl(file) {
+  var _a;
+  if (!((_a = file == null ? void 0 : file.type) == null ? void 0 : _a.startsWith("image")))
+    return void 0;
+  return `data:${file.type};base64,${file.contents}`;
+}
 function UploadWrapper(props) {
-  const _a = props, { files, onFilesChange } = _a, rest = __objRest(_a, ["files", "onFilesChange"]);
+  const _a = props, { files, dragAndDropFiles, onFilesChange } = _a, rest = __objRest(_a, ["files", "dragAndDropFiles", "onFilesChange"]);
+  const filesRef = React.useRef();
+  filesRef.current = files;
+  const [previewFileId, setPreviewFileId] = React.useState();
   const handleChange = (info) => {
+    var _a2;
     const { file } = info;
     if (file.status === "removed") {
       return;
@@ -8881,15 +8891,16 @@ function UploadWrapper(props) {
       lastModified: file.lastModified
     };
     onFilesChange == null ? void 0 : onFilesChange([
-      ...files != null ? files : [],
+      ...(_a2 = filesRef.current) != null ? _a2 : [],
       __spreadProps(__spreadValues({}, metadata), {
         status: "uploading"
       })
     ]);
     const reader = new FileReader();
     reader.onload = () => {
+      var _a3;
       onFilesChange == null ? void 0 : onFilesChange([
-        ...(files != null ? files : []).filter((f) => f.uid !== file.uid),
+        ...((_a3 = filesRef.current) != null ? _a3 : []).filter((f) => f.uid !== file.uid),
         __spreadProps(__spreadValues({}, metadata), {
           contents: reader.result.replace(
             /^data:[^;]+;base64,/,
@@ -8900,8 +8911,9 @@ function UploadWrapper(props) {
       ]);
     };
     reader.onerror = (error) => {
+      var _a3;
       onFilesChange == null ? void 0 : onFilesChange([
-        ...(files != null ? files : []).filter((f) => f.uid !== file.uid),
+        ...((_a3 = filesRef.current) != null ? _a3 : []).filter((f) => f.uid !== file.uid),
         __spreadProps(__spreadValues({}, metadata), {
           status: "error"
         })
@@ -8912,10 +8924,26 @@ function UploadWrapper(props) {
   const handleRemove = (file) => {
     onFilesChange == null ? void 0 : onFilesChange((files != null ? files : []).filter((f) => f.uid !== file.uid));
   };
-  return /* @__PURE__ */ React__default.default.createElement(
-    antd.Upload,
+  const handlePreview = async (file) => {
+    var _a2;
+    setPreviewFileId((_a2 = files == null ? void 0 : files.filter((f) => file.uid === f.uid)[0]) == null ? void 0 : _a2.uid);
+  };
+  const handleCancel = () => setPreviewFileId(void 0);
+  const previewFile = React.useMemo(
+    () => files == null ? void 0 : files.filter((f) => previewFileId === f.uid)[0],
+    [files, previewFileId]
+  );
+  const UploadComponent = React.useMemo(
+    () => dragAndDropFiles ? antd.Upload.Dragger : antd.Upload,
+    [dragAndDropFiles]
+  );
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    UploadComponent,
     __spreadProps(__spreadValues({}, rest), {
-      fileList: files,
+      fileList: files == null ? void 0 : files.map((f) => __spreadProps(__spreadValues({}, f), {
+        thumbUrl: getThumbUrl(f)
+      })),
+      onPreview: handlePreview,
       beforeUpload: () => {
         return false;
       },
@@ -8926,7 +8954,23 @@ function UploadWrapper(props) {
         handleRemove(file);
       }
     })
-  );
+  ), /* @__PURE__ */ React__default.default.createElement(
+    antd.Modal,
+    {
+      open: Boolean(previewFile),
+      title: previewFile == null ? void 0 : previewFile.name,
+      footer: null,
+      onCancel: handleCancel
+    },
+    /* @__PURE__ */ React__default.default.createElement(
+      "img",
+      {
+        alt: "example",
+        style: { width: "100%" },
+        src: getThumbUrl(previewFile)
+      }
+    )
+  ));
 }
 UploadWrapper.__plasmicFormFieldMeta = {
   valueProp: "files",
@@ -8964,6 +9008,23 @@ function registerUpload(loader) {
         ],
         defaultValue: ""
       },
+      listType: {
+        type: "choice",
+        options: ["text", "picture", "picture-card", "picture-circle"],
+        defaultValueHint: "text"
+      },
+      dragAndDropFiles: {
+        type: "boolean",
+        defaultValueHint: false,
+        advanced: true,
+        description: "You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting."
+      },
+      multiple: {
+        type: "boolean",
+        advanced: true,
+        defaultValueHint: false,
+        description: "Upload several files at once in modern browsers"
+      },
       files: {
         type: "object",
         displayName: "Files",