planning

node_modules/redux-notifications/src/actions.js

@@ -0,0 +1,43 @@
+const objectAssign = require('object-assign');
+
+export const NOTIF_SEND = 'NOTIF_SEND';
+export const NOTIF_DISMISS = 'NOTIF_DISMISS';
+export const NOTIF_CLEAR = 'NOTIF_CLEAR';
+
+/**
+ * Publish a notification,
+ * - if `dismissAfter` was set, the notification will be auto dismissed after the given period.
+ * - if id wasn't specified, a time based id will be generated.``
+ */
+export function notifSend(notif) {
+  const payload = objectAssign({}, notif);
+  if (!payload.id) {
+    payload.id = new Date().getTime();
+  }
+  return dispatch => {
+    dispatch({ type: NOTIF_SEND, payload });
+
+    if (payload.dismissAfter) {
+      setTimeout(() => {
+        dispatch({
+          type: NOTIF_DISMISS,
+          payload: payload.id,
+        });
+      }, payload.dismissAfter);
+    }
+  };
+}
+
+/**
+ * Dismiss a notification by the given id.
+ */
+export function notifDismiss(id) {
+  return { type: NOTIF_DISMISS, payload: id };
+}
+
+/**
+ * Clear all notifications
+ */
+export function notifClear() {
+  return { type: NOTIF_CLEAR };
+}

node_modules/redux-notifications/src/components/Notif.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Notif = ({ kind, componentClassName, actionLabel, onActionClick, id, message }) => {
+  const handleActionClick = (ev) => {
+    ev.preventDefault();
+
+    if (!onActionClick) {
+      return;
+    }
+
+    onActionClick(id);
+  };
+
+  return (
+    <div className={`${componentClassName} ${componentClassName}--${kind}`}>
+      <div className={`${componentClassName}__icon`} />
+      <div className={`${componentClassName}__content`}>
+        <span className={`${componentClassName}__message`}>{message}</span>
+      </div>
+      {actionLabel &&
+        <span className={`${componentClassName}__action`}>
+          <button onClick={handleActionClick}>{actionLabel}</button>
+        </span>
+      }
+      <div className={`${componentClassName}__close`} />
+    </div>
+  );
+};
+
+Notif.defaultProps = {
+  kind: 'info',
+};
+
+Notif.propTypes = {
+  id: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
+  message: PropTypes.node.isRequired,
+  kind: PropTypes.oneOf([
+    'success',
+    'info',
+    'warning',
+    'danger',
+  ]).isRequired,
+  componentClassName: PropTypes.string,
+  onActionClick: PropTypes.func,
+  actionLabel: PropTypes.string,
+};
+
+export default Notif;

node_modules/redux-notifications/src/components/Notifs.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import Notif from './Notif';
+import PropTypes from 'prop-types';
+
+// This checks to see if object is immutable and properly access it
+const getter = (obj, propName) => (obj.get ? obj.get(propName) : obj[propName]);
+
+const Notifs = (props) => {
+  const {
+    notifications,
+    className,
+    componentClassName,
+    CustomComponent,
+    transitionEnterTimeout,
+    transitionLeaveTimeout,
+  } = props;
+
+  const renderedNotifications = notifications.map((notification) => {
+    if (CustomComponent) {
+      return (
+        <CustomComponent
+          {...props}
+          componentClassName={componentClassName}
+          key={getter(notification, 'id')}
+          id={getter(notification, 'id')}
+          message={getter(notification, 'message')}
+          kind={getter(notification, 'kind')}
+        />
+      );
+    }
+    return (
+      <Notif
+        {...props}
+        componentClassName={componentClassName}
+        key={getter(notification, 'id')}
+        id={getter(notification, 'id')}
+        message={getter(notification, 'message')}
+        kind={getter(notification, 'kind')}
+      />
+    );
+  });
+  const classes = [
+    `${componentClassName}__container`,
+    className,
+  ].join(' ').split();
+
+  return (
+    <div className={classes} >
+      <CSSTransitionGroup
+        transitionName={`${componentClassName}-transition`}
+        transitionEnterTimeout={transitionEnterTimeout}
+        transitionLeaveTimeout={transitionLeaveTimeout}
+      >
+        {renderedNotifications}
+      </CSSTransitionGroup>
+    </div>
+  );
+};
+
+Notifs.defaultProps = {
+  className: null,
+  componentClassName: 'notif',
+  CustomComponent: null,
+  transitionEnterTimeout: 600,
+  transitionLeaveTimeout: 600,
+};
+
+Notifs.propTypes = {
+  notifications: PropTypes.array.isRequired,
+  className: PropTypes.string,
+  CustomComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node,
+    PropTypes.element,
+  ]),
+  componentClassName: PropTypes.string,
+  transitionEnterTimeout: PropTypes.number,
+  transitionLeaveTimeout: PropTypes.number,
+};
+
+function mapStateToProps(state) {
+  return { notifications: state.get ? state.get('notifs') : state.notifs };
+}
+
+export default connect(mapStateToProps)(Notifs);

node_modules/redux-notifications/src/index.js

@@ -0,0 +1,9 @@
+import reducer from './reducer';
+import * as actions from './actions';
+import Notifs from './components/Notifs';
+
+export {
+  Notifs,
+  actions,
+  reducer
+};

node_modules/redux-notifications/src/reducer.js

@@ -0,0 +1,18 @@
+import { NOTIF_SEND, NOTIF_DISMISS, NOTIF_CLEAR } from './actions';
+
+export default function notifs(domain = [], action) {
+  if (!action || !action.type) return domain;
+
+  switch (action.type) {
+    case NOTIF_SEND:
+      return [action.payload, ...domain.filter(({ id }) => id !== action.payload.id)];
+    case NOTIF_DISMISS:
+      return domain.filter(notif =>
+          notif.id !== action.payload
+      );
+    case NOTIF_CLEAR:
+      return [];
+    default:
+      return domain;
+  }
+}

node_modules/redux-notifications/src/styles.css

@@ -0,0 +1,57 @@
+.notif-transition-enter {
+  opacity    : 0.01;
+  transition : opacity .5s ease-in;
+}
+
+.notif-transition-enter-active {
+  opacity : 1;
+}
+
+.notif-transition-leave {
+  opacity    : 1;
+  transition : opacity .5s ease-in;
+}
+
+.notif-transition-leave-active {
+  opacity : 0.01;
+}
+
+.notif {
+  position      : relative;
+  font          : 1rem normal Helvetica, sans-serif;
+  overflow      : hidden;
+  border-radius : 4px;
+  margin-bottom : 2px;
+  max-height    : 400px;
+  box-sizing    : border-box;
+  box-shadow    : 0 0 1px 1px rgba(10, 10, 11, .125);
+  padding       : 0.5rem;
+  color         : #fff;
+}
+
+.notif--success {
+  background-color: #64ce83;
+}
+
+.notif--info {
+  background-color: #3ea2ff;
+}
+
+.notif--warning {
+  background-color: #ff7f48;
+}
+
+.notif--danger {
+  background-color: #e74c3c;
+}
+
+.notif__container {
+  position  : fixed;
+  top       : 10px;
+  right     : 0;
+  left      : 0;
+  z-index   : 1000;
+  width     : 80%;
+  max-width : 400px;
+  margin    : auto;
+}