@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/components/Loader/Loader/Loader.js

@@ -1,51 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import warning from 'warning';
-import cn from 'classnames';
+import debounce from 'lodash.debounce';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Spinner } from "../../Spinner";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ZIndex } from "../../../internal/ZIndex";
-import { jsStyles } from "../Loader.styles";
-/**
-                                             * DRAFT - лоадер-контейнер
-                                             */
-
-export var Loader =
-/*#__PURE__*/
-function (_React$Component) {
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { TaskWithDelayAndMinimalDuration } from "../../../lib/taskWithDelayAndMinimalDuration";
+import { getTabbableElements } from "../../../lib/dom/tabbableHelpers";
+import { rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getStyles } from "../Loader.styles";
+var types = ['mini', 'normal', 'big'];
+export var LoaderDataTids = {
+  veil: 'Loader__Veil',
+  spinner: 'Loader__Spinner'
+};
+export
+/**
+* Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер
+*
+* Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)
+*/
+var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Loader, _React$Component);
 
   function Loader(props) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
-    _this.theme = void 0;
-    _this.containerNode = void 0;
-    _this.spinnerNode = void 0;
-    _this.spinnerHeight = void 0;
-    _this.layoutEvents = void 0;
-
-    _this.wrapperRef = function (element) {
-      _this.containerNode = element;
+    _this.getProps = createPropsGetter(Loader.defaultProps);
+
+    _this.childrenRef = function (element) {
+      _this.childrenContainerNode = element;
+    };
+
+    _this.spinnerRef = function (element) {
+      _this.spinnerContainerNode = element;
     };
 
     _this.checkSpinnerPosition = function () {
-      if (!_this.containerNode) {
+      if (!_this.spinnerContainerNode || !isBrowser(globalObject)) {
         return;
       }
 
-      var _this$containerNode$g = _this.containerNode.getBoundingClientRect(),
-          containerTop = _this$containerNode$g.top,
-          containerRight = _this$containerNode$g.right,
-          containerBottom = _this$containerNode$g.bottom,
-          containerLeft = _this$containerNode$g.left,
-          containerHeight = _this$containerNode$g.height,
-          containerWidth = _this$containerNode$g.width;
+      var _getDOMRect = getDOMRect(_this.spinnerContainerNode),
+          containerTop = _getDOMRect.top,
+          containerRight = _getDOMRect.right,
+          containerBottom = _getDOMRect.bottom,
+          containerLeft = _getDOMRect.left,
+          containerHeight = _getDOMRect.height,
+          containerWidth = _getDOMRect.width;
 
-      var windowHeight = window.innerHeight;
-      var windowWidth = window.innerWidth; // Если контейнер не больше высоты и не шире окна,
+      var windowHeight = globalObject.innerHeight;
+      var windowWidth = globalObject.innerWidth; // Если контейнер не больше высоты и не шире окна,
       // то просто выравниваем по центру
 
       if (windowHeight >= containerHeight && windowWidth >= containerWidth) {
@@ -78,7 +95,9 @@ function (_React$Component) {
       // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера
 
 
-      if (_this.spinnerHeight && spinnerStyle.bottom >= windowHeight - _this.spinnerHeight) {
+      var spinnerHeight = getDOMRect(_this.spinnerNode).height;
+
+      if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {
         delete spinnerStyle.top;
       } // ПО ГОРИЗОНТАЛИ
       // Если левый край контейнера правее левого края окна,
@@ -101,122 +120,257 @@ function (_React$Component) {
       });
     };
 
-    _this.containerNode = null;
+    _this.disableChildrenFocus = function () {
+      if (!_this.childrenObserver) {
+        _this.makeObservable();
+      }
+
+      var tabbableElements = getTabbableElements(_this.childrenContainerNode);
+      tabbableElements.forEach(function (el) {
+        if (!el.hasAttribute('origin-tabindex')) {
+          el.setAttribute('origin-tabindex', el.tabIndex.toString());
+        }
+
+        el.tabIndex = -1;
+      });
+    };
+
+    _this.enableChildrenFocus = function () {
+      var _globalObject$documen, _globalObject$documen2;
+
+      _this.makeUnobservable(); // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers
+
+
+      Array.from((_globalObject$documen = (_globalObject$documen2 = globalObject.document) == null ? void 0 : _globalObject$documen2.querySelectorAll('[origin-tabindex]')) != null ? _globalObject$documen : []).forEach(function (el) {
+        var _el$getAttribute;
+
+        el.setAttribute('tabindex', (_el$getAttribute = el.getAttribute('origin-tabindex')) != null ? _el$getAttribute : '0');
+        el.removeAttribute('origin-tabindex');
+      });
+    };
+
+    _this.makeObservable = function () {
+      var target = _this.childrenContainerNode;
+
+      if (!target || !globalObject.MutationObserver) {
+        return;
+      }
+
+      var config = {
+        childList: true,
+        subtree: true
+      };
+      var observer = new globalObject.MutationObserver(_this.disableChildrenFocus);
+      observer.observe(target, config);
+      _this.childrenObserver = observer;
+    };
+
+    _this.makeUnobservable = function () {
+      var _this$childrenObserve;
+
+      (_this$childrenObserve = _this.childrenObserver) == null ? void 0 : _this$childrenObserve.disconnect();
+      _this.childrenObserver = null;
+    };
+
+    _this.spinnerContainerNode = null;
+    _this.childrenContainerNode = null;
+    _this.childrenObserver = null;
     _this.spinnerNode = null;
-    warning(!_this.props.cloud, 'cloud is deprecated, will removed in 3.0, if you want cloud use prop component instead. ');
     _this.state = {
-      isStickySpinner: false
+      isStickySpinner: false,
+      isSpinnerVisible: false,
+      isLoaderActive: false
     };
+    _this.spinnerTask = new TaskWithDelayAndMinimalDuration({
+      delayBeforeTaskStart: _this.getProps().delayBeforeSpinnerShow,
+      durationOfTask: _this.getProps().minimalDelayBeforeSpinnerHide,
+      taskStartCallback: function taskStartCallback() {
+        return _this.setState({
+          isSpinnerVisible: true
+        });
+      },
+      taskStopCallback: function taskStopCallback() {
+        return _this.setState({
+          isSpinnerVisible: false
+        });
+      }
+    });
     return _this;
   }
 
   var _proto = Loader.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
-    if (this.spinnerNode) {
-      this.spinnerHeight = this.spinnerNode.children[0].getBoundingClientRect().height;
+    var active = this.getProps().active;
+    this.checkSpinnerPosition();
+    active && this.spinnerTask.start();
+    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));
+
+    if (active) {
+      this.disableChildrenFocus();
     }
+  };
 
-    this.checkSpinnerPosition();
-    this.layoutEvents = LayoutEvents.addListener(this.checkSpinnerPosition);
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var component = this.props.component;
+
+    var _this$getProps = this.getProps(),
+        active = _this$getProps.active,
+        delayBeforeSpinnerShow = _this$getProps.delayBeforeSpinnerShow,
+        minimalDelayBeforeSpinnerHide = _this$getProps.minimalDelayBeforeSpinnerHide;
+
+    var isLoaderActive = this.state.isLoaderActive;
+
+    if (active && !prevProps.active || prevProps.component !== component) {
+      this.checkSpinnerPosition();
+    }
+
+    if (delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow || minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide) {
+      this.spinnerTask.update({
+        delayBeforeTaskStart: delayBeforeSpinnerShow,
+        durationOfTask: minimalDelayBeforeSpinnerHide
+      });
+    }
+
+    if (active !== prevProps.active) {
+      active ? this.spinnerTask.start() : this.spinnerTask.stop();
+    }
+
+    if (isLoaderActive !== prevState.isLoaderActive) {
+      if (isLoaderActive) {
+        this.disableChildrenFocus();
+      } else {
+        this.enableChildrenFocus();
+      }
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
+    this.makeUnobservable();
+
     if (this.layoutEvents) {
       this.layoutEvents.remove();
     }
+
+    this.spinnerTask.clearTask();
+  };
+
+  Loader.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    if (props.active && !state.isLoaderActive) {
+      return {
+        isLoaderActive: true
+      };
+    }
+
+    if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {
+      return {
+        isLoaderActive: false
+      };
+    }
+
+    return state;
   };
 
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn;
+    var _this$emotion$cx;
 
     var _this$props = this.props,
-        active = _this$props.active,
-        type = _this$props.type,
         caption = _this$props.caption,
-        className = _this$props.className;
-    return React.createElement("div", {
-      style: {
-        position: 'relative'
-      },
-      className: cn(jsStyles.loader(), className)
-    }, React.createElement(ZIndex, {
-      priority: 'Loader',
-      applyZIndex: this.props.active,
-      coverChildren: this.props.active,
+        component = _this$props.component;
+    var type = this.getProps().type;
+    var isLoaderActive = this.state.isLoaderActive;
+    var styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      className: styles.loader(),
+      "data-tid": isLoaderActive ? LoaderDataTids.veil : ''
+    }, /*#__PURE__*/React.createElement(ZIndex, {
+      applyZIndex: isLoaderActive,
+      coverChildren: isLoaderActive,
       style: {
         height: '100%'
-      }
-    }, this.props.children), active && React.createElement(ZIndex, {
-      wrapperRef: this.wrapperRef,
-      priority: 'Loader',
-      className: cn((_cn = {}, _cn[jsStyles.active(this.theme)] = active, _cn))
-    }, this.renderSpinner(type, caption)));
+      },
+      wrapperRef: this.childrenRef
+    }, this.props.children), isLoaderActive && /*#__PURE__*/React.createElement(ZIndex, {
+      wrapperRef: this.spinnerRef,
+      className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.active(this.theme)] = isLoaderActive, _this$emotion$cx))
+    }, this.state.isSpinnerVisible && this.renderSpinner(type, caption, component))));
   };
 
-  _proto.renderSpinner = function renderSpinner(type, caption) {
-    var _this3 = this;
-
-    return React.createElement("span", {
-      className: this.state.isStickySpinner ? jsStyles.spinnerContainerSticky() : jsStyles.spinnerContainerCenter(),
-      style: this.state.spinnerStyle,
+  _proto.renderSpinner = function renderSpinner(type, caption, component) {
+    var _this$emotion$cx2,
+        _this3 = this;
+
+    var styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement("span", {
+      "data-tid": LoaderDataTids.spinner,
+      className: this.emotion.cx(styles.spinnerContainer(), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.spinnerContainerSticky()] = this.state.isStickySpinner, _this$emotion$cx2)),
+      style: this.state.spinnerStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.spinnerComponentWrapper(),
       ref: function ref(element) {
         _this3.spinnerNode = element;
       }
-    }, React.createElement(Spinner, {
+    }, component !== undefined ? component : /*#__PURE__*/React.createElement(Spinner, {
       type: type,
-      caption: caption,
-      cloud: this.props.cloud
-    }));
+      caption: caption
+    })));
   };
 
   return Loader;
-}(React.Component);
-Loader.__KONTUR_REACT_UI__ = 'Loader';
-Loader.defaultProps = {
-  type: Spinner.Types.normal,
-  active: false
-};
-Loader.propTypes = {
-  /**
-   * показываем лоадер или нет
-   */
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Loader', _class2.displayName = 'Loader', _class2.defaultProps = {
+  type: 'normal',
+  active: false,
+  delayBeforeSpinnerShow: isTestEnv ? 0 : 300,
+  minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000
+}, _class2.propTypes = {
+  /**
+  * показываем лоадер или нет
+  */
   active: PropTypes.bool,
 
-  /**
-   * Текст рядом с лоадером.
-   *
-   * @default  "Загрузка"
-   */
+  /**
+  * Текст рядом с лоадером.
+  *
+  * @default  "Загрузка"
+  */
   caption: Spinner.propTypes.caption,
+  component: PropTypes.node,
 
-  /**
-   * Класс для обертки
-   */
+  /**
+  * Класс для обертки
+  */
   className: PropTypes.string,
 
-  /**
-   * Тип спиннера: mini, normal, big
-   *
-   * @default  normal
-   *
-   * Spinner.types - все доступные типы
-   */
-  type: PropTypes.oneOf(Object.keys(Spinner.Types)),
-
-  /**
-   * @deprecated Старое поведение спиннера - облачко при среднем и большом размере
-   *
-   * @default false - исчезнет в 3.0
-   */
-  cloud: PropTypes.bool
-};
+  /**
+  * Тип спиннера: mini, normal, big
+  *
+  * @default  normal
+  */
+  type: PropTypes.oneOf(types),
+
+  /**
+  * Время в миллисекундах для показа вуали без спиннера.
+  * @default 300
+  */
+  delayBeforeSpinnerShow: PropTypes.number,
+
+  /**
+  * Минимальное время в миллисекундах для показа спиннера
+  * @default 1000
+  */
+  minimalDelayBeforeSpinnerHide: PropTypes.number
+}, _temp)) || _class;

package/components/Loader/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Loader.tsx"],"names":["React","PropTypes","warning","cn","LayoutEvents","Spinner","ThemeContext","ZIndex","jsStyles","Loader","props","theme","containerNode","spinnerNode","spinnerHeight","layoutEvents","wrapperRef","element","checkSpinnerPosition","getBoundingClientRect","containerTop","top","containerRight","right","containerBottom","bottom","containerLeft","left","containerHeight","height","containerWidth","width","windowHeight","window","innerHeight","windowWidth","innerWidth","setState","isStickySpinner","spinnerStyle","Math","abs","cloud","state","componentDidMount","children","addListener","componentWillUnmount","remove","render","renderMain","active","type","caption","className","position","loader","renderSpinner","spinnerContainerSticky","spinnerContainerCenter","Component","__KONTUR_REACT_UI__","defaultProps","Types","normal","propTypes","bool","string","oneOf","Object","keys"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport warning from 'warning';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { Spinner, SpinnerProps } from '../Spinner';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\n\r\nimport { jsStyles } from './Loader.styles';\r\n\r\nexport interface LoaderProps {\r\n  children?: React.ReactNode;\r\n  /**\r\n   * Флаг переключения состояния лоадера\r\n   * @default false\r\n   */\r\n  active: boolean;\r\n  caption?: SpinnerProps['caption'];\r\n  className?: string;\r\n  type?: 'mini' | 'normal' | 'big';\r\n  /**\r\n   * @deprecated Старое поведение спиннера - облачко при среднем и большом размере - исчезнет в 3.0 поведение пересено в `@skbkontur/react-ui-addons` смотри [миграцию](https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MIGRATION.md)\r\n   *\r\n   * @default false\r\n   */\r\n  cloud?: boolean;\r\n}\r\n\r\nexport interface LoaderState {\r\n  isStickySpinner: boolean;\r\n  spinnerStyle?: object;\r\n}\r\n\r\n/**\r\n * DRAFT - лоадер-контейнер\r\n */\r\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\r\n  public static __KONTUR_REACT_UI__ = 'Loader';\r\n\r\n  public static defaultProps = {\r\n    type: Spinner.Types.normal,\r\n    active: false,\r\n  };\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * показываем лоадер или нет\r\n     */\r\n    active: PropTypes.bool,\r\n\r\n    /**\r\n     * Текст рядом с лоадером.\r\n     *\r\n     * @default  \"Загрузка\"\r\n     */\r\n    caption: Spinner.propTypes.caption,\r\n\r\n    /**\r\n     * Класс для обертки\r\n     */\r\n    className: PropTypes.string,\r\n\r\n    /**\r\n     * Тип спиннера: mini, normal, big\r\n     *\r\n     * @default  normal\r\n     *\r\n     * Spinner.types - все доступные типы\r\n     */\r\n    type: PropTypes.oneOf(Object.keys(Spinner.Types)),\r\n    /**\r\n     * @deprecated Старое поведение спиннера - облачко при среднем и большом размере\r\n     *\r\n     * @default false - исчезнет в 3.0\r\n     */\r\n    cloud: PropTypes.bool,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private containerNode: Nullable<HTMLDivElement>;\r\n  private spinnerNode: Nullable<HTMLSpanElement>;\r\n  private spinnerHeight?: number;\r\n  private layoutEvents: Nullable<{ remove: () => void }>;\r\n\r\n  constructor(props: LoaderProps) {\r\n    super(props);\r\n\r\n    this.containerNode = null;\r\n    this.spinnerNode = null;\r\n\r\n    warning(\r\n      !this.props.cloud,\r\n      'cloud is deprecated, will removed in 3.0, if you want cloud use prop component instead. ',\r\n    );\r\n\r\n    this.state = {\r\n      isStickySpinner: false,\r\n    };\r\n  }\r\n\r\n  public componentDidMount() {\r\n    if (this.spinnerNode) {\r\n      this.spinnerHeight = this.spinnerNode.children[0].getBoundingClientRect().height;\r\n    }\r\n\r\n    this.checkSpinnerPosition();\r\n    this.layoutEvents = LayoutEvents.addListener(this.checkSpinnerPosition);\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    if (this.layoutEvents) {\r\n      this.layoutEvents.remove();\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { active, type, caption, className } = this.props;\r\n\r\n    return (\r\n      <div style={{ position: 'relative' }} className={cn(jsStyles.loader(), className)}>\r\n        <ZIndex\r\n          priority={'Loader'}\r\n          applyZIndex={this.props.active}\r\n          coverChildren={this.props.active}\r\n          style={{ height: '100%' }}\r\n        >\r\n          {this.props.children}\r\n        </ZIndex>\r\n        {active && (\r\n          <ZIndex\r\n            wrapperRef={this.wrapperRef}\r\n            priority={'Loader'}\r\n            className={cn({\r\n              [jsStyles.active(this.theme)]: active,\r\n            })}\r\n          >\r\n            {this.renderSpinner(type, caption)}\r\n          </ZIndex>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private wrapperRef = (element: HTMLDivElement | null) => {\r\n    this.containerNode = element;\r\n  };\r\n\r\n  private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode) {\r\n    return (\r\n      <span\r\n        className={this.state.isStickySpinner ? jsStyles.spinnerContainerSticky() : jsStyles.spinnerContainerCenter()}\r\n        style={this.state.spinnerStyle}\r\n        ref={element => {\r\n          this.spinnerNode = element;\r\n        }}\r\n      >\r\n        <Spinner type={type} caption={caption} cloud={this.props.cloud} />\r\n      </span>\r\n    );\r\n  }\r\n\r\n  private checkSpinnerPosition = () => {\r\n    if (!this.containerNode) {\r\n      return;\r\n    }\r\n\r\n    const {\r\n      top: containerTop,\r\n      right: containerRight,\r\n      bottom: containerBottom,\r\n      left: containerLeft,\r\n      height: containerHeight,\r\n      width: containerWidth,\r\n    } = this.containerNode.getBoundingClientRect();\r\n\r\n    const windowHeight = window.innerHeight;\r\n    const windowWidth = window.innerWidth;\r\n\r\n    // Если контейнер не больше высоты и не шире окна,\r\n    // то просто выравниваем по центру\r\n    if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\r\n      this.setState({\r\n        isStickySpinner: false,\r\n        spinnerStyle: {},\r\n      });\r\n      return;\r\n    }\r\n\r\n    const spinnerStyle = {\r\n      top: 30,\r\n      right: 0,\r\n      bottom: 30,\r\n      left: 0,\r\n    };\r\n\r\n    // ПО ВЕРТИКАЛИ\r\n    // Если верхний край контейнера ниже верхнего края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerTop > 0) {\r\n      spinnerStyle.top = containerTop + 30;\r\n    }\r\n\r\n    // Если нижний край контейнера выше нижнего края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerBottom < windowHeight) {\r\n      spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\r\n    }\r\n\r\n    // Если знаем высоту спиннера и нижний край контейнера поднимается\r\n    // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\r\n    if (this.spinnerHeight && spinnerStyle.bottom >= windowHeight - this.spinnerHeight) {\r\n      delete spinnerStyle.top;\r\n    }\r\n\r\n    // ПО ГОРИЗОНТАЛИ\r\n    // Если левый край контейнера правее левого края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerLeft > 0) {\r\n      spinnerStyle.left = containerLeft;\r\n    }\r\n\r\n    // Если правый край контейнера левее правого края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerRight < windowWidth) {\r\n      spinnerStyle.right = windowWidth - containerRight;\r\n    }\r\n\r\n    this.setState({\r\n      isStickySpinner: true,\r\n      spinnerStyle,\r\n    });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Loader.tsx"],"names":["React","PropTypes","debounce","globalObject","isBrowser","LayoutEvents","Spinner","ZIndex","CommonWrapper","EmotionConsumer","isTestEnv","TaskWithDelayAndMinimalDuration","getTabbableElements","rootNode","getDOMRect","createPropsGetter","ThemeContext","getStyles","types","LoaderDataTids","veil","spinner","Loader","props","getProps","defaultProps","childrenRef","element","childrenContainerNode","spinnerRef","spinnerContainerNode","checkSpinnerPosition","containerTop","top","containerRight","right","containerBottom","bottom","containerLeft","left","containerHeight","height","containerWidth","width","windowHeight","innerHeight","windowWidth","innerWidth","setState","isStickySpinner","spinnerStyle","Math","abs","spinnerHeight","spinnerNode","disableChildrenFocus","childrenObserver","makeObservable","tabbableElements","forEach","el","hasAttribute","setAttribute","tabIndex","toString","enableChildrenFocus","makeUnobservable","Array","from","document","querySelectorAll","getAttribute","removeAttribute","target","MutationObserver","config","childList","subtree","observer","observe","disconnect","state","isSpinnerVisible","isLoaderActive","spinnerTask","delayBeforeTaskStart","delayBeforeSpinnerShow","durationOfTask","minimalDelayBeforeSpinnerHide","taskStartCallback","taskStopCallback","componentDidMount","active","start","layoutEvents","addListener","componentDidUpdate","prevProps","prevState","component","update","stop","componentWillUnmount","remove","clearTask","getDerivedStateFromProps","render","emotion","theme","renderMain","caption","type","styles","setRootNode","loader","children","cx","renderSpinner","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper","undefined","Component","__KONTUR_REACT_UI__","displayName","propTypes","bool","node","className","string","oneOf","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { AnyObject } from '../../lib/utils';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Spinner, SpinnerProps } from '../Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration';\nimport { getTabbableElements } from '../../lib/dom/tabbableHelpers';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Loader.styles';\n\nconst types = ['mini', 'normal', 'big'] as const;\n\nexport type LoaderType = typeof types[number];\n\nexport interface LoaderProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Флаг переключения состояния лоадера\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Подпись под спиннером\n   */\n  caption?: SpinnerProps['caption'];\n  /**\n   * Компонент заменяющий спиннер.\n   */\n  component?: React.ReactNode;\n  /**\n   * Размер спиннера и текста\n   *\n   * @default normal\n   */\n  type?: LoaderType;\n  /**\n   * Время в миллисекундах для показа вуали без спиннера.\n   * @default 300\n   */\n  delayBeforeSpinnerShow?: number;\n  /**\n   * Минимальное время в миллисекундах для показа спиннера\n   * @default 1000\n   */\n  minimalDelayBeforeSpinnerHide?: number;\n}\n\nexport interface LoaderState {\n  isStickySpinner: boolean;\n  isSpinnerVisible: boolean;\n  isLoaderActive: boolean;\n  spinnerStyle?: AnyObject;\n}\n\nexport const LoaderDataTids = {\n  veil: 'Loader__Veil',\n  spinner: 'Loader__Spinner',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>\n>;\n\n/**\n * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер\n *\n * Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)\n */\n@rootNode\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\n  public static __KONTUR_REACT_UI__ = 'Loader';\n  public static displayName = 'Loader';\n\n  public static defaultProps: DefaultProps = {\n    type: 'normal',\n    active: false,\n    delayBeforeSpinnerShow: isTestEnv ? 0 : 300,\n    minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,\n  };\n\n  private getProps = createPropsGetter(Loader.defaultProps);\n\n  public static propTypes = {\n    /**\n     * показываем лоадер или нет\n     */\n    active: PropTypes.bool,\n\n    /**\n     * Текст рядом с лоадером.\n     *\n     * @default  \"Загрузка\"\n     */\n    caption: Spinner.propTypes.caption,\n\n    component: PropTypes.node,\n\n    /**\n     * Класс для обертки\n     */\n    className: PropTypes.string,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * @default  normal\n     */\n    type: PropTypes.oneOf(types),\n    /**\n     * Время в миллисекундах для показа вуали без спиннера.\n     * @default 300\n     */\n    delayBeforeSpinnerShow: PropTypes.number,\n    /**\n     * Минимальное время в миллисекундах для показа спиннера\n     * @default 1000\n     */\n    minimalDelayBeforeSpinnerHide: PropTypes.number,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private setRootNode!: TSetRootNode;\n  private spinnerContainerNode: Nullable<HTMLDivElement>;\n  private childrenContainerNode: Nullable<HTMLDivElement>;\n  private spinnerNode: Nullable<HTMLDivElement>;\n  private layoutEvents: Nullable<{ remove: () => void }>;\n  private spinnerTask: TaskWithDelayAndMinimalDuration;\n  private childrenObserver: Nullable<MutationObserver>;\n\n  constructor(props: LoaderProps) {\n    super(props);\n\n    this.spinnerContainerNode = null;\n    this.childrenContainerNode = null;\n    this.childrenObserver = null;\n    this.spinnerNode = null;\n\n    this.state = {\n      isStickySpinner: false,\n      isSpinnerVisible: false,\n      isLoaderActive: false,\n    };\n\n    this.spinnerTask = new TaskWithDelayAndMinimalDuration({\n      delayBeforeTaskStart: this.getProps().delayBeforeSpinnerShow,\n      durationOfTask: this.getProps().minimalDelayBeforeSpinnerHide,\n      taskStartCallback: () => this.setState({ isSpinnerVisible: true }),\n      taskStopCallback: () => this.setState({ isSpinnerVisible: false }),\n    });\n  }\n\n  public componentDidMount() {\n    const active = this.getProps().active;\n    this.checkSpinnerPosition();\n    active && this.spinnerTask.start();\n    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));\n\n    if (active) {\n      this.disableChildrenFocus();\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>) {\n    const { component } = this.props;\n    const { active, delayBeforeSpinnerShow, minimalDelayBeforeSpinnerHide } = this.getProps();\n    const { isLoaderActive } = this.state;\n\n    if ((active && !prevProps.active) || prevProps.component !== component) {\n      this.checkSpinnerPosition();\n    }\n\n    if (\n      delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow ||\n      minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide\n    ) {\n      this.spinnerTask.update({\n        delayBeforeTaskStart: delayBeforeSpinnerShow,\n        durationOfTask: minimalDelayBeforeSpinnerHide,\n      });\n    }\n\n    if (active !== prevProps.active) {\n      active ? this.spinnerTask.start() : this.spinnerTask.stop();\n    }\n\n    if (isLoaderActive !== prevState.isLoaderActive) {\n      if (isLoaderActive) {\n        this.disableChildrenFocus();\n      } else {\n        this.enableChildrenFocus();\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    this.makeUnobservable();\n    if (this.layoutEvents) {\n      this.layoutEvents.remove();\n    }\n    this.spinnerTask.clearTask();\n  }\n\n  public static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState> {\n    if (props.active && !state.isLoaderActive) {\n      return {\n        isLoaderActive: true,\n      };\n    }\n    if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {\n      return {\n        isLoaderActive: false,\n      };\n    }\n\n    return state;\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private renderMain() {\n    const { caption, component } = this.props;\n    const type = this.getProps().type;\n    const { isLoaderActive } = this.state;\n    const styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.loader()} data-tid={isLoaderActive ? LoaderDataTids.veil : ''}>\n          <ZIndex\n            applyZIndex={isLoaderActive}\n            coverChildren={isLoaderActive}\n            style={{ height: '100%' }}\n            wrapperRef={this.childrenRef}\n          >\n            {this.props.children}\n          </ZIndex>\n          {isLoaderActive && (\n            <ZIndex\n              wrapperRef={this.spinnerRef}\n              className={this.emotion.cx({\n                [styles.active(this.theme)]: isLoaderActive,\n              })}\n            >\n              {this.state.isSpinnerVisible && this.renderSpinner(type, caption, component)}\n            </ZIndex>\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private childrenRef = (element: HTMLDivElement | null) => {\n    this.childrenContainerNode = element;\n  };\n\n  private spinnerRef = (element: HTMLDivElement | null) => {\n    this.spinnerContainerNode = element;\n  };\n\n  private renderSpinner(type?: LoaderType, caption?: React.ReactNode, component?: React.ReactNode) {\n    const styles = getStyles(this.emotion);\n\n    return (\n      <span\n        data-tid={LoaderDataTids.spinner}\n        className={this.emotion.cx(styles.spinnerContainer(), {\n          [styles.spinnerContainerSticky()]: this.state.isStickySpinner,\n        })}\n        style={this.state.spinnerStyle}\n      >\n        <div\n          className={styles.spinnerComponentWrapper()}\n          ref={(element) => {\n            this.spinnerNode = element;\n          }}\n        >\n          {component !== undefined ? component : <Spinner type={type} caption={caption} />}\n        </div>\n      </span>\n    );\n  }\n\n  private checkSpinnerPosition = () => {\n    if (!this.spinnerContainerNode || !isBrowser(globalObject)) {\n      return;\n    }\n\n    const {\n      top: containerTop,\n      right: containerRight,\n      bottom: containerBottom,\n      left: containerLeft,\n      height: containerHeight,\n      width: containerWidth,\n    } = getDOMRect(this.spinnerContainerNode);\n\n    const windowHeight = globalObject.innerHeight;\n    const windowWidth = globalObject.innerWidth;\n\n    // Если контейнер не больше высоты и не шире окна,\n    // то просто выравниваем по центру\n    if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\n      this.setState({\n        isStickySpinner: false,\n        spinnerStyle: {},\n      });\n      return;\n    }\n\n    const spinnerStyle: {\n      top?: number;\n      right: number;\n      bottom: number;\n      left: number;\n    } = {\n      top: 30,\n      right: 0,\n      bottom: 30,\n      left: 0,\n    };\n\n    // ПО ВЕРТИКАЛИ\n    // Если верхний край контейнера ниже верхнего края окна,\n    // то сдвигаем и лоадер\n    if (containerTop > 0) {\n      spinnerStyle.top = containerTop + 30;\n    }\n\n    // Если нижний край контейнера выше нижнего края окна,\n    // то сдвигаем и лоадер\n    if (containerBottom < windowHeight) {\n      spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\n    }\n\n    // Если знаем высоту спиннера и нижний край контейнера поднимается\n    // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\n\n    const spinnerHeight = getDOMRect(this.spinnerNode).height;\n\n    if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\n      delete spinnerStyle.top;\n    }\n\n    // ПО ГОРИЗОНТАЛИ\n    // Если левый край контейнера правее левого края окна,\n    // то сдвигаем и лоадер\n    if (containerLeft > 0) {\n      spinnerStyle.left = containerLeft;\n    }\n\n    // Если правый край контейнера левее правого края окна,\n    // то сдвигаем и лоадер\n    if (containerRight < windowWidth) {\n      spinnerStyle.right = windowWidth - containerRight;\n    }\n\n    this.setState({\n      isStickySpinner: true,\n      spinnerStyle,\n    });\n  };\n\n  private disableChildrenFocus = () => {\n    if (!this.childrenObserver) {\n      this.makeObservable();\n    }\n    const tabbableElements = getTabbableElements(this.childrenContainerNode);\n    tabbableElements.forEach((el) => {\n      if (!el.hasAttribute('origin-tabindex')) {\n        el.setAttribute('origin-tabindex', el.tabIndex.toString());\n      }\n      el.tabIndex = -1;\n    });\n  };\n\n  private enableChildrenFocus = () => {\n    this.makeUnobservable();\n    // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers\n    Array.from(globalObject.document?.querySelectorAll('[origin-tabindex]') ?? []).forEach((el) => {\n      el.setAttribute('tabindex', el.getAttribute('origin-tabindex') ?? '0');\n      el.removeAttribute('origin-tabindex');\n    });\n  };\n\n  private makeObservable = () => {\n    const target = this.childrenContainerNode;\n    if (!target || !globalObject.MutationObserver) {\n      return;\n    }\n    const config = {\n      childList: true,\n      subtree: true,\n    };\n    const observer = new globalObject.MutationObserver(this.disableChildrenFocus);\n    observer.observe(target, config);\n    this.childrenObserver = observer;\n  };\n\n  private makeUnobservable = () => {\n    this.childrenObserver?.disconnect();\n    this.childrenObserver = null;\n  };\n}\n"]}