planning

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);