@etsoo/materialui 1.5.19 → 1.5.21

package/lib/cjs/FileUploadButton.d.ts

@@ -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

@@ -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/cjs/html/HtmlDiv.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+export declare function HtmlDiv(props: React.PropsWithChildren<HTMLElement>): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/html/HtmlDiv.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlDiv = HtmlDiv;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dompurify_1 = __importDefault(require("dompurify"));
+class HtmlDivElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        // Create a shadow root
+        const shadow = this.attachShadow({ mode: "open" });
+        // Create a wrapper element to hold the sanitized HTML content
+        const wrapper = document.createElement("div");
+        if (this.textContent) {
+            wrapper.innerHTML = dompurify_1.default.sanitize(this.textContent);
+        }
+        shadow.appendChild(wrapper);
+    }
+}
+// Define the custom element only once
+if (!customElements.get("html-div")) {
+    customElements.define("html-div", HtmlDivElement);
+}
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+function HtmlDiv(props) {
+    // Destruct
+    const { children, ...rest } = props;
+    // Layout
+    return (0, jsx_runtime_1.jsx)("html-div", { ...rest, children: children });
+}

package/lib/cjs/index.d.ts

@@ -9,6 +9,7 @@ export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
+export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/lib/cjs/index.js

@@ -25,6 +25,7 @@ __exportStar(require("./app/ServiceApp"), exports);
 __exportStar(require("./custom/CustomFieldUtils"), exports);
 __exportStar(require("./custom/CustomFieldViewer"), exports);
 __exportStar(require("./custom/CustomFieldWindow"), exports);
+__exportStar(require("./html/HtmlDiv"), exports);
 __exportStar(require("./messages/MessageUtils"), exports);
 __exportStar(require("./messages/OperationMessageContainer"), exports);
 __exportStar(require("./messages/OperationMessageDto"), exports);

package/lib/mjs/FileUploadButton.d.ts

@@ -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

@@ -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/lib/mjs/html/HtmlDiv.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+export declare function HtmlDiv(props: React.PropsWithChildren<HTMLElement>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/html/HtmlDiv.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DOMPurify from "dompurify";
+class HtmlDivElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        // Create a shadow root
+        const shadow = this.attachShadow({ mode: "open" });
+        // Create a wrapper element to hold the sanitized HTML content
+        const wrapper = document.createElement("div");
+        if (this.textContent) {
+            wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
+        }
+        shadow.appendChild(wrapper);
+    }
+}
+// Define the custom element only once
+if (!customElements.get("html-div")) {
+    customElements.define("html-div", HtmlDivElement);
+}
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+export function HtmlDiv(props) {
+    // Destruct
+    const { children, ...rest } = props;
+    // Layout
+    return _jsx("html-div", { ...rest, children: children });
+}

package/lib/mjs/index.d.ts

@@ -9,6 +9,7 @@ export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
+export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/lib/mjs/index.js

@@ -9,6 +9,7 @@ export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
+export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.19",
+  "version": "1.5.21",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,15 +40,16 @@
     "@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",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/material": "^7.0.2",
     "@mui/x-data-grid": "^7.28.3",
     "chart.js": "^4.4.8",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "dompurify": "^3.2.5",
     "eventemitter3": "^5.0.1",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",

package/src/FileUploadButton.tsx

@@ -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/src/global.d.ts

@@ -0,0 +1,5 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    "html-div": HTMLElement;
+  }
+}

package/src/html/HtmlDiv.tsx

@@ -0,0 +1,39 @@
+import DOMPurify from "dompurify";
+
+class HtmlDivElement extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    // Create a shadow root
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // Create a wrapper element to hold the sanitized HTML content
+    const wrapper = document.createElement("div");
+    if (this.textContent) {
+      wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
+    }
+
+    shadow.appendChild(wrapper);
+  }
+}
+
+// Define the custom element only once
+if (!customElements.get("html-div")) {
+  customElements.define("html-div", HtmlDivElement);
+}
+
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+export function HtmlDiv(props: React.PropsWithChildren<HTMLElement>) {
+  // Destruct
+  const { children, ...rest } = props;
+
+  // Layout
+  return <html-div {...rest}>{children}</html-div>;
+}

package/src/index.ts

@@ -11,6 +11,8 @@ export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
 
+export * from "./html/HtmlDiv";
+
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/tsconfig.cjs.json

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

package/tsconfig.json

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