All files / px-accordion index.js

0% Statements 0/12
0% Branches 0/9
0% Functions 0/4
0% Lines 0/11
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80                                                                                                                                                               
import React from 'react';
import classnames from 'classnames';
import style from './style.scss';
 
/**
 * px-accordion component
 */
export default class Accordion extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      open: true
    };
    this.onClick = this.onClick.bind(this);
  }
 
  onClick(){
    this.setState((prevState, props) => ({
      open: !prevState.open
    }));
  }
 
  render(){
    const open = this.state && this.state.open;
    const {headerValue = 'px-accordion', status, disabled, showAction, children} = this.props;
    const baseClasses = classnames('px-accordion', {
      'px-accordion--children': children
    });
 
    const headerClasses = classnames(
      'accordion__header',
      'flex',
      'flex--row',
      'flex--justify',
      'u-p--',
      'heading--subsection'
    );
 
    const iconClasses = classnames(
      'accordion__icon',
      'actionable--action',
      'flex',
      'flex--center',
      'flex--middle'
    );
 
    const collapseClasses = classnames(
      'iron-collapse',
      {'iron-collapse-opened': open},
      {'iron-collapse-closed': !open}
    );
 
    return (
      <div className={baseClasses}>
        <section className="accordion__container">
          <div className={headerClasses} onClick={this.onClick} disabled={disabled}>
            <div className="flex flex--middle">
              <span className={iconClasses}>
                {open && '-'}
                {!open && '+'}
              </span>
              <span>{headerValue}</span>
            </div>
            <div className="flex flex--middle">
              <span className="accordion__status">{status}</span>
              {showAction && <span className={iconClasses}>action</span>}
            </div>
          </div>
          <div id="collapse" ref="collapse" className={collapseClasses}>
            <div className="accordion__body u-p--">
              <div>{children}</div>
            </div>
          </div>
          </section>
        <style jsx>{style}</style>
      </div>
    );
  }
}