ssc-refer/es/containers/tokenContainer.js

React refer component for SSC 3.0

import _extends from 'babel-runtime/helpers/extends';
import React from 'react';
import { omit } from 'lodash';
import { findDOMNode } from 'react-dom';
import onClickOutside from 'react-onclickoutside';

import getDisplayName from '../refer/utils/getDisplayName';
import { BACKSPACE } from '../refer/utils/keyCode';

/**
 * Higher-order component that encapsulates Token behaviors, allowing them to
 * be easily re-used.
 */
var tokenContainer = function tokenContainer(Component) {
  var WrappedComponent = React.createClass({
    displayName: 'tokenContainer(' + getDisplayName(Component) + ')',

    getInitialState: function getInitialState() {
      return {
        selected: false
      };
    },
    render: function render() {
      var tokenProps = omit(this.props, ['disableOnClickOutside', 'enableOnClickOutside']);

      return React.createElement(Component, _extends({}, tokenProps, this.state, {
        onBlur: this._handleBlur,
        onClick: this._handleSelect,
        onFocus: this._handleSelect,
        onKeyDown: this._handleKeyDown
      }));
    },
    _handleBlur: function _handleBlur(e) {
      findDOMNode(this).blur();
      this.setState({ selected: false });
      this.props.disableOnClickOutside && this.props.disableOnClickOutside();
    },
    _handleKeyDown: function _handleKeyDown(e) {
      switch (e.keyCode) {
        case BACKSPACE:
          if (this.state.selected) {
            // Prevent backspace keypress from triggering the browser "back"
            // action.
            e.preventDefault();
            this._handleRemove();
          }
          break;
      }
    },


    /**
     * From `onClickOutside` HOC.
     */
    handleClickOutside: function handleClickOutside(e) {
      this._handleBlur();
    },
    _handleRemove: function _handleRemove(e) {
      this.props.onRemove && this.props.onRemove();
    },
    _handleSelect: function _handleSelect(e) {
      e.stopPropagation();
      this.setState({ selected: true });
      this.props.enableOnClickOutside && this.props.enableOnClickOutside();
    }
  });

  return onClickOutside(WrappedComponent);
};

export default tokenContainer;