@etsoo/materialui 1.2.5 → 1.2.7

package/lib/FabBox.js

@@ -1,5 +1,6 @@
 import { Box, Paper, useTheme } from "@mui/material";
 import React from "react";
+const initOpactiy = 0.15;
 /**
  * Fabs container box
  * @param props Props
@@ -11,6 +12,7 @@ export function FabBox(props) {
     // Theme
     const theme = useTheme();
     const spaceGap = theme.spacing(itemGap);
+    const [opacity, setOpacity] = React.useState(initOpactiy);
     if (columnDirection == null)
         return React.createElement(React.Fragment, null);
     return fabPanel ? (React.createElement(Paper, { sx: {
@@ -20,8 +22,9 @@ export function FabBox(props) {
             padding: spaceGap,
             flexDirection: columnDirection ? "column" : "row",
             gap: spaceGap,
+            opacity: opacity,
             ...sx
-        }, ...rest })) : (React.createElement(Box, { sx: {
+        }, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : (React.createElement(Box, { sx: {
             position: "fixed",
             display: "flex",
             alignItems: "center",

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 } from "@mui/material";
+import { Container, Fab, useTheme } 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, 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, fabTop, 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,14 +41,23 @@ export function CommonPage(props) {
                         onRefresh();
                 }
                 : undefined;
+    const theme = useTheme();
+    const distance = React.useMemo(() => MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
     // 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 },
             React.createElement(FabBox, { sx: {
                     zIndex: 1,
-                    bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-                    right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
+                    ...(fabTop
+                        ? {
+                            top: distance,
+                            right: distance
+                        }
+                        : {
+                            bottom: distance,
+                            right: distance
+                        })
                 }, columnDirection: fabColumnDirection, fabPanel: fabPanel },
                 scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
                 fabButtons,

package/lib/pages/CommonPageProps.d.ts

@@ -28,6 +28,10 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
      * Add panel to the Fab
      */
     fabPanel?: boolean;
+    /**
+     * Fab lays in the top
+     */
+    fabTop?: boolean;
     /**
      * More actions
      */

package/lib/pages/ViewPage.js

@@ -77,7 +77,7 @@ function getItemField(field, data) {
  */
 export function ViewPage(props) {
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, supportBack = true, pullToRefresh = true, gridRef, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, ...rest } = props;
     // Data
     const [data, setData] = React.useState();
     // Labels
@@ -91,7 +91,7 @@ export function ViewPage(props) {
             return;
         setData(result);
     };
-    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, supportBack: supportBack }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
+    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, className: "ET-ViewPage", ref: gridRef, sx: {
                 ".MuiTypography-subtitle2": {
                     fontWeight: "bold"

package/package.json

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

package/src/FabBox.tsx

@@ -2,6 +2,7 @@ import { Box, BoxProps, Paper, PaperProps, useTheme } from "@mui/material";
 import React from "react";
 
 type SharedProps = keyof BoxProps & keyof PaperProps;
+const initOpactiy = 0.15;
 
 /**
  * Fabs container box props
@@ -42,6 +43,7 @@ export function FabBox(props: FabBoxProps) {
   // Theme
   const theme = useTheme();
   const spaceGap = theme.spacing(itemGap);
+  const [opacity, setOpacity] = React.useState(initOpactiy);
 
   if (columnDirection == null) return <React.Fragment />;
 
@@ -54,8 +56,11 @@ export function FabBox(props: FabBoxProps) {
         padding: spaceGap,
         flexDirection: columnDirection ? "column" : "row",
         gap: spaceGap,
+        opacity: opacity,
         ...sx
       }}
+      onMouseEnter={() => setOpacity(1)}
+      onMouseLeave={() => setOpacity(initOpactiy)}
       {...rest}
     />
   ) : (

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 } from "@mui/material";
+import { Container, Fab, useTheme } from "@mui/material";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
@@ -24,6 +24,7 @@ export function CommonPage(props: CommonPageProps) {
   const {
     children,
     disableGutters = true,
+    fabTop,
     fabButtons,
     fabColumnDirection,
     fabPanel,
@@ -66,6 +67,12 @@ export function CommonPage(props: CommonPageProps) {
       }
     : undefined;
 
+  const theme = useTheme();
+  const distance = React.useMemo(
+    () => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
+    [fabPadding, theme.spacing]
+  );
+
   // Return the UI
   return (
     <React.Fragment>
@@ -82,10 +89,15 @@ export function CommonPage(props: CommonPageProps) {
         <FabBox
           sx={{
             zIndex: 1,
-            bottom: (theme) =>
-              MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-            right: (theme) =>
-              MUGlobal.updateWithTheme(fabPadding, theme.spacing)
+            ...(fabTop
+              ? {
+                  top: distance,
+                  right: distance
+                }
+              : {
+                  bottom: distance,
+                  right: distance
+                })
           }}
           columnDirection={fabColumnDirection}
           fabPanel={fabPanel}

package/src/pages/CommonPageProps.ts

@@ -33,6 +33,11 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
    */
   fabPanel?: boolean;
 
+  /**
+   * Fab lays in the top
+   */
+  fabTop?: boolean;
+
   /**
    * More actions
    */

package/src/pages/ViewPage.tsx

@@ -200,6 +200,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     paddings = MUGlobal.pagePaddings,
     supportRefresh = true,
     fabColumnDirection = true,
+    fabTop = true,
     supportBack = true,
     pullToRefresh = true,
     gridRef,
@@ -230,6 +231,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
       {...rest}
       scrollContainer={globalThis}
       fabColumnDirection={fabColumnDirection}
+      fabTop={fabTop}
       supportBack={supportBack}
     >
       {data == null ? (