All files / lib/MenuItem index.js

100% Statements 19/19
96.67% Branches 29/30
100% Functions 4/4
100% Lines 19/19
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                        4x 4x 4x           1x 1x 1x   3x         6x 6x   6x 6x                     57x   57x           57x                               96x                         89x                                         89x                       89x         89x      
import React from 'react';
import PropTypes from 'prop-types';
import { omit } from 'lodash';
import { ListItem } from '@collab-ui/react/';
 
class MenuItem extends React.Component {
 
  state = {
    anchorRef: null,
  };
 
  handleKeyDown = e => {
    const { onClick, index } = this.props;
    const { handleKeyDown, handleClick } = this.context;
    if (
      e.which === 32
      || e.which === 13
      || e.charCode === 32
      || e.charCode === 13
    ) {
      onClick && onClick(e);
      handleClick && handleClick(e, index, this);
      e.preventDefault();
    } else {
      handleKeyDown && handleKeyDown(e, index, this);
    }
  };
 
  handleClick = e => {
    const { handleClick } = this.context;
    const { index, onClick, value, label } = this.props;
 
    onClick && onClick(e, {value, label});
    handleClick && handleClick(e, index, this);
  };
 
  render () {
    const {
      children,
      className,
      isHeader,
      isOpen,
      label,
      ...props
    } = this.props;
 
    const otherProps = omit({...props}, [
      'index',
      'keepMenuOpen',
      'onClick',
    ]);
 
    return (
      <div
        className={
          'cui-menu-item' +
          `${(className && ` ${className}`) || ''}`
        }
        aria-expanded={isOpen}
        aria-haspopup={!!children}
      >
        <ListItem
          active={isOpen}
          className={`${(isHeader && `cui-menu-item__header`) || ''}`}
          focusOnLoad
          isReadOnly={isHeader}
          {...!isHeader && { onClick: this.handleClick }}
          {...!isHeader && { onKeyDown: this.handleKeyDown }}
          ref={ref => !this.state.anchorRef && this.setState({anchorRef: ref})}
          role="menuitem"
          {...otherProps}
        >
          {
            label || children
          }
        </ListItem>
      </div>
    );
  }
}
 
MenuItem.propTypes = {
  /** @prop Children nodes to render inside MenuItem | null */
  children: PropTypes.node,
  /** @prop Optional css class name | '' */
  className: PropTypes.string,
  /** @prop Index value of MenuItem | null */
  index: PropTypes.array,
  /** @prop Determines if MenuItem is the header | false */
  isHeader: PropTypes.bool,
  /** @prop Determines if MenuItem is open | false */
  isOpen: PropTypes.bool,
  /** @prop Set to keep the MenuItem open | false */
  keepMenuOpen: PropTypes.bool,
  /** @prop label text of MenuItem | '' */
  label: PropTypes.string,
  /** @prop Callback function invoked when user taps on MenutItem | null */
  onClick: PropTypes.func,
  /** @prop MenuItem value | '' */
  value: PropTypes.string,
};
 
MenuItem.defaultProps = {
  children: null,
  className: '',
  index: null,
  isHeader: false,
  isOpen: false,
  keepMenuOpen: false,
  label: '',
  onClick: null,
  value: '',
};
 
MenuItem.contextTypes = {
  handleClick: PropTypes.func,
  handleKeyDown: PropTypes.func,
};
 
MenuItem.displayName = 'MenuItem';
 
export default MenuItem;