All files / src/px-action-sheet index.js

58.33% Statements 7/12
100% Branches 0/0
33.33% Functions 2/6
58.33% Lines 7/12
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66                  1x   1x                                           1x         1x         1x         1x       1x                          
import React from 'react';
import style from './style.scss';
import classnames from 'classnames';
 
/**
    * px-action-sheet component
    */
export default class ActionSheet extends React.Component {
  constructor(props){
    super(props);
 
    this.onOverlayClick = this.onOverlayClick.bind(this);
  }
  onOverlayClick() {
    this.toggle();
  }
  toggle() {
    this.setState({opened: !this.state.opened});
    console.log('toggle');
  }
  open() {
    console.log('open');
  }
 
  close() {
    console.log('close');
  }
 
  render() {
    const {
      opened,
      onOverlayClick,
      children
    } = this.props;
 
 
 
    //base
    let baseClasses = classnames('px-action-sheet',
      {'px-action-sheet--is-opened': opened}
    );
 
    //overlay
    let overlayClasses = classnames('c-action-dialog__mask',
      {'c-action-dialog__mask--is-opened': opened}
    );
 
    //style
    let classes = classnames(
      'c-action-sheet',
    { 'c-action-sheet--is-open': opened });
 
    return (
      <div className={baseClasses} ref='baseElement'>
        <div id="overlay" ref='overlay' onClick={onOverlayClick} className={overlayClasses}></div>
        <div id="sheet" ref='sheet' className={classes}>
          <div id="actions" ref='actions' className="c-action-sheet__actions">
            {children}
          </div>
        </div>
        <style jsx>{style}</style>
      </div>
    );
  }
}