195 lines
No EOL
6.6 KiB
JavaScript
195 lines
No EOL
6.6 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _reactDom = require('react-dom');
|
|
|
|
var _reactDom2 = _interopRequireDefault(_reactDom);
|
|
|
|
var _popper = require('popper.js');
|
|
|
|
var _popper2 = _interopRequireDefault(_popper);
|
|
|
|
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; }
|
|
|
|
var PopperComponent = function (_Component) {
|
|
_inherits(PopperComponent, _Component);
|
|
|
|
function PopperComponent() {
|
|
var _ref;
|
|
|
|
var _temp, _this, _ret;
|
|
|
|
_classCallCheck(this, PopperComponent);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PopperComponent.__proto__ || Object.getPrototypeOf(PopperComponent)).call.apply(_ref, [this].concat(args))), _this), _this._referenceNode = null, _this._popperNode = null, _this._arrowNode = null, _this._popper = false, _temp), _possibleConstructorReturn(_this, _ret);
|
|
}
|
|
|
|
_createClass(PopperComponent, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this._referenceNode = _reactDom2.default.findDOMNode(this);
|
|
this._createPopperNode();
|
|
this._renderPopper();
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(lastProps) {
|
|
this._renderPopper(lastProps);
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this._destroy();
|
|
}
|
|
}, {
|
|
key: '_createPopperNode',
|
|
value: function _createPopperNode() {
|
|
// create a node that we can stick our popper Component in
|
|
this._popperNode = document.createElement(this.props.popperTag);
|
|
|
|
// append that node to the parent node
|
|
this._popperParentNode.appendChild(this._popperNode);
|
|
}
|
|
}, {
|
|
key: '_destroy',
|
|
value: function _destroy() {
|
|
if (this._popperParentNode) {
|
|
// unmount component
|
|
_reactDom2.default.unmountComponentAtNode(this._popperParentNode);
|
|
|
|
// clean up DOM
|
|
this._popperParentNode.parentNode.removeChild(this._popperNode);
|
|
}
|
|
|
|
if (this._popper) {
|
|
this._popper.destroy();
|
|
}
|
|
|
|
this._popperNode = null;
|
|
this._popper = null;
|
|
}
|
|
}, {
|
|
key: '_renderPopper',
|
|
value: function _renderPopper() {
|
|
var _this2 = this;
|
|
|
|
var lastProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
|
|
var popperChild = _react.Children.toArray(this.props.children)[1];
|
|
|
|
// if no popper child provided, bail out
|
|
if (!popperChild) {
|
|
// destroy Popper element if it has been created
|
|
this._destroy();
|
|
return;
|
|
}
|
|
|
|
// render element component into the DOM
|
|
_reactDom2.default.unstable_renderSubtreeIntoContainer(this, popperChild, this._popperNode, function () {
|
|
// don't update Popper until the subtree has finished rendering
|
|
_this2._updatePopperNode(lastProps);
|
|
_this2._updatePopper(lastProps);
|
|
});
|
|
}
|
|
}, {
|
|
key: '_updatePopperNode',
|
|
value: function _updatePopperNode(lastProps) {
|
|
var _this3 = this;
|
|
|
|
var _props = this.props;
|
|
var id = _props.id;
|
|
var className = _props.className;
|
|
var style = _props.style;
|
|
|
|
|
|
if (lastProps.id !== id) {
|
|
this._popperNode.id = id;
|
|
}
|
|
|
|
if (lastProps.className !== className) {
|
|
this._popperNode.className = className;
|
|
}
|
|
|
|
if (style) {
|
|
Object.keys(style).forEach(function (key) {
|
|
_this3._popperNode.style[key] = style[key];
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: '_updatePopper',
|
|
value: function _updatePopper(lastProps) {
|
|
var _props2 = this.props;
|
|
var placement = _props2.placement;
|
|
var gpuAcceleration = _props2.gpuAcceleration;
|
|
var boundariesElement = _props2.boundariesElement;
|
|
var boundariesPadding = _props2.boundariesPadding;
|
|
var modifiers = _props2.modifiers;
|
|
|
|
// TODO: check if props changed here, no need to update if nothing has changed
|
|
|
|
// destroy any prior popper instance
|
|
|
|
if (this._popper) {
|
|
this._popper.destroy();
|
|
}
|
|
|
|
this._popper = new _popper2.default(this._referenceNode, this._popperNode, {
|
|
placement: placement,
|
|
gpuAcceleration: gpuAcceleration,
|
|
boundariesElement: boundariesElement,
|
|
boundariesPadding: boundariesPadding,
|
|
modifiers: modifiers
|
|
});
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
return _react.Children.toArray(this.props.children)[0];
|
|
}
|
|
}, {
|
|
key: '_popperParentNode',
|
|
get: function get() {
|
|
var renderPopperTo = this.props.renderPopperTo;
|
|
|
|
if (typeof renderPopperTo === 'string') {
|
|
return document.querySelector(renderPopperTo);
|
|
} else {
|
|
return renderPopperTo || document.body;
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return PopperComponent;
|
|
}(_react.Component);
|
|
|
|
PopperComponent.defaultProps = {
|
|
popperTag: 'div',
|
|
renderPopperTo: null,
|
|
arrow: true,
|
|
placement: 'bottom',
|
|
gpuAcceleration: true,
|
|
boundariesElement: 'viewport',
|
|
boundariesPadding: 5,
|
|
modifiers: {}
|
|
};
|
|
exports.default = PopperComponent; |