element-react-codish/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.state = {
      showPopper: false
    };
    return _this;
  }

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

    var trigger = this.props.trigger,
        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 () {
        _this2.setState({
          showPopper: !_this2.state.showPopper
        });
      });

      document.addEventListener('click', function (e) {
        if (!_this2.element || _this2.element.contains(e.target) || !_this2.reference || _this2.reference.contains(e.target) || !popper || popper.contains(e.target)) return;

        _this2.setState({
          showPopper: false
        });
      });
    } 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.setState({ showPopper: true });
        });
        this.reference.addEventListener('blur', function () {
          _this2.setState({ showPopper: false });
        });
      } else {
        this.reference.addEventListener('mousedown', function () {
          _this2.setState({ showPopper: true });
        });
        this.reference.addEventListener('mouseup', function () {
          _this2.setState({ showPopper: false });
        });
      }
    }
  };

  Popover.prototype.componentDidUpdate = function componentDidUpdate() {
    var showPopper = this.state.showPopper;


    if (showPopper) {
      if (this.popperJS) {
        this.popperJS.update();
      } else {
        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
        });
      }
    } else {
      if (this.popperJS) {
        this.popperJS.destroy();
      }

      delete this.popperJS;
    }
  };

  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);

    if (this.popperJS) {
      this.popperJS.destroy();
    }
  };

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

    this.setState({
      showPopper: true
    });
  };

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

    this.timer = setTimeout(function () {
      _this3.setState({
        showPopper: false
      });
    }, 200);
  };

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


    return React.createElement(
      'span',
      null,
      React.createElement(
        Transition,
        { name: transition, duration: 200 },
        React.createElement(
          View,
          { show: 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
};