@skbkontur/react-ui 0.0.0-80ce75eca6 → 0.0.0-85ea551f96

package/internal/Popup/Popup/Popup.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
+var _class, _class2, _temp;
+
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it;
 
@@ -46,38 +48,40 @@ function _arrayLikeToArray(arr, len) {
 }
 
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import raf from 'raf';
 import warning from 'warning';
-import cn from 'classnames';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ZIndex } from "../../ZIndex";
 import { RenderContainer } from "../../RenderContainer";
-import { isFunction } from "../../../lib/utils";
-import { isIE11, isEdge } from "../../../lib/client";
+import { isFunction, isNonNullable, isRefableElement } from "../../../lib/utils";
+import { isIE11, isEdge, isSafari } from "../../../lib/client";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isHTMLElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { PopupPin } from "../PopupPin";
 import { PopupHelper } from "../PopupHelper";
-import { jsStyles } from "../Popup.styles";
+import { styles } from "../Popup.styles";
 var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
 var TRANSITION_TIMEOUT = {
   enter: 0,
   exit: 200
 };
+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 = {
-  position: 'top left',
+  position: DefaultPosition,
   coordinates: {
     top: -9999,
     left: -9999
   }
 };
-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 Popup = /*#__PURE__*/function (_React$Component) {
+export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Popup, _React$Component);
 
   function Popup() {
@@ -96,16 +100,11 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     _this.locationUpdateId = null;
     _this.lastPopupElement = void 0;
     _this.anchorElement = null;
-    _this.anchorInstance = void 0;
-
-    _this.refAnchorElement = function (instance) {
-      _this.anchorInstance = instance;
+    _this.setRootNode = void 0;
+    _this.refForTransition = /*#__PURE__*/React.createRef();
 
-      var element = _this.extractElement(instance);
-
-      _this.updateAnchorElement(element);
-
-      _this.anchorElement = element;
+    _this.renderContainerRef = function (childInstance) {
+      _this.updateAnchorElement(childInstance);
     };
 
     _this.handleMouseEnter = function (event) {
@@ -138,18 +137,24 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       }
     };
 
+    _this.calculateWidth = function (width) {
+      if (typeof width === 'string' && width.includes('%')) {
+        return _this.anchorElement ? _this.anchorElement.offsetWidth * parseFloat(width) / 100 : 0;
+      }
+
+      return width;
+    };
+
     _this.resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
 
-      _this.setState({
+      _this.state.location !== null && _this.setState({
         location: null
       });
     };
 
-    _this.refPopupElement = function (zIndex) {
-      if (zIndex) {
-        _this.lastPopupElement = zIndex && findDOMNode(zIndex);
-      }
+    _this.refPopupElement = function (element) {
+      _this.lastPopupElement = element;
     };
 
     _this.handleLayoutEvent = function () {
@@ -157,10 +162,6 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      if (_this.anchorInstance) {
-        _this.updateAnchorElement(_this.extractElement(_this.anchorInstance));
-      }
-
       _this.updateLocation();
     };
 
@@ -190,32 +191,41 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
   };
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    /**
-    * Delaying updateLocation to ensure it happens after props update
+  Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    /**
+    * Delaying updateLocation to ensure it happens after props update
     */
-    if (nextProps.opened) {
-      if (!this.state.location) {
-        this.setState({
+    if (props.opened) {
+      if (!state.location) {
+        return {
           location: DUMMY_LOCATION
-        });
+        };
       }
-
-      this.delayUpdateLocation();
+    } else if (state.location) {
+      return {
+        location: DUMMY_LOCATION
+      };
     }
+
+    return state;
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
     var hadNoLocation = prevState.location === DUMMY_LOCATION;
     var hasLocation = this.state.location !== DUMMY_LOCATION;
+    var wasClosed = prevProps.opened && !this.props.opened;
 
-    if (hadNoLocation && hasLocation && this.props.onOpen) {
+    if (this.props.opened && hadNoLocation && hasLocation && this.props.onOpen) {
       this.props.onOpen();
     }
 
-    if (!hadNoLocation && !this.state.location && this.props.onClose) {
+    if (wasClosed && !hasLocation && this.props.onClose) {
       this.props.onClose();
     }
+
+    if (this.props.opened) {
+      this.delayUpdateLocation();
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -242,42 +252,53 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   _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 child = null;
+    var anchor = null;
 
     if (isHTMLElement(anchorElement)) {
       this.updateAnchorElement(anchorElement);
     } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
-      child = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
+      anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
     } else {
-      child = /*#__PURE__*/React.createElement("span", null, anchorElement);
+      anchor = /*#__PURE__*/React.createElement("span", null, anchorElement);
     }
 
-    return /*#__PURE__*/React.createElement(RenderContainer, {
-      anchor: child,
-      ref: child ? this.refAnchorElement : undefined
-    }, location && this.renderContent(location));
-  };
+    var anchorWithRef = anchor && /*#__PURE__*/React.isValidElement(anchor) && isRefableElement(anchor) ? /*#__PURE__*/React.cloneElement(anchor, {
+      ref: function ref(instance) {
+        var _anchor;
 
-  _proto.extractElement = function extractElement(instance) {
-    if (!instance) {
-      return null;
-    }
+        _this3.updateAnchorElement(instance);
+
+        var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;
+        originalRef && callChildRef(originalRef, instance);
+      }
+    }) : 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
+    // in the case when the anchor is not refable
 
-    var element = findDOMNode(instance);
-    return isHTMLElement(element) ? element : null;
+    var canGetAnchorNode = !!anchorWithRef || isHTMLElement(anchorElement);
+    return /*#__PURE__*/React.createElement(RenderContainer, {
+      anchor: anchorWithRef || anchor,
+      ref: canGetAnchorNode ? null : this.renderContainerRef
+    }, location && this.renderContent(location));
   };
 
-  _proto.updateAnchorElement = function updateAnchorElement(element) {
+  _proto.updateAnchorElement = function updateAnchorElement(childInstance) {
+    var childDomNode = getRootNode(childInstance);
     var anchorElement = this.anchorElement;
 
-    if (element !== anchorElement) {
+    if (childDomNode !== anchorElement) {
       this.removeEventListeners(anchorElement);
-      this.anchorElement = element;
-      this.addEventListeners(element);
+      this.anchorElement = childDomNode;
+      this.addEventListeners(childDomNode);
+      this.setRootNode(childDomNode);
     }
   };
 
@@ -302,7 +323,7 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderContent = function renderContent(location) {
-    var _this3 = this;
+    var _this4 = this;
 
     var _this$props2 = this.props,
         backgroundColor = _this$props2.backgroundColor,
@@ -310,7 +331,8 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
         maxWidth = _this$props2.maxWidth,
         hasShadow = _this$props2.hasShadow,
         ignoreHover = _this$props2.ignoreHover,
-        opened = _this$props2.opened;
+        opened = _this$props2.opened,
+        width = _this$props2.width;
     var children = this.renderChildren();
 
     var _PopupHelper$getPosit = PopupHelper.getPositionObject(location.position),
@@ -320,6 +342,7 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       maxWidth: maxWidth
     });
 
+    var shouldFallbackShadow = isIE11 || isEdge || isSafari;
     return /*#__PURE__*/React.createElement(Transition, {
       timeout: TRANSITION_TIMEOUT,
       appear: !disableAnimations,
@@ -328,27 +351,30 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       unmountOnExit: true,
       enter: !disableAnimations,
       exit: !disableAnimations,
-      onExited: this.resetLocation
+      onExited: this.resetLocation,
+      nodeRef: this.refForTransition
     }, function (state) {
       var _extends2, _ref;
 
-      return /*#__PURE__*/React.createElement(CommonWrapper, _this3.props, /*#__PURE__*/React.createElement(ZIndex, {
-        ref: _this3.refPopupElement,
+      return /*#__PURE__*/React.createElement(CommonWrapper, _this4.props, /*#__PURE__*/React.createElement(ZIndex, {
+        wrapperRef: _this4.refPopupElement,
         priority: 'Popup',
-        className: cn(_extends((_extends2 = {}, _extends2[jsStyles.popup(_this3.theme)] = true, _extends2[jsStyles.shadow(_this3.theme)] = hasShadow, _extends2[jsStyles.shadowFallback(_this3.theme)] = hasShadow && (isIE11 || isEdge), _extends2[jsStyles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[jsStyles["transition-enter-" + direction](_this3.theme)] = true, _ref[jsStyles.transitionEnter()] = state === 'entering', _ref[jsStyles.transitionEnterActive()] = state === 'entered', _ref[jsStyles.transitionExit()] = state === 'exiting', _ref))),
+        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: _this3.handleMouseEnter,
-        onMouseLeave: _this3.handleMouseLeave
+        onMouseEnter: _this4.handleMouseEnter,
+        onMouseLeave: _this4.handleMouseLeave
       }, /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.content(_this3.theme),
-        "data-tid": 'PopupContent'
+        className: styles.content(_this4.theme),
+        "data-tid": 'PopupContent',
+        ref: _this4.refForTransition
       }, /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.contentInner(_this3.theme),
+        className: styles.contentInner(_this4.theme),
         style: {
-          backgroundColor: backgroundColor
+          backgroundColor: backgroundColor,
+          width: _this4.calculateWidth(width)
         },
         "data-tid": 'PopupContentInner'
-      }, children)), _this3.renderPin(location.position)));
+      }, children)), _this4.renderPin(location.position)));
     });
   };
 
@@ -356,11 +382,11 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     return isFunction(this.props.children) ? this.props.children() : this.props.children;
   };
 
-  _proto.renderPin = function renderPin(position) {
-    /**
-    * Box-shadow does not appear under the pin. Borders are used instead.
-    * In non-ie browsers drop-shadow filter is used. It is applying
-    * shadow to the pin too.
+  _proto.renderPin = function renderPin(positionName) {
+    /**
+    * Box-shadow does not appear under the pin. Borders are used instead.
+    * In non-ie browsers drop-shadow filter is used. It is applying
+    * shadow to the pin too.
     */
     var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;
     var pinBorder = isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;
@@ -368,13 +394,13 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
         pinSize = _this$props3.pinSize,
         hasShadow = _this$props3.hasShadow,
         backgroundColor = _this$props3.backgroundColor,
-        borderColor = _this$props3.borderColor,
-        pinOffset = _this$props3.pinOffset;
+        borderColor = _this$props3.borderColor;
+    var position = PopupHelper.getPositionObject(positionName);
     return this.props.hasPin && /*#__PURE__*/React.createElement(PopupPin, {
       popupElement: this.lastPopupElement,
-      popupPosition: position,
+      popupPosition: positionName,
       size: pinSize || parseInt(this.theme.popupPinSize),
-      offset: pinOffset || parseInt(this.theme.popupPinOffset),
+      offset: this.getPinOffset(position.align),
       borderWidth: hasShadow ? 1 : 0,
       backgroundColor: backgroundColor || this.theme.popupBackground,
       borderColor: borderColor || pinBorder
@@ -402,11 +428,19 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       return false;
     }
 
-    return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+    if (!isIE11 && !isEdge) {
+      return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+    } // Для ie/edge обновляем позицию только при разнице минимум в 1. Иначе есть вероятность
+    // уйти в бесконечный ререндер
+
+
+    return x.position === y.position && Math.abs(x.coordinates.top - y.coordinates.top) <= 1 && Math.abs(x.coordinates.left - y.coordinates.left) <= 1;
   };
 
   _proto.getLocation = function getLocation(popupElement, location) {
-    var positions = this.props.positions;
+    var _this$props4 = this.props,
+        positions = _this$props4.positions,
+        tryPreserveFirstRenderedPosition = _this$props4.tryPreserveFirstRenderedPosition;
     var anchorElement = this.anchorElement;
     warning(anchorElement && isHTMLElement(anchorElement), 'Anchor element is not defined or not instance of HTMLElement');
 
@@ -425,7 +459,12 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect);
       var canBecomeVisible = !isFullyVisible && PopupHelper.canBecomeFullyVisible(position, coordinates);
 
-      if (isFullyVisible || canBecomeVisible) {
+      if ( // если нужно сохранить первоначальную позицию и Попап целиком
+      // находится в пределах вьюпорта (или может быть проскроллен в него)
+      tryPreserveFirstRenderedPosition && (isFullyVisible || canBecomeVisible) || // если Попап целиком во вьюпорте и в самой приоритетной позиции
+      // (иначе нужно попытаться позицию сменить)
+      isFullyVisible && position === positions[0]) {
+        // сохраняем текущую позицию
         return {
           coordinates: coordinates,
           position: position
@@ -459,14 +498,13 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     }
 
     var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;
-    var _this$props4 = this.props,
-        pinSize = _this$props4.pinSize,
-        pinOffset = _this$props4.pinOffset;
-    return Math.max(0, (pinOffset || parseInt(this.theme.popupPinOffset)) + (pinSize || parseInt(this.theme.popupPinSize)) - anchorSize / 2);
+    var pinSize = this.props.pinSize;
+    return Math.max(0, this.getPinOffset(position.align) + (pinSize || parseInt(this.theme.popupPinSize)) - anchorSize / 2);
   };
 
   _proto.getCoordinates = function getCoordinates(anchorRect, popupRect, positionName) {
-    var margin = this.props.margin || parseInt(this.theme.popupMargin);
+    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);
 
@@ -500,6 +538,27 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     }
   };
 
+  _proto.getPinOffset = function getPinOffset(align) {
+    var pinOffset = this.props.pinOffset;
+
+    switch (align) {
+      case 'top':
+      case 'bottom':
+        return pinOffset || parseInt(this.theme.popupPinOffset) || parseInt(this.theme.popupPinOffsetY);
+
+      case 'left':
+      case 'right':
+        return pinOffset || parseInt(this.theme.popupPinOffset) || parseInt(this.theme.popupPinOffsetX);
+
+      case 'center':
+      case 'middle':
+        return 0;
+
+      default:
+        throw new Error("Unexpected align '" + align + "'");
+    }
+  };
+
   _proto.getHorizontalPosition = function getHorizontalPosition(anchorRect, popupRect, align, popupOffset) {
     switch (align) {
       case 'left':
@@ -533,75 +592,73 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   return Popup;
-}(React.Component);
-Popup.__KONTUR_REACT_UI__ = 'Popup';
-Popup.propTypes = {
-  /**
-  * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.propTypes = {
+  /**
+  * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
   */
   anchorElement: PropTypes.oneOfType([safePropTypesInstanceOf(function () {
     return HTMLElement;
   }), PropTypes.node]).isRequired,
 
-  /**
-  * Фон попапа и пина
+  /**
+  * Фон попапа и пина
   */
   backgroundColor: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 
-  /**
-  * Показывать ли пин
+  /**
+  * Показывать ли пин
   */
   hasPin: PropTypes.bool,
 
-  /**
-  * Применять ли box-shadow на попапе. При false отключает границу на пине
+  /**
+  * Применять ли box-shadow на попапе. При false отключает границу на пине
   */
   hasShadow: PropTypes.bool,
 
-  /**
-  * Отступ попапа от элемента
+  /**
+  * Отступ попапа от элемента
   */
   margin: PropTypes.number,
 
-  /**
-  * Показан или скрыт попап
+  /**
+  * Показан или скрыт попап
   */
   opened: PropTypes.bool,
 
-  /**
-  * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
+  /**
+  * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
   */
   pinOffset: PropTypes.number,
 
-  /**
-  * Сторона пина без учёта границы.
-  * Пин представляет собой равносторонний треугольник, высота от попапа
-  * до "носика" пина будет соответствовать формуле (size* √3)/2
+  /**
+  * Сторона пина без учёта границы.
+  * Пин представляет собой равносторонний треугольник, высота от попапа
+  * до "носика" пина будет соответствовать формуле (size* √3)/2
   */
   pinSize: PropTypes.number,
 
-  /**
-  * смещение попапа относительно родительского элемента
+  /**
+  * смещение попапа относительно родительского элемента
   */
   popupOffset: PropTypes.number,
 
-  /**
-  * С какой стороны показывать попап и край попапа,
-  * на котором будет отображаться пин
+  /**
+  * С какой стороны показывать попап и край попапа,
+  * на котором будет отображаться пин
   */
   positions: PropTypes.array,
 
-  /**
-  * Игнорировать ли события hover/click
+  /**
+  * Игнорировать ли события hover/click
   */
   ignoreHover: PropTypes.bool
-};
-Popup.defaultProps = {
+}, _class2.defaultProps = {
   popupOffset: 0,
   hasPin: false,
   hasShadow: false,
   disableAnimations: isTestEnv,
   useWrapper: false,
-  ignoreHover: false
-};
+  ignoreHover: false,
+  width: 'auto'
+}, _temp)) || _class;