@etsoo/materialui 1.6.74 → 1.6.76

package/lib/cjs/ImagePreviewButton.d.ts

@@ -0,0 +1,34 @@
+import { ButtonProps } from "@mui/material/Button";
+import { DialogProps } from "@mui/material/Dialog";
+import React, { CSSProperties } from "react";
+/**
+ * Image preview button props
+ */
+export type ImagePreviewButtonProps = {
+    /**
+     * Button props
+     */
+    buttonProps?: Omit<ButtonProps, "onClick" | "disabled">;
+    /**
+     * Dialog props
+     */
+    dialogProps?: Omit<DialogProps, "open" | "onClose">;
+    /**
+     * Image
+     */
+    image?: string;
+    /**
+     * Object fit style
+     */
+    objectFit?: CSSProperties["objectFit"];
+    /**
+     * Size
+     */
+    size?: number | [number, number];
+};
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+export declare function ImagePreviewButton(props: ImagePreviewButtonProps): React.JSX.Element;

package/lib/cjs/ImagePreviewButton.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePreviewButton = ImagePreviewButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const react_1 = __importDefault(require("react"));
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+function ImagePreviewButton(props) {
+    // Destruct
+    const { buttonProps, dialogProps, image, objectFit = "contain", size = 32 } = props;
+    const [open, setOpen] = react_1.default.useState(false);
+    const [width, height] = typeof size === "number" ? [size, size] : size;
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => setOpen(true), variant: "text", disabled: !image, sx: {
+                    p: 0,
+                    minWidth: 0
+                }, ...buttonProps, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { src: image, variant: "rounded", sx: {
+                        width,
+                        height,
+                        "& img": {
+                            objectFit
+                        }
+                    } }) }), (0, jsx_runtime_1.jsx)(Dialog_1.default, { open: open, onClose: () => setOpen(false), maxWidth: "sm", ...dialogProps, children: (0, jsx_runtime_1.jsx)(DialogContent_1.default, { children: image && ((0, jsx_runtime_1.jsx)("img", { src: image, style: { maxWidth: "100%", height: "auto" } })) }) })] }));
+}

package/lib/cjs/index.d.ts

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

package/lib/cjs/index.js

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

package/lib/mjs/ImagePreviewButton.d.ts

@@ -0,0 +1,34 @@
+import { ButtonProps } from "@mui/material/Button";
+import { DialogProps } from "@mui/material/Dialog";
+import React, { CSSProperties } from "react";
+/**
+ * Image preview button props
+ */
+export type ImagePreviewButtonProps = {
+    /**
+     * Button props
+     */
+    buttonProps?: Omit<ButtonProps, "onClick" | "disabled">;
+    /**
+     * Dialog props
+     */
+    dialogProps?: Omit<DialogProps, "open" | "onClose">;
+    /**
+     * Image
+     */
+    image?: string;
+    /**
+     * Object fit style
+     */
+    objectFit?: CSSProperties["objectFit"];
+    /**
+     * Size
+     */
+    size?: number | [number, number];
+};
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+export declare function ImagePreviewButton(props: ImagePreviewButtonProps): React.JSX.Element;

package/lib/mjs/ImagePreviewButton.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import React from "react";
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+export function ImagePreviewButton(props) {
+    // Destruct
+    const { buttonProps, dialogProps, image, objectFit = "contain", size = 32 } = props;
+    const [open, setOpen] = React.useState(false);
+    const [width, height] = typeof size === "number" ? [size, size] : size;
+    return (_jsxs(React.Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), variant: "text", disabled: !image, sx: {
+                    p: 0,
+                    minWidth: 0
+                }, ...buttonProps, children: _jsx(Avatar, { src: image, variant: "rounded", sx: {
+                        width,
+                        height,
+                        "& img": {
+                            objectFit
+                        }
+                    } }) }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "sm", ...dialogProps, children: _jsx(DialogContent, { children: image && (_jsx("img", { src: image, style: { maxWidth: "100%", height: "auto" } })) }) })] }));
+}

package/lib/mjs/index.d.ts

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

package/lib/mjs/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.74",
+  "version": "1.6.76",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,9 +40,9 @@
     "@dnd-kit/react": "^0.5.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.69",
+    "@etsoo/appscript": "^1.6.70",
     "@etsoo/notificationbase": "^1.1.72",
-    "@etsoo/react": "^1.8.93",
+    "@etsoo/react": "^1.8.94",
     "@etsoo/shared": "^1.2.87",
     "@mui/icons-material": "^9.1.1",
     "@mui/material": "^9.1.2",

package/src/ImagePreviewButton.tsx

@@ -0,0 +1,94 @@
+import Avatar from "@mui/material/Avatar";
+import Button, { ButtonProps } from "@mui/material/Button";
+import Dialog, { DialogProps } from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import React, { CSSProperties } from "react";
+
+/**
+ * Image preview button props
+ */
+export type ImagePreviewButtonProps = {
+  /**
+   * Button props
+   */
+  buttonProps?: Omit<ButtonProps, "onClick" | "disabled">;
+
+  /**
+   * Dialog props
+   */
+  dialogProps?: Omit<DialogProps, "open" | "onClose">;
+
+  /**
+   * Image
+   */
+  image?: string;
+
+  /**
+   * Object fit style
+   */
+  objectFit?: CSSProperties["objectFit"];
+
+  /**
+   * Size
+   */
+  size?: number | [number, number];
+};
+
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+export function ImagePreviewButton(props: ImagePreviewButtonProps) {
+  // Destruct
+  const {
+    buttonProps,
+    dialogProps,
+    image,
+    objectFit = "contain",
+    size = 32
+  } = props;
+
+  const [open, setOpen] = React.useState(false);
+
+  const [width, height] = typeof size === "number" ? [size, size] : size;
+
+  return (
+    <React.Fragment>
+      <Button
+        onClick={() => setOpen(true)}
+        variant="text"
+        disabled={!image}
+        sx={{
+          p: 0,
+          minWidth: 0
+        }}
+        {...buttonProps}
+      >
+        <Avatar
+          src={image}
+          variant="rounded"
+          sx={{
+            width,
+            height,
+            "& img": {
+              objectFit
+            }
+          }}
+        />
+      </Button>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        maxWidth="sm"
+        {...dialogProps}
+      >
+        <DialogContent>
+          {image && (
+            <img src={image} style={{ maxWidth: "100%", height: "auto" }} />
+          )}
+        </DialogContent>
+      </Dialog>
+    </React.Fragment>
+  );
+}

package/src/index.ts

@@ -79,6 +79,7 @@ export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
+export * from "./ImagePreviewButton";
 export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";