@skbkontur/react-ui 0.0.0-73eeccf6c9 → 0.0.0-74f39c97a5

package/internal/Popup/Popup/Popup.js

@@ -1,606 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-
-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 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 { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { isHTMLElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
-import { isTestEnv } from "../../../lib/currentEnvironment";
-import { PopupPin } from "../PopupPin";
-import { PopupHelper } from "../PopupHelper";
-import { jsStyles } 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 = /*#__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.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.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 (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.renderMain = function renderMain() {
-    var location = this.state.location;
-    var _this$props = this.props,
-        anchorElement = _this$props.anchorElement,
-        useWrapper = _this$props.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
-    }, 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$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;
-    var children = this.renderChildren();
-
-    var _PopupHelper$getPosit = PopupHelper.getPositionObject(location.position),
-        direction = _PopupHelper$getPosit.direction;
-
-    var rootStyle = _extends({}, location.coordinates, {
-      maxWidth: maxWidth
-    });
-
-    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(ZIndex, {
-        ref: _this3.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))),
-        style: rootStyle,
-        onMouseEnter: _this3.handleMouseEnter,
-        onMouseLeave: _this3.handleMouseLeave
-      }, /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.content(_this3.theme),
-        "data-tid": 'PopupContent'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.contentInner(_this3.theme),
-        style: {
-          backgroundColor: backgroundColor
-        },
-        "data-tid": 'PopupContentInner'
-      }, children)), _this3.renderPin(location.position));
-    });
-  };
-
-  _proto.renderChildren = function renderChildren() {
-    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.
-    */
-    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,
-        pinOffset = _this$props3.pinOffset;
-    return this.props.hasPin && /*#__PURE__*/React.createElement(PopupPin, {
-      popupElement: this.lastPopupElement,
-      popupPosition: position,
-      size: pinSize || parseInt(this.theme.popupPinSize),
-      offset: pinOffset || parseInt(this.theme.popupPinOffset),
-      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 positions = this.props.positions;
-    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 (isFullyVisible || canBecomeVisible) {
-        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 _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);
-  };
-
-  _proto.getCoordinates = function getCoordinates(anchorRect, popupRect, positionName) {
-    var margin = this.props.margin || parseInt(this.theme.popupMargin);
-    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.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);
-Popup.__KONTUR_REACT_UI__ = 'Popup';
-Popup.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
-};
-Popup.defaultProps = {
-  popupOffset: 0,
-  hasPin: false,
-  hasShadow: false,
-  disableAnimations: isTestEnv,
-  useWrapper: false,
-  ignoreHover: false
-};