@skbkontur/react-ui 0.0.0-3974a633b4 → 0.0.0-444dd4e7b3

package/internal/Popup/Popup/Popup.js

@@ -4,28 +4,24 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
       };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
   }
 
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function _unsupportedIterableToArray(o, minLen) {
@@ -50,20 +46,26 @@ function _arrayLikeToArray(arr, len) {
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
-import raf from 'raf';
 import warning from 'warning';
+import { globalObject } from '@skbkontur/global-object';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ZIndex } from "../../ZIndex";
 import { RenderContainer } from "../../RenderContainer";
-import { isFunction, isNonNullable, isRefableElement } from "../../../lib/utils";
+import { getRandomID, isFunction, isNonNullable, isNullable, isRefableElement } from "../../../lib/utils";
 import { isIE11, isEdge, isSafari } from "../../../lib/client";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { isHTMLElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
+import { safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
+import { MobilePopup } from "../../MobilePopup";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { callChildRef } from "../../../lib/callChildRef/callChildRef";
+import { isInstanceWithAnchorElement } from "../../../lib/InstanceWithAnchorElement";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isInstanceOf } from "../../../lib/isInstanceOf";
 import { PopupPin } from "../PopupPin";
 import { PopupHelper } from "../PopupHelper";
 import { styles } from "../Popup.styles";
@@ -74,14 +76,23 @@ var TRANSITION_TIMEOUT = {
 };
 export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
 export var DefaultPosition = PopupPositions[0];
-var DUMMY_LOCATION = {
+export var DUMMY_LOCATION = {
   position: DefaultPosition,
   coordinates: {
     top: -9999,
     left: -9999
   }
 };
-export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+export var PopupDataTids = {
+  root: 'Popup__root',
+  content: 'PopupContent',
+  contentInner: 'PopupContentInner',
+  popupPin: 'PopupPin__root'
+};
+export var PopupIds = {
+  root: PopupDataTids.root
+};
+export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Popup, _React$Component);
 
   function Popup() {
@@ -92,19 +103,27 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Popup.defaultProps);
     _this.state = {
       location: _this.props.opened ? DUMMY_LOCATION : null
     };
-    _this.theme = void 0;
-    _this.layoutEventsToken = void 0;
     _this.locationUpdateId = null;
-    _this.lastPopupElement = void 0;
-    _this.anchorElement = null;
-    _this.setRootNode = void 0;
     _this.refForTransition = /*#__PURE__*/React.createRef();
+    _this.hasAnchorElementListeners = false;
+    _this.rootId = PopupIds.root + getRandomID();
+    _this.anchorElement = null;
 
-    _this.renderContainerRef = function (childInstance) {
-      _this.updateAnchorElement(childInstance);
+    _this.updateAnchorElement = function (instance) {
+      var childDomNode = isInstanceWithAnchorElement(instance) ? instance.getAnchorElement() : getRootNode(instance);
+      var anchorElement = _this.anchorElement;
+
+      if (childDomNode !== anchorElement) {
+        _this.removeEventListeners(anchorElement);
+
+        _this.anchorElement = childDomNode;
+
+        _this.addEventListeners(childDomNode);
+      }
     };
 
     _this.handleMouseEnter = function (event) {
@@ -139,12 +158,32 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
 
     _this.calculateWidth = function (width) {
       if (typeof width === 'string' && width.includes('%')) {
-        return _this.anchorElement ? _this.anchorElement.offsetWidth * parseFloat(width) / 100 : 0;
+        var anchorWidth = Math.floor(getDOMRect(_this.anchorElement).width);
+        return _this.anchorElement ? anchorWidth * parseFloat(width) / 100 : 0;
       }
 
       return width;
     };
 
+    _this.content = function (children) {
+      var backgroundColor = _this.props.backgroundColor;
+
+      var width = _this.getProps().width;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.content(_this.theme),
+        "data-tid": PopupDataTids.content,
+        ref: _this.refForTransition
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.contentInner(_this.theme),
+        style: {
+          backgroundColor: backgroundColor,
+          width: _this.calculateWidth(width)
+        },
+        "data-tid": PopupDataTids.contentInner
+      }, children));
+    };
+
     _this.resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
 
@@ -174,6 +213,10 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
 
       var location = _this.getLocation(popupElement, _this.state.location);
 
+      if (location) {
+        _this.props.onPositionChange == null ? void 0 : _this.props.onPositionChange(location == null ? void 0 : location.position);
+      }
+
       if (!_this.locationEquals(_this.state.location, location)) {
         _this.setState({
           location: location
@@ -189,6 +232,10 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   _proto.componentDidMount = function componentDidMount() {
     this.updateLocation();
     this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
+
+    if (!this.hasAnchorElementListeners) {
+      this.addEventListeners(this.anchorElement);
+    }
   };
 
   Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
@@ -215,6 +262,12 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     var hasLocation = this.state.location !== DUMMY_LOCATION;
     var wasClosed = prevProps.opened && !this.props.opened;
 
+    if (this.isMobileLayout && prevState.location === null && this.state.location === null) {
+      this.setState({
+        location: DUMMY_LOCATION
+      });
+    }
+
     if (this.props.opened && hadNoLocation && hasLocation && this.props.onOpen) {
       this.props.onOpen();
     }
@@ -230,7 +283,10 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     this.cancelDelayedUpdateLocation();
-    this.removeEventListeners(this.anchorElement);
+
+    if (this.hasAnchorElementListeners) {
+      this.removeEventListeners(this.anchorElement);
+    }
 
     if (this.layoutEventsToken) {
       this.layoutEventsToken.remove();
@@ -251,16 +307,25 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     });
   };
 
+  _proto.renderMobile = function renderMobile() {
+    var opened = this.props.opened;
+    var children = this.renderChildren();
+    return children ? /*#__PURE__*/React.createElement(MobilePopup, {
+      opened: opened,
+      withoutRenderContainer: true,
+      onCloseRequest: this.props.mobileOnCloseRequest
+    }, this.content(children)) : null;
+  };
+
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
     var location = this.state.location;
-    var _this$props = this.props,
-        anchorElement = _this$props.anchorElement,
-        useWrapper = _this$props.useWrapper;
+    var anchorElement = this.props.anchorElement;
+    var useWrapper = this.getProps().useWrapper;
     var anchor = null;
 
-    if (isHTMLElement(anchorElement)) {
+    if (isInstanceOf(anchorElement, globalObject.Element)) {
       this.updateAnchorElement(anchorElement);
     } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
       anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
@@ -280,59 +345,56 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     }) : null; // we need to get anchor's DOM node
     // so we either set our own ref on it via cloning
     // or relay on findDOMNode (inside getRootNode)
-    // which should be called with RenderContainer's ref
+    // which should be called within updateAnchorElement
     // in the case when the anchor is not refable
 
-    var canGetAnchorNode = !!anchorWithRef || isHTMLElement(anchorElement);
+    var canGetAnchorNode = !!anchorWithRef || isInstanceOf(anchorElement, globalObject.Element);
     return /*#__PURE__*/React.createElement(RenderContainer, {
       anchor: anchorWithRef || anchor,
-      ref: canGetAnchorNode ? null : this.renderContainerRef
-    }, location && this.renderContent(location));
+      ref: canGetAnchorNode ? null : this.updateAnchorElement
+    }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));
   };
 
-  _proto.updateAnchorElement = function updateAnchorElement(childInstance) {
-    var childDomNode = getRootNode(childInstance);
-    var anchorElement = this.anchorElement;
+  _proto.addEventListeners = function addEventListeners(element) {
+    if (element && isInstanceOf(element, globalObject.Element)) {
+      // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.addEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
 
-    if (childDomNode !== anchorElement) {
-      this.removeEventListeners(anchorElement);
-      this.anchorElement = childDomNode;
-      this.addEventListeners(childDomNode);
-      this.setRootNode(childDomNode);
-    }
-  };
+      element.addEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
 
-  _proto.addEventListeners = function addEventListeners(element) {
-    if (element && isHTMLElement(element)) {
-      element.addEventListener('mouseenter', this.handleMouseEnter);
-      element.addEventListener('mouseleave', this.handleMouseLeave);
       element.addEventListener('click', this.handleClick);
       element.addEventListener('focusin', this.handleFocus);
       element.addEventListener('focusout', this.handleBlur);
+      this.hasAnchorElementListeners = true;
     }
   };
 
   _proto.removeEventListeners = function removeEventListeners(element) {
-    if (element && isHTMLElement(element)) {
-      element.removeEventListener('mouseenter', this.handleMouseEnter);
-      element.removeEventListener('mouseleave', this.handleMouseLeave);
+    if (element && isInstanceOf(element, globalObject.Element)) {
+      // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.removeEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
+
+      element.removeEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+
       element.removeEventListener('click', this.handleClick);
       element.removeEventListener('focusin', this.handleFocus);
       element.removeEventListener('focusout', this.handleBlur);
+      this.hasAnchorElementListeners = false;
     }
   };
 
   _proto.renderContent = function renderContent(location) {
     var _this4 = this;
 
-    var _this$props2 = this.props,
-        backgroundColor = _this$props2.backgroundColor,
-        disableAnimations = _this$props2.disableAnimations,
-        maxWidth = _this$props2.maxWidth,
-        hasShadow = _this$props2.hasShadow,
-        ignoreHover = _this$props2.ignoreHover,
-        opened = _this$props2.opened,
-        width = _this$props2.width;
+    var _this$props = this.props,
+        maxWidth = _this$props.maxWidth,
+        opened = _this$props.opened;
+
+    var _this$getProps = this.getProps(),
+        hasShadow = _this$getProps.hasShadow,
+        disableAnimations = _this$getProps.disableAnimations,
+        ignoreHover = _this$getProps.ignoreHover;
+
     var children = this.renderChildren();
 
     var _PopupHelper$getPosit = PopupHelper.getPositionObject(location.position),
@@ -354,27 +416,20 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       onExited: this.resetLocation,
       nodeRef: this.refForTransition
     }, function (state) {
-      var _extends2, _ref;
+      var _this4$props$id, _extends2, _ref;
 
-      return /*#__PURE__*/React.createElement(CommonWrapper, _this4.props, /*#__PURE__*/React.createElement(ZIndex, {
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({}, _this4.props, {
+        rootNodeRef: _this4.setRootNode
+      }), /*#__PURE__*/React.createElement(ZIndex, {
+        id: (_this4$props$id = _this4.props.id) != null ? _this4$props$id : _this4.rootId,
+        "data-tid": PopupDataTids.root,
         wrapperRef: _this4.refPopupElement,
         priority: 'Popup',
         className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this4.theme)] = true, _extends2[styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[styles["transition-enter-" + direction](_this4.theme)] = true, _ref[styles.transitionEnter()] = state === 'entering', _ref[styles.transitionEnterActive()] = state === 'entered', _ref[styles.transitionExit()] = state === 'exiting', _ref))),
         style: rootStyle,
         onMouseEnter: _this4.handleMouseEnter,
         onMouseLeave: _this4.handleMouseLeave
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.content(_this4.theme),
-        "data-tid": 'PopupContent',
-        ref: _this4.refForTransition
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.contentInner(_this4.theme),
-        style: {
-          backgroundColor: backgroundColor,
-          width: _this4.calculateWidth(width)
-        },
-        "data-tid": 'PopupContentInner'
-      }, children)), _this4.renderPin(location.position)));
+      }, _this4.content(children), (!_this4.isMobileLayout || _this4.props.withoutMobile) && _this4.renderPin(location.position)));
     });
   };
 
@@ -390,13 +445,17 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     */
     var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;
     var pinBorder = isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;
-    var _this$props3 = this.props,
-        pinSize = _this$props3.pinSize,
-        hasShadow = _this$props3.hasShadow,
-        backgroundColor = _this$props3.backgroundColor,
-        borderColor = _this$props3.borderColor;
+    var _this$props2 = this.props,
+        pinSize = _this$props2.pinSize,
+        backgroundColor = _this$props2.backgroundColor,
+        borderColor = _this$props2.borderColor;
+
+    var _this$getProps2 = this.getProps(),
+        hasShadow = _this$getProps2.hasShadow,
+        hasPin = _this$getProps2.hasPin;
+
     var position = PopupHelper.getPositionObject(positionName);
-    return this.props.hasPin && /*#__PURE__*/React.createElement(PopupPin, {
+    return hasPin && /*#__PURE__*/React.createElement(PopupPin, {
       popupElement: this.lastPopupElement,
       popupPosition: positionName,
       size: pinSize || parseInt(this.theme.popupPinSize),
@@ -409,12 +468,12 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
 
   _proto.delayUpdateLocation = function delayUpdateLocation() {
     this.cancelDelayedUpdateLocation();
-    this.locationUpdateId = raf(this.updateLocation);
+    this.locationUpdateId = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(this.updateLocation);
   };
 
   _proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {
     if (this.locationUpdateId) {
-      raf.cancel(this.locationUpdateId);
+      globalObject.cancelAnimationFrame == null ? void 0 : globalObject.cancelAnimationFrame(this.locationUpdateId);
       this.locationUpdateId = null;
     }
   };
@@ -424,7 +483,7 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       return true;
     }
 
-    if (x == null || y == null) {
+    if (isNullable(x) || isNullable(y)) {
       return false;
     }
 
@@ -438,13 +497,13 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   };
 
   _proto.getLocation = function getLocation(popupElement, location) {
-    var _this$props4 = this.props,
-        positions = _this$props4.positions,
-        tryPreserveFirstRenderedPosition = _this$props4.tryPreserveFirstRenderedPosition;
+    var _this$props3 = this.props,
+        positions = _this$props3.positions,
+        tryPreserveFirstRenderedPosition = _this$props3.tryPreserveFirstRenderedPosition;
     var anchorElement = this.anchorElement;
-    warning(anchorElement && isHTMLElement(anchorElement), 'Anchor element is not defined or not instance of HTMLElement');
+    warning(anchorElement && isInstanceOf(anchorElement, globalObject.Element), 'Anchor element is not defined or not instance of Element');
 
-    if (!(anchorElement && isHTMLElement(anchorElement))) {
+    if (!(anchorElement && isInstanceOf(anchorElement, globalObject.Element))) {
       return location;
     }
 
@@ -493,7 +552,7 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   };
 
   _proto.getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {
-    if (!this.props.hasPin || /center|middle/.test(position.align)) {
+    if (!this.getProps().hasPin || /center|middle/.test(position.align)) {
       return 0;
     }
 
@@ -506,7 +565,7 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     var marginFromProps = this.props.margin;
     var margin = isNonNullable(marginFromProps) && !isNaN(marginFromProps) ? marginFromProps : parseInt(this.theme.popupMargin) || 0;
     var position = PopupHelper.getPositionObject(positionName);
-    var popupOffset = this.props.popupOffset + this.getPinnedPopupOffset(anchorRect, position);
+    var popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
 
     switch (position.direction) {
       case 'top':
@@ -596,9 +655,7 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   /**
   * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
   */
-  anchorElement: PropTypes.oneOfType([safePropTypesInstanceOf(function () {
-    return HTMLElement;
-  }), PropTypes.node]).isRequired,
+  anchorElement: PropTypes.oneOfType([safePropTypesInstanceOf(globalObject.HTMLElement), PropTypes.node]).isRequired,
 
   /**
   * Фон попапа и пина
@@ -661,4 +718,4 @@ export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   useWrapper: false,
   ignoreHover: false,
   width: 'auto'
-}, _temp)) || _class;
+}, _class2.defaultRootNode = null, _temp)) || _class) || _class;