@etsoo/materialui 1.6.77 → 1.6.79

package/lib/cjs/HtmlDescriptionBase.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { InputFieldProps } from "./InputField";
+/**
+ * HTML Description component base props
+ * HTML 描述组件基础属性
+ */
+export type HtmlDescriptionBaseProps = Omit<InputFieldProps, "multiline"> & {
+    /**
+     * Maximum length of the input
+     * 输入的最大长度
+     */
+    maxLength?: number;
+    /**
+     * Edit handler
+     * 编辑处理器
+     */
+    onEdit: (input: HTMLInputElement) => void;
+};
+/**
+ * HTML Description component base
+ * HTML 描述组件属性基础
+ * @param props Props
+ * @returns Component
+ */
+export declare function HtmlDescriptionBase(props: HtmlDescriptionBaseProps): React.JSX.Element;

package/lib/cjs/HtmlDescriptionBase.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlDescriptionBase = HtmlDescriptionBase;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const InputField_1 = require("./InputField");
+const react_2 = require("@etsoo/react");
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
+/**
+ * HTML Description component base
+ * HTML 描述组件属性基础
+ * @param props Props
+ * @returns Component
+ */
+function HtmlDescriptionBase(props) {
+    // Destruct
+    const { fullWidth = true, inputRef, label, maxLength = 1280, name = "description", onEdit, rows = 3, ...rest } = props;
+    const localRef = react_1.default.useRef(null);
+    const refs = (0, react_2.useCombinedRefs)(localRef, inputRef);
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { fullWidth: fullWidth, inputRef: refs, name: name, slotProps: {
+            htmlInput: { maxLength },
+            input: {
+                endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { edge: "end", onClick: () => {
+                            const input = localRef.current;
+                            if (input == null)
+                                return;
+                            onEdit(input);
+                        }, children: (0, jsx_runtime_1.jsx)(Edit_1.default, {}) }) }))
+            }
+        }, label: label, multiline: true, rows: rows, ...rest }));
+}

package/lib/cjs/SignaturePadComponent.d.ts

@@ -19,7 +19,7 @@ export type SignaturePadComponentProps = {
     /**
      * Width of the canvas
      */
-    width: number;
+    width: number | string;
     /**
      * Height of the canvas
      */

package/lib/cjs/SignaturePadComponent.js

@@ -16,6 +16,7 @@ const Save_1 = __importDefault(require("@mui/icons-material/Save"));
 const CanvasUtils_1 = require("./utils/CanvasUtils");
 const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
+const ReactApp_1 = require("./app/ReactApp");
 /**
  * Extended SignaturePad class with trim method
  */
@@ -49,8 +50,15 @@ function SignaturePadComponent(props) {
         if (!canvas)
             return;
         ref.current = new SignaturePadEx(canvas, options);
+        const observer = new ResizeObserver((entries) => {
+            const { width, height } = entries[0].contentRect;
+            canvas.width = width;
+            canvas.height = height;
+        });
+        observer.observe(canvas.parentElement);
         return () => {
             ref.current?.off();
+            observer.disconnect();
         };
     }, [options, ref]);
     return (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: width, height: height });
@@ -62,8 +70,11 @@ function SignaturePadComponent(props) {
  * @returns Component
  */
 function SignaturePadFull(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
+    const { clear, save } = app?.getLabels("clear", "save") ?? {};
     // Destruct
-    const { clearLabel = "Clear", saveLabel = "Save", width = 600, height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
+    const { clearLabel = clear || "Clear", saveLabel = save || "Save", width = "100%", height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
     // Ref
     const signaturePadRef = react_1.default.useRef(null);
     react_1.default.useImperativeHandle(mRef, () => ({

package/lib/cjs/index.d.ts

@@ -73,6 +73,7 @@ export * from "./GridDataFormat";
 export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
+export * from "./HtmlDescriptionBase";
 export * from "./IconButtonLink";
 export * from "./ImagePreviewButton";
 export * from "./InputField";

package/lib/cjs/index.js

@@ -93,6 +93,7 @@ __exportStar(require("./GridDataFormat"), exports);
 __exportStar(require("./GridUtils"), exports);
 __exportStar(require("./HiSelector"), exports);
 __exportStar(require("./HiSelectorTL"), exports);
+__exportStar(require("./HtmlDescriptionBase"), exports);
 __exportStar(require("./IconButtonLink"), exports);
 __exportStar(require("./ImagePreviewButton"), exports);
 __exportStar(require("./InputField"), exports);

package/lib/mjs/HtmlDescriptionBase.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { InputFieldProps } from "./InputField";
+/**
+ * HTML Description component base props
+ * HTML 描述组件基础属性
+ */
+export type HtmlDescriptionBaseProps = Omit<InputFieldProps, "multiline"> & {
+    /**
+     * Maximum length of the input
+     * 输入的最大长度
+     */
+    maxLength?: number;
+    /**
+     * Edit handler
+     * 编辑处理器
+     */
+    onEdit: (input: HTMLInputElement) => void;
+};
+/**
+ * HTML Description component base
+ * HTML 描述组件属性基础
+ * @param props Props
+ * @returns Component
+ */
+export declare function HtmlDescriptionBase(props: HtmlDescriptionBaseProps): React.JSX.Element;

package/lib/mjs/HtmlDescriptionBase.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { InputField } from "./InputField";
+import { useCombinedRefs } from "@etsoo/react";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
+import EditIcon from "@mui/icons-material/Edit";
+/**
+ * HTML Description component base
+ * HTML 描述组件属性基础
+ * @param props Props
+ * @returns Component
+ */
+export function HtmlDescriptionBase(props) {
+    // Destruct
+    const { fullWidth = true, inputRef, label, maxLength = 1280, name = "description", onEdit, rows = 3, ...rest } = props;
+    const localRef = React.useRef(null);
+    const refs = useCombinedRefs(localRef, inputRef);
+    return (_jsx(InputField, { fullWidth: fullWidth, inputRef: refs, name: name, slotProps: {
+            htmlInput: { maxLength },
+            input: {
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { edge: "end", onClick: () => {
+                            const input = localRef.current;
+                            if (input == null)
+                                return;
+                            onEdit(input);
+                        }, children: _jsx(EditIcon, {}) }) }))
+            }
+        }, label: label, multiline: true, rows: rows, ...rest }));
+}

package/lib/mjs/SignaturePadComponent.d.ts

@@ -19,7 +19,7 @@ export type SignaturePadComponentProps = {
     /**
      * Width of the canvas
      */
-    width: number;
+    width: number | string;
     /**
      * Height of the canvas
      */

package/lib/mjs/SignaturePadComponent.js

@@ -8,6 +8,7 @@ import SaveIcon from "@mui/icons-material/Save";
 import { CanvasUtils } from "./utils/CanvasUtils";
 import Stack from "@mui/material/Stack";
 import ButtonGroup from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Extended SignaturePad class with trim method
  */
@@ -40,8 +41,15 @@ export function SignaturePadComponent(props) {
         if (!canvas)
             return;
         ref.current = new SignaturePadEx(canvas, options);
+        const observer = new ResizeObserver((entries) => {
+            const { width, height } = entries[0].contentRect;
+            canvas.width = width;
+            canvas.height = height;
+        });
+        observer.observe(canvas.parentElement);
         return () => {
             ref.current?.off();
+            observer.disconnect();
         };
     }, [options, ref]);
     return _jsx("canvas", { ref: canvasRef, width: width, height: height });
@@ -53,8 +61,11 @@ export function SignaturePadComponent(props) {
  * @returns Component
  */
 export function SignaturePadFull(props) {
+    // Global app
+    const app = useAppContext();
+    const { clear, save } = app?.getLabels("clear", "save") ?? {};
     // Destruct
-    const { clearLabel = "Clear", saveLabel = "Save", width = 600, height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
+    const { clearLabel = clear || "Clear", saveLabel = save || "Save", width = "100%", height = 300, mRef, onSave, options, placement = ["right", "flex-start"], spacing = 0.5 } = props;
     // Ref
     const signaturePadRef = React.useRef(null);
     React.useImperativeHandle(mRef, () => ({

package/lib/mjs/index.d.ts

@@ -73,6 +73,7 @@ export * from "./GridDataFormat";
 export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
+export * from "./HtmlDescriptionBase";
 export * from "./IconButtonLink";
 export * from "./ImagePreviewButton";
 export * from "./InputField";

package/lib/mjs/index.js

@@ -73,6 +73,7 @@ export * from "./GridDataFormat";
 export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
+export * from "./HtmlDescriptionBase";
 export * from "./IconButtonLink";
 export * from "./ImagePreviewButton";
 export * from "./InputField";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.77",
+  "version": "1.6.79",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -46,7 +46,7 @@
     "@etsoo/shared": "^1.2.87",
     "@mui/icons-material": "^9.2.0",
     "@mui/material": "^9.2.0",
-    "@mui/x-data-grid": "^9.8.0",
+    "@mui/x-data-grid": "^9.9.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.4.11",
@@ -83,7 +83,7 @@
     "@vitejs/plugin-react": "^6.0.3",
     "jsdom": "^29.1.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10"
   },
   "allowScripts": {
     "core-js-pure@3.49.0": true

package/src/HtmlDescriptionBase.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { InputField, InputFieldProps } from "./InputField";
+import { useCombinedRefs } from "@etsoo/react";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
+import EditIcon from "@mui/icons-material/Edit";
+
+/**
+ * HTML Description component base props
+ * HTML 描述组件基础属性
+ */
+export type HtmlDescriptionBaseProps = Omit<InputFieldProps, "multiline"> & {
+  /**
+   * Maximum length of the input
+   * 输入的最大长度
+   */
+  maxLength?: number;
+
+  /**
+   * Edit handler
+   * 编辑处理器
+   */
+  onEdit: (input: HTMLInputElement) => void;
+};
+
+/**
+ * HTML Description component base
+ * HTML 描述组件属性基础
+ * @param props Props
+ * @returns Component
+ */
+export function HtmlDescriptionBase(props: HtmlDescriptionBaseProps) {
+  // Destruct
+  const {
+    fullWidth = true,
+    inputRef,
+    label,
+    maxLength = 1280,
+    name = "description",
+    onEdit,
+    rows = 3,
+    ...rest
+  } = props;
+
+  const localRef = React.useRef<HTMLInputElement>(null);
+  const refs = useCombinedRefs(localRef, inputRef);
+
+  return (
+    <InputField
+      fullWidth={fullWidth}
+      inputRef={refs}
+      name={name}
+      slotProps={{
+        htmlInput: { maxLength },
+        input: {
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                edge="end"
+                onClick={() => {
+                  const input = localRef.current;
+                  if (input == null) return;
+
+                  onEdit(input);
+                }}
+              >
+                <EditIcon />
+              </IconButton>
+            </InputAdornment>
+          )
+        }
+      }}
+      label={label}
+      multiline
+      rows={rows}
+      {...rest}
+    />
+  );
+}

package/src/SignaturePadComponent.tsx

@@ -8,6 +8,7 @@ import { ResponsiveStyleValue } from "@mui/system";
 import { CanvasUtils } from "./utils/CanvasUtils";
 import Stack from "@mui/material/Stack";
 import ButtonGroup from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Extended SignaturePad class with trim method
@@ -36,7 +37,7 @@ export type SignaturePadComponentProps = {
   /**
    * Width of the canvas
    */
-  width: number;
+  width: number | string;
 
   /**
    * Height of the canvas
@@ -72,8 +73,18 @@ export function SignaturePadComponent(props: SignaturePadComponentProps) {
 
     ref.current = new SignaturePadEx(canvas, options);
 
+    const observer = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+
+      canvas.width = width;
+      canvas.height = height;
+    });
+
+    observer.observe(canvas.parentElement!);
+
     return () => {
       ref.current?.off();
+      observer.disconnect();
     };
   }, [options, ref]);
 
@@ -140,11 +151,15 @@ export type SignaturePadFullProps = Partial<
  * @returns Component
  */
 export function SignaturePadFull(props: SignaturePadFullProps) {
+  // Global app
+  const app = useAppContext();
+  const { clear, save } = app?.getLabels("clear", "save") ?? {};
+
   // Destruct
   const {
-    clearLabel = "Clear",
-    saveLabel = "Save",
-    width = 600,
+    clearLabel = clear || "Clear",
+    saveLabel = save || "Save",
+    width = "100%",
     height = 300,
     mRef,
     onSave,

package/src/index.ts

@@ -80,6 +80,7 @@ export * from "./GridDataFormat";
 export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
+export * from "./HtmlDescriptionBase";
 export * from "./IconButtonLink";
 export * from "./ImagePreviewButton";
 export * from "./InputField";