react-ctxmenu-trigger/lib/index.js

base abstract ctx menu trigger component for react

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _Portal = require('rc-util/lib/Portal');

var _Portal2 = _interopRequireDefault(_Portal);

var _utils = require('./utils');

var _Popup = require('./Popup');

var _Popup2 = _interopRequireDefault(_Popup);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function noop() {}

function returnEmptyString() {
  return '';
}

function returnDocument() {
  return window.document;
}

var contextTypes = {
  rcTrigger: _propTypes2['default'].shape({
    onPopupMouseDown: _propTypes2['default'].func
  })
};

var CtxMenuTrigger = function (_React$Component) {
  _inherits(CtxMenuTrigger, _React$Component);

  // todo: slim props
  function CtxMenuTrigger(props) {
    _classCallCheck(this, CtxMenuTrigger);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _initialiseProps.call(_this);

    var popupVisible = void 0;
    if ('popupVisible' in props) {
      popupVisible = !!props.popupVisible;
    } else {
      popupVisible = !!props.defaultPopupVisible;
    }

    _this.state = {
      prevPopupVisible: popupVisible,
      popupVisible: popupVisible
    };
    return _this;
  }

  CtxMenuTrigger.prototype.getChildContext = function getChildContext() {
    return {
      rcTrigger: {
        onPopupMouseDown: this.onPopupMouseDown
      }
    };
  };

  CtxMenuTrigger.prototype.componentWillUnmount = function componentWillUnmount() {
    clearTimeout(this.mouseDownTimeout);
  };

  CtxMenuTrigger.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
    var popupVisible = _ref.popupVisible;

    var newState = {};

    if (popupVisible !== undefined && prevState.popupVisible !== popupVisible) {
      newState.popupVisible = popupVisible;
      newState.prevPopupVisible = prevState.popupVisible;
    }

    return newState;
  };

  CtxMenuTrigger.prototype.getPopupAlign = function getPopupAlign() {
    var props = this.props;
    var popupPlacement = props.popupPlacement,
        popupAlign = props.popupAlign,
        builtinPlacements = props.builtinPlacements;

    if (popupPlacement && builtinPlacements) {
      return (0, _utils.getAlignFromPlacement)(builtinPlacements, popupPlacement, popupAlign);
    }
    return popupAlign;
  };

  CtxMenuTrigger.prototype.render = function render() {
    var popupVisible = this.state.popupVisible;
    var forceRender = this.props.forceRender;

    // prevent unmounting after it's rendered

    if (popupVisible || this._component || forceRender) {
      return _react2['default'].createElement(
        _Portal2['default'],
        {
          getContainer: this.getContainer
        },
        this.getComponent()
      );
    }

    return null;
  };

  return CtxMenuTrigger;
}(_react2['default'].Component);

CtxMenuTrigger.propTypes = {
  getPopupClassNameFromAlign: _propTypes2['default'].any,
  popup: _propTypes2['default'].oneOfType([_propTypes2['default'].node, _propTypes2['default'].func]).isRequired,
  popupStyle: _propTypes2['default'].object,
  prefixCls: _propTypes2['default'].string,
  popupClassName: _propTypes2['default'].string,
  popupPlacement: _propTypes2['default'].string,
  builtinPlacements: _propTypes2['default'].object,
  popupTransitionName: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].object]),
  popupAnimation: _propTypes2['default'].any,
  zIndex: _propTypes2['default'].number,
  getPopupContainer: _propTypes2['default'].func,
  getDocument: _propTypes2['default'].func,
  forceRender: _propTypes2['default'].bool,
  destroyPopupOnHide: _propTypes2['default'].bool,
  mask: _propTypes2['default'].bool,
  onPopupAlign: _propTypes2['default'].func,
  popupAlign: _propTypes2['default'].object,
  popupVisible: _propTypes2['default'].bool,
  defaultPopupVisible: _propTypes2['default'].bool,
  maskTransitionName: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].object]),
  maskAnimation: _propTypes2['default'].string,
  stretch: _propTypes2['default'].string,
  alignPoint: _propTypes2['default'].bool, // Maybe we can support user pass position in the future
  point: _propTypes2['default'].object
};
CtxMenuTrigger.contextTypes = contextTypes;
CtxMenuTrigger.childContextTypes = contextTypes;
CtxMenuTrigger.defaultProps = {
  prefixCls: 'rc-trigger-popup',
  getPopupClassNameFromAlign: returnEmptyString,
  getDocument: returnDocument,
  onPopupAlign: noop,
  popupClassName: '',
  popupStyle: {},
  destroyPopupOnHide: false,
  popupAlign: {},
  defaultPopupVisible: false,
  mask: false
};

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.onPopupMouseDown = function () {
    var _context$rcTrigger = _this2.context.rcTrigger,
        rcTrigger = _context$rcTrigger === undefined ? {} : _context$rcTrigger;

    _this2.hasPopupMouseDown = true;

    clearTimeout(_this2.mouseDownTimeout);
    _this2.mouseDownTimeout = setTimeout(function () {
      _this2.hasPopupMouseDown = false;
    }, 0);

    if (rcTrigger.onPopupMouseDown) {
      rcTrigger.onPopupMouseDown.apply(rcTrigger, arguments);
    }
  };

  this.getRootDomNode = function () {
    return (0, _reactDom.findDOMNode)(_this2);
  };

  this.getPopupClassNameFromAlign = function (align) {
    var className = [];
    var _props = _this2.props,
        popupPlacement = _props.popupPlacement,
        builtinPlacements = _props.builtinPlacements,
        prefixCls = _props.prefixCls,
        alignPoint = _props.alignPoint,
        getPopupClassNameFromAlign = _props.getPopupClassNameFromAlign;

    if (popupPlacement && builtinPlacements) {
      className.push((0, _utils.getAlignPopupClassName)(builtinPlacements, prefixCls, align, alignPoint));
    }
    if (getPopupClassNameFromAlign) {
      className.push(getPopupClassNameFromAlign(align));
    }
    return className.join(' ');
  };

  this.getComponent = function () {
    var _props2 = _this2.props,
        prefixCls = _props2.prefixCls,
        destroyPopupOnHide = _props2.destroyPopupOnHide,
        popupClassName = _props2.popupClassName,
        onPopupAlign = _props2.onPopupAlign,
        popupAnimation = _props2.popupAnimation,
        popupTransitionName = _props2.popupTransitionName,
        popupStyle = _props2.popupStyle,
        mask = _props2.mask,
        maskAnimation = _props2.maskAnimation,
        maskTransitionName = _props2.maskTransitionName,
        zIndex = _props2.zIndex,
        popup = _props2.popup,
        stretch = _props2.stretch,
        alignPoint = _props2.alignPoint,
        point = _props2.point;
    var popupVisible = _this2.state.popupVisible;


    var align = _this2.getPopupAlign();

    var mouseProps = {};
    mouseProps.onMouseDown = _this2.onPopupMouseDown;

    return _react2['default'].createElement(
      _Popup2['default'],
      _extends({
        prefixCls: prefixCls,
        destroyPopupOnHide: destroyPopupOnHide,
        visible: popupVisible,
        point: alignPoint && point,
        className: popupClassName,
        action: ['contextMenu'],
        align: align,
        onAlign: onPopupAlign,
        animation: popupAnimation,
        getClassNameFromAlign: _this2.getPopupClassNameFromAlign
      }, mouseProps, {
        stretch: stretch,
        getRootDomNode: _this2.getRootDomNode,
        style: popupStyle,
        mask: mask,
        zIndex: zIndex,
        transitionName: popupTransitionName,
        maskAnimation: maskAnimation,
        maskTransitionName: maskTransitionName,
        ref: _this2.savePopup
      }),
      typeof popup === 'function' ? popup() : popup
    );
  };

  this.getContainer = function () {
    var props = _this2.props;

    var popupContainer = document.createElement('div');
    // Make sure default popup container will never cause scrollbar appearing
    // https://github.com/react-component/trigger/issues/41
    popupContainer.style.position = 'absolute';
    popupContainer.style.top = '0';
    popupContainer.style.left = '0';
    popupContainer.style.width = '100%';
    var mountNode = props.getPopupContainer ? props.getPopupContainer((0, _reactDom.findDOMNode)(_this2)) : props.getDocument().body;
    mountNode.appendChild(popupContainer);
    return popupContainer;
  };

  this.savePopup = function (node) {
    _this2._component = node;
  };
};

exports['default'] = CtxMenuTrigger;
module.exports = exports['default'];