render()

in app/addons/fauxton/notifications/components/NotificationCenterPanel.js [84:143]

• 53 lines of code
• 4 McCabe index (conditional complexity)

  render() {
    if (!this.props.isVisible && this.props.style.x === 0) {
      // panelClasses += ' visible';
      return null;
    }

    const filterClasses = {
      all: 'flex-body',
      success: 'flex-body',
      error: 'flex-body',
      info: 'flex-body'
    };
    filterClasses[this.props.filter] += ' selected';

    const maskClasses = `notification-page-mask ${((this.props.isVisible) ? ' visible' : '')}`;
    const panelClasses = 'notification-center-panel flex-layout flex-col visible';
    return (
      <div id="notification-center">
        <div className={panelClasses} style={{transform: `translate(${this.props.style.x}px)`}}>

          <header className="flex-layout flex-row">
            <span className="fonticon fonticon-bell" />
            <h1 className="flex-body">Notifications</h1>
            <button aria-label="Hide Notifications Center" type="button" onClick={this.props.hideNotificationCenter}>×</button>
          </header>

          <ul aria-label="Filters" className="notification-filter flex-layout flex-row">
            <li className={filterClasses.all} title="All notifications" data-filter="all"
              onClick={() => this.props.selectNotificationFilter('all')}>All</li>
            <li className={filterClasses.success} title="Success notifications" data-filter="success"
              onClick={() => this.props.selectNotificationFilter('success')}>
              <span className="fonticon fonticon-ok-circled" />
            </li>
            <li className={filterClasses.error} title="Error notifications" data-filter="error"
              onClick={() => this.props.selectNotificationFilter('error')}>
              <span className="fonticon fonticon-attention-circled" />
            </li>
            <li className={filterClasses.info} title="Info notifications" data-filter="info"
              onClick={() => this.props.selectNotificationFilter('info')}>
              <span className="fonticon fonticon-info-circled" />
            </li>
          </ul>

          <div className="flex-body">
            <TransitionMotion styles={this.getStyles}>
              {this.getNotifications}
            </TransitionMotion>
          </div>

          <footer>
            <Button type="button" variant="cf-secondary" onClick={this.props.clearAllNotifications}>
              Clear All
            </Button>
          </footer>
        </div>

        <div className={maskClasses} onClick={this.props.hideNotificationCenter}></div>
      </div>
    );
  }