wire up UI Services

2020-05-23 23:38:20 -04:00
1 parent c9a4ab13ef
commit db76eac047
@@ -0,0 +1,52 @@
+import React from 'react';
+import SnackbarItem from './SnackbarItem';
+import { useSnackbar } from '../../contextProviders';
+
+const SnackbarContainer = () => {
+  const { snackbarItems, hide } = useSnackbar();
+
+  const renderItem = item => {
+    return <SnackbarItem key={item.itemId} options={item} onClose={hide} />;
+  };
+
+  if (!snackbarItems) {
+    return null;
+  }
+
+  const renderItems = () => {
+    const items = {
+      topLeft: [],
+      topCenter: [],
+      topRight: [],
+      bottomLeft: [],
+      bottomCenter: [],
+      bottomRight: [],
+    };
+
+    snackbarItems.map(item => {
+      items[item.position].push(item);
+    });
+
+    return (
+      <div>
+        {Object.keys(items).map(pos => {
+          if (!items[pos].length) {
+            return null;
+          }
+
+          return (
+            <div key={pos} className={`sb-container sb-${pos}`}>
+              {items[pos].map((item, index) => (
+                <div key={item.id + index}>{renderItem(item)}</div>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return <>{renderItems()}</>;
+};
+
+export default SnackbarContainer;
@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+
+const SnackbarItem = ({ options, onClose }) => {
+  const handleClose = () => {
+    onClose(options.id);
+  };
+
+  useEffect(() => {
+    if (options.autoClose) {
+      setTimeout(() => {
+        handleClose();
+      }, options.duration);
+    }
+  }, []);
+
+  return (
+    <div>
+      <span onClick={handleClose}>
+        <span>x</span>
+      </span>
+      {options.title && <div>{options.title}</div>}
+      {options.message && <div>{options.message}</div>}
+    </div>
+  );
+};
+
+export default SnackbarItem;
@@ -0,0 +1,6 @@
+export default {
+  INFO: 'info',
+  WARNING: 'warning',
+  SUCCESS: 'success',
+  ERROR: 'error',
+};