@pisell/materials 3.0.67 → 3.2.2

package/lib/components/dataSourceComponents/fields/Upload/BaseUpload.js

@@ -0,0 +1,504 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Upload/BaseUpload.tsx
+var BaseUpload_exports = {};
+__export(BaseUpload_exports, {
+  default: () => BaseUpload_default
+});
+module.exports = __toCommonJS(BaseUpload_exports);
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_ahooks = require("ahooks");
+var import_utils = require("@pisell/utils");
+var import_iconfont = __toESM(require("../../../iconfont"));
+var import_pisellModal = __toESM(require("../../../pisellModal"));
+var import_pisellToast = __toESM(require("../../../pisellToast"));
+var import_pisellUpload = __toESM(require("../../../pisellUpload"));
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_locales = require("../../../../locales");
+var import_constants = require("./constants");
+var import_usePlatform = require("../../hooks/usePlatform");
+var import_utils2 = require("./utils");
+var import_shopUploadServe = require("./shopUploadServe");
+var import_fallback = __toESM(require("./fallback.png"));
+var import_index = require("./index.less");
+var BaseUpload = (props) => {
+  const {
+    renderMode,
+    maxSize,
+    minCount,
+    maxCount,
+    multiple,
+    presetType,
+    customType,
+    enablePresetType,
+    enableCustomType,
+    allowPreview,
+    value,
+    typeMaxSizeMap,
+    enableMultilingual,
+    onChange,
+    mediaUploadUrl: propsMediaUploadUrl,
+    getHeaders: propsGetHeaders,
+    ...restProps
+  } = props;
+  const isShop = (0, import_usePlatform.useIsShop)();
+  const [fileList, setFileList] = (0, import_react.useState)([]);
+  const [previewImage, setPreviewImage] = (0, import_react.useState)("");
+  const [previewOpen, setPreviewOpen] = (0, import_react.useState)(false);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [editMultilingualFile, setEditMultilingualFile] = (0, import_react.useState)(null);
+  const fileListRef = (0, import_react.useRef)([]);
+  (0, import_react.useEffect)(() => {
+    fileListRef.current = fileList;
+  }, [fileList]);
+  const { appHelper } = (0, import_useEngineContext.default)();
+  const { mediaUploadUrl, getHeaders } = (appHelper == null ? void 0 : appHelper.constants) || {};
+  (0, import_react.useEffect)(() => {
+    const currentValue = getValueFromFileList(fileListRef.current);
+    if (!fileListRef.current.length || !(0, import_utils2.isValueEqual)(value, currentValue)) {
+      const newFileList = (0, import_utils2.getDefaultFileList)(value, {
+        enableMultilingual: !!enableMultilingual,
+        multiple: !!multiple
+      });
+      setFileList(newFileList);
+    }
+  }, [value, enableMultilingual, multiple]);
+  const getValueFromFileList = (fileList2) => {
+    if (!fileList2.length) return multiple ? [] : "";
+    if (enableMultilingual) {
+      const multilingualValues = fileList2.filter((file) => file.status === "done").map(
+        (file) => {
+          var _a, _b;
+          return file.multilingual || (0, import_utils2.createMultilingualData)(((_b = (_a = file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || file.url || "");
+        }
+      );
+      return multiple ? multilingualValues : multilingualValues[0];
+    }
+    const urls = fileList2.filter((file) => file.status === "done").map((file) => {
+      var _a, _b;
+      return ((_b = (_a = file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || file.url || "";
+    });
+    return multiple ? urls : urls[0] || "";
+  };
+  const calcMaxCount = (0, import_react.useMemo)(
+    () => multiple ? maxCount || import_constants.DEFAULT_MAX_COUNT : 1,
+    [maxCount, multiple]
+  );
+  const accept = (0, import_react.useMemo)(() => {
+    const types = [
+      ...enablePresetType ? presetType || [] : [],
+      ...enableCustomType ? customType || [] : []
+    ];
+    return types.join(",");
+  }, [presetType, customType, enableCustomType, enablePresetType]);
+  const countError = (0, import_ahooks.useDebounceFn)(
+    (msg) => (0, import_pisellToast.default)({ content: msg }),
+    { wait: 500 }
+  );
+  const typeError = (0, import_ahooks.useDebounceFn)(
+    (msg) => (0, import_pisellToast.default)({ content: msg }),
+    { wait: 500 }
+  );
+  const sizeError = (0, import_ahooks.useDebounceFn)(
+    (msg) => (0, import_pisellToast.default)({ content: msg }),
+    { wait: 500 }
+  );
+  const fileDoneSetMultilingualFileList = (0, import_ahooks.useMemoizedFn)(() => {
+    setFileList((prev) => {
+      return prev.map((item) => {
+        var _a, _b, _c, _d;
+        return {
+          ...item,
+          multilingualFileList: item.multilingualFileList || (0, import_utils2.createMultilingualFileList)(
+            ((_b = (_a = item.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || item.url || ""
+          ),
+          multilingual: item.multilingual || (0, import_utils2.createMultilingualData)(
+            ((_d = (_c = item.response) == null ? void 0 : _c.data) == null ? void 0 : _d.url) || item.url || ""
+          )
+        };
+      });
+    });
+  });
+  const handleChange = (0, import_react.useCallback)(
+    ({ file, fileList: newFileList }) => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const updatedFileList = newFileList.map((item) => {
+        var _a2;
+        return {
+          ...item,
+          status: item.status === "done" && item.response && !((_a2 = item.response) == null ? void 0 : _a2.status) ? "error" : item.status
+        };
+      });
+      setFileList(updatedFileList);
+      if (file.status === "done" && ((_a = file.response) == null ? void 0 : _a.status)) {
+        if (multiple) {
+          if (enableMultilingual) {
+            const multilingualUrls = updatedFileList.filter(
+              (item) => item.status === "done"
+            ).map(
+              (item) => {
+                var _a2, _b2;
+                return item.multilingual || (0, import_utils2.createMultilingualData)(
+                  ((_b2 = (_a2 = item.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.url) || item.url || ""
+                );
+              }
+            );
+            fileDoneSetMultilingualFileList();
+            onChange == null ? void 0 : onChange(multilingualUrls);
+          } else {
+            const urls = updatedFileList.filter((item) => item.status === "done").map((item) => {
+              var _a2, _b2;
+              return ((_b2 = (_a2 = item.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.url) || item.url || "";
+            });
+            onChange == null ? void 0 : onChange(urls);
+          }
+        } else {
+          if (enableMultilingual) {
+            const multilingualData = (0, import_utils2.createMultilingualData)(
+              ((_c = (_b = file.response) == null ? void 0 : _b.data) == null ? void 0 : _c.url) || ""
+            );
+            fileDoneSetMultilingualFileList();
+            onChange == null ? void 0 : onChange(multilingualData);
+          } else {
+            onChange == null ? void 0 : onChange(((_e = (_d = file.response) == null ? void 0 : _d.data) == null ? void 0 : _e.url) || "");
+          }
+        }
+      } else if (file.status === "error" || (0, import_utils.isBoolean)((_f = file.response) == null ? void 0 : _f.status) && ((_g = file.response) == null ? void 0 : _g.status) === false) {
+        (0, import_pisellToast.default)({
+          content: (0, import_locales.getText)("pisell-upload-error")(file.name)
+        });
+      }
+    },
+    [multiple, enableMultilingual, onChange]
+  );
+  const handlePreview = (0, import_react.useCallback)((file) => {
+    var _a, _b;
+    setPreviewImage(file.url || ((_b = (_a = file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || "");
+    setPreviewOpen(true);
+  }, []);
+  const handleEditMultilingual = (0, import_react.useCallback)((file) => {
+    setOpen(true);
+    setEditMultilingualFile(file);
+  }, []);
+  const handleRemove = (0, import_react.useCallback)(
+    (file) => {
+      setFileList((prev) => {
+        const val = prev.filter((item) => item.uid !== file.uid);
+        if (multiple) {
+          if (enableMultilingual) {
+            const multilingualUrls = val.filter(
+              (item) => !!item.multilingual
+            ).map((item) => item.multilingual);
+            onChange == null ? void 0 : onChange(multilingualUrls);
+          } else {
+            const urls = val.map(
+              (item) => {
+                var _a, _b;
+                return ((_b = (_a = item.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || item.url || "";
+              }
+            );
+            onChange == null ? void 0 : onChange(urls);
+          }
+        } else {
+          if (enableMultilingual) {
+            const emptyMultilingualData = (0, import_utils2.createMultilingualData)("");
+            onChange == null ? void 0 : onChange(emptyMultilingualData);
+          } else {
+            onChange == null ? void 0 : onChange("");
+          }
+        }
+        return val;
+      });
+    },
+    [multiple, enableMultilingual, onChange]
+  );
+  const handleGlobeIconClick = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      setEditMultilingualFile({
+        uid: `-${Math.random().toString(36).substring(2, 15)}`,
+        name: "",
+        status: "done",
+        multilingualFileList: (0, import_utils2.createMultilingualFileList)(""),
+        multilingual: (0, import_utils2.createMultilingualData)("")
+      });
+      setOpen(true);
+    },
+    []
+  );
+  const handleEditMultilingualChange = (0, import_react.useCallback)(
+    (info, lang) => {
+      setEditMultilingualFile((prev) => {
+        var _a, _b;
+        if (!prev) return null;
+        const newFile = { ...prev };
+        newFile.multilingualFileList[lang] = info.fileList.map((item) => {
+          var _a2;
+          return {
+            ...item,
+            status: item.status === "done" && !((_a2 = item.response) == null ? void 0 : _a2.status) ? "error" : item.status
+          };
+        });
+        if (info.file.status === "done") {
+          newFile.multilingual[lang] = (_b = (_a = info.file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url;
+        }
+        return newFile;
+      });
+    },
+    []
+  );
+  const handleEditMultilingualRemove = (0, import_react.useCallback)(
+    (file, lang) => {
+      setEditMultilingualFile((prev) => {
+        if (!prev) return null;
+        return {
+          ...prev,
+          multilingual: {
+            ...prev.multilingual,
+            [lang]: ""
+          }
+        };
+      });
+    },
+    []
+  );
+  const handleEditMultilingualOk = (0, import_react.useCallback)(() => {
+    if (!editMultilingualFile) return;
+    const { uid } = editMultilingualFile;
+    setFileList((prev) => {
+      var _a;
+      const val = prev.map(
+        (item) => item.uid === uid ? { ...item, ...editMultilingualFile } : item
+      );
+      if (!val.find((item) => item.uid === uid)) {
+        val.push({ ...editMultilingualFile });
+      }
+      if (multiple) {
+        onChange == null ? void 0 : onChange(
+          val.map((item) => item.multilingual)
+        );
+      } else {
+        onChange == null ? void 0 : onChange((_a = val[0]) == null ? void 0 : _a.multilingual);
+      }
+      return val;
+    });
+    setOpen(false);
+  }, [editMultilingualFile, multiple, onChange]);
+  const handleEditMultilingualCancel = (0, import_react.useCallback)(() => {
+    setEditMultilingualFile(null);
+    setOpen(false);
+  }, []);
+  const beforeUpload = (0, import_react.useCallback)(
+    async (file, newFileList) => {
+      let currentFileCount = 1;
+      newFileList.forEach((item, index) => {
+        if (item.uid === file.uid) {
+          currentFileCount = index + 1;
+        }
+      });
+      const fileType = (0, import_utils2.getFileType)(file.name);
+      const typeMaxSize = typeMaxSizeMap == null ? void 0 : typeMaxSizeMap[fileType];
+      const _maxSize = typeMaxSize || maxSize || 10;
+      if (file.size > _maxSize * 1024 * 1024) {
+        sizeError.run((0, import_locales.getText)("pisell-upload-setting-size-error")(_maxSize));
+        return import_antd.Upload.LIST_IGNORE;
+      }
+      const pointSuffix = (0, import_utils2.getPointSuffix)(file.name);
+      if (accept !== "" && !accept.includes(pointSuffix)) {
+        typeError.run((0, import_locales.getText)("pisell-upload-setting-type-error")(pointSuffix));
+        return import_antd.Upload.LIST_IGNORE;
+      }
+      try {
+        const metadata = await (0, import_utils2.getMediaMetadata)(file);
+        if (metadata) {
+          const { cover, ...restMetadata } = metadata;
+          file.metadata = restMetadata;
+          file.cover = cover;
+        }
+      } catch (error) {
+        console.error("获取媒体元数据失败:", error);
+      }
+      return file;
+    },
+    [
+      accept,
+      fileList.length,
+      maxSize,
+      minCount,
+      maxCount,
+      multiple,
+      typeMaxSizeMap
+    ]
+  );
+  const renderUploadButton = (0, import_react.useCallback)(
+    (showGlobeIcon) => /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        className: "pisell-upload-button",
+        type: "button",
+        disabled: restProps.disabled
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-upload-text" }, (0, import_locales.getText)("pisell-upload-button")),
+      showGlobeIcon && /* @__PURE__ */ import_react.default.createElement(
+        import_iconfont.default,
+        {
+          type: "pisell2-globe-02",
+          className: "pisell-upload-globe-icon",
+          onClick: handleGlobeIconClick
+        }
+      )
+    ),
+    [restProps.disabled, handleGlobeIconClick]
+  );
+  const customRequest = (0, import_react.useMemo)(() => {
+    if (!isShop) {
+      return {};
+    }
+    const handleUpload = (options) => {
+      const { onSuccess, onError, onProgress, file } = options;
+      const fileSize = file.size;
+      const baseTime = (0, import_utils2.getBaseTime)(fileSize);
+      let progress = 0;
+      setTimeout(() => {
+        onProgress == null ? void 0 : onProgress({ percent: 1 });
+      }, 200);
+      const timer = setInterval(() => {
+        if (progress < 30) {
+          progress += 5;
+        } else if (progress < 60) {
+          progress += 3;
+        } else if (progress < 80) {
+          progress += 2;
+        } else if (progress < 90) {
+          progress += 0.5;
+        }
+        if (progress >= 90) {
+          clearInterval(timer);
+        }
+        onProgress == null ? void 0 : onProgress({ percent: Math.min(90, progress) });
+      }, baseTime / 30);
+      (0, import_shopUploadServe.uploadFile)(file).then((res) => {
+        clearInterval(timer);
+        onProgress == null ? void 0 : onProgress({ percent: 95 });
+        setTimeout(() => {
+          onProgress == null ? void 0 : onProgress({ percent: 100 });
+          onSuccess == null ? void 0 : onSuccess(res);
+        }, 200);
+      }).catch((err) => {
+        clearInterval(timer);
+        onError == null ? void 0 : onError(err);
+      });
+    };
+    return {
+      customRequest: handleUpload
+    };
+  }, [isShop]);
+  const uploadProps = {
+    ...restProps,
+    multiple,
+    showUploadList: {
+      showRemoveIcon: true,
+      showPreviewIcon: allowPreview,
+      showDownloadIcon: enableMultilingual,
+      downloadIcon: (file) => /* @__PURE__ */ import_react.default.createElement(
+        import_iconfont.default,
+        {
+          type: "pisell2-globe-02",
+          className: "pisell-upload-multilingual-icon",
+          onClick: () => handleEditMultilingual(file)
+        }
+      )
+    },
+    uploadType: "custom",
+    iconRender: () => /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-a-BlueFile1" }),
+    listType: "picture-card",
+    onChange: handleChange,
+    action: propsMediaUploadUrl || mediaUploadUrl,
+    method: "post",
+    accept,
+    name: "file",
+    onPreview: handlePreview,
+    onRemove: handleRemove,
+    onDownload: () => {
+    },
+    data: (file) => ({
+      group_id: 0,
+      ...(0, import_utils2.getFileMetadataParams)(file)
+    }),
+    headers: (propsGetHeaders == null ? void 0 : propsGetHeaders()) || (getHeaders == null ? void 0 : getHeaders()),
+    beforeUpload,
+    className: "pisell-data-source-upload",
+    ...customRequest
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_pisellUpload.default, { ...uploadProps, fileList }, fileList.length >= calcMaxCount ? null : renderUploadButton(!!enableMultilingual)), /* @__PURE__ */ import_react.default.createElement(
+    import_pisellModal.default,
+    {
+      title: (0, import_locales.getText)("pisell-upload-multilingual-title"),
+      open,
+      onCancel: handleEditMultilingualCancel,
+      onOk: handleEditMultilingualOk
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-upload-multilingual-container" }, import_constants.SUPPORTED_LANGUAGES.map((lang) => {
+      var _a, _b, _c;
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: lang, className: "pisell-upload-multilingual-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-upload-multilingual-item-title" }, (0, import_locales.getText)(`pisell-upload-multilingual-item-title-${lang}`)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-upload-multilingual-item-content" }, /* @__PURE__ */ import_react.default.createElement(
+        import_pisellUpload.default,
+        {
+          ...uploadProps,
+          showUploadList: {
+            showRemoveIcon: true,
+            showPreviewIcon: true,
+            showDownloadIcon: false
+          },
+          fileList: ((_a = editMultilingualFile == null ? void 0 : editMultilingualFile.multilingualFileList) == null ? void 0 : _a[lang]) || [],
+          onRemove: (file) => handleEditMultilingualRemove(file, lang),
+          onChange: (info) => handleEditMultilingualChange(info, lang),
+          multiple: false
+        },
+        ((_c = (_b = editMultilingualFile == null ? void 0 : editMultilingualFile.multilingualFileList) == null ? void 0 : _b[lang]) == null ? void 0 : _c.length) ? null : renderUploadButton(false)
+      )));
+    }))
+  ), previewImage && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Image,
+    {
+      wrapperStyle: { display: "none" },
+      preview: {
+        visible: previewOpen,
+        onVisibleChange: (visible) => setPreviewOpen(visible),
+        afterOpenChange: (visible) => !visible && setPreviewImage("")
+      },
+      src: previewImage,
+      fallback: import_fallback.default
+    }
+  ));
+};
+var BaseUpload_default = BaseUpload;

package/lib/components/dataSourceComponents/fields/Upload/ReadPretty.js

@@ -0,0 +1,76 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Upload/ReadPretty.tsx
+var ReadPretty_exports = {};
+__export(ReadPretty_exports, {
+  default: () => ReadPretty_default
+});
+module.exports = __toCommonJS(ReadPretty_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_useTranslationOriginal = __toESM(require("../../../../hooks/useTranslationOriginal"));
+var import_fallback = __toESM(require("./fallback.png"));
+var import_ReadPretty = require("./ReadPretty.less");
+var UploadReadPretty = (props) => {
+  const { value, enableMultilingual } = props;
+  const translationOriginal = (0, import_useTranslationOriginal.default)();
+  const normalizedValue = (0, import_react.useMemo)(() => {
+    if (!value) return [];
+    let processedValue = (0, import_utils.isArr)(value) ? value : [value];
+    processedValue = processedValue.map((item) => {
+      if (!item) {
+        return null;
+      }
+      if ((0, import_utils.isString)(item)) {
+        return item;
+      }
+      return translationOriginal(item);
+    });
+    return processedValue.filter((item) => !!item);
+  }, [value, enableMultilingual, translationOriginal]);
+  if (!normalizedValue.length) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, normalizedValue.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Image,
+    {
+      key: `${String(item)}-${index}`,
+      className: "pisell-upload-read-pretty",
+      src: String(item),
+      width: 100,
+      height: 100,
+      fallback: import_fallback.default,
+      preview: {
+        maskClassName: "pisell-upload-read-pretty-mask"
+      }
+    }
+  )));
+};
+var ReadPretty_default = UploadReadPretty;

package/lib/components/dataSourceComponents/fields/Upload/ReadPretty.less

@@ -0,0 +1,12 @@
+.pisell-upload-read-pretty {
+  display: flex;
+  width: 100px;
+  height: 100px;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--Gray-300, #d0d5dd);
+  object-fit: contain;
+}
+.pisell-upload-read-pretty-mask {
+  border-radius: 10px;
+}

package/lib/components/dataSourceComponents/fields/Upload/WithMode.js

@@ -0,0 +1,81 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Upload/WithMode.tsx
+var WithMode_exports = {};
+__export(WithMode_exports, {
+  default: () => WithMode_default
+});
+module.exports = __toCommonJS(WithMode_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_utils2 = require("../../dataSourceForm/utils");
+var import_ReadPretty = __toESM(require("./ReadPretty"));
+var import_BaseUpload = __toESM(require("./BaseUpload"));
+var import_serve = require("./serve");
+var import_usePlatform = require("../../hooks/usePlatform");
+var Upload = (props) => {
+  const isShop = (0, import_usePlatform.useIsShop)();
+  const { presetType, mediaConfig: propsMediaConfig, presetTypeString: propsPresetTypeString } = props;
+  const { getExtensionsByIds, getMaxSizeByIds } = (0, import_serve.useMediaTypes)();
+  const { data: mediaConfig } = (0, import_serve.useMediaConfig)(propsMediaConfig);
+  const presetTypeString = isShop ? propsPresetTypeString : getExtensionsByIds(presetType || []);
+  const maxSizeMap = getMaxSizeByIds(presetType || []);
+  const maxCount = (0, import_react.useMemo)(() => {
+    const minArr = [];
+    if ((0, import_utils.isNumber)(mediaConfig == null ? void 0 : mediaConfig.upload_onetime_limit)) {
+      minArr.push(mediaConfig == null ? void 0 : mediaConfig.upload_onetime_limit);
+    }
+    if ((0, import_utils.isNumber)(props.maxCount)) {
+      minArr.push(props.maxCount);
+    }
+    return Math.min(...minArr);
+  }, [mediaConfig, props.maxCount]);
+  const maxSize = (0, import_react.useMemo)(() => {
+    const minArr = [];
+    if ((0, import_utils.isNumber)(mediaConfig == null ? void 0 : mediaConfig.upload_maxsize)) {
+      minArr.push(mediaConfig == null ? void 0 : mediaConfig.upload_maxsize);
+    }
+    if ((0, import_utils.isNumber)(props.maxSize)) {
+      minArr.push(props.maxSize);
+    }
+    return Math.min(...minArr);
+  }, [mediaConfig, props.maxSize]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_BaseUpload.default,
+    {
+      ...props,
+      maxCount,
+      maxSize,
+      presetType: presetTypeString,
+      typeMaxSizeMap: maxSizeMap
+    }
+  );
+};
+var UploadWithMode = (0, import_utils2.withMode)(Upload, import_ReadPretty.default);
+var WithMode_default = UploadWithMode;