react-behave/build/cjs/usePopper/usePopper.js

A library of behaviors for React applications.

"use strict";

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

var _lodash = _interopRequireDefault(require("lodash.isequal"));

var _popper = _interopRequireDefault(require("popper.js"));

var _react = _interopRequireDefault(require("react"));

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

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var INITIAL_STATE = {
  arrowStyle: {},
  outOfBoundaries: false,
  placement: null,
  style: {
    position: 'absolute',
    top: 0,
    left: 0,
    opacity: 0,
    pointerEvents: 'none'
  }
};

function updateState(newState) {
  return function (state) {
    // `state` and `newState` might have different references and still be deeply
    // equal due to Popper.js.
    var arrowStyle = getCurrentValue(state.arrowStyle, newState.arrowStyles);
    var outOfBoundaries = newState.hide;
    var placement = newState.placement;
    var style = getCurrentValue(state.style, newState.styles);
    return arrowStyle === state.arrowStyle && outOfBoundaries === state.outOfBoundaries && placement === state.placement && style === state.style ? state : {
      arrowStyle: arrowStyle,
      outOfBoundaries: outOfBoundaries,
      placement: placement,
      style: style
    };
  };
}

function getCurrentValue(value, newValue) {
  return (0, _lodash["default"])(value, newValue) ? value : newValue;
}

var DEFAULT_MODIFIERS = {};
usePopper.PLACEMENTS = _popper["default"].placements;

function usePopper(referenceRef, popperRef) {
  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      arrowRef = _ref.arrowRef,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
      _ref$modifiers = _ref.modifiers,
      modifiers = _ref$modifiers === void 0 ? DEFAULT_MODIFIERS : _ref$modifiers,
      _ref$eventsEnabled = _ref.eventsEnabled,
      eventsEnabled = _ref$eventsEnabled === void 0 ? true : _ref$eventsEnabled,
      _ref$positionFixed = _ref.positionFixed,
      positionFixed = _ref$positionFixed === void 0 ? false : _ref$positionFixed;

  var popperJSRef = _react["default"].useRef(null);

  var _React$useState = _react["default"].useState(INITIAL_STATE),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      state = _React$useState2[0],
      setState = _React$useState2[1];

  _react["default"].useEffect(function () {
    if (!disabled && referenceRef.current != null && popperRef.current != null) {
      popperJSRef.current = new _popper["default"](referenceRef.current, popperRef.current, {
        placement: placement,
        eventsEnabled: eventsEnabled,
        positionFixed: positionFixed,
        modifiers: Object.assign({}, modifiers, {
          arrow: Object.assign({
            enabled: arrowRef != null && arrowRef.current != null,
            element: arrowRef == null ? null : arrowRef.current
          }, modifiers.arrow),
          applyStyle: {
            // We apply the styles ourselves.
            enabled: false
          },
          updateStateModifier: {
            enabled: true,
            // The same as `applyStyle`.
            // https://popper.js.org/popper-documentation.html#modifiers..applyStyle.order
            order: 900,
            fn: function fn(data) {
              // The popper element might have lost his parent during the
              // computation of the position.
              // It can be due to a fast removal of the popper.
              // In case it happenned we don't dispatch the computed state.
              if (data.instance.popper.parentElement != null) {
                setState(updateState(data));
              }

              return data;
            }
          }
        })
      });
      return function () {
        setState(INITIAL_STATE);
        popperJSRef.current.destroy();
        popperJSRef.current = null;
      };
    }
  }, // 'arrowRef', 'popperRef', and 'referenceRef' are React Ref objects.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [disabled, placement, modifiers, eventsEnabled, positionFixed]);

  var scheduleUpdate = _react["default"].useCallback(function () {
    if (popperJSRef.current != null) {
      popperJSRef.current.scheduleUpdate();
    }
  }, []);

  return Object.assign({}, state, {
    scheduleUpdate: scheduleUpdate
  });
}