Added Toast component (react-bootstrap#3685)

* feat: added Toast component

* more changes

* cleaned up

* added some docs

* feat: added fade in fade out

* feat: added fade in fade out

* feat: autohide feature

* fix: cleanup

* fix: warnings

* fix: added typings

* feat: added unit tests

* fix: tests

* fix: tests

* fix: migrated ToastDialog into Toast component

* fix: replaced placeholders by holder.js

* fix: moved setInterval out of Wndows

* fix: types

* fix: prop-types formatting

* fix: removed aria-label prop on CloseButton

* fix: adjusted coding related to the review

* fix: added clearing of the Timeouts

* Update src/Toast.js

Co-Authored-By: mxschmitt <[email protected]>

Author: mxschmitt

src/CloseButton.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 const propTypes = {
   label: PropTypes.string.isRequired,
@@ -10,12 +11,20 @@ const defaultProps = {
   label: 'Close',
 };
 
-const CloseButton = React.forwardRef(({ label, onClick }, ref) => (
-  <button ref={ref} type="button" className="close" onClick={onClick}>
-    <span aria-hidden="true">&times;</span>
-    <span className="sr-only">{label}</span>
-  </button>
-));
+const CloseButton = React.forwardRef(
+  ({ label, onClick, className, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      className={classNames('close', className)}
+      onClick={onClick}
+      {...props}
+    >
+      <span aria-hidden="true">&times;</span>
+      <span className="sr-only">{label}</span>
+    </button>
+  ),
+);
 
 CloseButton.displayName = 'CloseButton';
 CloseButton.propTypes = propTypes;

src/Toast.js

@@ -0,0 +1,120 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Fade from './Fade';
+import Header from './ToastHeader';
+import Body from './ToastBody';
+import { createBootstrapComponent } from './ThemeProvider';
+import ToastContext from './ToastContext';
+
+const propTypes = {
+  /**
+   * @default 'toast'
+   */
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Apply a CSS fade transition to the toast
+   */
+  animation: PropTypes.bool,
+
+  /**
+   * Auto hide the toast
+   */
+  autohide: PropTypes.bool,
+
+  /**
+   * Delay hiding the toast (ms)
+   */
+  delay: PropTypes.number,
+
+  /**
+   * A Callback fired when the close button is clicked.
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * When `true` The modal will show itself.
+   */
+  show: PropTypes.bool,
+
+  /**
+   * A `react-transition-group` Transition component used to animate the Toast on dismissal.
+   */
+  transition: PropTypes.elementType,
+
+  /** @ignore */
+  innerRef: PropTypes.any,
+};
+
+const defaultProps = {
+  animation: true,
+  autohide: false,
+  delay: 3000,
+  show: true,
+  transition: Fade,
+};
+
+const Toast = ({
+  bsPrefix,
+  className,
+  children,
+  transition: Transition,
+  show,
+  animation,
+  delay,
+  autohide,
+  onClose,
+  innerRef,
+  ...props
+}) => {
+  useEffect(() => {
+    if (autohide && show) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, delay);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+    return () => null;
+  }, [autohide, show]);
+  const useAnimation = Transition && animation;
+  const toast = (
+    <div
+      {...props}
+      ref={innerRef}
+      className={classNames(
+        bsPrefix,
+        className,
+        !useAnimation && show && 'show',
+      )}
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+    >
+      {children}
+    </div>
+  );
+
+  const toastContext = {
+    onClose,
+  };
+
+  return (
+    <ToastContext.Provider value={toastContext}>
+      {useAnimation ? <Transition in={show}>{toast}</Transition> : toast}
+    </ToastContext.Provider>
+  );
+};
+
+Toast.propTypes = propTypes;
+Toast.defaultProps = defaultProps;
+
+const DecoratedToast = createBootstrapComponent(Toast, 'toast');
+
+DecoratedToast.Body = Body;
+DecoratedToast.Header = Header;
+
+export default DecoratedToast;

src/ToastBody.js

@@ -0,0 +1,3 @@
+import createWithBsPrefix from './utils/createWithBsPrefix';
+
+export default createWithBsPrefix('toast-body');

src/ToastContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ToastContext = React.createContext({
+  onClose() {},
+});
+
+export default ToastContext;

src/ToastHeader.js

@@ -0,0 +1,69 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import useEventCallback from '@restart/hooks/useEventCallback';
+
+import { useBootstrapPrefix } from './ThemeProvider';
+import CloseButton from './CloseButton';
+import ToastContext from './ToastContext';
+
+const propTypes = {
+  bsPrefix: PropTypes.string,
+
+  /**
+   * Provides an accessible label for the close
+   * button. It is used for Assistive Technology when the label text is not
+   * readable.
+   */
+  closeLabel: PropTypes.string,
+
+  /**
+   * Specify whether the Component should contain a close button
+   */
+  closeButton: PropTypes.bool,
+};
+
+const defaultProps = {
+  closeLabel: 'Close',
+  closeButton: true,
+};
+
+const ToastHeader = ({
+  bsPrefix,
+  closeLabel,
+  closeButton,
+  className,
+  children,
+  ...props
+}) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'toast-header');
+
+  const context = useContext(ToastContext);
+
+  const handleClick = useEventCallback(() => {
+    if (context) {
+      context.onClose();
+    }
+  });
+
+  return (
+    <div {...props} className={classNames(bsPrefix, className)}>
+      {children}
+
+      {closeButton && (
+        <CloseButton
+          label={closeLabel}
+          onClick={handleClick}
+          className="ml-2 mb-1"
+          data-dismiss="toast"
+        />
+      )}
+    </div>
+  );
+};
+
+ToastHeader.displayName = 'ToastHeader';
+ToastHeader.propTypes = propTypes;
+ToastHeader.defaultProps = defaultProps;
+
+export default ToastHeader;

src/index.js

@@ -67,3 +67,6 @@ export ThemeProvider from './ThemeProvider';
 export ToggleButton from './ToggleButton';
 export ToggleButtonGroup from './ToggleButtonGroup';
 export Tooltip from './Tooltip';
+export Toast from './Toast';
+export ToastBody from './ToastBody';
+export ToastHeader from './ToastHeader';

test/ToastBodySpec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Toast from '../src/Toast';
+
+describe('Toast.Body', () => {
+  it('will pass all props to the created div and renders its children', () => {
+    const content = <strong>Content</strong>;
+    mount(
+      <Toast.Body className="custom-class">{content}</Toast.Body>,
+    ).assertSingle('div.custom-class.toast-body>strong');
+  });
+});

test/ToastHeaderSpec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Toast from '../src/Toast';
+
+describe('Toast.Header', () => {
+  it('will pass all props to the created div and renders its children', () => {
+    mount(
+      <Toast.Header>
+        <strong>content</strong>
+      </Toast.Header>,
+    ).assertSingle('div.toast-header strong');
+  });
+});

test/ToastSpec.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Toast from '../src/Toast';
+
+describe('Toasts', () => {
+  it('will render an entire toast', () => {
+    mount(
+      <Toast>
+        <Toast.Header />
+        <Toast.Body />
+      </Toast>,
+    ).assertSingle(
+      'div.toast[role="alert"][aria-live="assertive"][aria-atomic="true"]',
+    );
+  });
+
+  it('should trigger the onClose event after clicking on the close button', () => {
+    let onCloseSpy = sinon.spy();
+    mount(
+      <Toast onClose={onCloseSpy}>
+        <Toast.Header>header-content</Toast.Header>
+        <Toast.Body>body-content</Toast.Body>
+      </Toast>,
+    )
+      .find('.toast-header')
+      .at(0)
+      .find('button')
+      .simulate('click');
+
+    expect(onCloseSpy).to.be.calledOnce;
+  });
+
+  it('should trigger the onClose event after the autohide delay', () => {
+    const clock = sinon.useFakeTimers({
+      toFake: ['setTimeout'],
+    });
+    const onCloseSpy = sinon.spy();
+    mount(
+      <Toast onClose={onCloseSpy} delay={500} show autohide>
+        <Toast.Header>header-content</Toast.Header>
+        <Toast.Body>body-content</Toast.Body>
+      </Toast>,
+    );
+    clock.tick(500);
+    expect(onCloseSpy).to.be.calledOnce;
+  });
+});

types/components/Toast.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import ToastBody from './ToastBody';
+import ToastHeader from './ToastHeader';
+
+import {
+  BsPrefixComponent,
+  TransitionCallbacks,
+} from './helpers';
+
+export interface ToastProps extends TransitionCallbacks {
+  animation?: boolean;
+  autohide?: boolean;
+  delay?: number;
+  onClose?: () => void;
+  show: boolean;
+  transition: boolean | React.ElementType,
+}
+
+declare class Toast extends BsPrefixComponent<'div', ToastProps> {
+  static Body: typeof ToastBody;
+  static Header: typeof ToastHeader;
+}
+
+export default Toast;

types/components/ToastBody.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { BsPrefixComponent } from './helpers';
+
+declare class ToastBody<
+  As extends React.ReactType = 'div'
+  > extends BsPrefixComponent<As> { }
+
+export default ToastBody;

types/components/ToastHeader.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { BsPrefixComponent } from './helpers';
+
+export interface ToastHeaderProps {
+  closeLabel?: string;
+  closeButton?: boolean;
+}
+
+declare class ToastHeader<
+  As extends React.ReactType = 'div'
+  > extends BsPrefixComponent<As, ToastHeaderProps> { }
+
+export default ToastHeader;

www/src/components/SideNav.js

@@ -132,6 +132,7 @@ const components = [
   'table',
   'tabs',
   'tooltips',
+  'toasts',
 ];
 
 const utilities = ['transitions', 'responsive-embed', 'react-overlays'];