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