@etsoo/materialui 1.6.78 → 1.6.80

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/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/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.78",
+  "version": "1.6.80",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,16 +40,16 @@
     "@dnd-kit/react": "^0.5.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.70",
-    "@etsoo/notificationbase": "^1.1.72",
-    "@etsoo/react": "^1.8.94",
-    "@etsoo/shared": "^1.2.87",
+    "@etsoo/appscript": "^1.6.71",
+    "@etsoo/notificationbase": "^1.1.73",
+    "@etsoo/react": "^1.8.95",
+    "@etsoo/shared": "^1.2.88",
     "@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",
+    "dompurify": "^3.4.12",
     "eventemitter3": "^5.0.4",
     "pica": "^10.0.2",
     "pulltorefreshjs": "^0.1.22",
@@ -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/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";