@skbkontur/react-ui 0.0.0-dd8159fe6c → 0.0.0-ecefada396

package/internal/Popup/Popup/Popup.js

@@ -0,0 +1,668 @@
+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;
+
+  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++]
+        };
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  it = o[Symbol.iterator]();
+  return it.next.bind(it);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+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 * as LayoutEvents from "../../../lib/LayoutEvents";
+import { ZIndex } from "../../ZIndex";
+import { RenderContainer } from "../../RenderContainer";
+import { isFunction, isNonNullable } 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 { responsiveLayout } from "../../../components/ResponsiveLayout";
+import { MobilePopup } from "../../MobilePopup";
+import { PopupPin } from "../PopupPin";
+import { PopupHelper } from "../PopupHelper";
+import { styles } from "../Popup.styles";
+var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
+var TRANSITION_TIMEOUT = {
+  enter: 0,
+  exit: 200
+};
+var DUMMY_LOCATION = {
+  position: 'top left',
+  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 = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Popup, _React$Component);
+
+  function Popup() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _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.anchorInstance = void 0;
+    _this.isMobileLayout = void 0;
+
+    _this.refAnchorElement = function (instance) {
+      _this.anchorInstance = instance;
+
+      var element = _this.extractElement(instance);
+
+      _this.updateAnchorElement(element);
+
+      _this.anchorElement = element;
+    };
+
+    _this.handleMouseEnter = function (event) {
+      if (_this.props.onMouseEnter) {
+        _this.props.onMouseEnter(event);
+      }
+    };
+
+    _this.handleMouseLeave = function (event) {
+      if (_this.props.onMouseLeave) {
+        _this.props.onMouseLeave(event);
+      }
+    };
+
+    _this.handleClick = function (event) {
+      if (_this.props.onClick) {
+        _this.props.onClick(event);
+      }
+    };
+
+    _this.handleFocus = function (event) {
+      if (_this.props.onFocus) {
+        _this.props.onFocus(event);
+      }
+    };
+
+    _this.handleBlur = function (event) {
+      if (_this.props.onBlur) {
+        _this.props.onBlur(event);
+      }
+    };
+
+    _this.calculateWidth = function (width) {
+      if (typeof width === 'string' && width.includes('%')) {
+        return _this.anchorElement ? _this.anchorElement.offsetWidth * parseFloat(width) / 100 : 0;
+      }
+
+      return width;
+    };
+
+    _this.content = function (children) {
+      var _this$props = _this.props,
+          backgroundColor = _this$props.backgroundColor,
+          width = _this$props.width;
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.content(_this.theme),
+        "data-tid": 'PopupContent'
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.contentInner(_this.theme),
+        style: {
+          backgroundColor: backgroundColor,
+          width: _this.calculateWidth(width)
+        },
+        "data-tid": 'PopupContentInner'
+      }, children));
+    };
+
+    _this.resetLocation = function () {
+      _this.cancelDelayedUpdateLocation();
+
+      _this.setState({
+        location: null
+      });
+    };
+
+    _this.refPopupElement = function (zIndex) {
+      if (zIndex) {
+        _this.lastPopupElement = zIndex && findDOMNode(zIndex);
+      }
+    };
+
+    _this.handleLayoutEvent = function () {
+      if (!_this.state.location) {
+        return;
+      }
+
+      if (_this.anchorInstance) {
+        _this.updateAnchorElement(_this.extractElement(_this.anchorInstance));
+      }
+
+      _this.updateLocation();
+    };
+
+    _this.updateLocation = function () {
+      var popupElement = _this.lastPopupElement;
+
+      if (!popupElement) {
+        return;
+      }
+
+      var location = _this.getLocation(popupElement, _this.state.location);
+
+      if (!_this.locationEquals(_this.state.location, location)) {
+        _this.setState({
+          location: location
+        });
+      }
+    };
+
+    return _this;
+  }
+
+  var _proto = Popup.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.updateLocation();
+    this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
+  };
+
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+    /**
+    * Delaying updateLocation to ensure it happens after props update
+    */
+    if (nextProps.opened) {
+      if (!this.state.location) {
+        this.setState({
+          location: DUMMY_LOCATION
+        });
+      }
+
+      this.delayUpdateLocation();
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var hadNoLocation = prevState.location === DUMMY_LOCATION;
+    var hasLocation = this.state.location !== DUMMY_LOCATION;
+
+    if (this.isMobileLayout && prevState.location === null && this.state.location === null) {
+      this.setState({
+        location: DUMMY_LOCATION
+      });
+    }
+
+    if (hadNoLocation && hasLocation && this.props.onOpen) {
+      this.props.onOpen();
+    }
+
+    if (!hadNoLocation && !this.state.location && this.props.onClose) {
+      this.props.onClose();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.cancelDelayedUpdateLocation();
+    this.removeEventListeners(this.anchorElement);
+
+    if (this.layoutEventsToken) {
+      this.layoutEventsToken.remove();
+      this.layoutEventsToken = null;
+    }
+
+    if (this.state.location && this.props.onClose) {
+      this.props.onClose();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMobile = function renderMobile() {
+    var opened = this.props.opened;
+    return /*#__PURE__*/React.createElement(MobilePopup, {
+      opened: opened,
+      withoutRenderContainer: true,
+      onCloseRequest: this.props.mobileOnCloseRequest
+    }, this.content(this.renderChildren()));
+  };
+
+  _proto.renderMain = function renderMain() {
+    var location = this.state.location;
+    var _this$props2 = this.props,
+        anchorElement = _this$props2.anchorElement,
+        useWrapper = _this$props2.useWrapper;
+    var child = null;
+
+    if (isHTMLElement(anchorElement)) {
+      this.updateAnchorElement(anchorElement);
+    } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
+      child = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
+    } else {
+      child = /*#__PURE__*/React.createElement("span", null, anchorElement);
+    }
+
+    return /*#__PURE__*/React.createElement(RenderContainer, {
+      anchor: child,
+      ref: child ? this.refAnchorElement : undefined
+    }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));
+  };
+
+  _proto.extractElement = function extractElement(instance) {
+    if (!instance) {
+      return null;
+    }
+
+    var element = findDOMNode(instance);
+    return isHTMLElement(element) ? element : null;
+  };
+
+  _proto.updateAnchorElement = function updateAnchorElement(element) {
+    var anchorElement = this.anchorElement;
+
+    if (element !== anchorElement) {
+      this.removeEventListeners(anchorElement);
+      this.anchorElement = element;
+      this.addEventListeners(element);
+    }
+  };
+
+  _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);
+    }
+  };
+
+  _proto.removeEventListeners = function removeEventListeners(element) {
+    if (element && isHTMLElement(element)) {
+      element.removeEventListener('mouseenter', this.handleMouseEnter);
+      element.removeEventListener('mouseleave', this.handleMouseLeave);
+      element.removeEventListener('click', this.handleClick);
+      element.removeEventListener('focusin', this.handleFocus);
+      element.removeEventListener('focusout', this.handleBlur);
+    }
+  };
+
+  _proto.renderContent = function renderContent(location) {
+    var _this3 = this;
+
+    var _this$props3 = this.props,
+        disableAnimations = _this$props3.disableAnimations,
+        maxWidth = _this$props3.maxWidth,
+        hasShadow = _this$props3.hasShadow,
+        ignoreHover = _this$props3.ignoreHover,
+        opened = _this$props3.opened;
+    var children = this.renderChildren();
+
+    var _PopupHelper$getPosit = PopupHelper.getPositionObject(location.position),
+        direction = _PopupHelper$getPosit.direction;
+
+    var rootStyle = _extends({}, location.coordinates, {
+      maxWidth: maxWidth
+    });
+
+    var shouldFallbackShadow = isIE11 || isEdge || isSafari;
+    return /*#__PURE__*/React.createElement(Transition, {
+      timeout: TRANSITION_TIMEOUT,
+      appear: !disableAnimations,
+      "in": Boolean(opened && children),
+      mountOnEnter: true,
+      unmountOnExit: true,
+      enter: !disableAnimations,
+      exit: !disableAnimations,
+      onExited: this.resetLocation
+    }, function (state) {
+      var _extends2, _ref;
+
+      return /*#__PURE__*/React.createElement(CommonWrapper, _this3.props, /*#__PURE__*/React.createElement(ZIndex, {
+        ref: _this3.refPopupElement,
+        priority: 'Popup',
+        className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this3.theme)] = true, _extends2[styles.shadow(_this3.theme)] = hasShadow && !shouldFallbackShadow, _extends2[styles.shadowFallback(_this3.theme)] = hasShadow && shouldFallbackShadow, _extends2[styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[styles["transition-enter-" + direction](_this3.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
+      }, _this3.content(children), !_this3.isMobileLayout && _this3.renderPin(location.position)));
+    });
+  };
+
+  _proto.renderChildren = function renderChildren() {
+    return isFunction(this.props.children) ? this.props.children() : this.props.children;
+  };
+
+  _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;
+    var _this$props4 = this.props,
+        pinSize = _this$props4.pinSize,
+        hasShadow = _this$props4.hasShadow,
+        backgroundColor = _this$props4.backgroundColor,
+        borderColor = _this$props4.borderColor;
+    var position = PopupHelper.getPositionObject(positionName);
+    return this.props.hasPin && /*#__PURE__*/React.createElement(PopupPin, {
+      popupElement: this.lastPopupElement,
+      popupPosition: positionName,
+      size: pinSize || parseInt(this.theme.popupPinSize),
+      offset: this.getPinOffset(position.align),
+      borderWidth: hasShadow ? 1 : 0,
+      backgroundColor: backgroundColor || this.theme.popupBackground,
+      borderColor: borderColor || pinBorder
+    });
+  };
+
+  _proto.delayUpdateLocation = function delayUpdateLocation() {
+    this.cancelDelayedUpdateLocation();
+    this.locationUpdateId = raf(this.updateLocation);
+  };
+
+  _proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {
+    if (this.locationUpdateId) {
+      raf.cancel(this.locationUpdateId);
+      this.locationUpdateId = null;
+    }
+  };
+
+  _proto.locationEquals = function locationEquals(x, y) {
+    if (x === y) {
+      return true;
+    }
+
+    if (x == null || y == null) {
+      return false;
+    }
+
+    return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+  };
+
+  _proto.getLocation = function getLocation(popupElement, location) {
+    var _this$props5 = this.props,
+        positions = _this$props5.positions,
+        tryPreserveFirstRenderedPosition = _this$props5.tryPreserveFirstRenderedPosition;
+    var anchorElement = this.anchorElement;
+    warning(anchorElement && isHTMLElement(anchorElement), 'Anchor element is not defined or not instance of HTMLElement');
+
+    if (!(anchorElement && isHTMLElement(anchorElement))) {
+      return location;
+    }
+
+    var anchorRect = PopupHelper.getElementAbsoluteRect(anchorElement);
+    var popupRect = PopupHelper.getElementAbsoluteRect(popupElement);
+    var position;
+    var coordinates;
+
+    if (location && location !== DUMMY_LOCATION && location.position) {
+      position = location.position;
+      coordinates = this.getCoordinates(anchorRect, popupRect, position);
+      var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect);
+      var canBecomeVisible = !isFullyVisible && PopupHelper.canBecomeFullyVisible(position, coordinates);
+
+      if ( // если нужно сохранить первоначальную позицию и Попап целиком
+      // находится в пределах вьюпорта (или может быть проскроллен в него)
+      tryPreserveFirstRenderedPosition && (isFullyVisible || canBecomeVisible) || // если Попап целиком во вьюпорте и в самой приоритетной позиции
+      // (иначе нужно попытаться позицию сменить)
+      isFullyVisible && position === positions[0]) {
+        // сохраняем текущую позицию
+        return {
+          coordinates: coordinates,
+          position: position
+        };
+      }
+    }
+
+    for (var _iterator = _createForOfIteratorHelperLoose(positions), _step; !(_step = _iterator()).done;) {
+      position = _step.value;
+      coordinates = this.getCoordinates(anchorRect, popupRect, position);
+
+      if (PopupHelper.isFullyVisible(coordinates, popupRect)) {
+        return {
+          coordinates: coordinates,
+          position: position
+        };
+      }
+    }
+
+    position = positions[0];
+    coordinates = this.getCoordinates(anchorRect, popupRect, position);
+    return {
+      coordinates: coordinates,
+      position: position
+    };
+  };
+
+  _proto.getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {
+    if (!this.props.hasPin || /center|middle/.test(position.align)) {
+      return 0;
+    }
+
+    var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;
+    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 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);
+
+    switch (position.direction) {
+      case 'top':
+        return {
+          top: anchorRect.top - popupRect.height - margin,
+          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
+        };
+
+      case 'bottom':
+        return {
+          top: anchorRect.top + anchorRect.height + margin,
+          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
+        };
+
+      case 'left':
+        return {
+          top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
+          left: anchorRect.left - popupRect.width - margin
+        };
+
+      case 'right':
+        return {
+          top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
+          left: anchorRect.left + anchorRect.width + margin
+        };
+
+      default:
+        throw new Error("Unexpected direction '" + position.direction + "'");
+    }
+  };
+
+  _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':
+        return anchorRect.left - popupOffset;
+
+      case 'center':
+        return anchorRect.left - (popupRect.width - anchorRect.width) / 2;
+
+      case 'right':
+        return anchorRect.left - (popupRect.width - anchorRect.width) + popupOffset;
+
+      default:
+        throw new Error("Unexpected align '" + align + "'");
+    }
+  };
+
+  _proto.getVerticalPosition = function getVerticalPosition(anchorRect, popupRect, align, popupOffset) {
+    switch (align) {
+      case 'top':
+        return anchorRect.top - popupOffset;
+
+      case 'middle':
+        return anchorRect.top - (popupRect.height - anchorRect.height) / 2;
+
+      case 'bottom':
+        return anchorRect.top - (popupRect.height - anchorRect.height) + popupOffset;
+
+      default:
+        throw new Error("Unexpected align '" + align + "'");
+    }
+  };
+
+  return Popup;
+}(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 отключает границу на пине
+  */
+  hasShadow: PropTypes.bool,
+
+  /**
+  * Отступ попапа от элемента
+  */
+  margin: PropTypes.number,
+
+  /**
+  * Показан или скрыт попап
+  */
+  opened: PropTypes.bool,
+
+  /**
+  * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
+  */
+  pinOffset: PropTypes.number,
+
+  /**
+  * Сторона пина без учёта границы.
+  * Пин представляет собой равносторонний треугольник, высота от попапа
+  * до "носика" пина будет соответствовать формуле (size* √3)/2
+  */
+  pinSize: PropTypes.number,
+
+  /**
+  * смещение попапа относительно родительского элемента
+  */
+  popupOffset: PropTypes.number,
+
+  /**
+  * С какой стороны показывать попап и край попапа,
+  * на котором будет отображаться пин
+  */
+  positions: PropTypes.array,
+
+  /**
+  * Игнорировать ли события hover/click
+  */
+  ignoreHover: PropTypes.bool
+}, _class2.defaultProps = {
+  popupOffset: 0,
+  hasPin: false,
+  hasShadow: false,
+  disableAnimations: isTestEnv,
+  useWrapper: false,
+  ignoreHover: false,
+  width: 'auto'
+}, _temp)) || _class;