267 lines
No EOL
9.5 KiB
JavaScript
267 lines
No EOL
9.5 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: 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 _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 _propTypes = require('prop-types');
|
|
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
|
|
var _popper = require('popper.js');
|
|
|
|
var _popper2 = _interopRequireDefault(_popper);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
|
|
|
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 noop = function noop() {
|
|
return null;
|
|
};
|
|
|
|
var Popper = function (_Component) {
|
|
_inherits(Popper, _Component);
|
|
|
|
function Popper() {
|
|
var _ref;
|
|
|
|
var _temp, _this, _ret;
|
|
|
|
_classCallCheck(this, Popper);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Popper.__proto__ || Object.getPrototypeOf(Popper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this._setArrowNode = function (node) {
|
|
_this._arrowNode = node;
|
|
}, _this._getTargetNode = function () {
|
|
return _this.context.popperManager.getTargetNode();
|
|
}, _this._getOffsets = function (data) {
|
|
return Object.keys(data.offsets).map(function (key) {
|
|
return data.offsets[key];
|
|
});
|
|
}, _this._isDataDirty = function (data) {
|
|
if (_this.state.data) {
|
|
return JSON.stringify(_this._getOffsets(_this.state.data)) !== JSON.stringify(_this._getOffsets(data));
|
|
} else {
|
|
return true;
|
|
}
|
|
}, _this._updateStateModifier = {
|
|
enabled: true,
|
|
order: 900,
|
|
fn: function fn(data) {
|
|
if (_this._isDataDirty(data)) {
|
|
_this.setState({ data: data });
|
|
}
|
|
return data;
|
|
}
|
|
}, _this._getPopperStyle = function () {
|
|
var data = _this.state.data;
|
|
|
|
// If Popper isn't instantiated, hide the popperElement
|
|
// to avoid flash of unstyled content
|
|
|
|
if (!_this._popper || !data) {
|
|
return {
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
opacity: 0
|
|
};
|
|
}
|
|
|
|
var _data$offsets$popper = data.offsets.popper,
|
|
top = _data$offsets$popper.top,
|
|
left = _data$offsets$popper.left,
|
|
position = _data$offsets$popper.position;
|
|
|
|
|
|
return _extends({
|
|
position: position
|
|
}, data.styles);
|
|
}, _this._getPopperPlacement = function () {
|
|
return !!_this.state.data ? _this.state.data.placement : undefined;
|
|
}, _this._getPopperHide = function () {
|
|
return !!_this.state.data && _this.state.data.hide ? '' : undefined;
|
|
}, _this._getArrowStyle = function () {
|
|
if (!_this.state.data || !_this.state.data.offsets.arrow) {
|
|
return {};
|
|
} else {
|
|
var _this$state$data$offs = _this.state.data.offsets.arrow,
|
|
top = _this$state$data$offs.top,
|
|
left = _this$state$data$offs.left;
|
|
|
|
return { top: top, left: left };
|
|
}
|
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
|
}
|
|
|
|
_createClass(Popper, [{
|
|
key: 'getChildContext',
|
|
value: function getChildContext() {
|
|
return {
|
|
popper: {
|
|
setArrowNode: this._setArrowNode,
|
|
getArrowStyle: this._getArrowStyle
|
|
}
|
|
};
|
|
}
|
|
}, {
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this._updatePopper();
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(lastProps) {
|
|
if (lastProps.placement !== this.props.placement || lastProps.eventsEnabled !== this.props.eventsEnabled) {
|
|
this._updatePopper();
|
|
}
|
|
|
|
if (this._popper && lastProps.children !== this.props.children) {
|
|
this._popper.scheduleUpdate();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this._destroyPopper();
|
|
}
|
|
}, {
|
|
key: '_updatePopper',
|
|
value: function _updatePopper() {
|
|
this._destroyPopper();
|
|
if (this._node) {
|
|
this._createPopper();
|
|
}
|
|
}
|
|
}, {
|
|
key: '_createPopper',
|
|
value: function _createPopper() {
|
|
var _props = this.props,
|
|
placement = _props.placement,
|
|
eventsEnabled = _props.eventsEnabled;
|
|
|
|
var modifiers = _extends({}, this.props.modifiers, {
|
|
applyStyle: { enabled: false },
|
|
updateState: this._updateStateModifier
|
|
});
|
|
|
|
if (this._arrowNode) {
|
|
modifiers.arrow = {
|
|
element: this._arrowNode
|
|
};
|
|
}
|
|
|
|
this._popper = new _popper2.default(this._getTargetNode(), this._node, {
|
|
placement: placement,
|
|
eventsEnabled: eventsEnabled,
|
|
modifiers: modifiers
|
|
});
|
|
|
|
// schedule an update to make sure everything gets positioned correct
|
|
// after being instantiated
|
|
this._popper.scheduleUpdate();
|
|
}
|
|
}, {
|
|
key: '_destroyPopper',
|
|
value: function _destroyPopper() {
|
|
if (this._popper) {
|
|
this._popper.destroy();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props2 = this.props,
|
|
component = _props2.component,
|
|
innerRef = _props2.innerRef,
|
|
placement = _props2.placement,
|
|
eventsEnabled = _props2.eventsEnabled,
|
|
modifiers = _props2.modifiers,
|
|
children = _props2.children,
|
|
restProps = _objectWithoutProperties(_props2, ['component', 'innerRef', 'placement', 'eventsEnabled', 'modifiers', 'children']);
|
|
|
|
var popperRef = function popperRef(node) {
|
|
_this2._node = node;
|
|
if (typeof innerRef === 'function') {
|
|
innerRef(node);
|
|
}
|
|
};
|
|
var popperStyle = this._getPopperStyle();
|
|
var popperPlacement = this._getPopperPlacement();
|
|
var popperHide = this._getPopperHide();
|
|
|
|
if (typeof children === 'function') {
|
|
var _popperProps;
|
|
|
|
var popperProps = (_popperProps = {
|
|
ref: popperRef,
|
|
style: popperStyle
|
|
}, _defineProperty(_popperProps, 'data-placement', popperPlacement), _defineProperty(_popperProps, 'data-x-out-of-boundaries', popperHide), _popperProps);
|
|
return children({
|
|
popperProps: popperProps,
|
|
restProps: restProps,
|
|
scheduleUpdate: this._popper && this._popper.scheduleUpdate
|
|
});
|
|
}
|
|
|
|
var componentProps = _extends({}, restProps, {
|
|
style: _extends({}, restProps.style, popperStyle),
|
|
'data-placement': popperPlacement,
|
|
'data-x-out-of-boundaries': popperHide
|
|
});
|
|
|
|
if (typeof component === 'string') {
|
|
componentProps.ref = popperRef;
|
|
} else {
|
|
componentProps.innerRef = popperRef;
|
|
}
|
|
|
|
return (0, _react.createElement)(component, componentProps, children);
|
|
}
|
|
}]);
|
|
|
|
return Popper;
|
|
}(_react.Component);
|
|
|
|
Popper.contextTypes = {
|
|
popperManager: _propTypes2.default.object.isRequired
|
|
};
|
|
Popper.childContextTypes = {
|
|
popper: _propTypes2.default.object.isRequired
|
|
};
|
|
Popper.propTypes = {
|
|
component: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]),
|
|
innerRef: _propTypes2.default.func,
|
|
placement: _propTypes2.default.oneOf(_popper2.default.placements),
|
|
eventsEnabled: _propTypes2.default.bool,
|
|
modifiers: _propTypes2.default.object,
|
|
children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func])
|
|
};
|
|
Popper.defaultProps = {
|
|
component: 'div',
|
|
placement: 'bottom',
|
|
eventsEnabled: true,
|
|
modifiers: {}
|
|
};
|
|
exports.default = Popper; |