Skip to content

Commit f00e5db

Browse files
wintondeshongwintondeshong
committed
Added ToastManager
1 parent d18ad57 commit f00e5db

File tree

8 files changed

+249
-33
lines changed

8 files changed

+249
-33
lines changed

‎package-lock.json‎

Lines changed: 36 additions & 30 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@types/react": "16.9.11",
2727
"@types/react-dom": "16.9.3",
2828
"@types/react-router-dom": "5.1.5",
29-
"andculturecode-javascript-core": "0.1.0",
30-
"andculturecode-javascript-react": "0.0.9",
29+
"andculturecode-javascript-core": "0.1.4",
30+
"andculturecode-javascript-react": "0.1.0",
3131
"andculturecode-scss-grid": "2.0.4",
3232
"axios": "0.19.2",
3333
"bourbon": "6.0.0",
@@ -37,7 +37,8 @@
3737
"react-dom": "16.13.1",
3838
"react-i18next": "11.6.0",
3939
"react-router-dom": "5.1.2",
40-
"react-scripts": "3.4.1"
40+
"react-scripts": "3.4.1",
41+
"react-toastify": "5.5.0"
4142
},
4243
"description": "Commonly used components for react applications",
4344
"devDependencies": {

‎src/atoms/toasts/toast-templates.test.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
describe("ToastTemplates", () => {
2+
test.skip("TODO: Backfill tests for issue https://github.com/AndcultureCode/AndcultureCode.JavaScript.Core/issues/28", () => {});
3+
});

‎src/atoms/toasts/toast-templates.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { IconSizes } from "../constants/icon-sizes";
2+
import { Icon } from "../icons/icon";
3+
import { Icons } from "../constants/icons";
4+
import React from "react";
5+
import { ToastContent } from "react-toastify";
6+
7+
const COMPONENT_CLASS = "c-toast-content";
8+
const ICON_CLASS = `${COMPONENT_CLASS}__icon`;
9+
const ICON_CONTAINER_CLASS = `${ICON_CLASS}-container`;
10+
11+
const getTemplate = (
12+
icon: Icons,
13+
content: string | ToastContent
14+
): ToastContent => (
15+
<div className={COMPONENT_CLASS}>
16+
<div className={ICON_CONTAINER_CLASS}>
17+
<Icon
18+
cssClassName={`${ICON_CONTAINER_CLASS}__icon`}
19+
size={IconSizes.Large}
20+
type={icon}
21+
/>
22+
</div>
23+
<div className={`${COMPONENT_CLASS}__body`}>{content}</div>
24+
</div>
25+
);
26+
27+
class ToastTemplates {
28+
static error(content: string | ToastContent): ToastContent {
29+
return getTemplate(Icons.Warning, content);
30+
}
31+
32+
static info(content: string | ToastContent): ToastContent {
33+
return getTemplate(Icons.Information, content);
34+
}
35+
36+
static success(content: string | ToastContent): ToastContent {
37+
return getTemplate(Icons.Checkmark, content);
38+
}
39+
40+
static warning(content: string | ToastContent): ToastContent {
41+
// warning uses same icon as error, just colored differently
42+
return ToastTemplates.error(content);
43+
}
44+
}
45+
46+
export { ToastTemplates };

‎src/atoms/toasts/toast.stories.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Button } from "../buttons/button";
2+
import { ButtonSizes } from "../constants/button-sizes";
3+
import React from "react";
4+
import { ToastContainer, ToastPosition, Zoom } from "react-toastify";
5+
import "react-toastify/dist/ReactToastify.min.css";
6+
import { ToastManager } from "../../utilities/toast-manager";
7+
8+
export default {
9+
component: ToastContainer,
10+
title: "Atoms | Toasts",
11+
};
12+
13+
export const toastDefault = () => (
14+
<React.Fragment>
15+
<Button
16+
onClick={() => ToastManager.success("Success toast!")}
17+
size={ButtonSizes.Small}>
18+
Show Success Toast
19+
</Button>
20+
&nbsp;
21+
<Button
22+
onClick={() => ToastManager.error("Error toast!")}
23+
size={ButtonSizes.Small}>
24+
Show Error Toast
25+
</Button>
26+
&nbsp;
27+
<Button
28+
onClick={() => ToastManager.warn("Warning toast!")}
29+
size={ButtonSizes.Small}>
30+
Show Warning Toast
31+
</Button>
32+
&nbsp;
33+
<Button
34+
onClick={() => ToastManager.info("Info toast!")}
35+
size={ButtonSizes.Small}>
36+
Show Info Toast
37+
</Button>
38+
<ToastContainer
39+
draggable={false}
40+
position={ToastPosition.BOTTOM_RIGHT}
41+
autoClose={5000}
42+
closeOnClick={true}
43+
closeButton={false}
44+
transition={Zoom}
45+
toastClassName="c-toast"
46+
/>
47+
</React.Fragment>
48+
);

‎src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export { SubmitButton } from "./atoms/forms/submit-button";
2020
export { TextArea } from "./atoms/forms/text-area";
2121
export { TextInput } from "./atoms/forms/text-input";
2222
export { TextInputIcon } from "./atoms/forms/text-input-icon";
23+
export { ToastTemplates } from "./atoms/toasts/toast-templates";
2324

2425
// Typography
2526
export { Heading } from "./atoms/typography/heading";
@@ -92,5 +93,6 @@ export * from "./types/svg";
9293
// -----------------------------------------------------------------------------------------
9394

9495
export { IconUtils } from "./utilities/icon-utils";
96+
export { ToastManager } from "./utilities/toast-manager";
9597

9698
// #endregion Utilities

‎src/utilities/toast-manager.test.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
describe("ToastManager", () => {
2+
test.skip("TODO: Backfill tests for issue https://github.com/AndcultureCode/AndcultureCode.JavaScript.Core/issues/28", () => {});
3+
});

‎src/utilities/toast-manager.ts‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import {
2+
toast,
3+
ToastContent,
4+
ToastId,
5+
ToastOptions,
6+
ToastPosition,
7+
} from "react-toastify";
8+
import { ToastTemplates } from "../atoms/toasts/toast-templates";
9+
10+
const defaultToastOptions: ToastOptions = {
11+
draggable: false,
12+
position: ToastPosition.BOTTOM_RIGHT,
13+
autoClose: 3000,
14+
closeOnClick: true,
15+
hideProgressBar: false,
16+
pauseOnHover: true,
17+
pauseOnFocusLoss: true,
18+
};
19+
20+
const mergeDefaults = (...options: ToastOptions[]): ToastOptions =>
21+
Object.assign({}, defaultToastOptions, ...options);
22+
23+
class ToastManager {
24+
/**
25+
* Dismiss an existing toast programatically.
26+
* @param toastId the ID returned by the method which created the toast
27+
*/
28+
static dismiss(toastId: ToastId): void {
29+
toast.dismiss(toastId);
30+
}
31+
32+
/**
33+
* Dismiss all toasts programatically.
34+
*/
35+
static dismissAll(): void {
36+
toast.dismiss();
37+
}
38+
39+
/**
40+
* Show an error style toast
41+
* @param content either a string or a TSX element
42+
* @param options optionally override default toast options
43+
*/
44+
static error(
45+
content: string | ToastContent,
46+
options: ToastOptions = defaultToastOptions
47+
): ToastId {
48+
return toast.error(
49+
ToastTemplates.error(content),
50+
mergeDefaults({ autoClose: 5000 }, options) // increase default timeout for error toasts
51+
);
52+
}
53+
54+
/**
55+
* Show an info style toast
56+
* @param content either a string or a TSX element
57+
* @param options optionally override default toast options
58+
*/
59+
static info(
60+
content: string | ToastContent,
61+
options: ToastOptions = defaultToastOptions
62+
): ToastId {
63+
return toast.info(ToastTemplates.info(content), mergeDefaults(options));
64+
}
65+
66+
/**
67+
* Show a success style toast
68+
* @param content either a string or a TSX element
69+
* @param options optionally override default toast options
70+
*/
71+
static success(
72+
content: string | ToastContent,
73+
options: ToastOptions = defaultToastOptions
74+
): ToastId {
75+
return toast.success(
76+
ToastTemplates.success(content),
77+
mergeDefaults(options)
78+
);
79+
}
80+
81+
/**
82+
* Update an existing toast with new content; this could be useful for
83+
* progress indicators, network state indicators, etc.
84+
* @param toastId the ID of the toast to update (returned from the method that created it)
85+
* @param newContent the new content to render into the toast
86+
*/
87+
static update(toastId: ToastId, newContent: string | ToastContent): void {
88+
toast.update(toastId, { render: newContent });
89+
}
90+
91+
/**
92+
* Show a warning style toast
93+
* @param content either a string or a TSX element
94+
* @param options optionally override default toast options
95+
*/
96+
static warn(
97+
content: string | ToastContent,
98+
options: ToastOptions = defaultToastOptions
99+
): ToastId {
100+
return toast.warn(
101+
ToastTemplates.warning(content),
102+
mergeDefaults({ autoClose: 5000 }, options) // increase default timeout for warning toasts
103+
);
104+
}
105+
}
106+
107+
export { ToastManager };

0 commit comments

Comments
 (0)