feat(toasts): implement toast components

Author: assisrafael

demo/ToastsExamples.jsx

@@ -0,0 +1,63 @@
+import React, { useContext } from 'react';
+import { ToastsContext } from '../dist/main';
+
+export function ToastsExamples() {
+  const toastsState = useContext(ToastsContext);
+
+  return (
+    <div className="row">
+      <div className="col-6 mb-5">
+        <h1 className="h4">Top left </h1>
+        <button
+          className="btn btn-info"
+          onClick={() => {
+            toastsState.show('Top left toast!', {
+              position: 'TOP_LEFT',
+            });
+          }}
+        >
+          Show top left toast
+        </button>
+      </div>
+      <div className="col-6 mb-5">
+        <h1 className="h4">Top right (default)</h1>
+        <button
+          className="btn btn-success"
+          onClick={() => {
+            toastsState.show('Top right toast!', { autoClose: false, type: 'success' });
+          }}
+        >
+          Show top right toast
+        </button>
+      </div>
+      <div className="col-6 mb-5">
+        <h1 className="h4">Bottom left </h1>
+        <button
+          className="btn btn-danger"
+          onClick={() => {
+            toastsState.show('Bottom left toast!', {
+              position: 'BOTTOM_LEFT',
+              type: 'danger',
+            });
+          }}
+        >
+          Show bottom left toast
+        </button>
+      </div>
+      <div className="col-6 mb-5">
+        <h1 className="h4">Bottom right </h1>
+        <button
+          className="btn btn-warning"
+          onClick={() => {
+            toastsState.show('Bottom right toast!', {
+              position: 'BOTTOM_RIGHT',
+              type: 'warning',
+            });
+          }}
+        >
+          Show bottom right toast
+        </button>
+      </div>
+    </div>
+  );
+}

demo/demo.jsx

@@ -1,46 +1,53 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { StatefulTabs, Pagination } from '../dist/main';
+import { StatefulTabs, Pagination, ToastsContainer } from '../dist/main';
 import { FormExamples } from './FormExamples';
 import { TableExamples } from './TableExamples';
 import { TabsExamples } from './TabsExamples';
 import { DialogExamples } from './DialogExamples';
 import { ListGroupExamples } from './ListGroupExamples';
+import { ToastsExamples } from './ToastsExamples';
 
 ReactDOM.render(
   <div className="mt-3">
     <React.StrictMode>
-      <StatefulTabs
-        vertical={true}
-        initialTab={1}
-        tabs={[
-          {
-            title: 'Dialog',
-            content: <DialogExamples />,
-          },
-          {
-            title: 'Forms',
-            content: <FormExamples />,
-          },
-          {
-            title: 'List groups',
-            content: <ListGroupExamples />,
-          },
-          {
-            title: 'Pagination',
-            content: <PaginationExamples />,
-          },
-          {
-            title: 'Tables',
-            content: <TableExamples />,
-          },
-          {
-            title: 'Tabs',
-            content: <TabsExamples />,
-          },
-        ]}
-      />
+      <ToastsContainer>
+        <StatefulTabs
+          vertical={true}
+          initialTab={6}
+          tabs={[
+            {
+              title: 'Dialog',
+              content: <DialogExamples />,
+            },
+            {
+              title: 'Forms',
+              content: <FormExamples />,
+            },
+            {
+              title: 'List groups',
+              content: <ListGroupExamples />,
+            },
+            {
+              title: 'Pagination',
+              content: <PaginationExamples />,
+            },
+            {
+              title: 'Tables',
+              content: <TableExamples />,
+            },
+            {
+              title: 'Tabs',
+              content: <TabsExamples />,
+            },
+            {
+              title: 'Toasts',
+              content: <ToastsExamples />,
+            },
+          ]}
+        />
+      </ToastsContainer>
     </React.StrictMode>
   </div>,
   document.getElementById('root')

src/index.js

@@ -4,3 +4,4 @@ export * from './list-group';
 export * from './mixed';
 export * from './table';
 export * from './tabs';
+export * from './toasts';

src/toasts/Toast.jsx

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { formatClasses } from '../utils/attributes';
+import { ToastsContext } from './toasts-helpers';
+
+export function Toast({ id, type, message, closeControl, position, noStyle }) {
+  const toastsState = useContext(ToastsContext);
+
+  return (
+    <div
+      className={formatClasses(['toast-message', 'alert', `alert-${type}`, closeControl && 'alert-dismissible'])}
+      style={noStyle ? null : { width: 'auto', zIndex: 9999 }}
+    >
+      {message}
+
+      {closeControl && (
+        <button type="button" className="close" onClick={() => toastsState.close(position, id)} aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      )}
+    </div>
+  );
+}
+
+Toast.propTypes = {
+  closeControl: PropTypes.bool,
+  id: PropTypes.number.isRequired,
+  message: PropTypes.string.isRequired,
+  noStyle: PropTypes.bool,
+  position: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+};

src/toasts/ToastsContainer.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ToastsContext, toastPositions } from './toasts-helpers';
+import { ToastsRegion } from './ToastsRegion';
+import { useToast } from './useToast';
+
+export function ToastsContainer({ children, unique, noStyle }) {
+  const toastsState = useToast({ unique });
+
+  return (
+    <ToastsContext.Provider value={toastsState}>
+      {children}
+
+      <div className="toast-container">
+        {toastPositions.map(({ name, className }) => (
+          <ToastsRegion key={name} name={name} className={className} toasts={toastsState.get(name)} noStyle={noStyle} />
+        ))}
+      </div>
+    </ToastsContext.Provider>
+  );
+}
+
+ToastsContainer.defaultProps = {
+  noStyle: false,
+  unique: true,
+};
+
+ToastsContainer.propTypes = {
+  children: PropTypes.element,
+  noStyle: PropTypes.bool,
+  unique: PropTypes.bool,
+};

src/toasts/ToastsRegion.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Toast } from './Toast';
+import { toastsDefaultStylesByPosition } from './toasts-helpers';
+
+export function ToastsRegion({ name, className, toasts, noStyle }) {
+  return (
+    <div
+      key={name}
+      className={className}
+      style={
+        noStyle
+          ? null
+          : {
+              position: 'fixed',
+              zIndex: 9999,
+              maxWidth: '50%',
+              ...toastsDefaultStylesByPosition[name],
+            }
+      }
+    >
+      {toasts.map((toast) => (
+        <Toast key={toast.id} {...toast} />
+      ))}
+    </div>
+  );
+}
+
+ToastsRegion.defaultProps = {
+  toasts: [],
+};
+
+ToastsRegion.propTypes = {
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  noStyle: PropTypes.bool,
+  toasts: PropTypes.arrayOf(PropTypes.object),
+};

src/toasts/index.js

@@ -0,0 +1,2 @@
+export * from './toasts-helpers';
+export * from './ToastsContainer';

src/toasts/toasts-helpers.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export const ToastsContext = React.createContext(null);
+
+export const toastPositions = [
+  {
+    name: 'TOP_LEFT',
+    className: 'top-left',
+  },
+  {
+    name: 'TOP_RIGHT',
+    className: 'top-right',
+  },
+  {
+    name: 'BOTTOM_LEFT',
+    className: 'bottom-left',
+  },
+  {
+    name: 'BOTTOM_RIGHT',
+    className: 'bottom-right',
+  },
+];
+
+export const toastsDefaultStylesByPosition = {
+  TOP_RIGHT: {
+    top: '25px',
+    right: '25px',
+  },
+  TOP_LEFT: {
+    top: '25px',
+    left: '25px',
+  },
+  BOTTOM_RIGHT: {
+    right: '25px',
+    bottom: '25px',
+  },
+  BOTTOM_LEFT: {
+    left: '25px',
+    bottom: '25px',
+  },
+};

src/toasts/useToast.js

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { useArrayValueMap } from '../utils/useValueMap';
+
+export function useToast({ unique }) {
+  const [nextId, setNextId] = useState(0);
+  const { push, unset, get } = useArrayValueMap(
+    unique && {
+      equalityComparator: (a) => (b) => {
+        return a.message === b.message;
+      },
+    }
+  );
+
+  function close(position, toastId) {
+    unset(position, (toast) => {
+      return toast.id !== toastId;
+    });
+  }
+
+  return {
+    show(message, { type = 'info', autoClose = 5000, position = 'TOP_RIGHT' } = {}) {
+      if (!['info', 'success', 'danger', 'warning'].includes(type)) {
+        throw new Error(`Invalid toast type ${type}. Must be 'info', 'success', 'danger' or 'warning'`);
+      }
+
+      const toastId = nextId;
+
+      push(position, {
+        id: toastId,
+        message,
+        type,
+        position,
+        closeControl: !autoClose,
+      });
+
+      if (autoClose && typeof autoClose === 'number' && !isNaN(autoClose)) {
+        setTimeout(() => {
+          close(position, toastId);
+        }, autoClose);
+      }
+
+      setNextId((prevId) => prevId + 1);
+    },
+    close,
+    get,
+  };
+}

src/utils/useValueMap.js

@@ -36,7 +36,7 @@ export function useValueMap() {
   };
 }
 
-export function useArrayValueMap({ unique = true } = {}) {
+export function useArrayValueMap({ unique = true, equalityComparator = (a) => (b) => a === b } = {}) {
   const { getAllKeys, getValue, setValue } = useValueMap();
 
   return {
@@ -48,13 +48,18 @@ export function useArrayValueMap({ unique = true } = {}) {
           values = [];
         }
 
-        if (!unique || !values.includes(value)) {
+        if (!unique || !values.find(equalityComparator(value))) {
           values.push(value);
         }
 
         return values;
       });
     },
+    unset(key, filterfn) {
+      setValue(key, (prevValues) => {
+        return prevValues.filter(filterfn);
+      });
+    },
     get: getValue,
     getAllKeys,
   };