@tianrang-inc/element-react/dist/npm/es6/src/popover/Popover.js

Element UI for React

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React from 'react';
import ReactDOM from 'react-dom';
import Popper from '../../libs/utils/popper';
import { Component, PropTypes, Transition, View } from '../../libs';

var Popover = function (_Component) {
  _inherits(Popover, _Component);

  function Popover(props) {
    _classCallCheck(this, Popover);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.documentEvent = function (e) {
      var popper = _this.refs.popper;
      if (!_this.element || _this.element.contains(e.target) || !_this.reference || _this.reference.contains(e.target) || !popper || popper.contains(e.target)) return;
      if (_this.props.visible != null) {
        if (!_this.props.visible) return;
      } else {
        if (!_this.state.showPopper) return;
      }

      _this.handleCancelPopover();
    };

    _this.state = {
      showPopper: false
    };
    return _this;
  }

  Popover.prototype.componentDidMount = function componentDidMount() {
    var _this2 = this;

    var _props = this.props,
        trigger = _props.trigger,
        visible = _props.visible,
        popper = this.refs.popper;


    this.element = ReactDOM.findDOMNode(this);
    this.reference = ReactDOM.findDOMNode(this.refs.reference);

    if (this.reference === null) return;

    if (trigger === 'click') {
      this.reference.addEventListener('click', function () {
        if (visible != null) {
          if (visible) {
            _this2.handleCancelPopover();
          } else {
            _this2.handleShowPopover();
          }
        } else {
          _this2.setState({
            showPopper: !_this2.state.showPopper
          });
        }
      });

      document.addEventListener('click', this.documentEvent);
    } else if (trigger === 'hover') {
      this.reference.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
      this.reference.addEventListener('mouseleave', this.handleMouseLeave.bind(this));

      popper.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
      popper.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
    } else {
      if (this.reference.nodeName === 'INPUT' || this.reference.nodeName === 'TEXTAREA') {
        this.reference.addEventListener('focus', function () {
          _this2.handleShowPopover();
        });
        this.reference.addEventListener('blur', function () {
          _this2.handleCancelPopover();
        });
      } else {
        this.reference.addEventListener('mousedown', function () {
          _this2.handleShowPopover();
        });
        this.reference.addEventListener('mouseup', function () {
          _this2.handleCancelPopover();
        });
      }
    }
  };

  Popover.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
    if (props.visible != this.props.visible) {
      this.setState({
        showPopper: props.visible
      });
    }
  };

  Popover.prototype.componentWillUnmount = function componentWillUnmount() {
    this.reference.parentNode.replaceChild(this.reference.cloneNode(true), this.reference);
    document.removeEventListener('click', this.documentEvent);
  };

  Popover.prototype.handleMouseEnter = function handleMouseEnter() {
    clearTimeout(this.timer);

    this.handleShowPopover();
  };

  Popover.prototype.handleMouseLeave = function handleMouseLeave() {
    var _this3 = this;

    this.timer = setTimeout(function () {
      _this3.handleCancelPopover();
    }, 200);
  };

  Popover.prototype.handleShowPopover = function handleShowPopover() {
    if (this.props.onShow != null) {
      this.props.onShow();
    } else {
      this.setState({
        showPopper: true
      });
    }
  };

  Popover.prototype.handleCancelPopover = function handleCancelPopover() {
    if (this.props.onCancel != null) {
      this.props.onCancel();
    } else {
      this.setState({
        showPopper: false
      });
    }
  };

  Popover.prototype.onEnter = function onEnter() {
    if (this.refs.arrow) {
      this.refs.arrow.setAttribute('x-arrow', '');
    }

    this.popperJS = new Popper(this.reference, this.refs.popper, {
      placement: this.props.placement,
      gpuAcceleration: false
    });
  };

  Popover.prototype.onAfterLeave = function onAfterLeave() {
    this.popperJS.destroy();
  };

  Popover.prototype.render = function render() {
    var _props2 = this.props,
        transition = _props2.transition,
        popperClass = _props2.popperClass,
        width = _props2.width,
        title = _props2.title,
        content = _props2.content,
        visibleArrow = _props2.visibleArrow,
        visible = _props2.visible;


    return React.createElement(
      'span',
      null,
      React.createElement(
        Transition,
        { name: transition, onEnter: this.onEnter.bind(this), onAfterLeave: this.onAfterLeave.bind(this) },
        React.createElement(
          View,
          { show: visible != null ? visible : this.state.showPopper },
          React.createElement(
            'div',
            { ref: 'popper', className: this.className('el-popover', popperClass), style: this.style({ width: Number(width) }) },
            title && React.createElement(
              'div',
              { className: 'el-popover__title' },
              title
            ),
            content,
            visibleArrow && React.createElement('div', { ref: 'arrow', className: 'popper__arrow' })
          )
        )
      ),
      React.cloneElement(React.Children.only(this.props.children), {
        ref: 'reference'
      })
    );
  };

  return Popover;
}(Component);

Popover.defaultProps = {
  visibleArrow: true,
  transition: 'fade-in-linear',
  trigger: 'click',
  placement: 'bottom',
  width: 150
};
export default Popover;


Popover.propTypes = {
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']),
  trigger: PropTypes.oneOf(['click', 'focus', 'hover']),
  title: PropTypes.string,
  content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  popperClass: PropTypes.string,
  transition: PropTypes.string,
  visible: PropTypes.bool,
  visibleArrow: PropTypes.bool,
  onShow: PropTypes.func,
  onCancel: PropTypes.func
};