All files / src/components/SelectionTable component.jsx

79.17% Statements 38/48
55% Branches 11/20
71.43% Functions 15/21
78.26% Lines 36/46
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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145                              2x 2x 2x       1x       3x 6x 6x       1x       10x       3x 3x 3x 1x 1x 1x   1x         3x 3x         3x     3x     7x     1x                 3x 3x   3x 3x             3x       3x     3x 3x 3x 1x                       1x                 2x               3x                   1x                  
import styles from './style.postcss';
 
import React, { PureComponent } from 'react';
import is from 'is_js';
import classnames from 'classnames';
import PageCard from 'components/PageCard';
import Icon from 'components/Icon';
import Header from './Header';
import Level from './Level';
import Leaf from './Leaf';
import PropTypes from 'prop-types';
 
class SelectionTable extends PureComponent {
 
  constructor(props) {
    super(props);
    this.state = { route: [] };
    this._setUpData(props);
  }
 
  componentWillUpdate(props) {
    this._setUpData(props);
  }
 
  _setUpData(props) {
    const children = React.Children.toArray(props.children);
    this._level = children.filter((child) => child.type === Level);
    this._header = children.find((child) => child.type === Header);
  }
 
  _onLevelClick(route) {
    this.setState({ route });
  }
 
  _cloneArray(arr) {
    return arr.slice(0);
  }
 
  _renderContent() {
    let levels = this._cloneArray(this._level);
    const tempRoutes = this._cloneArray(this.state.route);
    while (tempRoutes.length !== 0) {
      const currentRoute = tempRoutes.shift();
      levels = levels.find(
        (level) => level.props.label === currentRoute
      );
      levels = is.array(levels.props.children) ?
        this._cloneArray(levels.props.children) :
        levels.props.children;
    }
 
    Eif (tempRoutes.length === 0) {
      return this._renderLevels(levels);
    }
  }
 
  _renderLevels(levels) {
    Iif (! is.array(levels) && levels.type === Leaf) {
      return <Leaf>{levels.props.children}</Leaf>;
    }
    return <div>
      {
        levels.map((level) =>
          <Level key={level.props.label}
              route={this.state.route}
              label={level.props.label}
              onClick={(route) => this._onLevelClick(route)}>
            {level.props.children}
          </Level>
        )
      }
    </div>;
  }
 
  _renderHeading() {
    const { title, rootLinkTitle, hideRootLink } = this.props;
    const headerClassName = classnames(this.props.headerClassName,
      styles.SelectionTable_header);
    const routes = this._cloneArray(this.state.route);
    const onHeadingRouteClick = (route) => {
      const routeIndex = routes.indexOf(route);
      if (routeIndex >= 0) {
        const newRoute = routes.slice(0, routeIndex + 1);
        this.setState({ route: newRoute });
      }
    };
    const onHeadingBackClick = () => {
      this.setState({ route: routes.slice(0, routes.length - 1) });
    };
 
    const onHeadingRootClick = () => {
      this.setState({ route: [] });
    };
    const headingRouteClassName = styles.SelectionTable_heading_route;
    const headingBackClassName = styles.SelectionTable_heading_back;
    if (is.array(routes) && routes.length > 0) {
      return <PageCard.Heading className={styles.SelectionTable_heading}>
        <span className={headingBackClassName} onClick={() => onHeadingBackClick()}>
          <Icon id="arrow-left" />
        </span>
        {
          is.falsy(hideRootLink) ?
            <span className={headingRouteClassName} onClick={() => onHeadingRootClick()}>
              {is.undefined(rootLinkTitle) ? title : rootLinkTitle}
            </span> : null
        }
        {
          routes.map((route) =>
            <span key={route}
                className={headingRouteClassName}
                onClick={() => onHeadingRouteClick(route)}>
              {route}
            </span>)
        }
 
      </PageCard.Heading>;
    }
    return <PageCard.Heading className={headerClassName} text={this.props.title}>
      {
        is.existy(this._header) ? this._header : null
      }
    </PageCard.Heading>;
  }
 
  render() {
    return <PageCard>
      {this._renderHeading()}
      <div>
        {this._renderContent()}
      </div>
    </PageCard>;
  }
 
}
 
SelectionTable.propTypes = {
  children: PropTypes.node,
  title: PropTypes.string,
  rootLinkTitle: PropTypes.string,
  headerClassName: PropTypes.string,
  hideRootLink: PropTypes.bool,
};
 
export default SelectionTable;