masto-fe/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';

class ComposerOptionsDropdownContentItem extends ImmutablePureComponent {

  static propTypes = {
    active: PropTypes.bool,
    name: PropTypes.string,
    onChange: PropTypes.func,
    onClose: PropTypes.func,
    options: PropTypes.shape({
      icon: PropTypes.string,
      meta: PropTypes.node,
      on: PropTypes.bool,
      text: PropTypes.node,
    }),
  };

  handleActivate = (e) => {
    const {
      name,
      onChange,
      onClose,
      options: { on },
    } = this.props;

    //  If the escape key was pressed, we close the dropdown.
    if (e.key === 'Escape' && onClose) {
      onClose();

    //  Otherwise, we both close the dropdown and change the value.
    } else if (onChange && (!e.key || e.key === 'Enter')) {
      e.preventDefault();  //  Prevents change in focus on click
      if ((on === null || typeof on === 'undefined') && onClose) {
        onClose();
      }
      onChange(name);
    }
  }

  //  Rendering.
  render () {
    const {
      active,
      options: {
        icon,
        meta,
        on,
        text,
      },
    } = this.props;
    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.handleActivate} />;
    } else if (icon) {
      prefix = <Icon className='icon' fullwidth icon={icon} />
    }

    //  The result.
    return (
      <div
        className={computedClass}
        onClick={this.handleActivate}
        onKeyDown={this.handleActivate}
        role='button'
        tabIndex='0'
      >
        {prefix}

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

};

//  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,
    onClose: PropTypes.func,
    style: PropTypes.object,
    value: PropTypes.string,
  };

  static defaultProps = {
    style: {},
  };

  state = {
    mounted: false,
  };

  //  When the document is clicked elsewhere, we close the dropdown.
  handleDocumentClick = ({ target }) => {
    const { node } = this;
    const { onClose } = this.props;
    if (onClose && node && !node.contains(target)) {
      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);
    this.setState({ mounted: true });
  }

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

  //  Rendering.
  render () {
    const { mounted } = this.state;
    const {
      items,
      onChange,
      onClose,
      style,
      value,
    } = 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}
            style={{
              ...style,
              opacity: opacity,
              transform: mounted ? `scale(${scaleX}, ${scaleY})` : null,
            }}
          >
            {items ? items.map(
              ({
                name,
                ...rest
              }) => (
                <ComposerOptionsDropdownContentItem
                  active={name === value}
                  key={name}
                  name={name}
                  onChange={onChange}
                  onClose={onClose}
                  options={rest}
                />
              )
            ) : null}
          </div>
        )}
      </Motion>
    );
  }

}