@unitedstatespowersquadrons/components 1.0.7 → 1.0.8
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/Toasts/Toast.tsx +5 -31
- package/Toasts/Toasts.tsx +27 -5
- package/package.json +1 -1
package/Toasts/Toast.tsx
CHANGED
|
@@ -1,25 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import classNames from "classnames";
|
|
3
3
|
import { createUseStyles } from "react-jss";
|
|
4
|
-
import { DismissFunc, ToastProps,
|
|
5
|
-
import createDismissToast from "./createDismissToast";
|
|
4
|
+
import { DismissFunc, ToastProps, Toast_Status } from "./types";
|
|
6
5
|
import FontAwesomeIcon from "../FontAwesomeIcon";
|
|
7
|
-
import { DispatchFunc } from "../types";
|
|
8
6
|
|
|
9
|
-
interface
|
|
7
|
+
interface Props {
|
|
8
|
+
dismiss: DismissFunc;
|
|
10
9
|
toast: ToastProps;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
|
-
interface DismissProps extends BaseProps {
|
|
14
|
-
dismiss?: DismissFunc;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
interface DispatchProps extends BaseProps {
|
|
18
|
-
dispatch?: DispatchFunc<ToastRemoveAppAction>;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
type Props = DismissProps | DispatchProps;
|
|
22
|
-
|
|
23
12
|
const useStyles = createUseStyles({
|
|
24
13
|
dismissed: { opacity: "0" },
|
|
25
14
|
error: {
|
|
@@ -79,25 +68,10 @@ const useStyles = createUseStyles({
|
|
|
79
68
|
const Toast = (props: Props) => {
|
|
80
69
|
const classes = useStyles();
|
|
81
70
|
|
|
82
|
-
const { toast } = props;
|
|
71
|
+
const { dismiss, toast } = props;
|
|
83
72
|
const { body, dismissed, id, status, timeout, title } = toast;
|
|
84
73
|
|
|
85
|
-
const
|
|
86
|
-
let dismiss;
|
|
87
|
-
|
|
88
|
-
if ("dismiss" in props) {
|
|
89
|
-
dismiss = props.dismiss;
|
|
90
|
-
} else if ("dispatch" in props) {
|
|
91
|
-
const { dispatch } = props;
|
|
92
|
-
dismiss = createDismissToast(dispatch);
|
|
93
|
-
} else {
|
|
94
|
-
throw new Error("Invalid Toast dismiss configuration");
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
return dismiss;
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
const handleDismiss = () => dismissFunc()(id);
|
|
74
|
+
const handleDismiss = () => dismiss(id);
|
|
101
75
|
|
|
102
76
|
if (timeout > 0) setTimeout(handleDismiss, 2000 + timeout);
|
|
103
77
|
|
package/Toasts/Toasts.tsx
CHANGED
|
@@ -2,13 +2,24 @@ import React from "react";
|
|
|
2
2
|
import classNames from "classnames";
|
|
3
3
|
import { createUseStyles } from "react-jss";
|
|
4
4
|
import Toast from "./Toast";
|
|
5
|
-
import
|
|
5
|
+
import createDismissToast from "./createDismissToast";
|
|
6
|
+
import { DismissFunc, ToastProps, ToastRemoveAppAction } from "./types";
|
|
7
|
+
import { DispatchFunc } from "../types";
|
|
6
8
|
|
|
7
|
-
interface
|
|
8
|
-
dismiss: (id: number) => void;
|
|
9
|
+
interface BaseProps {
|
|
9
10
|
toasts?: ToastProps[];
|
|
10
11
|
}
|
|
11
12
|
|
|
13
|
+
interface DismissProps extends BaseProps {
|
|
14
|
+
dismiss?: DismissFunc;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
interface DispatchProps extends BaseProps {
|
|
18
|
+
dispatch?: DispatchFunc<ToastRemoveAppAction>;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
type Props = DismissProps | DispatchProps;
|
|
22
|
+
|
|
12
23
|
const useStyles = createUseStyles({
|
|
13
24
|
toastsContainer: {
|
|
14
25
|
display: "flex",
|
|
@@ -23,12 +34,23 @@ const useStyles = createUseStyles({
|
|
|
23
34
|
});
|
|
24
35
|
|
|
25
36
|
const Toasts = (props: Props) => {
|
|
26
|
-
const {
|
|
37
|
+
const { toasts } = props;
|
|
27
38
|
const classes = useStyles();
|
|
28
39
|
|
|
40
|
+
const dismissFunc = (): DismissFunc => {
|
|
41
|
+
if ("dismiss" in props) {
|
|
42
|
+
return props.dismiss;
|
|
43
|
+
} else if ("dispatch" in props) {
|
|
44
|
+
const { dispatch } = props;
|
|
45
|
+
return createDismissToast(dispatch);
|
|
46
|
+
} else {
|
|
47
|
+
throw new Error("Invalid Toast dismiss configuration");
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
29
51
|
return (
|
|
30
52
|
<div className={classNames("toastsContainer", classes.toastsContainer)}>
|
|
31
|
-
{toasts?.map(toast => <Toast dismiss={
|
|
53
|
+
{toasts?.map(toast => <Toast dismiss={dismissFunc()} toast={toast} key={toast.id} />)}
|
|
32
54
|
</div>
|
|
33
55
|
);
|
|
34
56
|
};
|