Skip to content

Commit

Permalink
Merge pull request #172 from mondaycom/refactor/hadas/toast
Browse files Browse the repository at this point in the history
Refactor/hadas/toast
  • Loading branch information
Hadas Farhi authored Jul 22, 2021
2 parents 39f2a53 + 1a0fb8c commit 124d9ba
Show file tree
Hide file tree
Showing 6 changed files with 509 additions and 51 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
41 changes: 38 additions & 3 deletions src/components/Toast/Toast.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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) {
Expand Down Expand Up @@ -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"
Expand All @@ -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 */
Expand All @@ -126,6 +160,7 @@ Toast.defaultProps = {
icon: null,
closeable: true,
autoHideDuration: null,
actions: undefined,
onClose: NOOP
};

Expand Down
5 changes: 5 additions & 0 deletions src/components/Toast/ToastConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,8 @@ export const TOAST_TYPES = {
POSITIVE: "positive",
NEGATIVE: "negative"
};

export const TOAST_ACTION_TYPES = {
LINK: "link",
BUTTON: "button"
};
14 changes: 7 additions & 7 deletions src/components/Toast/__stories__/toast.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down Expand Up @@ -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}
Expand All @@ -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()}
Expand All @@ -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>
Expand Down
Loading

0 comments on commit 124d9ba

Please sign in to comment.