@etsoo/materialui 1.1.99 → 1.2.1

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 (9) hide show
  1. package/lib/DraggablePaperComponent.d.ts +1 -1
  2. package/lib/DraggablePaperComponent.js +3 -3
  3. package/lib/FabBox.d.ts +4 -2
  4. package/lib/FabBox.js +9 -2
  5. package/lib/NotifierMU.js +4 -4
  6. package/package.json +1 -1
  7. package/src/DraggablePaperComponent.tsx +11 -11
  8. package/src/FabBox.tsx +32 -18
  9. package/src/NotifierMU.tsx +4 -4
package/lib/DraggablePaperComponent.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { PaperProps } from '@mui/material';
2
+ import { PaperProps } from "@mui/material";
3
3
  /**
4
4
  * Draggable paper component
5
5
  * @param props Props
package/lib/DraggablePaperComponent.js CHANGED
@@ -1,6 +1,6 @@
1
- import { Paper } from '@mui/material';
2
- import React from 'react';
3
- import Draggable from 'react-draggable';
1
+ import { Paper } from "@mui/material";
2
+ import React from "react";
3
+ import Draggable from "react-draggable";
4
4
  /**
5
5
  * Draggable paper component
6
6
  * @param props Props
package/lib/FabBox.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  /// <reference types="react" />
2
- import { BoxProps } from "@mui/material";
2
+ import { BoxProps, PaperProps } from "@mui/material";
3
+ type SharedProps = keyof BoxProps & keyof PaperProps;
3
4
  /**
4
5
  * Fabs container box props
5
6
  */
6
- export type FabBoxProps = BoxProps & {
7
+ export type FabBoxProps = Pick<BoxProps, SharedProps> & Pick<PaperProps, SharedProps> & {
7
8
  /**
8
9
  * Item gap
9
10
  */
@@ -23,3 +24,4 @@ export type FabBoxProps = BoxProps & {
23
24
  * @returns Component
24
25
  */
25
26
  export declare function FabBox(props: FabBoxProps): JSX.Element;
27
+ export {};
package/lib/FabBox.js CHANGED
@@ -17,7 +17,15 @@ export function FabBox(props) {
17
17
  const margin = columnDirection
18
18
  ? { marginTop: spaceGap }
19
19
  : { marginLeft: spaceGap };
20
- const box = (React.createElement(Box, { sx: {
20
+ return fabPanel ? (React.createElement(Paper, { sx: {
21
+ position: "fixed",
22
+ display: "flex",
23
+ alignItems: "center",
24
+ padding: spaceGap,
25
+ flexDirection: columnDirection ? "column" : "row",
26
+ "& > :not(style) + :not(style)": margin,
27
+ ...sx
28
+ }, ...rest })) : (React.createElement(Box, { sx: {
21
29
  position: "fixed",
22
30
  display: "flex",
23
31
  alignItems: "center",
@@ -25,5 +33,4 @@ export function FabBox(props) {
25
33
  "& > :not(style) + :not(style)": margin,
26
34
  ...sx
27
35
  }, ...rest }));
28
- return fabPanel ? React.createElement(Paper, { sx: { padding: spaceGap } }, box) : box;
29
36
  }
package/lib/NotifierMU.js CHANGED
@@ -21,7 +21,7 @@ const IconDialogTitle = styled(DialogTitle) `
21
21
  text-overflow: ellipsis;
22
22
  padding-left: ${theme.spacing(1)};
23
23
  }
24
- & .closeButton {
24
+ & .MuiDialogContent-root-close-button {
25
25
  padding-left: ${theme.spacing(1)};
26
26
  }
27
27
  `}
@@ -68,7 +68,7 @@ export class NotificationMU extends NotificationReact {
68
68
  React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
69
69
  icon,
70
70
  React.createElement("span", { className: "dialogTitle" }, title),
71
- closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
71
+ closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
72
72
  React.createElement(CloseIcon, null)))),
73
73
  React.createElement(DialogContent, null,
74
74
  React.createElement(DialogContentText, null, this.content),
@@ -89,7 +89,7 @@ export class NotificationMU extends NotificationReact {
89
89
  React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
90
90
  React.createElement(Help, { color: "action" }),
91
91
  React.createElement("span", { className: "dialogTitle" }, title),
92
- closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
92
+ closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
93
93
  React.createElement(CloseIcon, null)))),
94
94
  React.createElement(DialogContent, null,
95
95
  React.createElement(DialogContentText, null, this.content),
@@ -205,7 +205,7 @@ export class NotificationMU extends NotificationReact {
205
205
  React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
206
206
  React.createElement(Info, { color: "primary" }),
207
207
  React.createElement("span", { className: "dialogTitle" }, title),
208
- closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
208
+ closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
209
209
  React.createElement(CloseIcon, null)))),
210
210
  React.createElement(DialogContent, null,
211
211
  React.createElement(DialogContentText, null, this.content),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.1.99",
3
+ "version": "1.2.1",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/DraggablePaperComponent.tsx CHANGED
@@ -1,6 +1,6 @@
1
- import { Paper, PaperProps } from '@mui/material';
2
- import React from 'react';
3
- import Draggable from 'react-draggable';
1
+ import { Paper, PaperProps } from "@mui/material";
2
+ import React from "react";
3
+ import Draggable from "react-draggable";
4
4
 
5
5
  /**
6
6
  * Draggable paper component
@@ -8,12 +8,12 @@ import Draggable from 'react-draggable';
8
8
  * @returns Component
9
9
  */
10
10
  export function DraggablePaperComponent(props: PaperProps) {
11
- return (
12
- <Draggable
13
- handle=".draggable-dialog-title"
14
- cancel={'[class*="MuiDialogContent-root"]'}
15
- >
16
- <Paper {...props} />
17
- </Draggable>
18
- );
11
+ return (
12
+ <Draggable
13
+ handle=".draggable-dialog-title"
14
+ cancel={'[class*="MuiDialogContent-root"]'}
15
+ >
16
+ <Paper {...props} />
17
+ </Draggable>
18
+ );
19
19
  }
package/src/FabBox.tsx CHANGED
@@ -1,25 +1,28 @@
1
- import { Box, BoxProps, Paper, useTheme } from "@mui/material";
1
+ import { Box, BoxProps, Paper, PaperProps, useTheme } from "@mui/material";
2
2
  import React from "react";
3
3
 
4
+ type SharedProps = keyof BoxProps & keyof PaperProps;
5
+
4
6
  /**
5
7
  * Fabs container box props
6
8
  */
7
- export type FabBoxProps = BoxProps & {
8
- /**
9
- * Item gap
10
- */
11
- itemGap?: number;
9
+ export type FabBoxProps = Pick<BoxProps, SharedProps> &
10
+ Pick<PaperProps, SharedProps> & {
11
+ /**
12
+ * Item gap
13
+ */
14
+ itemGap?: number;
12
15
 
13
- /**
14
- * Flex direction, row or column
15
- */
16
- columnDirection?: boolean;
16
+ /**
17
+ * Flex direction, row or column
18
+ */
19
+ columnDirection?: boolean;
17
20
 
18
- /**
19
- * Add panel to the Fab
20
- */
21
- fabPanel?: boolean;
22
- };
21
+ /**
22
+ * Add panel to the Fab
23
+ */
24
+ fabPanel?: boolean;
25
+ };
23
26
 
24
27
  /**
25
28
  * Fabs container box
@@ -47,7 +50,20 @@ export function FabBox(props: FabBoxProps) {
47
50
  ? { marginTop: spaceGap }
48
51
  : { marginLeft: spaceGap };
49
52
 
50
- const box = (
53
+ return fabPanel ? (
54
+ <Paper
55
+ sx={{
56
+ position: "fixed",
57
+ display: "flex",
58
+ alignItems: "center",
59
+ padding: spaceGap,
60
+ flexDirection: columnDirection ? "column" : "row",
61
+ "& > :not(style) + :not(style)": margin,
62
+ ...sx
63
+ }}
64
+ {...rest}
65
+ />
66
+ ) : (
51
67
  <Box
52
68
  sx={{
53
69
  position: "fixed",
@@ -60,6 +76,4 @@ export function FabBox(props: FabBoxProps) {
60
76
  {...rest}
61
77
  />
62
78
  );
63
-
64
- return fabPanel ? <Paper sx={{ padding: spaceGap }}>{box}</Paper> : box;
65
79
  }
package/src/NotifierMU.tsx CHANGED
@@ -55,7 +55,7 @@ const IconDialogTitle = styled(DialogTitle)`
55
55
  text-overflow: ellipsis;
56
56
  padding-left: ${theme.spacing(1)};
57
57
  }
58
- & .closeButton {
58
+ & .MuiDialogContent-root-close-button {
59
59
  padding-left: ${theme.spacing(1)};
60
60
  }
61
61
  `}
@@ -124,7 +124,7 @@ export class NotificationMU extends NotificationReact {
124
124
  <span className="dialogTitle">{title}</span>
125
125
  {closable && (
126
126
  <IconButton
127
- className="closeButton"
127
+ className="MuiDialogContent-root-close-button"
128
128
  size="small"
129
129
  onClick={() => this.returnValue("CLOSE")}
130
130
  >
@@ -195,7 +195,7 @@ export class NotificationMU extends NotificationReact {
195
195
  <span className="dialogTitle">{title}</span>
196
196
  {closable && (
197
197
  <IconButton
198
- className="closeButton"
198
+ className="MuiDialogContent-root-close-button"
199
199
  size="small"
200
200
  onClick={() => this.returnValue("CLOSE")}
201
201
  >
@@ -416,7 +416,7 @@ export class NotificationMU extends NotificationReact {
416
416
  <span className="dialogTitle">{title}</span>
417
417
  {closable && (
418
418
  <IconButton
419
- className="closeButton"
419
+ className="MuiDialogContent-root-close-button"
420
420
  size="small"
421
421
  onClick={() => this.returnValue("CLOSE")}
422
422
  >