"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SidePageDataTids = exports.SidePage = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _reactTransitionGroup = require("react-transition-group");
var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
var _globalObject = require("@skbkontur/global-object");

var _utils = require("../../lib/utils");
var _identifiers = require("../../lib/events/keyboard/identifiers");
var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
var _stopPropagation = require("../../lib/events/stopPropagation");
var _HideBodyVerticalScroll = require("../../internal/HideBodyVerticalScroll");

var _ModalStack = require("../../lib/ModalStack");
var _RenderContainer = require("../../internal/RenderContainer");
var _RenderLayer = require("../../internal/RenderLayer");
var _ZIndex = require("../../internal/ZIndex");
var _ThemeContext = require("../../lib/theming/ThemeContext");


var _CommonWrapper = require("../../internal/CommonWrapper");
var _Emotion = require("../../lib/theming/Emotion");
var _currentEnvironment = require("../../lib/currentEnvironment");
var _ResponsiveLayout = require("../ResponsiveLayout");
var _createPropsGetter = require("../../lib/createPropsGetter");
var _isInstanceOf = require("../../lib/isInstanceOf");
var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");

var _SidePageBody = require("./SidePageBody");
var _SidePageContainer = require("./SidePageContainer");

var _SidePageContext = require("./SidePageContext");
var _SidePageFooter = require("./SidePageFooter");
var _SidePageHeader = require("./SidePageHeader");
var _SidePage2 = require("./SidePage.styles");


















































var SidePageDataTids = exports.SidePageDataTids = {
  root: 'SidePage__root',
  container: 'SidePage__container'
};



var TRANSITION_TIMEOUT = 200;

/**
 * `SidePage` — это модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера.
 *
 * Используйте его, когда нужно сохранить контекст и показать большое количество данных.
 *
 * Содержит в себе три компоненты: `SidePage.Header`, `SidePage.Body` и `SidePage.Footer`.
 *
 * Для отображения серой плашки в футере в компонент `Footer` необходимо передать пропс `panel`.
 */var
SidePage = exports.SidePage = /*#__PURE__*/function (_React$Component) {function SidePage() {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 = {
      hasHeader: false,
      hasFooter: false,
      hasPanel: false
    };_this.

    stackSubscription = null;_this.
    layout = null;_this.
    header = null;_this.
    footer = null;_this.
    rootRef = /*#__PURE__*/_react.default.createRef();























    /**
     * Обновляет разметку компонента.
     * @public
     */_this.
    updateLayout = function () {var _this$header, _this$footer;
      (_this$header = _this.header) == null || _this$header.update();
      (_this$footer = _this.footer) == null || _this$footer.update();
    };_this.







    getProps = (0, _createPropsGetter.createPropsGetter)(SidePage.defaultProps);_this.





















































































































    getSidePageContextProps = function () {
      return {
        hasHeader: _this.state.hasHeader,
        hasFooter: _this.state.hasFooter,
        hasPanel: _this.state.hasPanel,
        requestClose: _this.requestClose,
        getWidth: _this.getWidth,
        updateLayout: _this.updateLayout,
        headerRef: _this.headerRef,
        footerRef: _this.footerRef,
        setHasHeader: _this.setHasHeader,
        setHasFooter: _this.setHasFooter,
        setHasPanel: _this.setHasPanel
      };
    };_this.

    getWidth = function () {
      if (!_this.layout) {
        return 'auto';
      }
      return _this.layout.clientWidth;
    };_this.





























    handleStackChange = function (stack) {
      var sidePages = stack.filter(
        function (x) {return (0, _utils.isReactUIInstance)(x, 'SidePage') && x.props.fromLeft === _this.props.fromLeft;}
      );
      var currentSidePagePosition = sidePages.indexOf(_this);

      var hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;
      var hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;
      var hasBackground = _ModalStack.ModalStack.isBlocking(_this);

      _this.setState({
        stackPosition: stack.indexOf(_this),
        hasMargin: hasMargin,
        hasShadow: hasShadow,
        hasBackground: hasBackground
      });
    };_this.

    handleClickOutside = function (e) {
      if (_this.state.stackPosition === 0 && !_this.props.ignoreBackgroundClick) {
        // ignore mousedown on window scrollbar
        if (
        (0, _isInstanceOf.isInstanceOf)(e, _globalObject.globalObject.MouseEvent) &&
        _globalObject.globalObject.document &&
        e.clientX > _globalObject.globalObject.document.documentElement.clientWidth)
        {
          return;
        }
        _this.requestClose();
      }
    };_this.

    handleKeyDown = function (e) {
      if (_this.state.stackPosition !== 0) {
        return;
      }
      if ((0, _identifiers.isKeyEscape)(e)) {
        (0, _stopPropagation.stopPropagation)(e);
        _this.requestClose();
      }
    };_this.

    requestClose = function () {
      if (_this.props.disableClose) {
        return;
      }
      if (_this.props.onClose) {
        _this.props.onClose();
      }
    };_this.

    headerRef = function (ref) {
      _this.header = ref;
    };_this.

    footerRef = function (ref) {
      _this.footer = ref;
    };_this.

    layoutRef = function (ref) {
      _this.layout = ref;
    };_this.

    setHasHeader = function (hasHeader) {if (hasHeader === void 0) {hasHeader = true;}
      _this.state.hasHeader !== hasHeader && _this.setState({ hasHeader: hasHeader });
    };_this.

    setHasFooter = function (hasFooter) {if (hasFooter === void 0) {hasFooter = true;}
      _this.state.hasFooter !== hasFooter && _this.setState({ hasFooter: hasFooter });
    };_this.

    setHasPanel = function (hasPanel) {if (hasPanel === void 0) {hasPanel = false;}
      _this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
    };return _this;}(0, _inheritsLoose2.default)(SidePage, _React$Component);var _proto = SidePage.prototype;_proto.componentDidMount = function componentDidMount() {_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('keydown', this.handleKeyDown);this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.blockBackground !== this.props.blockBackground) {_ModalStack.ModalStack.rerender();this.setState({ hasBackground: _ModalStack.ModalStack.isBlocking(this) });}};_proto.componentWillUnmount = function componentWillUnmount() {_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('keydown', this.handleKeyDown);if ((0, _utils.isNonNullable)(this.stackSubscription)) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$props = this.props,blockBackground = _this$props.blockBackground,onOpened = _this$props.onOpened;var disableAnimations = this.getProps().disableAnimations;var versionGTE5_2 = (0, _ThemeHelpers.isThemeGTE)(this.theme, '5.2');return /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this3.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', onScroll: LayoutEvents.emit, createStackingContext: true, style: { position: 'absolute' } }, (versionGTE5_2 || !isMobile) && blockBackground && _this3.renderShadow(), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { in: true, classNames: _this3.getTransitionNames(), appear: !disableAnimations, enter: !disableAnimations, exit: false, timeout: { enter: TRANSITION_TIMEOUT, exit: TRANSITION_TIMEOUT }, nodeRef: _this3.rootRef, onEntered: onOpened }, _this3.renderContainer(isMobile)), isMobile && /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null))));});};_proto.renderContainer = function renderContainer(isMobile) {var _cx, _cx2;var _this$props2 = this.props,mobileWidth = _this$props2.mobileWidth,blockBackground = _this$props2.blockBackground,fromLeft = _this$props2.fromLeft,ariaLabel = _this$props2['aria-label'];var _this$getProps = this.getProps(),offset = _this$getProps.offset,role = _this$getProps.role;var widthDesktop = this.props.width || (blockBackground ? 800 : 500);var widthMobile = this.props.mobileWidth || '100%';var width = isMobile ? widthMobile : widthDesktop;return /*#__PURE__*/_react.default.createElement("div", { "aria-modal": true, role: role, "aria-label": ariaLabel, "data-tid": SidePageDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_SidePage2.styles.root()] = true, _cx)), ref: this.rootRef, onScroll: LayoutEvents.emit, style: isMobile && !(0, _ThemeHelpers.isThemeGTE)(this.theme, '5.2') ? { width: mobileWidth || '100%' } : { width: width, right: fromLeft ? 'auto' : offset, left: fromLeft ? offset : 'auto' } }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: this.isFocusLockDisabled, autoFocus: false, className: _SidePage2.styles.focusLock() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.handleClickOutside, active: true }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageDataTids.container, className: (0, _Emotion.cx)(_SidePage2.styles.wrapper(this.theme), (_cx2 = {}, _cx2[_SidePage2.styles.wrapperLeft()] = fromLeft, _cx2[_SidePage2.styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft, _cx2[_SidePage2.styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft, _cx2[_SidePage2.styles.shadow(this.theme)] = this.state.hasShadow, _cx2)), ref: this.layoutRef }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children)))));};_proto.renderShadow = function renderShadow() {var _cx3;return /*#__PURE__*/_react.default.createElement("div", { className: _SidePage2.styles.overlay(), onScroll: LayoutEvents.emit }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, { key: "hbvs" }), /*#__PURE__*/_react.default.createElement("div", { key: "overlay", className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_SidePage2.styles.background()] = true, _cx3[_SidePage2.styles.backgroundGray(this.theme)] = this.state.hasBackground, _cx3)) }));};_proto.getTransitionNames = function getTransitionNames() {var transition = this.props.fromLeft ? _SidePage2.styles.transitionRight : _SidePage2.styles.transitionLeft;return { enter: transition(), enterActive: _SidePage2.styles.transitionActive(), exit: _SidePage2.styles.transitionLeave(), exitActive: _SidePage2.styles.transitionLeaveActive(), appear: transition(), appearActive: _SidePage2.styles.transitionActive() };};return (0, _createClass2.default)(SidePage, [{ key: "isFocusLockDisabled", get: function get() {var _this$getProps2 = this.getProps(),disableFocusLock = _this$getProps2.disableFocusLock;var blockBackground = this.props.blockBackground;if (!blockBackground) {return true;}if (disableFocusLock !== undefined) {return disableFocusLock;}return false;} }]);}(_react.default.Component);SidePage.__KONTUR_REACT_UI__ = 'SidePage';SidePage.displayName = 'SidePage';SidePage.Header = _SidePageHeader.SidePageHeader;SidePage.Body = _SidePageBody.SidePageBody;SidePage.Footer = _SidePageFooter.SidePageFooter;SidePage.Container = _SidePageContainer.SidePageContainer;SidePage.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, offset: 0, role: 'dialog' };