Merge pull request #172 from mondaycom/refactor/hadas/toast

Refactor/hadas/toast
mondaycom · Jul 22, 2021 · 124d9ba · 124d9ba
2 parents 39f2a53 + 1a0fb8c
commit 124d9ba
Show file tree

Hide file tree

Showing 6 changed files with 509 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.59",
+  "version": "0.3.60",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx
@@ -4,12 +4,14 @@ import PropTypes from "prop-types";
 import cx from "classnames";
 import { CSSTransition } from "react-transition-group";
 import Button from "../Button/Button";
+import ToastLink from "./ToastLink/ToastLink";
+import ToastButton from "./ToastButton/ToastButton";
 import Icon from "../Icon/Icon";
 import Check from "../Icon/Icons/components/Check";
 import Alert from "../Icon/Icons/components/Alert";
 import Info from "../Icon/Icons/components/Info";
 import CloseSmall from "../Icon/Icons/components/CloseSmall";
-import { TOAST_TYPES } from "./ToastConstants";
+import { TOAST_TYPES, TOAST_ACTION_TYPES } from "./ToastConstants";
 import "./Toast.scss";
 
 const defaultIconMap = {
@@ -33,7 +35,34 @@ const getIcon = (type, icon) => {
     />
   ) : null;
 };
-const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children, closeable, onClose, className }) => {
+
+const Toast = ({
+  open,
+  autoHideDuration,
+  type,
+  icon,
+  hideIcon,
+  action: deprecatedAction,
+  actions,
+  children,
+  closeable,
+  onClose,
+  className
+}) => {
+  const toastLinks = useMemo(() => {
+    return actions
+      ? actions
+          .filter(action => action.type === TOAST_ACTION_TYPES.LINK)
+          .map(({ type, ...otherProps }) => <ToastLink {...otherProps} />)
+      : null;
+  }, [actions]);
+  const toastButtons = useMemo(() => {
+    return actions
+      ? actions
+          .filter(action => action.type === TOAST_ACTION_TYPES.BUTTON)
+          .map(({ type, content, ...otherProps }) => <ToastButton {...otherProps}> {content} </ToastButton>)
+      : null;
+  }, [actions]);
   const classNames = useMemo(() => cx("monday-style-toast", `monday-style-toast--type-${type}`, className), [type]);
   const handleClose = useCallback(() => {
     if (onClose) {
@@ -76,8 +105,11 @@ const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children,
           })}
         >
           {children}
+          {toastLinks}
         </div>
-        {action && <div className="monday-style-toast-action">{action}</div>}
+        {(toastButtons || deprecatedAction) && (
+          <div className="monday-style-toast-action">{toastButtons || deprecatedAction}</div>
+        )}
         {closeable && (
           <Button
             className="monday-style-toast_close-button"
@@ -96,10 +128,12 @@ const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children,
 };
 
 Toast.types = TOAST_TYPES;
+Toast.actionTypes = TOAST_ACTION_TYPES;
 
 Toast.propTypes = {
   /** If true, Toast is open (visible) */
   className: PropTypes.string,
+  actions: PropTypes.array,
   open: PropTypes.bool,
   type: PropTypes.oneOf([TOAST_TYPES.NORMAL, TOAST_TYPES.POSITIVE, TOAST_TYPES.NEGATIVE]),
   /** Possible to override the dafult icon */
@@ -126,6 +160,7 @@ Toast.defaultProps = {
   icon: null,
   closeable: true,
   autoHideDuration: null,
+  actions: undefined,
   onClose: NOOP
 };
 

diff --git a/src/components/Toast/ToastConstants.js b/src/components/Toast/ToastConstants.js
@@ -3,3 +3,8 @@ export const TOAST_TYPES = {
   POSITIVE: "positive",
   NEGATIVE: "negative"
 };
+
+export const TOAST_ACTION_TYPES = {
+  LINK: "link",
+  BUTTON: "button"
+};
diff --git a/src/components/Toast/__stories__/toast.stories.js b/src/components/Toast/__stories__/toast.stories.js
@@ -5,8 +5,6 @@ import Button from "../../Button/Button";
 import Icon from "../../Icon/Icon";
 import Send from "../../Icon/Icons/components/Send";
 import { StoryStateColumn, StoryStateRow } from "../../storybook-helpers";
-import ToastButton from "../ToastButton/ToastButton";
-import ToastLink from "../ToastLink/ToastLink";
 
 export const Sandbox = () => {
   const sendIconElement = (
@@ -66,8 +64,8 @@ export const Sandbox = () => {
         <Toast
           open={toastOpenButton}
           onClose={() => closeToastButton()}
-          action={<ToastButton>Undo 5</ToastButton>}
           type={knobs.type}
+          actions={[{ type: Toast.actionTypes.BUTTON, content: "Undo 5" }]}
           icon={icon}
           closeable={knobs.closeable}
           autoHideDuration={knobs.autoHideDuration}
@@ -77,7 +75,7 @@ export const Sandbox = () => {
         </Toast>
       </StoryStateColumn>
       <StoryStateColumn>
-        <Button onClick={() => toggleToastLink()}>Toggle Toast with link!</Button>
+        <Button onClick={() => toggleToastLink()}>Toggle toast with link!</Button>
         <Toast
           open={toastOpenLink}
           onClose={() => closeToastLink()}
@@ -86,25 +84,27 @@ export const Sandbox = () => {
           closeable={knobs.closeable}
           autoHideDuration={knobs.autoHideDuration}
           hideIcon={knobs.hideIcon}
+          actions={[{ type: Toast.actionTypes.LINK, text: "Lorem ipsum", href: "https://monday.com" }]}
         >
           Something Happened
-          <ToastLink text="Lorem ipsum" href="https://monday.com" />
         </Toast>
       </StoryStateColumn>
       <StoryStateColumn>
         <Button onClick={() => toggleToastLinkButton()}>Toggle Toast with link and button!</Button>
         <Toast
           open={toastOpenLinkButton}
           onClose={() => closeToastLinkButton()}
-          action={<ToastButton>Undo 5</ToastButton>}
           type={knobs.type}
           icon={icon}
           closeable={knobs.closeable}
           autoHideDuration={knobs.autoHideDuration}
           hideIcon={knobs.hideIcon}
+          actions={[
+            { type: Toast.actionTypes.LINK, text: "Lorem ipsum", href: "https://monday.com" },
+            { type: Toast.actionTypes.BUTTON, content: "Undo 5" }
+          ]}
         >
           Something Happened
-          <ToastLink text="Lorem ipsum" href="https://monday.com" />
         </Toast>
       </StoryStateColumn>
     </section>