react-elegant-ui/esm/components/Popup/_target/Popup_target_anchor.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { withHOCConstructor } from '../../../lib/compose';
import { filterObject } from '../../../lib/filterObject';
import { mergeRefsAsCallback } from '../../../lib/mergeRefs';
import { getDisplayName } from '../../../lib/getDisplayName';
import { usePopper, directions } from '../../../hooks/behavior/usePopper';
import { useLiveRef } from '../../../hooks/useLiveRef';
import { useMergeContext } from '../../../hooks/useMergeContext';
import { useEqualMemo } from '../../../hooks/useEqualMemo';
import { useRefHost } from '../../../hooks/useRefHost';
import { TailContext } from '../Tail/Popup-Tail';
/**
 * Mod to set position relative of element specified as `anchor`
 * @param {IModPopupTargetAnchor} props
 */
export var withModPopupTargetAnchor = withHOCConstructor({
  matchProps: {
    target: 'anchor'
  },
  privateProps: ['anchor', 'boundary', 'direction', 'mainOffset', 'modifiers', 'motionless', 'secondaryOffset', 'tailOffset', 'target', 'viewportOffset']
}, function (Popup) {
  var WithTargetAnchor = function (props) {
    var anchor = props.anchor,
      _a = props.direction,
      direction = _a === void 0 ? directions : _a,
      hasTail = props.hasTail,
      _b = props.mainOffset,
      mainOffset = _b === void 0 ? hasTail ? 0 : 4 : _b,
      modifiers = props.modifiers,
      motionless = props.motionless,
      secondaryOffset = props.secondaryOffset,
      style = props.style,
      tailOffset = props.tailOffset,
      target = props.target,
      viewportOffset = props.viewportOffset,
      _c = props.visible,
      visible = _c === void 0 ? false : _c,
      innerRef = props.innerRef,
      tailRef = props.tailRef,
      boundary = props.boundary,
      UNSTABLE_updatePosition = props.UNSTABLE_updatePosition,
      otherProps = __rest(props, ["anchor", "direction", "hasTail", "mainOffset", "modifiers", "motionless", "secondaryOffset", "style", "tailOffset", "target", "viewportOffset", "visible", "innerRef", "tailRef", "boundary", "UNSTABLE_updatePosition"]);
    // It's fatal error
    if (anchor === undefined) {
      throw Error('anchor is undefined');
    }
    var _d = __read(useLiveRef(null), 2),
      popupRef = _d[0],
      setPopupRef = _d[1];
    var _e = __read(useLiveRef(null), 2),
      arrowRef = _e[0],
      setArrowRef = _e[1];
    var _f = usePopper({
        anchorRef: anchor,
        popupRef: popupRef,
        arrowRef: arrowRef,
        boundary: boundary,
        children: otherProps.children,
        placement: direction,
        motionless: motionless,
        enabled: visible,
        marginThreshold: viewportOffset,
        modifiers: modifiers,
        offset: [secondaryOffset, mainOffset],
        UNSAFE_tailOffset: tailOffset
      }),
      _g = _f.styles,
      styles = _g === void 0 ? {} : _g,
      _h = _f.attributes,
      attributes = _h === void 0 ? {} : _h,
      popper = _f.popper;
    var updatePosition = useCallback(function () {
      if (popper === null) return;
      popper.update();
    }, [popper]);
    useRefHost(UNSTABLE_updatePosition, updatePosition);
    var innerRefMix = useMemo(function () {
      return mergeRefsAsCallback(setPopupRef, innerRef);
    }, [setPopupRef, innerRef]);
    var tailRefMix = useMemo(function () {
      return mergeRefsAsCallback(setArrowRef, tailRef);
    }, [setArrowRef, tailRef]);
    var popperAttributes = useEqualMemo(function () {
      return filterObject(attributes.popper || {}, function (value) {
        return value !== false;
      });
    }, [attributes.popper]);
    var tailContextCache = useEqualMemo(function () {
      return {
        style: styles.arrow
      };
    }, [styles.arrow]);
    var tailContextValue = useMergeContext(TailContext, tailContextCache);
    // Update anchor ref. Clear, when it is not instance of `HTMLElement`
    // It need to support virtual anchor for "popperjs"
    var anchorRef = useRef(null);
    useEffect(function () {
      anchorRef.current = anchor.current instanceof HTMLElement ? anchor.current : null;
    }, [anchor]);
    return /*#__PURE__*/React.createElement(TailContext.Provider, {
      value: tailContextValue
    }, /*#__PURE__*/React.createElement(Popup, __assign({}, popperAttributes, otherProps, {
      hasTail: hasTail,
      innerRef: innerRefMix,
      style: __assign(__assign({}, style), styles.popper),
      tailRef: tailRefMix,
      essentialRefs: [anchorRef],
      visible: visible
    })));
  };
  WithTargetAnchor.displayName = "withTargetAnchor(".concat(getDisplayName(Popup), ")");
  return WithTargetAnchor;
});