@etsoo/materialui 1.2.6 → 1.2.8

package/lib/FabBox.js

@@ -1,6 +1,6 @@
 import { Box, Paper, useTheme } from "@mui/material";
 import React from "react";
-const initOpactiy = 0.1;
+const initOpactiy = 0.15;
 /**
  * Fabs container box
  * @param props Props

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,25 @@ 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)
+                    ...(typeof fabTop === "function"
+                        ? fabTop(theme, fabPadding)
+                        : fabTop
+                            ? {
+                                top: MUGlobal.updateWithTheme(MUGlobal.increase(fabPadding, 7), theme.spacing),
+                                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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { UserKey } from "@etsoo/appscript";
 import { IStateUpdate, ListItemReact } from "@etsoo/react";
-import { ContainerProps } from "@mui/material";
+import { ContainerProps, Theme } from "@mui/material";
 import { CustomFabSize } from "../CustomFabProps";
 /**
  * Common page props
@@ -28,6 +28,10 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
      * Add panel to the Fab
      */
     fabPanel?: boolean;
+    /**
+     * Fab lays in the top
+     */
+    fabTop?: ((theme: Theme, padding: {}) => object) | 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.6",
+  "version": "1.2.8",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/FabBox.tsx

@@ -2,7 +2,7 @@ import { Box, BoxProps, Paper, PaperProps, useTheme } from "@mui/material";
 import React from "react";
 
 type SharedProps = keyof BoxProps & keyof PaperProps;
-const initOpactiy = 0.1;
+const initOpactiy = 0.15;
 
 /**
  * Fabs container box props

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,20 @@ export function CommonPage(props: CommonPageProps) {
         <FabBox
           sx={{
             zIndex: 1,
-            bottom: (theme) =>
-              MUGlobal.updateWithTheme(fabPadding, theme.spacing),
-            right: (theme) =>
-              MUGlobal.updateWithTheme(fabPadding, theme.spacing)
+            ...(typeof fabTop === "function"
+              ? fabTop(theme, fabPadding)
+              : fabTop
+              ? {
+                  top: MUGlobal.updateWithTheme(
+                    MUGlobal.increase(fabPadding, 7),
+                    theme.spacing
+                  ),
+                  right: distance
+                }
+              : {
+                  bottom: distance,
+                  right: distance
+                })
           }}
           columnDirection={fabColumnDirection}
           fabPanel={fabPanel}

package/src/pages/CommonPageProps.ts

@@ -1,6 +1,6 @@
 import { UserKey } from "@etsoo/appscript";
 import { IStateUpdate, ListItemReact } from "@etsoo/react";
-import { ContainerProps } from "@mui/material";
+import { ContainerProps, Theme } from "@mui/material";
 import { CustomFabSize } from "../CustomFabProps";
 
 /**
@@ -33,6 +33,11 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
    */
   fabPanel?: boolean;
 
+  /**
+   * Fab lays in the top
+   */
+  fabTop?: ((theme: Theme, padding: {}) => object) | 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 ? (