@etsoo/materialui 1.2.3 → 1.2.5

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.js +2 -6
  2. package/lib/ScrollTopFab.d.ts +1 -1
  3. package/lib/ScrollTopFab.js +5 -5
  4. package/package.json +1 -1
  5. package/src/FabBox.tsx +2 -7
  6. package/src/ScrollTopFab.tsx +26 -24
package/lib/FabBox.js CHANGED
@@ -13,24 +13,20 @@ export function FabBox(props) {
13
13
  const spaceGap = theme.spacing(itemGap);
14
14
  if (columnDirection == null)
15
15
  return React.createElement(React.Fragment, null);
16
- // margin
17
- const margin = columnDirection
18
- ? { marginTop: spaceGap }
19
- : { marginLeft: spaceGap };
20
16
  return fabPanel ? (React.createElement(Paper, { sx: {
21
17
  position: "fixed",
22
18
  display: "flex",
23
19
  alignItems: "center",
24
20
  padding: spaceGap,
25
21
  flexDirection: columnDirection ? "column" : "row",
26
- "& > :not(style) + :not(style)": margin,
22
+ gap: spaceGap,
27
23
  ...sx
28
24
  }, ...rest })) : (React.createElement(Box, { sx: {
29
25
  position: "fixed",
30
26
  display: "flex",
31
27
  alignItems: "center",
32
28
  flexDirection: columnDirection ? "column" : "row",
33
- "& > :not(style) + :not(style)": margin,
29
+ gap: spaceGap,
34
30
  ...sx
35
31
  }, ...rest }));
36
32
  }
package/lib/ScrollTopFab.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { CustomFabProps } from './CustomFabProps';
2
+ import { CustomFabProps } from "./CustomFabProps";
3
3
  /**
4
4
  * Scroll to top fab
5
5
  * @returns Component
package/lib/ScrollTopFab.js CHANGED
@@ -1,6 +1,6 @@
1
- import React from 'react';
2
- import { Fab, useScrollTrigger, Zoom } from '@mui/material';
3
- import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
1
+ import React from "react";
2
+ import { Fab, useScrollTrigger, Zoom } from "@mui/material";
3
+ import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
4
4
  /**
5
5
  * Scroll to top fab
6
6
  * @returns Component
@@ -19,7 +19,7 @@ export function ScrollTopFab(props) {
19
19
  const handleClick = () => {
20
20
  target.scrollTo({ top: 0 });
21
21
  };
22
- return (React.createElement(Zoom, { in: trigger },
22
+ return trigger ? (React.createElement(Zoom, { in: trigger },
23
23
  React.createElement(Fab, { color: color, size: size, title: title, onClick: handleClick },
24
- React.createElement(VerticalAlignTopIcon, null))));
24
+ React.createElement(VerticalAlignTopIcon, null)))) : (React.createElement(React.Fragment, null));
25
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.2.3",
3
+ "version": "1.2.5",
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
@@ -45,11 +45,6 @@ export function FabBox(props: FabBoxProps) {
45
45
 
46
46
  if (columnDirection == null) return <React.Fragment />;
47
47
 
48
- // margin
49
- const margin = columnDirection
50
- ? { marginTop: spaceGap }
51
- : { marginLeft: spaceGap };
52
-
53
48
  return fabPanel ? (
54
49
  <Paper
55
50
  sx={{
@@ -58,7 +53,7 @@ export function FabBox(props: FabBoxProps) {
58
53
  alignItems: "center",
59
54
  padding: spaceGap,
60
55
  flexDirection: columnDirection ? "column" : "row",
61
- "& > :not(style) + :not(style)": margin,
56
+ gap: spaceGap,
62
57
  ...sx
63
58
  }}
64
59
  {...rest}
@@ -70,7 +65,7 @@ export function FabBox(props: FabBoxProps) {
70
65
  display: "flex",
71
66
  alignItems: "center",
72
67
  flexDirection: columnDirection ? "column" : "row",
73
- "& > :not(style) + :not(style)": margin,
68
+ gap: spaceGap,
74
69
  ...sx
75
70
  }}
76
71
  {...rest}
package/src/ScrollTopFab.tsx CHANGED
@@ -1,34 +1,36 @@
1
- import React from 'react';
2
- import { Fab, useScrollTrigger, Zoom } from '@mui/material';
3
- import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
4
- import { CustomFabProps } from './CustomFabProps';
1
+ import React from "react";
2
+ import { Fab, useScrollTrigger, Zoom } from "@mui/material";
3
+ import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
4
+ import { CustomFabProps } from "./CustomFabProps";
5
5
 
6
6
  /**
7
7
  * Scroll to top fab
8
8
  * @returns Component
9
9
  */
10
10
  export function ScrollTopFab(props: CustomFabProps) {
11
- // Destruct
12
- const { color, size, target, title } = props;
11
+ // Destruct
12
+ const { color, size, target, title } = props;
13
13
 
14
- // Scroll trigger
15
- const trigger = useScrollTrigger({
16
- target,
17
- disableHysteresis: true,
18
- threshold: 120
19
- });
14
+ // Scroll trigger
15
+ const trigger = useScrollTrigger({
16
+ target,
17
+ disableHysteresis: true,
18
+ threshold: 120
19
+ });
20
20
 
21
- // Icon click handler
22
- // behavior: 'smooth'
23
- const handleClick = () => {
24
- target.scrollTo({ top: 0 });
25
- };
21
+ // Icon click handler
22
+ // behavior: 'smooth'
23
+ const handleClick = () => {
24
+ target.scrollTo({ top: 0 });
25
+ };
26
26
 
27
- return (
28
- <Zoom in={trigger}>
29
- <Fab color={color} size={size} title={title} onClick={handleClick}>
30
- <VerticalAlignTopIcon />
31
- </Fab>
32
- </Zoom>
33
- );
27
+ return trigger ? (
28
+ <Zoom in={trigger}>
29
+ <Fab color={color} size={size} title={title} onClick={handleClick}>
30
+ <VerticalAlignTopIcon />
31
+ </Fab>
32
+ </Zoom>
33
+ ) : (
34
+ <React.Fragment />
35
+ );
34
36
  }