npm - @etsoo/materialui - Versions diffs - 1.5.19 → 1.5.20 - Mend

@etsoo/materialui 1.5.19 → 1.5.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/lib/cjs/FileUploadButton.d.ts +5 -1
package/lib/cjs/FileUploadButton.js +56 -31
package/lib/mjs/FileUploadButton.d.ts +5 -1
package/lib/mjs/FileUploadButton.js +56 -31
package/package.json +3 -3
package/src/FileUploadButton.tsx +83 -34
package/tsconfig.cjs.json +2 -0
package/tsconfig.json +1 -0
package/' +0 -0

package/lib/cjs/FileUploadButton.d.ts CHANGED Viewed

@@ -4,6 +4,10 @@ import React from "react";
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+    /**
+     * Drop files label
+     */
+    dropFilesLabel?: React.ReactNode;
     /**
      * Max files allowed
      */
@@ -26,7 +30,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
      * Upload files callback
      * @param files Files
      */
-    onUploadFiles?: (files: FileList) => void;
+    onUploadFiles: (files: FileList) => void;
 };
 /**
  * File upload button

package/lib/cjs/FileUploadButton.js CHANGED Viewed

@@ -5,7 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploadButton = FileUploadButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
 const Button_1 = __importDefault(require("@mui/material/Button"));
+const react_1 = __importDefault(require("react"));
+const FlexBox_1 = require("./FlexBox");
 /**
  * File upload button
  * @param props Props
@@ -13,37 +16,59 @@ const Button_1 = __importDefault(require("@mui/material/Button"));
  */
 function FileUploadButton(props) {
     // Destruct
-    const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
+    const { dropFilesLabel, maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children = "Browse", ...rest } = props;
     const { onChange } = inputProps ?? {};
+    const [dragOver, setDragOver] = react_1.default.useState(false);
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        validateFiles(e.dataTransfer.files);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const handleDragLeave = () => setDragOver(false);
+    const validateFiles = (files) => {
+        const fl = files.length;
+        if (fl === 0)
+            return;
+        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+            if (onFileInvalid)
+                onFileInvalid([maxFiles, fl]);
+            return;
+        }
+        if (maxFileSize && maxFileSize > 0) {
+            for (let f = 0; f < fl; f++) {
+                const file = files[f];
+                if (file.size > maxFileSize) {
+                    if (onFileInvalid)
+                        onFileInvalid([maxFileSize, file.size], file);
+                    return;
+                }
+            }
+        }
+        onUploadFiles(files);
+    };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(Button_1.default, { component: "label", ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, onChange: (event) => {
-                    if (onChange)
-                        onChange(event);
-                    if (event.isDefaultPrevented())
-                        return;
-                    if (onUploadFiles) {
-                        const files = event.target.files;
-                        if (files == null)
-                            return;
-                        const fl = files.length;
-                        if (fl === 0)
-                            return;
-                        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
-                            if (onFileInvalid)
-                                onFileInvalid([maxFiles, fl]);
-                            return;
-                        }
-                        if (maxFileSize && maxFileSize > 0) {
-                            for (let f = 0; f < fl; f++) {
-                                const file = files[f];
-                                if (file.size > maxFileSize) {
-                                    if (onFileInvalid)
-                                        onFileInvalid([maxFileSize, file.size], file);
-                                    return;
-                                }
-                            }
-                        }
-                        onUploadFiles(files);
-                    }
-                }, ...inputProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { alignItems: "center", flexWrap: "wrap", border: (theme) => dragOver ? "1px dashed " + theme.palette.warning.main : undefined, spacing: 0.5, ...(dropFilesLabel == null
+            ? undefined
+            : {
+                onDrop: handleDrop,
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave
+            }), children: [dropFilesLabel &&
+                (typeof dropFilesLabel === "string" ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: dropFilesLabel })) : (dropFilesLabel)), (0, jsx_runtime_1.jsxs)(Button_1.default, { component: "label", sx: { textTransform: "none" }, ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, onChange: (event) => {
+                            if (onChange)
+                                onChange(event);
+                            if (event.isDefaultPrevented())
+                                return;
+                            const files = event.target.files;
+                            if (files == null)
+                                return;
+                            const fl = files.length;
+                            if (fl === 0)
+                                return;
+                            validateFiles(files);
+                        }, ...inputProps })] })] }));
 }

package/lib/mjs/FileUploadButton.d.ts CHANGED Viewed

@@ -4,6 +4,10 @@ import React from "react";
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+    /**
+     * Drop files label
+     */
+    dropFilesLabel?: React.ReactNode;
     /**
      * Max files allowed
      */
@@ -26,7 +30,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
      * Upload files callback
      * @param files Files
      */
-    onUploadFiles?: (files: FileList) => void;
+    onUploadFiles: (files: FileList) => void;
 };
 /**
  * File upload button

package/lib/mjs/FileUploadButton.js CHANGED Viewed

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
 import Button from "@mui/material/Button";
+import React from "react";
+import { HBox } from "./FlexBox";
 /**
  * File upload button
  * @param props Props
@@ -7,37 +10,59 @@ import Button from "@mui/material/Button";
  */
 export function FileUploadButton(props) {
     // Destruct
-    const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
+    const { dropFilesLabel, maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children = "Browse", ...rest } = props;
     const { onChange } = inputProps ?? {};
+    const [dragOver, setDragOver] = React.useState(false);
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        validateFiles(e.dataTransfer.files);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const handleDragLeave = () => setDragOver(false);
+    const validateFiles = (files) => {
+        const fl = files.length;
+        if (fl === 0)
+            return;
+        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+            if (onFileInvalid)
+                onFileInvalid([maxFiles, fl]);
+            return;
+        }
+        if (maxFileSize && maxFileSize > 0) {
+            for (let f = 0; f < fl; f++) {
+                const file = files[f];
+                if (file.size > maxFileSize) {
+                    if (onFileInvalid)
+                        onFileInvalid([maxFileSize, file.size], file);
+                    return;
+                }
+            }
+        }
+        onUploadFiles(files);
+    };
     // Layout
-    return (_jsxs(Button, { component: "label", ...rest, children: [children, _jsx("input", { type: "file", hidden: true, onChange: (event) => {
-                    if (onChange)
-                        onChange(event);
-                    if (event.isDefaultPrevented())
-                        return;
-                    if (onUploadFiles) {
-                        const files = event.target.files;
-                        if (files == null)
-                            return;
-                        const fl = files.length;
-                        if (fl === 0)
-                            return;
-                        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
-                            if (onFileInvalid)
-                                onFileInvalid([maxFiles, fl]);
-                            return;
-                        }
-                        if (maxFileSize && maxFileSize > 0) {
-                            for (let f = 0; f < fl; f++) {
-                                const file = files[f];
-                                if (file.size > maxFileSize) {
-                                    if (onFileInvalid)
-                                        onFileInvalid([maxFileSize, file.size], file);
-                                    return;
-                                }
-                            }
-                        }
-                        onUploadFiles(files);
-                    }
-                }, ...inputProps })] }));
+    return (_jsxs(HBox, { alignItems: "center", flexWrap: "wrap", border: (theme) => dragOver ? "1px dashed " + theme.palette.warning.main : undefined, spacing: 0.5, ...(dropFilesLabel == null
+            ? undefined
+            : {
+                onDrop: handleDrop,
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave
+            }), children: [dropFilesLabel &&
+                (typeof dropFilesLabel === "string" ? (_jsx(Typography, { variant: "body2", children: dropFilesLabel })) : (dropFilesLabel)), _jsxs(Button, { component: "label", sx: { textTransform: "none" }, ...rest, children: [children, _jsx("input", { type: "file", hidden: true, onChange: (event) => {
+                            if (onChange)
+                                onChange(event);
+                            if (event.isDefaultPrevented())
+                                return;
+                            const files = event.target.files;
+                            if (files == null)
+                                return;
+                            const fl = files.length;
+                            if (fl === 0)
+                                return;
+                            validateFiles(files);
+                        }, ...inputProps })] })] }));
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.19",
+  "version": "1.5.20",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,9 +40,9 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.21",
+    "@etsoo/appscript": "^1.6.22",
     "@etsoo/notificationbase": "^1.1.60",
-    "@etsoo/react": "^1.8.37",
+    "@etsoo/react": "^1.8.38",
     "@etsoo/shared": "^1.2.66",
     "@mui/icons-material": "^7.0.1",
     "@mui/material": "^7.0.1",

package/src/FileUploadButton.tsx CHANGED Viewed

@@ -1,10 +1,17 @@
+import { Typography } from "@mui/material";
 import Button, { ButtonProps } from "@mui/material/Button";
 import React from "react";
+import { HBox } from "./FlexBox";
 /**
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+  /**
+   * Drop files label
+   */
+  dropFilesLabel?: React.ReactNode;
   /**
    * Max files allowed
    */
@@ -34,7 +41,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
    * Upload files callback
    * @param files Files
    */
-  onUploadFiles?: (files: FileList) => void;
+  onUploadFiles: (files: FileList) => void;
 };
 /**
@@ -45,56 +52,98 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
 export function FileUploadButton(props: FileUploadButtonProps) {
   // Destruct
   const {
+    dropFilesLabel,
     maxFiles,
     maxFileSize,
     inputProps,
     onFileInvalid,
     onUploadFiles,
-    children,
+    children = "Browse",
     ...rest
   } = props;
   const { onChange } = inputProps ?? {};
+  const [dragOver, setDragOver] = React.useState(false);
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragOver(false);
+    validateFiles(e.dataTransfer.files);
+  };
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+  const handleDragLeave = () => setDragOver(false);
+  const validateFiles = (files: FileList) => {
+    const fl = files.length;
+    if (fl === 0) return;
+    if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+      if (onFileInvalid) onFileInvalid([maxFiles, fl]);
+      return;
+    }
+    if (maxFileSize && maxFileSize > 0) {
+      for (let f = 0; f < fl; f++) {
+        const file = files[f];
+        if (file.size > maxFileSize) {
+          if (onFileInvalid) onFileInvalid([maxFileSize, file.size], file);
+          return;
+        }
+      }
+    }
+    onUploadFiles(files);
+  };
   // Layout
   return (
-    <Button component="label" {...rest}>
-      {children}
-      <input
-        type="file"
-        hidden={true}
-        onChange={(event) => {
-          if (onChange) onChange(event);
-          if (event.isDefaultPrevented()) return;
-          if (onUploadFiles) {
+    <HBox
+      alignItems="center"
+      flexWrap="wrap"
+      border={(theme) =>
+        dragOver ? "1px dashed " + theme.palette.warning.main : undefined
+      }
+      spacing={0.5}
+      {...(dropFilesLabel == null
+        ? undefined
+        : {
+            onDrop: handleDrop,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave
+          })}
+    >
+      {dropFilesLabel &&
+        (typeof dropFilesLabel === "string" ? (
+          <Typography variant="body2">{dropFilesLabel}</Typography>
+        ) : (
+          dropFilesLabel
+        ))}
+      <Button component="label" sx={{ textTransform: "none" }} {...rest}>
+        {children}
+        <input
+          type="file"
+          hidden={true}
+          onChange={(event) => {
+            if (onChange) onChange(event);
+            if (event.isDefaultPrevented()) return;
             const files = event.target.files;
             if (files == null) return;
             const fl = files.length;
             if (fl === 0) return;
-            if (maxFiles && maxFiles > 0 && fl > maxFiles) {
-              if (onFileInvalid) onFileInvalid([maxFiles, fl]);
-              return;
-            }
-            if (maxFileSize && maxFileSize > 0) {
-              for (let f = 0; f < fl; f++) {
-                const file = files[f];
-                if (file.size > maxFileSize) {
-                  if (onFileInvalid)
-                    onFileInvalid([maxFileSize, file.size], file);
-                  return;
-                }
-              }
-            }
-            onUploadFiles(files);
-          }
-        }}
-        {...inputProps}
-      />
-    </Button>
+            validateFiles(files);
+          }}
+          {...inputProps}
+        />
+      </Button>
+    </HBox>
   );
 }

package/tsconfig.cjs.json CHANGED Viewed

@@ -5,6 +5,8 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "isolatedModules": true,
+    "allowJs": false,
+    "rootDir": "./src",
     "outDir": "./lib/cjs",
     "noEmit": false,
     "declaration": true,

package/tsconfig.json CHANGED Viewed

@@ -6,6 +6,7 @@
     "moduleResolution": "bundler",
     "allowJs": false,
     "isolatedModules": true,
+    "rootDir": "./src",
     "outDir": "./lib/mjs",
     "noEmit": false,
     "declaration": true,

package/' DELETED Viewed

File without changes