@etsoo/materialui 1.1.98 → 1.1.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/FabBox.d.ts +4 -0
  2. package/lib/FabBox.js +4 -3
  3. package/lib/pages/CommonPage.js +13 -14
  4. package/package.json +1 -1
  5. package/src/FabBox.tsx +16 -3
  6. package/src/pages/CommonPage.tsx +34 -35
package/lib/FabBox.d.ts CHANGED
@@ -12,6 +12,10 @@ export type FabBoxProps = BoxProps & {
12
12
  * Flex direction, row or column
13
13
  */
14
14
  columnDirection?: boolean;
15
+ /**
16
+ * Add panel to the Fab
17
+ */
18
+ fabPanel?: boolean;
15
19
  };
16
20
  /**
17
21
  * Fabs container box
package/lib/FabBox.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Box, useTheme } from "@mui/material";
1
+ import { Box, Paper, useTheme } from "@mui/material";
2
2
  import React from "react";
3
3
  /**
4
4
  * Fabs container box
@@ -7,7 +7,7 @@ import React from "react";
7
7
  */
8
8
  export function FabBox(props) {
9
9
  // Destruct
10
- const { columnDirection, itemGap = 1, sx, ...rest } = props;
10
+ const { columnDirection, fabPanel = columnDirection, itemGap = 1, sx, ...rest } = props;
11
11
  // Theme
12
12
  const theme = useTheme();
13
13
  const spaceGap = theme.spacing(itemGap);
@@ -17,7 +17,7 @@ export function FabBox(props) {
17
17
  const margin = columnDirection
18
18
  ? { marginTop: spaceGap }
19
19
  : { marginLeft: spaceGap };
20
- return (React.createElement(Box, { sx: {
20
+ const box = (React.createElement(Box, { sx: {
21
21
  position: "fixed",
22
22
  display: "flex",
23
23
  alignItems: "center",
@@ -25,4 +25,5 @@ export function FabBox(props) {
25
25
  "& > :not(style) + :not(style)": margin,
26
26
  ...sx
27
27
  }, ...rest }));
28
+ return fabPanel ? React.createElement(Paper, { sx: { padding: spaceGap } }, box) : box;
28
29
  }
package/lib/pages/CommonPage.js CHANGED
@@ -3,7 +3,7 @@ import { FabBox } from "../FabBox";
3
3
  import { ScrollTopFab } from "../ScrollTopFab";
4
4
  import { MUGlobal } from "../MUGlobal";
5
5
  import { MoreFab } from "../MoreFab";
6
- import { Container, Fab, Paper } from "@mui/material";
6
+ import { Container, Fab } from "@mui/material";
7
7
  import RefreshIcon from "@mui/icons-material/Refresh";
8
8
  import { BackButton } from "../BackButton";
9
9
  import { Labels } from "../app/Labels";
@@ -18,7 +18,7 @@ export const CommonPageScrollContainer = global;
18
18
  */
19
19
  export function CommonPage(props) {
20
20
  // Destruct
21
- 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;
21
+ 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;
22
22
  // Fab padding
23
23
  const fabPadding = MUGlobal.increase(MUGlobal.pagePaddings, fabPaddingAdjust);
24
24
  if (typeof sx === "object" && sx != null && !Reflect.has(sx, "padding")) {
@@ -41,21 +41,20 @@ export function CommonPage(props) {
41
41
  onRefresh();
42
42
  }
43
43
  : undefined;
44
- const fab = (React.createElement(FabBox, { sx: {
45
- zIndex: 1,
46
- bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
47
- right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
48
- }, columnDirection: fabColumnDirection },
49
- scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
50
- fabButtons,
51
- onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } } },
52
- React.createElement(RefreshIcon, null))),
53
- React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
54
- supportBack && React.createElement(BackButton, { title: labels.back, size: fabSize })));
55
44
  // Return the UI
56
45
  return (React.createElement(React.Fragment, null,
57
46
  update && (React.createElement(ReactAppStateDetector, { targetFields: targetFields, update: update })),
58
47
  React.createElement(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest },
59
- fabPanel ? React.createElement(Paper, { sx: { padding: 2 } }, fab) : fab,
48
+ React.createElement(FabBox, { sx: {
49
+ zIndex: 1,
50
+ bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
51
+ right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
52
+ }, columnDirection: fabColumnDirection, fabPanel: fabPanel },
53
+ scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
54
+ fabButtons,
55
+ onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } } },
56
+ React.createElement(RefreshIcon, null))),
57
+ React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
58
+ supportBack && React.createElement(BackButton, { title: labels.back, size: fabSize })),
60
59
  children)));
61
60
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.1.98",
3
+ "version": "1.1.99",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/FabBox.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Box, BoxProps, useTheme } from "@mui/material";
1
+ import { Box, BoxProps, Paper, useTheme } from "@mui/material";
2
2
  import React from "react";
3
3
 
4
4
  /**
@@ -14,6 +14,11 @@ export type FabBoxProps = BoxProps & {
14
14
  * Flex direction, row or column
15
15
  */
16
16
  columnDirection?: boolean;
17
+
18
+ /**
19
+ * Add panel to the Fab
20
+ */
21
+ fabPanel?: boolean;
17
22
  };
18
23
 
19
24
  /**
@@ -23,7 +28,13 @@ export type FabBoxProps = BoxProps & {
23
28
  */
24
29
  export function FabBox(props: FabBoxProps) {
25
30
  // Destruct
26
- const { columnDirection, itemGap = 1, sx, ...rest } = props;
31
+ const {
32
+ columnDirection,
33
+ fabPanel = columnDirection,
34
+ itemGap = 1,
35
+ sx,
36
+ ...rest
37
+ } = props;
27
38
 
28
39
  // Theme
29
40
  const theme = useTheme();
@@ -36,7 +47,7 @@ export function FabBox(props: FabBoxProps) {
36
47
  ? { marginTop: spaceGap }
37
48
  : { marginLeft: spaceGap };
38
49
 
39
- return (
50
+ const box = (
40
51
  <Box
41
52
  sx={{
42
53
  position: "fixed",
@@ -49,4 +60,6 @@ export function FabBox(props: FabBoxProps) {
49
60
  {...rest}
50
61
  />
51
62
  );
63
+
64
+ return fabPanel ? <Paper sx={{ padding: spaceGap }}>{box}</Paper> : box;
52
65
  }
package/src/pages/CommonPage.tsx CHANGED
@@ -4,7 +4,7 @@ import { ScrollTopFab } from "../ScrollTopFab";
4
4
  import { MUGlobal } from "../MUGlobal";
5
5
  import { CommonPageProps } from "./CommonPageProps";
6
6
  import { MoreFab } from "../MoreFab";
7
- import { Container, Fab, Paper } from "@mui/material";
7
+ import { Container, Fab } from "@mui/material";
8
8
  import RefreshIcon from "@mui/icons-material/Refresh";
9
9
  import { BackButton } from "../BackButton";
10
10
  import { Labels } from "../app/Labels";
@@ -26,7 +26,7 @@ export function CommonPage(props: CommonPageProps) {
26
26
  disableGutters = true,
27
27
  fabButtons,
28
28
  fabColumnDirection,
29
- fabPanel = fabColumnDirection,
29
+ fabPanel,
30
30
  fabPaddingAdjust = 1.5,
31
31
  fabSize = "small",
32
32
  maxWidth = false,
@@ -66,38 +66,6 @@ export function CommonPage(props: CommonPageProps) {
66
66
  }
67
67
  : undefined;
68
68
 
69
- const fab = (
70
- <FabBox
71
- sx={{
72
- zIndex: 1,
73
- bottom: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
74
- right: (theme) => MUGlobal.updateWithTheme(fabPadding, theme.spacing)
75
- }}
76
- columnDirection={fabColumnDirection}
77
- >
78
- {scrollContainer && (
79
- <ScrollTopFab
80
- size={fabSize}
81
- target={scrollContainer}
82
- title={labels.scrollTop}
83
- />
84
- )}
85
- {fabButtons}
86
- {onRefresh != null && (
87
- <Fab
88
- title={labels.refresh}
89
- size={fabSize}
90
- onClick={onRefresh}
91
- sx={{ display: { xs: "none", md: "inherit" } }}
92
- >
93
- <RefreshIcon />
94
- </Fab>
95
- )}
96
- <MoreFab size={fabSize} title={labels.more} actions={moreActions} />
97
- {supportBack && <BackButton title={labels.back} size={fabSize} />}
98
- </FabBox>
99
- );
100
-
101
69
  // Return the UI
102
70
  return (
103
71
  <React.Fragment>
@@ -111,7 +79,38 @@ export function CommonPage(props: CommonPageProps) {
111
79
  id="page-container"
112
80
  {...rest}
113
81
  >
114
- {fabPanel ? <Paper sx={{ padding: 2 }}>{fab}</Paper> : fab}
82
+ <FabBox
83
+ sx={{
84
+ zIndex: 1,
85
+ bottom: (theme) =>
86
+ MUGlobal.updateWithTheme(fabPadding, theme.spacing),
87
+ right: (theme) =>
88
+ MUGlobal.updateWithTheme(fabPadding, theme.spacing)
89
+ }}
90
+ columnDirection={fabColumnDirection}
91
+ fabPanel={fabPanel}
92
+ >
93
+ {scrollContainer && (
94
+ <ScrollTopFab
95
+ size={fabSize}
96
+ target={scrollContainer}
97
+ title={labels.scrollTop}
98
+ />
99
+ )}
100
+ {fabButtons}
101
+ {onRefresh != null && (
102
+ <Fab
103
+ title={labels.refresh}
104
+ size={fabSize}
105
+ onClick={onRefresh}
106
+ sx={{ display: { xs: "none", md: "inherit" } }}
107
+ >
108
+ <RefreshIcon />
109
+ </Fab>
110
+ )}
111
+ <MoreFab size={fabSize} title={labels.more} actions={moreActions} />
112
+ {supportBack && <BackButton title={labels.back} size={fabSize} />}
113
+ </FabBox>
115
114
  {children}
116
115
  </Container>
117
116
  </React.Fragment>