talk/client/coral-ui/components/Dropdown.js

import React from 'react';
import PropTypes from 'prop-types';
import styles from './Dropdown.css';
import Icon from './Icon';
import cn from 'classnames';
import ClickOutside from 'coral-framework/components/ClickOutside';

class Dropdown extends React.Component {

  toggleRef = null;
  optionsRef = [];

  state = {
    isOpen: false
  };

  componentDidUpdate(_, prevState) {
    if (!this.state.isOpen && prevState.isOpen) {

      // Refocus on the toggle element when menu closes.
      this.toggleRef.focus();
    }
  }

  goUp = () => {
    const index = this.optionsRef.findIndex((ref) => ref.hasFocus());
    if (index > 0) {
      this.optionsRef[index - 1].focus();
    }
  }

  goDown = () => {
    const index = this.optionsRef.findIndex((ref) => ref.hasFocus());
    if (index < this.optionsRef.length - 1) {
      this.optionsRef[index + 1].focus();
    }
  }

  handleOptionKeyDown = (value, e) => {
    const code = e.which;

    switch (code) {
    case 13: // 13 = Return
    case 32: // 32 = Space
      e.preventDefault();
      this.setValue(value);
      break;
    case 38: // 38 = Arrow Up
      e.preventDefault();
      this.goUp();
      break;
    case 40: // 40 = Arrow Down
      e.preventDefault();
      this.goDown();
      break;
    }
  }

  handleOptionClick = (value) => {
    this.setValue(value);
  }

  setValue = (value) => {
    if (this.props.onChange) {
      this.props.onChange(value);
    }

    this.setState({
      isOpen: false
    });
  }

  toggle = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  handleClick = () => {
    this.toggle();
  }

  handleKeyDown = (e) => {
    const code = e.which;

    // 13 = Return, 32 = Space
    if ((code === 13) || (code === 32)) {
      e.preventDefault();
      this.toggle();
    }
  }

  hideMenu = () => {
    this.setState({
      isOpen: false
    });
  }

  handleToggleRef = (ref) => this.toggleRef = ref;

  handleOptionsRef = (ref, index) => {
    this.optionsRef[index] = ref;

    // Focus on current value when menu opens.
    if (ref) {
      if (ref.props.value === this.props.value || index === 0 && !this.props.value) {
        ref.focus();
        return;
      }
    }
  }

  // Trap keyboard focus inside the dropdown until a value has been chosen.
  trapFocusBegin = () => this.optionsRef[this.optionsRef.length - 1].focus();
  trapFocusEnd = () => this.optionsRef[0].focus();

  renderLabel() {
    const options = React.Children.toArray(this.props.children);
    const option = options.find((option) => option.props.value === this.props.value);

    if (option) {
      return option.props.label ? option.props.label : option.props.value;
    } else if (this.props.value) {
      return this.props.value;
    } else {
      return this.props.placeholder;
    }
  }

  render() {
    const {containerClassName, toggleClassName, toggleOpenClassName} = this.props;
    return (
      <ClickOutside onClickOutside={this.hideMenu}>
        <div className={cn(styles.dropdown, containerClassName, 'dd dd-container')}>
          <div
            className={cn(styles.toggle, toggleClassName, {[cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen})}
            onClick={this.handleClick}
            onKeyDown={this.handleKeyDown}
            role="button"
            aria-pressed={this.state.isOpen}
            aria-haspopup="true"
            tabIndex="0"
            ref={this.handleToggleRef}
          >
            {this.props.icon && <Icon name={this.props.icon} className={styles.icon} aria-hidden="true" />}
            <span className={styles.label}>{this.renderLabel()}</span>
            {this.state.isOpen ? <Icon name="keyboard_arrow_up" className={styles.arrow} aria-hidden="true"/> : <Icon name="keyboard_arrow_down" className={styles.arrow} aria-hidden="true"/>}
          </div>
          {this.state.isOpen &&
            <div>
              <div tabIndex="0" onFocus={this.trapFocusBegin} />
              <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen}, 'dd-list-active')}>
                {React.Children.toArray(this.props.children)
                  .map((child, i) =>
                    React.cloneElement(child, {
                      key: child.props.value,
                      ref: (ref) => this.handleOptionsRef(ref, i),
                      index: i,
                      onClick: () => this.handleOptionClick(child.props.value),
                      onKeyDown: (e) => this.handleOptionKeyDown(child.props.value, e)
                    }))}
              </ul>
              <div tabIndex="0" onFocus={this.trapFocusEnd} />
            </div>
          }
        </div>
      </ClickOutside>
    );
  }
}

Dropdown.propTypes = {
  containerClassName: PropTypes.string,
  toggleClassName: PropTypes.string,
  toggleOpenClassName: PropTypes.string,
  placeholder: PropTypes.string,
  icon: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired,
  value: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.bool
  ]),
};

export default Dropdown;