Merge branch 'snack_bar' into 'master'

Snack bar

See merge request code.brahma/react-lite-ui!6

Author: Arjun-sna

docs/client/components/common/DefaultCode/Snackbar/index.js

@@ -0,0 +1,75 @@
+export const defaultCode = `
+class SnackDisplay extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSnackbar: false,
+      showTopSnackbar: false,
+      showIndefiniteSnackbar: false,
+    }
+    this.openBottomSnackbar = this.openBottomSnackbar.bind(this);
+    this.openTopSnackbar = this.openTopSnackbar.bind(this);
+    this.openIndefiniteSnackbar = this.openIndefiniteSnackbar.bind(this);
+    this.handleSnackClose = this.handleSnackClose.bind(this);
+  }
+
+  openBottomSnackbar() {
+    this.setState({
+      showSnackbar: !this.state.showSnackbar
+    });
+  }
+
+  openTopSnackbar() {
+    this.setState({
+      showTopSnackbar: !this.state.showTopSnackbar
+    });
+  }
+
+  openIndefiniteSnackbar() {
+    this.setState({
+      showIndefiniteSnackbar: !this.state.showIndefiniteSnackbar
+    });
+  }
+  
+  
+  handleSnackClose() {
+    this.setState({
+      showSnackbar: false,
+      showTopSnackbar: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Snackbar
+          active={this.state.showSnackbar}
+          onClose={this.handleSnackClose}>
+          <span>This is a bottom snackbar.</span>
+        </Snackbar>
+        <Snackbar
+          active={this.state.showTopSnackbar}
+          onClose={this.handleSnackClose}
+          position='top'>
+          <span>This is a top snackbar.</span>
+        </Snackbar>
+        <Snackbar
+          active={this.state.showIndefiniteSnackbar}
+          onClose={this.handleSnackClose}
+          autoClose={false}>
+          <span>This is a indefinite snackbar.</span>
+        </Snackbar>
+        <div style={{margin: '10px'}}>
+          <Button type="primary" onClick={this.openBottomSnackbar}>Open Bottom Snackbar</Button>
+        </div>
+        <div style={{margin: '10px'}}>
+          <Button type="primary" onClick={this.openTopSnackbar}>Open Top Snackbar</Button>
+        </div>
+        <div style={{margin: '10px'}}>
+          <Button type="primary" onClick={this.openIndefiniteSnackbar}>{this.state.showIndefiniteSnackbar ? 'Close' : 'Open'} indefinite Snackbar</Button>
+        </div>
+      </div>
+    )
+  }
+}
+`

docs/client/components/common/DefaultCode/index.js

@@ -5,3 +5,4 @@ export { defaultCode as CheckboxGroupDefaultCode } from './CheckboxGroup';
 export { defaultCode as ToggleDefaultCode } from './Toggle';
 export { defaultCode as RadioButtonGroupDefaultCode } from './RadioButtonGroup';
 export { defaultCode as TextInputDefaultCode } from './TextInput';
+export { defaultCode as SnackbarDefaultCode } from './Snackbar';

docs/client/components/common/componentList.js

@@ -11,6 +11,8 @@ import ToggleReadme from '../../../../src/toggle/readMe.md';
 import RadioButtonGroup from '../../../../src/radioButtonGroup';
 import TextInput from '../../../../src/textInput';
 import TextInputReadme from '../../../../src/textInput/readMe.md';
+import Snackbar from '../../../../src/snackbar';
+import SnackbarReadme from '../../../../src/snackbar/readMe.md';
 
 import {
   CardDefaultCode,
@@ -20,6 +22,7 @@ import {
   ToggleDefaultCode,
   RadioButtonGroupDefaultCode,
   TextInputDefaultCode,
+  SnackbarDefaultCode,
 } from './DefaultCode';
 
 export const componentList = [
@@ -64,5 +67,11 @@ export const componentList = [
     docs: TextInputReadme,
     component: TextInput,
     defaultCode: TextInputDefaultCode,
+  },
+  {
+    name: 'Snackbar',
+    docs: SnackbarReadme,
+    component: Snackbar,
+    defaultCode: SnackbarDefaultCode,
   }
 ];

src/index.js

@@ -7,6 +7,7 @@ import CheckboxGroup from './checkboxGroup';
 import Toggle from './toggle';
 import RadioButtonGroup from './radioButtonGroup';
 import TextInput from './textInput';
+import Snackbar from './snackbar';
 
 export default {
   Button,
@@ -15,24 +16,6 @@ export default {
   CheckboxGroup,
   RadioButtonGroup,
   Toggle,
-  TextInput
+  TextInput,
+  Snackbar,
 };
-
-// import React from 'react';
-// import ReactDOM from 'react-dom';
-
-// import RadioButtonGroup from './radioButtonGroup';
-// import theme from './theme.scss';
-
-// const options = [{ label: 'Alpha' }, { label: 'Beta' }, { label: 'Zheta' }]
-// const RadioDisplay = () => (
-//   <div>
-//     <RadioButtonGroup
-//       theme={theme}
-//       options={options}
-//       inline
-//     />
-//   </div>
-// );
-
-// ReactDOM.render(<RadioDisplay />, document.getElementById('index'));

src/snackbar/index.js

@@ -0,0 +1,93 @@
+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, position, children } = this.props;
+    const { active } = this.state;
+    const classes = classnames(theme.snackbar, additionaClasses)
+    return (
+      <div className={classnames(theme.snackbarWrapper, position, active ? 'active' : '')}>
+        <div className={classes}>
+          { children }
+        </div>
+      </div>
+    )
+  }
+}
+
+Snackbar.propTypes = {
+  additionaClasses: PropTypes.string,
+  timeout: PropTypes.number,
+  onClose: PropTypes.func,
+  autoClose: PropTypes.bool,
+  position: PropTypes.string,
+}
+
+Snackbar.defaultProps = {
+  additionaClasses: null,
+  timeout: 2000,
+  autoClose: true,
+  position: 'bottom',
+};
+
+export default themr('CBSnackbar', defaultTheme)(Snackbar);

src/snackbar/readMe.md

@@ -0,0 +1,32 @@
+## Button
+
+The base Snackbar component.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Any` | `null` | All children components to be rendered inside the Snackbar |
+| `timeout` | `Number` | 2000 | Timeout to auto hide the snackbar |
+| `autoClose` | `Boolean` | true | Prop to decide whether the snackbar should close automatically after the given timeout or not |
+| `onClose` | `function` | null | The callback function to be called when the snackbar closes |
+| `position` | `String` | `bottom` | The position at which the snackbar should be show. The possible values are `top`, `bottom` |
+
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `snackbar`   | Class used for the snackbar element.|
+| `snackbarWrapper` |  Class used for snackbar wrapper element |
+
+### Usage
+
+```
+  <div>
+    <Snackbar
+      active={this.state.showIndefiniteSnackbar}
+      onClose={this.handleSnackClose}
+      autoClose={false}>
+      <span>This is a indefinite snackbar.</span>
+    </Snackbar>
+  </div>
+```

src/snackbar/theme.scss

@@ -0,0 +1,35 @@
+@import '../globals/theme';
+
+:local(.snackbarWrapper) {
+  position: fixed;
+  width: 100%;
+  right: 0;
+  &.top {
+    top: 10%;
+    &:not(.active) {
+      transform: translateY(-1000%);
+    }
+  
+    &.active {
+      transform: translateY(0%);
+    }
+  }
+  &.bottom {
+    bottom: 10%;
+    &:not(.active) {
+      transform: translateY(1000%);
+    }
+  
+    &.active {
+      transform: translateY(0%);
+    }
+  }
+}
+
+:local(.snackbar) {
+  background: $primary-color;
+  border-radius: 3px;
+  padding: 10px;
+  margin: 0 auto;
+  width: 40%;
+}