zent/lib/popover/trigger/Trigger.js

一套前端设计语言和基于React的实现

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PopoverTriggerPropTypes = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var PopoverTriggerPropTypes = exports.PopoverTriggerPropTypes = {
  children: _propTypes2['default'].node,

  onTriggerRefChange: _propTypes2['default'].func,

  getTriggerNode: _propTypes2['default'].func,
  getContentNode: _propTypes2['default'].func,

  contentVisible: _propTypes2['default'].bool,
  open: _propTypes2['default'].func,
  close: _propTypes2['default'].func,

  isOutsideStacked: _propTypes2['default'].func,
  injectIsOutsideSelf: _propTypes2['default'].func
};

var PopoverTrigger = function (_ref) {
  (0, _inherits3['default'])(PopoverTrigger, _ref);

  function PopoverTrigger(props) {
    (0, _classCallCheck3['default'])(this, PopoverTrigger);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (PopoverTrigger.__proto__ || Object.getPrototypeOf(PopoverTrigger)).call(this, props));

    _this.isOutsideSelf = function (target) {
      var _this$props = _this.props,
          isOutside = _this$props.isOutside,
          getContentNode = _this$props.getContentNode,
          getTriggerNode = _this$props.getTriggerNode;

      var box = getContentNode();
      var anchor = getTriggerNode();
      if (isOutside) {
        return isOutside(target, {
          contentNode: box,
          triggerNode: anchor
        });
      }

      if (anchor && anchor.contains(target)) {
        return false;
      }

      if (box && box.contains(target)) {
        return false;
      }

      return true;
    };

    props.injectIsOutsideSelf(_this.isOutsideSelf);
    return _this;
  }

  // 注意：
  // 在Trigger里判断一个节点在外面请用this.props.isOutsideStacked
  //
  // 这个函数之所以放在这里是为了兼容老的API，因为 isOutside 原来是放在Trigger上的，其实放在 Popover 上更好。


  (0, _createClass3['default'])(PopoverTrigger, [{
    key: 'getTriggerProps',


    // Override this function to add custom event handlers
    value: function getTriggerProps() {
      return {};
    }

    // helper to trigger event on child

  }, {
    key: 'triggerEvent',
    value: function triggerEvent(element, eventName, event) {
      var handler = element.props[eventName];
      if (handler) handler(event);
    }
  }, {
    key: 'validateChildren',
    value: function validateChildren() {
      var children = this.props.children;

      var count = _react.Children.count(children);

      if (count === 0) {
        throw new Error('Popover trigger requires a child');
      }

      var childrenType = typeof children === 'undefined' ? 'undefined' : (0, _typeof3['default'])(children);
      if (count === 1 && childrenType === 'string' || childrenType === 'number') {
        return _react2['default'].createElement(
          'span',
          null,
          children
        );
      }

      if (count > 1) {
        throw new Error('Popover trigger requires only one child, but found ' + count);
      }

      var child = _react.Children.only(this.props.children);
      if (child.ref) {
        throw new Error('ref is not allowed on Popover trigger');
      }

      return child;
    }
  }, {
    key: 'render',
    value: function render() {
      var child = this.validateChildren();

      return _react2['default'].cloneElement(child, (0, _extends3['default'])({
        ref: this.props.onTriggerRefChange
      }, this.getTriggerProps(child)));
    }
  }]);
  return PopoverTrigger;
}(_react.PureComponent || _react.Component);

PopoverTrigger.propTypes = (0, _extends3['default'])({}, PopoverTriggerPropTypes);
exports['default'] = PopoverTrigger;