chuckya/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js

//  Package imports.
import PropTypes from 'prop-types';
import React from 'react';
import spring from 'react-motion/lib/spring';
import Toggle from 'react-toggle';
import ImmutablePureComponent from 'react-immutable-pure-component';
import classNames from 'classnames';

//  Components.
import Icon from 'flavours/glitch/components/icon';

//  Utils.
import { withPassive } from 'flavours/glitch/util/dom_helpers';
import Motion from 'flavours/glitch/util/optional_motion';
import { assignHandlers } from 'flavours/glitch/util/react_helpers';

//  The spring to use with our motion.
const springMotion = spring(1, {
  damping: 35,
  stiffness: 400,
});

//  The component.
export default class ComposerOptionsDropdownContent extends React.PureComponent {

  static propTypes = {
    items: PropTypes.arrayOf(PropTypes.shape({
      icon: PropTypes.string,
      meta: PropTypes.node,
      name: PropTypes.string.isRequired,
      on: PropTypes.bool,
      text: PropTypes.node,
    })),
    onChange: PropTypes.func.isRequired,
    onClose: PropTypes.func.isRequired,
    style: PropTypes.object,
    value: PropTypes.string,
    openedViaKeyboard: PropTypes.bool,
  };

  static defaultProps = {
    style: {},
  };

  state = {
    mounted: false,
    value: this.props.openedViaKeyboard ? this.props.items[0].name : undefined,
  };

  //  When the document is clicked elsewhere, we close the dropdown.
  handleDocumentClick = (e) => {
    if (this.node && !this.node.contains(e.target)) {
      this.props.onClose();
    }
  }

  //  Stores our node in `this.node`.
  handleRef = (node) => {
    this.node = node;
  }

  //  On mounting, we add our listeners.
  componentDidMount () {
    document.addEventListener('click', this.handleDocumentClick, false);
    document.addEventListener('touchend', this.handleDocumentClick, withPassive);
    if (this.focusedItem) {
      this.focusedItem.focus();
    } else {
      this.node.firstChild.focus();
    }
    this.setState({ mounted: true });
  }

  //  On unmounting, we remove our listeners.
  componentWillUnmount () {
    document.removeEventListener('click', this.handleDocumentClick, false);
    document.removeEventListener('touchend', this.handleDocumentClick, withPassive);
  }

  handleClick = (e) => {
    const name = e.currentTarget.getAttribute('data-index');

    const {
      onChange,
      onClose,
      items,
    } = this.props;

    const { on } = this.props.items.find(item => item.name === name);
    e.preventDefault();  //  Prevents change in focus on click
    if ((on === null || typeof on === 'undefined')) {
      onClose();
    }
    onChange(name);
  }

  // Handle changes differently whether the dropdown is a list of options or actions
  handleChange = (name) => {
    if (this.props.value) {
      this.props.onChange(name);
    } else {
      this.setState({ value: name });
    }
  }

  handleKeyDown = e => {
    const { items } = this.props;
    const name = e.currentTarget.getAttribute('data-index');
    const index = items.findIndex(item => {
      return (item.name === name);
    });
    let element;

    switch(e.key) {
    case 'Escape':
      this.props.onClose();
      break;
    case 'Enter':
    case ' ':
      this.handleClick(e);
      break;
    case 'ArrowDown':
      element = this.node.childNodes[index + 1];
      if (element) {
        element.focus();
        this.handleChange(element.getAttribute('data-index'));
      }
      break;
    case 'ArrowUp':
      element = this.node.childNodes[index - 1];
      if (element) {
        element.focus();
        this.handleChange(element.getAttribute('data-index'));
      }
      break;
    case 'Tab':
      if (e.shiftKey) {
        element = this.node.childNodes[index - 1] || this.node.lastChild;
      } else {
        element = this.node.childNodes[index + 1] || this.node.firstChild;
      }
      if (element) {
        element.focus();
        this.handleChange(element.getAttribute('data-index'));
        e.preventDefault();
        e.stopPropagation();
      }
      break;
    case 'Home':
      element = this.node.firstChild;
      if (element) {
        element.focus();
        this.handleChange(element.getAttribute('data-index'));
      }
      break;
    case 'End':
      element = this.node.lastChild;
      if (element) {
        element.focus();
        this.handleChange(element.getAttribute('data-index'));
      }
      break;
    }
  }

  setFocusRef = c => {
    this.focusedItem = c;
  }

  renderItem = (item) => {
    const { name, icon, meta, on, text } = item;

    const active = (name === (this.props.value || this.state.value));

    const computedClass = classNames('composer--options--dropdown--content--item', {
      active,
      lengthy: meta,
      'toggled-off': !on && on !== null && typeof on !== 'undefined',
      'toggled-on': on,
      'with-icon': icon,
    });

    let prefix = null;

    if (on !== null && typeof on !== 'undefined') {
      prefix = <Toggle checked={on} onChange={this.handleClick} />;
    } else if (icon) {
      prefix = <Icon className='icon' fullwidth icon={icon} />
    }

    return (
      <div
        className={computedClass}
        onClick={this.handleClick}
        onKeyDown={this.handleKeyDown}
        role='option'
        tabIndex='0'
        key={name}
        data-index={name}
        ref={active ? this.setFocusRef : null}
      >
        {prefix}

        <div className='content'>
          <strong>{text}</strong>
          {meta}
        </div>
      </div>
    );
  }

  //  Rendering.
  render () {
    const { mounted } = this.state;
    const {
      items,
      onChange,
      onClose,
      style,
    } = this.props;

    //  The result.
    return (
      <Motion
        defaultStyle={{
          opacity: 0,
          scaleX: 0.85,
          scaleY: 0.75,
        }}
        style={{
          opacity: springMotion,
          scaleX: springMotion,
          scaleY: springMotion,
        }}
      >
        {({ opacity, scaleX, scaleY }) => (
          // It should not be transformed when mounting because the resulting
          // size will be used to determine the coordinate of the menu by
          // react-overlays
          <div
            className='composer--options--dropdown--content'
            ref={this.handleRef}
            role='listbox'
            style={{
              ...style,
              opacity: opacity,
              transform: mounted ? `scale(${scaleX}, ${scaleY})` : null,
            }}
          >
            {!!items && items.map(item => this.renderItem(item))}
          </div>
        )}
      </Motion>
    );
  }

}