@mongodb-js/mongodb-ui-components/build/preact/nav/js/nav-middle/index.js

A collection of frequently used functional UI components found on mongodb properties

'use strict';

import {h, Component} from 'preact';
import { hamburgerIcon } from '../nav-icons';

export default class MiddlePanel extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isMobile: this.props.isMobile,
      activeSection: this.props.activeSection || -1
    };

    this.renderSection = this.renderSection.bind(this);
  }

  componentWillReceiveProps(newProps) {
    this.setState({
      activeSection: newProps.activeSection,
      isMobile: newProps.isMobile
    });
  }

  onTabSelect(i, e) {
    e.preventDefault();

    if (this.state.activeSection === i) {
      i = -1;
    }

    this.props.setActiveSection(i);
    this.setState({ activeSection: i });

    return false;
  }

  renderSection(section, i) {
    const active = this.state.activeSection;

    return h(
      'li',
      { key: i, className: `m-nav-middle-li ${active === i ? 'm-nav-middle-li-on' : ''}` },
      h(
        'a',
        {
          href: section.href,
          onClick: !section.isLink && this.onTabSelect.bind(this, i) },
        section.text,
        section.extraText && h(
          'span',
          { className: 'extra-text' },
          section.extraText
        )
      )
    );
  }

  render() {
    return h(
      'div',
      { className: 'm-nav-middle' },
      h(
        'ul',
        { className: 'm-nav-flex-space' },
        h(
          'a',
          { href: this.props.logoLink || '/', className: 'm-nav-flex-y' },
          h(
            'li',
            { className: 'm-nav-logo' },
            h('img', { src: this.props.logoUrl })
          ),
          h(
            'li',
            { className: 'm-nav-tagline' },
            this.props.tagline || 'For Giant Ideas'
          )
        ),
        h(
          'div',
          {
            className: 'm-nav-middle-lists m-nav-flex-xy',
            style: this.state.isMobile ? { display: 'none' } : null },
          this.props.sections.map(this.renderSection)
        ),
        h(
          'li',
          {
            onClick: this.props.toggle,
            className: 'm-nav-middle-toggle' },
          h(
            'button',
            null,
            hamburgerIcon
          )
        )
      )
    );
  }
}