@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.314

package/components/input/fileupload/components/ListItems.js

@@ -1,135 +1,137 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.ListItem = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
-var _List = _interopRequireDefault(require("@mui/material/List"));
-var _Folder = _interopRequireDefault(require("@mui/icons-material/Folder"));
-var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
-var _constants = require("../../../constants");
-var __jsx = _react["default"].createElement;
-var CommonFile = function CommonFile(_ref) {
-  var uploadedFiles = _ref.uploadedFiles,
-    selectedFolders = _ref.selectedFolders,
-    filelistheight = _ref.filelistheight,
-    readonly = _ref.readonly,
-    clearSelectedFile = _ref.clearSelectedFile,
-    onBeforedelete = _ref.onBeforedelete,
-    onFileDelete = _ref.onFileDelete,
-    setSelectedFolders = _ref.setSelectedFolders;
-  var fileUploadComponents = [];
-  // Render uploaded files list
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import List from "@mui/material/List";
+import FolderIcon from "@mui/icons-material/Folder";
+import ClearIcon from "@mui/icons-material/Clear";
+import { getFileIconClass } from "../../../constants";
+const CommonFile = ({
+  uploadedFiles,
+  selectedFolders,
+  filelistheight,
+  readonly,
+  clearSelectedFile,
+  onBeforedelete,
+  onFileDelete,
+  setSelectedFolders
+}) => {
+  const fileUploadComponents = [];
   if (uploadedFiles.length > 0) {
-    fileUploadComponents.push(__jsx("div", {
-      key: "file-list",
-      className: "file-list-container wm-fileupload-file-list-container",
-      style: {
-        "--fileupload-list-max-height": "".concat(filelistheight || 400, "px")
-      }
-    }, __jsx(_List["default"], {
-      className: "list-group file-upload",
-      dense: true
-    }, uploadedFiles.map(function (file, index) {
-      return __jsx(ListItem, {
-        key: file.uniqueId || "file-".concat(index),
-        file: file,
-        index: index,
-        clearSelectedFile: clearSelectedFile,
-        onBeforedelete: onBeforedelete,
-        onFileDelete: onFileDelete
-      });
-    }))));
+    fileUploadComponents.push(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "file-list-container wm-fileupload-file-list-container",
+          style: {
+            "--fileupload-list-max-height": `${filelistheight || 400}px`
+          },
+          children: /* @__PURE__ */ jsx(List, { className: "list-group file-upload", dense: true, children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsx(
+            ListItem,
+            {
+              file,
+              index,
+              clearSelectedFile,
+              onBeforedelete,
+              onFileDelete
+            },
+            file.uniqueId || `file-${index}`
+          )) })
+        },
+        "file-list"
+      )
+    );
   }
-
-  // Render selected folders list
   if (selectedFolders.length > 0) {
-    fileUploadComponents.push(__jsx(_List["default"], {
-      key: "folder-list",
-      dense: true
-    }, selectedFolders.map(function (folder, index) {
-      return __jsx("li", {
-        key: index,
-        className: "file-upload-status error"
-      }, __jsx(_ListItemIcon["default"], null, __jsx(_Folder["default"], null)), __jsx(_ListItemText["default"], {
-        primary: folder.name,
-        secondary: "Folders cannot be uploaded"
-      }), __jsx(_IconButton["default"], {
-        onClick: function onClick() {
-          return setSelectedFolders(function (prev) {
-            return prev.filter(function (_, i) {
-              return i !== index;
-            });
-          });
-        },
-        edge: "end",
-        "aria-label": "clear",
-        size: "small",
-        disabled: readonly
-      }, __jsx(_Clear["default"], {
-        fontSize: "small"
-      })));
-    })));
+    fileUploadComponents.push(
+      /* @__PURE__ */ jsx(List, { dense: true, children: selectedFolders.map((folder, index) => /* @__PURE__ */ jsxs("li", { className: "file-upload-status error", children: [
+        /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(FolderIcon, {}) }),
+        /* @__PURE__ */ jsx(ListItemText, { primary: folder.name, secondary: "Folders cannot be uploaded" }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: () => setSelectedFolders((prev) => prev.filter((_, i) => i !== index)),
+            edge: "end",
+            "aria-label": "clear",
+            size: "small",
+            disabled: readonly,
+            children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+          }
+        )
+      ] }, index)) }, "folder-list")
+    );
   }
-  return __jsx(_react["default"].Fragment, null, fileUploadComponents);
+  return /* @__PURE__ */ jsx(Fragment, { children: fileUploadComponents });
+};
+var ListItems_default = CommonFile;
+const ListItem = ({
+  file,
+  index,
+  clearSelectedFile,
+  onBeforedelete,
+  onFileDelete
+}) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: `file-upload-status list-group-item ${file.status || ""}`,
+      children: /* @__PURE__ */ jsxs(Box, { component: "div", className: "media upload-file-list wm-fileupload-media-full-width", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${getFileIconClass(file.storageName || file.name)} file-icon media-left media-middle`
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "media-body media-middle file-details", children: [
+          /* @__PURE__ */ jsxs("p", { className: "uploaddetails col-md-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "upload-title", children: file.storageName || file.name }),
+            file.status === "success" && /* @__PURE__ */ jsx("span", { className: `status-icon text-success wi wi-check-circle` }),
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsxs("span", { className: "filesize", children: [
+              Math.round(
+                (file._response && file._response[0].length || file.size || 0) / 1024
+              ),
+              " ",
+              "KB"
+            ] }),
+            file.status === "error" && /* @__PURE__ */ jsx("span", { className: "status-icon status-icon text-danger wi wi-error" }),
+            file.status === "error" && /* @__PURE__ */ jsx("span", { className: "error-message", children: "Upload Failed" })
+          ] }),
+          file.status === "onProgress" && file.progress !== void 0 && file.progress >= 0 && /* @__PURE__ */ jsxs("div", { className: "col-md-1 upload-progress-percentage", children: [
+            file.progress || 0,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "media-right media-middle", children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            type: "button",
+            className: "btn btn-transparent btn-default status-icon",
+            onClick: () => {
+              clearSelectedFile(file);
+            },
+            children: /* @__PURE__ */ jsx("i", { className: "wi wi-clear" })
+          }
+        ) }),
+        file.status == "success" && /* @__PURE__ */ jsx("div", { className: "media-right media-middle", children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            type: "button",
+            className: "btn btn-transparent btn-default status-icon",
+            onClick: (e) => {
+              onBeforedelete == null ? void 0 : onBeforedelete(e, file);
+              onFileDelete(e, file);
+            },
+            children: /* @__PURE__ */ jsx("i", { className: "wi wi-delete" })
+          }
+        ) })
+      ] })
+    },
+    `file-${file.uniqueId || index}`
+  );
+};
+export {
+  ListItem,
+  ListItems_default as default
 };
-var _default = exports["default"] = CommonFile;
-var ListItem = exports.ListItem = function ListItem(_ref2) {
-  var file = _ref2.file,
-    index = _ref2.index,
-    clearSelectedFile = _ref2.clearSelectedFile,
-    onBeforedelete = _ref2.onBeforedelete,
-    onFileDelete = _ref2.onFileDelete;
-  return __jsx("li", {
-    key: "file-".concat(file.uniqueId || index),
-    className: "file-upload-status list-group-item ".concat(file.status || "")
-  }, __jsx(_Box["default"], {
-    component: "div",
-    className: "media upload-file-list wm-fileupload-media-full-width"
-  }, __jsx("div", {
-    className: "".concat((0, _constants.getFileIconClass)(file.storageName || file.name), " file-icon media-left media-middle")
-  }), __jsx("div", {
-    className: "media-body media-middle file-details"
-  }, __jsx("p", {
-    className: "uploaddetails col-md-3"
-  }, __jsx("span", {
-    className: "upload-title"
-  }, file.storageName || file.name), file.status === "success" && __jsx("span", {
-    className: "status-icon text-success wi wi-check-circle"
-  }), __jsx("br", null), __jsx("span", {
-    className: "filesize"
-  }, Math.round((file._response && file._response[0].length || file.size || 0) / 1024), " ", "KB"), file.status === "error" && __jsx("span", {
-    className: "status-icon status-icon text-danger wi wi-error"
-  }), file.status === "error" && __jsx("span", {
-    className: "error-message"
-  }, "Upload Failed")), file.status === "onProgress" && file.progress !== undefined && file.progress >= 0 && __jsx("div", {
-    className: "col-md-1 upload-progress-percentage"
-  }, file.progress || 0, "%")), __jsx("div", {
-    className: "media-right media-middle"
-  }, __jsx("a", {
-    type: "button",
-    className: "btn btn-transparent btn-default status-icon",
-    onClick: function onClick() {
-      clearSelectedFile(file);
-    }
-  }, __jsx("i", {
-    className: "wi wi-clear"
-  }))), file.status == "success" && __jsx("div", {
-    className: "media-right media-middle"
-  }, __jsx("a", {
-    type: "button",
-    className: "btn btn-transparent btn-default status-icon",
-    onClick: function onClick(e) {
-      onBeforedelete === null || onBeforedelete === void 0 || onBeforedelete(e, file);
-      onFileDelete(e, file);
-    }
-  }, __jsx("i", {
-    className: "wi wi-delete"
-  })))));
-};

package/components/input/fileupload/components/MultiUpload.js

@@ -1,78 +1,81 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var __jsx = _react["default"].createElement;
-var MultipleFileUpload = function MultipleFileUpload(_ref) {
-  var fileInputRef = _ref.fileInputRef,
-    multiple = _ref.multiple,
-    contenttype = _ref.contenttype,
-    extensions = _ref.extensions,
-    filetype = _ref.filetype,
-    _ref$caption = _ref.caption,
-    caption = _ref$caption === void 0 ? "Upload" : _ref$caption,
-    chooseFilter = _ref.chooseFilter,
-    disabled = _ref.disabled,
-    readonly = _ref.readonly,
-    required = _ref.required,
-    arialabel = _ref.arialabel,
-    displayname = _ref.displayname,
-    tabindex = _ref.tabindex,
-    iconclass = _ref.iconclass,
-    fileuploadmessage = _ref.fileuploadmessage,
-    highlightDropArea = _ref.highlightDropArea,
-    triggerFileSelect = _ref.triggerFileSelect,
-    onFileSelect = _ref.onFileSelect,
-    dragOverHandler = _ref.dragOverHandler,
-    onFileDrop = _ref.onFileDrop,
-    setHighlightDropArea = _ref.setHighlightDropArea,
-    onBeforeselect = _ref.onBeforeselect,
-    styles = _ref.styles;
-  return __jsx("div", {
-    className: "app-multi-file-upload"
-  }, __jsx("div", {
-    className: "drop-box ".concat(highlightDropArea ? "highlight-drop-box" : ""),
-    id: "dropzone",
-    onClick: disabled || readonly ? undefined : triggerFileSelect,
-    onDragOver: dragOverHandler,
-    onDrop: onFileDrop,
-    onDragLeave: function onDragLeave() {
-      return setHighlightDropArea(false);
-    },
-    style: styles
-  }, __jsx("i", {
-    className: iconclass
-  }), __jsx("div", {
-    className: "message"
-  }, __jsx("label", {
-    className: "upload-label",
-    htmlFor: "Upload"
-  }, caption), __jsx(_Box["default"], {
-    component: "form",
-    className: "form-horizontal"
-  }, __jsx("input", {
-    ref: fileInputRef,
-    type: "file",
-    name: "files",
-    multiple: multiple,
-    accept: chooseFilter,
-    disabled: disabled,
-    required: required,
-    "aria-label": arialabel || displayname || "File selection field",
-    onChange: onFileSelect,
-    className: "file-input wm-fileupload-file-input",
-    tabIndex: tabindex
-  }), __jsx("a", {
-    className: "app-anchor upload-label",
-    onClick: disabled || readonly ? undefined : triggerFileSelect
-  }, fileuploadmessage || "Drop your files here or click here to browse")), __jsx("label", {
-    className: "upload-extensions",
-    htmlFor: "extensions"
-  }, chooseFilter || "All files", " only", " "))));
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+const MultipleFileUpload = ({
+  fileInputRef,
+  multiple,
+  contenttype,
+  extensions,
+  filetype,
+  caption = "Upload",
+  chooseFilter,
+  disabled,
+  readonly,
+  required,
+  arialabel,
+  displayname,
+  tabindex,
+  iconclass,
+  fileuploadmessage,
+  highlightDropArea,
+  triggerFileSelect,
+  onFileSelect,
+  dragOverHandler,
+  onFileDrop,
+  setHighlightDropArea,
+  onBeforeselect,
+  styles
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "app-multi-file-upload", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `drop-box ${highlightDropArea ? "highlight-drop-box" : ""}`,
+      id: "dropzone",
+      onClick: disabled || readonly ? void 0 : triggerFileSelect,
+      onDragOver: dragOverHandler,
+      onDrop: onFileDrop,
+      onDragLeave: () => setHighlightDropArea(false),
+      style: styles,
+      children: [
+        /* @__PURE__ */ jsx("i", { className: iconclass }),
+        /* @__PURE__ */ jsxs("div", { className: "message", children: [
+          /* @__PURE__ */ jsx("label", { className: "upload-label", htmlFor: "Upload", children: caption }),
+          /* @__PURE__ */ jsxs(Box, { component: "form", className: "form-horizontal", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                name: "files",
+                multiple,
+                accept: chooseFilter,
+                disabled,
+                required,
+                "aria-label": arialabel || displayname || "File selection field",
+                onChange: onFileSelect,
+                className: "file-input wm-fileupload-file-input",
+                tabIndex: tabindex
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                className: "app-anchor upload-label",
+                onClick: disabled || readonly ? void 0 : triggerFileSelect,
+                children: fileuploadmessage || "Drop your files here or click here to browse"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "upload-extensions", htmlFor: "extensions", children: [
+            chooseFilter || "All files",
+            " only",
+            " "
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
+var MultiUpload_default = MultipleFileUpload;
+export {
+  MultiUpload_default as default
 };
-var _default = exports["default"] = MultipleFileUpload;

package/components/input/fileupload/components/SingleUpload.js

@@ -1,58 +1,58 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var __jsx = _react["default"].createElement;
-var SingleFileUpload = function SingleFileUpload(_ref) {
-  var fileInputRef = _ref.fileInputRef,
-    caption = _ref.caption,
-    displayname = _ref.displayname,
-    contenttype = _ref.contenttype,
-    extensions = _ref.extensions,
-    filetype = _ref.filetype,
-    chooseFilter = _ref.chooseFilter,
-    disabled = _ref.disabled,
-    readonly = _ref.readonly,
-    required = _ref.required,
-    arialabel = _ref.arialabel,
-    tabindex = _ref.tabindex,
-    iconclass = _ref.iconclass,
-    styles = _ref.styles,
-    triggerFileSelect = _ref.triggerFileSelect,
-    onFileSelect = _ref.onFileSelect,
-    onBeforeselect = _ref.onBeforeselect;
-  return __jsx("div", {
-    className: "app-single-file-upload"
-  }, __jsx("div", {
-    className: "app-button-wrapper"
-  }, __jsx(_Box["default"], {
-    component: "form",
-    className: "form-horizontal"
-  }, __jsx("input", {
-    ref: fileInputRef,
-    type: "file",
-    name: "files",
-    accept: chooseFilter,
-    disabled: disabled,
-    required: required,
-    "aria-label": arialabel || displayname || "File selection field",
-    onChange: onFileSelect,
-    className: "file-input wm-fileupload-file-input",
-    tabIndex: tabindex
-  }), __jsx("button", {
-    id: "dropzone",
-    type: "button",
-    className: "app-button btn btn-default",
-    onClick: disabled || readonly ? undefined : triggerFileSelect,
-    disabled: disabled,
-    style: styles
-  }, __jsx("i", {
-    className: iconclass
-  }), __jsx("span", null, caption || displayname || "Select File")))));
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+const SingleFileUpload = ({
+  fileInputRef,
+  caption,
+  displayname,
+  contenttype,
+  extensions,
+  filetype,
+  chooseFilter,
+  disabled,
+  readonly,
+  required,
+  arialabel,
+  tabindex,
+  iconclass,
+  styles,
+  triggerFileSelect,
+  onFileSelect,
+  onBeforeselect
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "app-single-file-upload", children: /* @__PURE__ */ jsx("div", { className: "app-button-wrapper", children: /* @__PURE__ */ jsxs(Box, { component: "form", className: "form-horizontal", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        name: "files",
+        accept: chooseFilter,
+        disabled,
+        required,
+        "aria-label": arialabel || displayname || "File selection field",
+        onChange: onFileSelect,
+        className: "file-input wm-fileupload-file-input",
+        tabIndex: tabindex
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: "dropzone",
+        type: "button",
+        className: "app-button btn btn-default",
+        onClick: disabled || readonly ? void 0 : triggerFileSelect,
+        disabled,
+        style: styles,
+        children: [
+          /* @__PURE__ */ jsx("i", { className: iconclass }),
+          /* @__PURE__ */ jsx("span", { children: caption || displayname || "Select File" })
+        ]
+      }
+    )
+  ] }) }) });
+};
+var SingleUpload_default = SingleFileUpload;
+export {
+  SingleUpload_default as default
 };
-var _default = exports["default"] = SingleFileUpload;