@etsoo/materialui 1.2.59 → 1.2.60

package/lib/FileUploadButton.d.ts

@@ -0,0 +1,22 @@
+import { ButtonProps } from "@mui/material";
+import React from "react";
+/**
+ * File upload button props
+ */
+export type FileUploadButtonProps = ButtonProps<"label"> & {
+    /**
+     * Input field attributes
+     */
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden">;
+    /**
+     * Upload files callback
+     * @param files Files
+     */
+    onUploadFiles?: (files: FileList) => void;
+};
+/**
+ * File upload button
+ * @param props Props
+ * @returns Component
+ */
+export declare function FileUploadButton(props: FileUploadButtonProps): React.JSX.Element;

package/lib/FileUploadButton.js

@@ -0,0 +1,27 @@
+import { Button } from "@mui/material";
+import React from "react";
+/**
+ * File upload button
+ * @param props Props
+ * @returns Component
+ */
+export function FileUploadButton(props) {
+    // Destruct
+    const { inputProps, onUploadFiles, children, ...rest } = props;
+    const { onChange } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    // Layout
+    return (React.createElement(Button, { component: "label", ...rest },
+        children,
+        React.createElement("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 || files.length == 0)
+                        return;
+                    onUploadFiles(files);
+                }
+            }, ...inputProps })));
+}

package/lib/UserAvatarEditor.js

@@ -8,6 +8,7 @@ import DoneIcon from "@mui/icons-material/Done";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
+import { FileUploadButton } from "./FileUploadButton";
 const defaultState = {
     scale: 1,
     rotate: 0
@@ -70,12 +71,9 @@ export function UserAvatarEditor(props) {
     const handleLoad = () => {
         setReady(true);
     };
-    // Handle file change
-    const handleFileChange = (event) => {
+    // Handle file upload
+    const handleFileUpload = (files) => {
         var _a;
-        const files = event.target.files;
-        if (files == null || files.length == 0)
-            return;
         // Reset all settings
         handleReset();
         // Set new preview image
@@ -140,9 +138,7 @@ export function UserAvatarEditor(props) {
     // Load the component
     const AE = React.lazy(() => import("react-avatar-editor"));
     return (React.createElement(Stack, { direction: "column", spacing: 0.5, width: containerWidth },
-        React.createElement(Button, { variant: "outlined", size: "medium", component: "label", startIcon: React.createElement(ComputerIcon, null), fullWidth: true },
-            labels.upload,
-            React.createElement("input", { id: "fileInput", type: "file", accept: "image/png, image/jpeg", multiple: false, hidden: true, onChange: handleFileChange })),
+        React.createElement(FileUploadButton, { variant: "outlined", size: "medium", startIcon: React.createElement(ComputerIcon, null), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" } }, labels.upload),
         React.createElement(Stack, { direction: "row", spacing: 0.5 },
             React.createElement(React.Suspense, { fallback: React.createElement(Skeleton, { variant: "rounded", width: width, height: height }) },
                 React.createElement(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : "", scale: editorState.scale, rotate: editorState.rotate })),

package/lib/index.d.ts

@@ -47,6 +47,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";

package/lib/index.js

@@ -47,6 +47,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.59",
+  "version": "1.2.60",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/FileUploadButton.tsx

@@ -0,0 +1,55 @@
+import { Button, ButtonProps } from "@mui/material";
+import React from "react";
+
+/**
+ * File upload button props
+ */
+export type FileUploadButtonProps = ButtonProps<"label"> & {
+  /**
+   * Input field attributes
+   */
+  inputProps?: Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "type" | "hidden"
+  >;
+
+  /**
+   * Upload files callback
+   * @param files Files
+   */
+  onUploadFiles?: (files: FileList) => void;
+};
+
+/**
+ * File upload button
+ * @param props Props
+ * @returns Component
+ */
+export function FileUploadButton(props: FileUploadButtonProps) {
+  // Destruct
+  const { inputProps, onUploadFiles, children, ...rest } = props;
+
+  const { onChange } = inputProps ?? {};
+
+  // Layout
+  return (
+    <Button component="label" {...rest}>
+      {children}
+      <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 || files.length == 0) return;
+            onUploadFiles(files);
+          }
+        }}
+        {...inputProps}
+      />
+    </Button>
+  );
+}

package/src/UserAvatarEditor.tsx

@@ -16,6 +16,7 @@ import DoneIcon from "@mui/icons-material/Done";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
+import { FileUploadButton } from "./FileUploadButton";
 
 /**
  * User avatar editor to Blob helper
@@ -182,11 +183,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     setReady(true);
   };
 
-  // Handle file change
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-    if (files == null || files.length == 0) return;
-
+  // Handle file upload
+  const handleFileUpload = (files: FileList) => {
     // Reset all settings
     handleReset();
 
@@ -266,23 +264,16 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
   return (
     <Stack direction="column" spacing={0.5} width={containerWidth}>
-      <Button
+      <FileUploadButton
         variant="outlined"
         size="medium"
-        component="label"
         startIcon={<ComputerIcon />}
         fullWidth
+        onUploadFiles={handleFileUpload}
+        inputProps={{ multiple: false, accept: "image/png, image/jpeg" }}
       >
         {labels.upload}
-        <input
-          id="fileInput"
-          type="file"
-          accept="image/png, image/jpeg"
-          multiple={false}
-          hidden
-          onChange={handleFileChange}
-        />
-      </Button>
+      </FileUploadButton>
       <Stack direction="row" spacing={0.5}>
         <React.Suspense
           fallback={

package/src/index.ts

@@ -50,6 +50,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";