@etsoo/materialui 1.2.5 → 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.
- package/lib/FabBox.js +4 -1
- package/package.json +1 -1
- package/src/FabBox.tsx +5 -0
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,6 +12,7 @@ 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
18
|
return fabPanel ? (React.createElement(Paper, { sx: {
|
|
@@ -20,8 +22,9 @@ export function FabBox(props) {
|
|
|
20
22
|
padding: spaceGap,
|
|
21
23
|
flexDirection: columnDirection ? "column" : "row",
|
|
22
24
|
gap: spaceGap,
|
|
25
|
+
opacity: opacity,
|
|
23
26
|
...sx
|
|
24
|
-
}, ...rest })) : (React.createElement(Box, { sx: {
|
|
27
|
+
}, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : (React.createElement(Box, { sx: {
|
|
25
28
|
position: "fixed",
|
|
26
29
|
display: "flex",
|
|
27
30
|
alignItems: "center",
|
package/package.json
CHANGED
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,6 +43,7 @@ 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
|
|
|
@@ -54,8 +56,11 @@ export function FabBox(props: FabBoxProps) {
|
|
|
54
56
|
padding: spaceGap,
|
|
55
57
|
flexDirection: columnDirection ? "column" : "row",
|
|
56
58
|
gap: spaceGap,
|
|
59
|
+
opacity: opacity,
|
|
57
60
|
...sx
|
|
58
61
|
}}
|
|
62
|
+
onMouseEnter={() => setOpacity(1)}
|
|
63
|
+
onMouseLeave={() => setOpacity(initOpactiy)}
|
|
59
64
|
{...rest}
|
|
60
65
|
/>
|
|
61
66
|
) : (
|