All files / lib/TopbarMobile index.js

58.82% Statements 10/17
36.84% Branches 7/19
33.33% Functions 2/6
62.5% Lines 10/16
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                                                                                            3x 3x     3x                 3x 1x 1x         3x                                                                       89x                         89x               89x      
import React from 'react';
import PropTypes from 'prop-types';
import { Icon, ListSeparator } from '@collab-ui/react';
 
/**
 * Topbar Mobile
 * @param props
 */
class TopbarMobile extends React.Component {
  static displayName = 'TopbarMobile';
 
  state = {
    isMobileOpen: false,
  };
 
  handleClose = () => {
    this.setState({
      isMobileOpen: false,
    });
  };
 
  handleOpen = () => {
    this.setState({
      isMobileOpen: true,
    });
  };
 
  handleKeyDown = e => {
    if (
      e.which === 32
        || e.which === 13
        || e.charCode === 32
        || e.charCode === 13
      ) {
      this.handleClose();
      e.preventDefault();
    }
  };
 
  render() {
    const {
      brandNode,
      children,
      closeMenuAriaLabel,
      shouldCloseOnClick,
      openMenuAriaLabel,
    } = this.props;
    const { isMobileOpen } = this.state;
 
    const mobileButton = (
      <Icon
        name='list-menu_20'
        buttonClassName='cui-top-bar__mobile-menu-button'
        onClick={this.handleOpen}
        ariaLabel={openMenuAriaLabel}
        aria-pressed={isMobileOpen}
      />
    );
 
    const passClickHandlerToChildren = React.Children.map(children, child => {
      Iif (!child) return;
      return React.cloneElement(child, {
        onClick: this.handleClose
      });
    });
 
    return (
      <div>
        {!isMobileOpen && mobileButton}
        <div
          className={
            'cui-top-bar__mobile cui-tb-mobile' +
            `${isMobileOpen ? ' open' : ''}`
          }
          onClick={() => shouldCloseOnClick ? this.handleClose : null}
          onKeyDown={this.handleKeyDown}
          role='menu'
          tabIndex={0}
        >
          <Icon
            name='cancel_20'
            buttonClassName='cui-tb-mobile__close'
            aria-pressed={isMobileOpen}
            onClick={this.handleClose}
            ariaLabel={closeMenuAriaLabel}
          />
          {/* eslint-disable jsx-a11y/no-static-element-interactions */}
          <span onClick={this.handleClose} onKeyDown={this.handleKeyDown}>{brandNode}</span>
          {/* eslint-enable jsx-a11y/no-static-element-interactions */}
          <ListSeparator />
          <nav className='cui-tb-mobile__nav'>{!shouldCloseOnClick && passClickHandlerToChildren || children}</nav>
        </div>
        <div
          className={'cui-tb-mobile__mask' + `${isMobileOpen ? ' open' : ''}`}
          onClick={this.handleClose}
          role='none'
        />
      </div>
    );
  }
}
 
TopbarMobile.propTypes = {
  /** @prop Brand Node | null */
  brandNode: PropTypes.node,
  /** @prop Children node to render inside of TopbarMobile | null */
  children: PropTypes.node,
  /** @prop Aria Label for close Button | 'Close Menu' */
  closeMenuAriaLabel: PropTypes.string,
  /** @prop Set mobile menu to close on any click | true */
  shouldCloseOnClick: PropTypes.bool,
  /** @prop Aria Label for open Button | 'Open Menu */
  openMenuAriaLabel: PropTypes.string,
};
 
TopbarMobile.defaultProps = {
  brandNode: null,
  children: null,
  closeMenuAriaLabel: 'Close Menu',
  shouldCloseOnClick: true,
  openMenuAriaLabel: 'Open Menu',
};
 
TopbarMobile.displayName = 'TopbarMobile';
 
export default TopbarMobile;