add snackbar component

Author: Arjun-sna

src/index.js

@@ -17,22 +17,39 @@ export default {
   Toggle,
   TextInput
 };
+import Snackbar from './snackbar';
 
-// import React from 'react';
-// import ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// export default {
+//   Button,
+//   Card,
+//   Checkbox,
+//   CheckboxGroup,
+//   RadioButtonGroup,
+//   Toggle,
+// };
 
-// import RadioButtonGroup from './radioButtonGroup';
-// import theme from './theme.scss';
+import theme from './theme.scss';
 
-// const options = [{ label: 'Alpha' }, { label: 'Beta' }, { label: 'Zheta' }]
-// const RadioDisplay = () => (
-//   <div>
-//     <RadioButtonGroup
-//       theme={theme}
-//       options={options}
-//       inline
-//     />
-//   </div>
-// );
+class SnackDisplay extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSnackbar: false,
+    }
+  }
+  handleButtonClick = () => {
+    this.setState({
+      showSnackbar: !this.state.showSnackbar
+    });
+  }
+  
+  handleSnackClose = () => {
+    this.setState({
+      showSnackbar: false,
+    });
+  }
 
 // ReactDOM.render(<RadioDisplay />, document.getElementById('index'));

src/snackbar/index.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import defaultTheme from './theme.scss';
+
+class Snackbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      active: false,
+    }
+  }
+
+  componentDidMount() {
+    if (this.props.active) {
+      this.showSnackbar();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.active === this.state.active) {
+      return;
+    }
+    if (nextProps.active) {
+      this.showSnackbar();
+    } else {
+      this.dismissSnackbar();
+    }
+  }
+
+  scheduleTimeout = (props) => {
+    const { timeout } = props;
+    if (this.curTimeout) clearTimeout(this.curTimeout);
+    this.curTimeout = setTimeout(() => {
+      this.dismissSnackbar();
+      this.curTimeout = null;
+    }, timeout);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.curTimeout);
+  }
+
+  showSnackbar = () => {
+    if (this.props.autoClose) {
+      this.scheduleTimeout(this.props);
+    }
+    this.setState({
+      active: true,
+    });
+  }
+
+  dismissSnackbar = () => {
+    clearTimeout(this.curTimeout);
+    this.setState({
+      active: false,
+    });
+    if (this.props.onClose) {
+      this.props.onClose()
+    }
+  }
+
+  render() {
+    const { theme, additionaClasses, children } = this.props;
+    const { active } = this.state;
+    const classes = classnames(theme.snackbar, active ? 'active' : '', additionaClasses)
+    return (
+      <div className={classes}>
+        { children }
+      </div>
+    )
+  }
+}
+
+Snackbar.propTypes = {
+  additionaClasses: PropTypes.string,
+  timeout: PropTypes.number,
+  onClose: PropTypes.func,
+  autoClose: PropTypes.bool,
+}
+
+Snackbar.defaultProps = {
+  additionaClasses: null,
+  timeout: 2000,
+  autoClose: true,
+};
+
+export default themr('CBSnackbar', defaultTheme)(Snackbar);

src/snackbar/readMe.md

@@ -0,0 +1,19 @@
+@import '../globals/theme';
+
+:local(.snackbar) {
+  background: $primary-color;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &:not(.active) {
+    transform: translateY(100%);
+  }
+
+  &.active {
+    transform: translateY(0%);
+  }
+}