@etsoo/materialui 1.1.98 → 1.2.0

package/lib/DraggablePaperComponent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaperProps } from '@mui/material';
+import { PaperProps } from "@mui/material";
 /**
  * Draggable paper component
  * @param props Props

package/lib/DraggablePaperComponent.js

@@ -1,6 +1,6 @@
-import { Paper } from '@mui/material';
-import React from 'react';
-import Draggable from 'react-draggable';
+import { Paper } from "@mui/material";
+import React from "react";
+import Draggable from "react-draggable";
 /**
  * Draggable paper component
  * @param props Props

package/lib/FabBox.d.ts

@@ -12,6 +12,10 @@ export type FabBoxProps = BoxProps & {
      * Flex direction, row or column
      */
     columnDirection?: boolean;
+    /**
+     * Add panel to the Fab
+     */
+    fabPanel?: boolean;
 };
 /**
  * Fabs container box

package/lib/FabBox.js

@@ -1,4 +1,4 @@
-import { Box, useTheme } from "@mui/material";
+import { Box, Paper, useTheme } from "@mui/material";
 import React from "react";
 /**
  * Fabs container box
@@ -7,7 +7,7 @@ import React from "react";
  */
 export function FabBox(props) {
     // Destruct
-    const { columnDirection, itemGap = 1, sx, ...rest } = props;
+    const { columnDirection, fabPanel = columnDirection === false ? true : false, itemGap = 1, sx, ...rest } = props;
     // Theme
     const theme = useTheme();
     const spaceGap = theme.spacing(itemGap);
@@ -17,7 +17,7 @@ export function FabBox(props) {
     const margin = columnDirection
         ? { marginTop: spaceGap }
         : { marginLeft: spaceGap };
-    return (React.createElement(Box, { sx: {
+    const box = (React.createElement(Box, { sx: {
             position: "fixed",
             display: "flex",
             alignItems: "center",
@@ -25,4 +25,5 @@ export function FabBox(props) {
             "& > :not(style) + :not(style)": margin,
             ...sx
         }, ...rest }));
+    return fabPanel ? React.createElement(Paper, { sx: { padding: spaceGap } }, box) : box;
 }

package/lib/NotifierMU.js

@@ -21,7 +21,7 @@ const IconDialogTitle = styled(DialogTitle) `
             text-overflow: ellipsis;
             padding-left: ${theme.spacing(1)};
         }
-        & .closeButton {
+        & .MuiDialogContent-root-close-button {
             padding-left: ${theme.spacing(1)};
         }
     `}
@@ -68,7 +68,7 @@ export class NotificationMU extends NotificationReact {
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 icon,
                 React.createElement("span", { className: "dialogTitle" }, title),
-                closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
+                closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
                     React.createElement(CloseIcon, null)))),
             React.createElement(DialogContent, null,
                 React.createElement(DialogContentText, null, this.content),
@@ -89,7 +89,7 @@ export class NotificationMU extends NotificationReact {
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 React.createElement(Help, { color: "action" }),
                 React.createElement("span", { className: "dialogTitle" }, title),
-                closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
+                closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
                     React.createElement(CloseIcon, null)))),
             React.createElement(DialogContent, null,
                 React.createElement(DialogContentText, null, this.content),
@@ -205,7 +205,7 @@ export class NotificationMU extends NotificationReact {
                 React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                     React.createElement(Info, { color: "primary" }),
                     React.createElement("span", { className: "dialogTitle" }, title),
-                    closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
+                    closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
                         React.createElement(CloseIcon, null)))),
                 React.createElement(DialogContent, null,
                     React.createElement(DialogContentText, null, this.content),

package/lib/pages/CommonPage.js

@@ -3,7 +3,7 @@ import { FabBox } from "../FabBox";
 import { ScrollTopFab } from "../ScrollTopFab";
 import { MUGlobal } from "../MUGlobal";
 import { MoreFab } from "../MoreFab";
-import { Container, Fab, Paper } from "@mui/material";
+import { Container, Fab } from "@mui/material";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
@@ -18,7 +18,7 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPanel = fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
     // Fab padding
     const fabPadding = MUGlobal.increase(MUGlobal.pagePaddings, fabPaddingAdjust);
     if (typeof sx === "object" && sx != null && !Reflect.has(sx, "padding")) {
@@ -41,21 +41,20 @@ export function CommonPage(props) {
                         onRefresh();
                 }
                 : undefined;
-    const fab = (React.createElement(FabBox, { sx: {
-            zIndex: 1,
-            bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-            right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
-        }, columnDirection: fabColumnDirection },
-        scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
-        fabButtons,
-        onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } } },
-            React.createElement(RefreshIcon, null))),
-        React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
-        supportBack && React.createElement(BackButton, { title: labels.back, size: fabSize })));
     // Return the UI
     return (React.createElement(React.Fragment, null,
         update && (React.createElement(ReactAppStateDetector, { targetFields: targetFields, update: update })),
         React.createElement(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest },
-            fabPanel ? React.createElement(Paper, { sx: { padding: 2 } }, fab) : fab,
+            React.createElement(FabBox, { sx: {
+                    zIndex: 1,
+                    bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
+                    right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
+                }, columnDirection: fabColumnDirection, fabPanel: fabPanel },
+                scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
+                fabButtons,
+                onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } } },
+                    React.createElement(RefreshIcon, null))),
+                React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
+                supportBack && React.createElement(BackButton, { title: labels.back, size: fabSize })),
             children)));
 }

package/package.json

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

package/src/DraggablePaperComponent.tsx

@@ -1,6 +1,6 @@
-import { Paper, PaperProps } from '@mui/material';
-import React from 'react';
-import Draggable from 'react-draggable';
+import { Paper, PaperProps } from "@mui/material";
+import React from "react";
+import Draggable from "react-draggable";
 
 /**
  * Draggable paper component
@@ -8,12 +8,12 @@ import Draggable from 'react-draggable';
  * @returns Component
  */
 export function DraggablePaperComponent(props: PaperProps) {
-    return (
-        <Draggable
-            handle=".draggable-dialog-title"
-            cancel={'[class*="MuiDialogContent-root"]'}
-        >
-            <Paper {...props} />
-        </Draggable>
-    );
+  return (
+    <Draggable
+      handle=".draggable-dialog-title"
+      cancel={'[class*="MuiDialogContent-root"]'}
+    >
+      <Paper {...props} />
+    </Draggable>
+  );
 }

package/src/FabBox.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, useTheme } from "@mui/material";
+import { Box, BoxProps, Paper, useTheme } from "@mui/material";
 import React from "react";
 
 /**
@@ -14,6 +14,11 @@ export type FabBoxProps = BoxProps & {
    * Flex direction, row or column
    */
   columnDirection?: boolean;
+
+  /**
+   * Add panel to the Fab
+   */
+  fabPanel?: boolean;
 };
 
 /**
@@ -23,7 +28,13 @@ export type FabBoxProps = BoxProps & {
  */
 export function FabBox(props: FabBoxProps) {
   // Destruct
-  const { columnDirection, itemGap = 1, sx, ...rest } = props;
+  const {
+    columnDirection,
+    fabPanel = columnDirection === false ? true : false,
+    itemGap = 1,
+    sx,
+    ...rest
+  } = props;
 
   // Theme
   const theme = useTheme();
@@ -36,7 +47,7 @@ export function FabBox(props: FabBoxProps) {
     ? { marginTop: spaceGap }
     : { marginLeft: spaceGap };
 
-  return (
+  const box = (
     <Box
       sx={{
         position: "fixed",
@@ -49,4 +60,6 @@ export function FabBox(props: FabBoxProps) {
       {...rest}
     />
   );
+
+  return fabPanel ? <Paper sx={{ padding: spaceGap }}>{box}</Paper> : box;
 }

package/src/NotifierMU.tsx

@@ -55,7 +55,7 @@ const IconDialogTitle = styled(DialogTitle)`
             text-overflow: ellipsis;
             padding-left: ${theme.spacing(1)};
         }
-        & .closeButton {
+        & .MuiDialogContent-root-close-button {
             padding-left: ${theme.spacing(1)};
         }
     `}
@@ -124,7 +124,7 @@ export class NotificationMU extends NotificationReact {
           <span className="dialogTitle">{title}</span>
           {closable && (
             <IconButton
-              className="closeButton"
+              className="MuiDialogContent-root-close-button"
               size="small"
               onClick={() => this.returnValue("CLOSE")}
             >
@@ -195,7 +195,7 @@ export class NotificationMU extends NotificationReact {
           <span className="dialogTitle">{title}</span>
           {closable && (
             <IconButton
-              className="closeButton"
+              className="MuiDialogContent-root-close-button"
               size="small"
               onClick={() => this.returnValue("CLOSE")}
             >
@@ -416,7 +416,7 @@ export class NotificationMU extends NotificationReact {
             <span className="dialogTitle">{title}</span>
             {closable && (
               <IconButton
-                className="closeButton"
+                className="MuiDialogContent-root-close-button"
                 size="small"
                 onClick={() => this.returnValue("CLOSE")}
               >

package/src/pages/CommonPage.tsx

@@ -4,7 +4,7 @@ import { ScrollTopFab } from "../ScrollTopFab";
 import { MUGlobal } from "../MUGlobal";
 import { CommonPageProps } from "./CommonPageProps";
 import { MoreFab } from "../MoreFab";
-import { Container, Fab, Paper } from "@mui/material";
+import { Container, Fab } from "@mui/material";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
@@ -26,7 +26,7 @@ export function CommonPage(props: CommonPageProps) {
     disableGutters = true,
     fabButtons,
     fabColumnDirection,
-    fabPanel = fabColumnDirection,
+    fabPanel,
     fabPaddingAdjust = 1.5,
     fabSize = "small",
     maxWidth = false,
@@ -66,38 +66,6 @@ export function CommonPage(props: CommonPageProps) {
       }
     : undefined;
 
-  const fab = (
-    <FabBox
-      sx={{
-        zIndex: 1,
-        bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-        right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
-      }}
-      columnDirection={fabColumnDirection}
-    >
-      {scrollContainer && (
-        <ScrollTopFab
-          size={fabSize}
-          target={scrollContainer}
-          title={labels.scrollTop}
-        />
-      )}
-      {fabButtons}
-      {onRefresh != null && (
-        <Fab
-          title={labels.refresh}
-          size={fabSize}
-          onClick={onRefresh}
-          sx={{ display: { xs: "none", md: "inherit" } }}
-        >
-          <RefreshIcon />
-        </Fab>
-      )}
-      <MoreFab size={fabSize} title={labels.more} actions={moreActions} />
-      {supportBack && <BackButton title={labels.back} size={fabSize} />}
-    </FabBox>
-  );
-
   // Return the UI
   return (
     <React.Fragment>
@@ -111,7 +79,38 @@ export function CommonPage(props: CommonPageProps) {
         id="page-container"
         {...rest}
       >
-        {fabPanel ? <Paper sx={{ padding: 2 }}>{fab}</Paper> : fab}
+        <FabBox
+          sx={{
+            zIndex: 1,
+            bottom: (theme) =>
+              MUGlobal.updateWithTheme(fabPadding, theme.spacing),
+            right: (theme) =>
+              MUGlobal.updateWithTheme(fabPadding, theme.spacing)
+          }}
+          columnDirection={fabColumnDirection}
+          fabPanel={fabPanel}
+        >
+          {scrollContainer && (
+            <ScrollTopFab
+              size={fabSize}
+              target={scrollContainer}
+              title={labels.scrollTop}
+            />
+          )}
+          {fabButtons}
+          {onRefresh != null && (
+            <Fab
+              title={labels.refresh}
+              size={fabSize}
+              onClick={onRefresh}
+              sx={{ display: { xs: "none", md: "inherit" } }}
+            >
+              <RefreshIcon />
+            </Fab>
+          )}
+          <MoreFab size={fabSize} title={labels.more} actions={moreActions} />
+          {supportBack && <BackButton title={labels.back} size={fabSize} />}
+        </FabBox>
         {children}
       </Container>
     </React.Fragment>