@etsoo/materialui 1.2.4 → 1.2.6

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 (3) hide show
  1. package/lib/FabBox.js +6 -7
  2. package/package.json +1 -1
  3. package/src/FabBox.tsx +7 -7
package/lib/FabBox.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Box, Paper, useTheme } from "@mui/material";
2
2
  import React from "react";
3
+ const initOpactiy = 0.1;
3
4
  /**
4
5
  * Fabs container box
5
6
  * @param props Props
@@ -11,26 +12,24 @@ export function FabBox(props) {
11
12
  // Theme
12
13
  const theme = useTheme();
13
14
  const spaceGap = theme.spacing(itemGap);
15
+ const [opacity, setOpacity] = React.useState(initOpactiy);
14
16
  if (columnDirection == null)
15
17
  return React.createElement(React.Fragment, null);
16
- // margin
17
- const margin = columnDirection
18
- ? { marginTop: spaceGap }
19
- : { marginLeft: spaceGap };
20
18
  return fabPanel ? (React.createElement(Paper, { sx: {
21
19
  position: "fixed",
22
20
  display: "flex",
23
21
  alignItems: "center",
24
22
  padding: spaceGap,
25
23
  flexDirection: columnDirection ? "column" : "row",
26
- "& > :not(style) + :not(style)": margin,
24
+ gap: spaceGap,
25
+ opacity: opacity,
27
26
  ...sx
28
- }, ...rest })) : (React.createElement(Box, { sx: {
27
+ }, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : (React.createElement(Box, { sx: {
29
28
  position: "fixed",
30
29
  display: "flex",
31
30
  alignItems: "center",
32
31
  flexDirection: columnDirection ? "column" : "row",
33
- "& > :not(style) + :not(style)": margin,
32
+ gap: spaceGap,
34
33
  ...sx
35
34
  }, ...rest }));
36
35
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.2.4",
3
+ "version": "1.2.6",
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
@@ -2,6 +2,7 @@ import { Box, BoxProps, Paper, PaperProps, useTheme } from "@mui/material";
2
2
  import React from "react";
3
3
 
4
4
  type SharedProps = keyof BoxProps & keyof PaperProps;
5
+ const initOpactiy = 0.1;
5
6
 
6
7
  /**
7
8
  * Fabs container box props
@@ -42,14 +43,10 @@ export function FabBox(props: FabBoxProps) {
42
43
  // Theme
43
44
  const theme = useTheme();
44
45
  const spaceGap = theme.spacing(itemGap);
46
+ const [opacity, setOpacity] = React.useState(initOpactiy);
45
47
 
46
48
  if (columnDirection == null) return <React.Fragment />;
47
49
 
48
- // margin
49
- const margin = columnDirection
50
- ? { marginTop: spaceGap }
51
- : { marginLeft: spaceGap };
52
-
53
50
  return fabPanel ? (
54
51
  <Paper
55
52
  sx={{
@@ -58,9 +55,12 @@ export function FabBox(props: FabBoxProps) {
58
55
  alignItems: "center",
59
56
  padding: spaceGap,
60
57
  flexDirection: columnDirection ? "column" : "row",
61
- "& > :not(style) + :not(style)": margin,
58
+ gap: spaceGap,
59
+ opacity: opacity,
62
60
  ...sx
63
61
  }}
62
+ onMouseEnter={() => setOpacity(1)}
63
+ onMouseLeave={() => setOpacity(initOpactiy)}
64
64
  {...rest}
65
65
  />
66
66
  ) : (
@@ -70,7 +70,7 @@ export function FabBox(props: FabBoxProps) {
70
70
  display: "flex",
71
71
  alignItems: "center",
72
72
  flexDirection: columnDirection ? "column" : "row",
73
- "& > :not(style) + :not(style)": margin,
73
+ gap: spaceGap,
74
74
  ...sx
75
75
  }}
76
76
  {...rest}