@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/components/Gapped/Gapped.js

@@ -1,69 +1,107 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
-var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-/**
- * Контейнер, расстояние между элементами в котором равно `gap`.
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { isNonNullable } from '../../lib/utils.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+export var GappedDataTids = {
+    vertical: 'Gapped__vertical',
+    horizontal: 'Gapped__horizontal',
+};
+/**
+ * Контейнер `Gapped` устанавливает расстояние равное `gap` между элементами.
  */
-var Gapped = /** @class */function (_super) {
-  tslib_1.__extends(Gapped, _super);
-  function Gapped() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-  Gapped.prototype.render = function () {
-    if (this.props.vertical) {
-      return this.renderVertical();
+var Gapped = /** @class */ (function (_super) {
+    __extends(Gapped, _super);
+    function Gapped() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getProps = createPropsGetter(Gapped_1.defaultProps);
+        return _this;
     }
-    return this.renderHorizontal();
-  };
-  Gapped.prototype.renderVertical = function () {
-    var subsequentItemStyle = {
-      paddingTop: this.props.gap };
-
-    var isFirst = true;
-    var children = react_1["default"].Children.map(this.props.children, function (child) {
-      if (!child) {
-        return child;
-      }
-      var style = isFirst ? undefined : subsequentItemStyle;
-      isFirst = false;
-      return react_1["default"].createElement("div", { style: style }, child);
-    });
-    return react_1["default"].createElement("div", null, children);
-  };
-  Gapped.prototype.renderHorizontal = function () {
-    var _a = this.props,gap = _a.gap,children = _a.children,verticalAlign = _a.verticalAlign,wrap = _a.wrap;
-    var itemStyle = tslib_1.__assign({ display: 'inline-block', verticalAlign: verticalAlign }, wrap ? { marginLeft: gap, marginTop: gap } : {});
-    var rootStyle = wrap ? { paddingTop: 1 } : {};
-    var contStyle = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };
-    return react_1["default"].createElement("div", { style: rootStyle },
-    react_1["default"].createElement("div", { style: contStyle }, react_1["default"].Children.toArray(children).map(function (child, index) {
-      var marginLeft = index === 0 ? undefined : gap;
-      return react_1["default"].createElement("span", { key: index, style: tslib_1.__assign({ marginLeft: marginLeft }, itemStyle) }, child);
-    })));
-  };
-  Gapped.__KONTUR_REACT_UI__ = 'Gapped';
-  Gapped.propTypes = {
-    /**
-     * Расстояние между элементами.
-     */
-    gap: prop_types_1["default"].number,
-    /**
-     * Располагать элементы вертикально.
-     */
-    vertical: prop_types_1["default"].bool,
-    /**
-     * Вертикальное выравнивание элементов.
-     */
-    verticalAlign: prop_types_1["default"].oneOf(['top', 'middle', 'baseline', 'bottom']) };
-
-  Gapped.defaultProps = {
-    gap: 10,
-    wrap: false,
-    vertical: false,
-    verticalAlign: 'baseline' };
-
-  return Gapped;
-}(react_1["default"].Component);
-exports["default"] = Gapped;
+    Gapped_1 = Gapped;
+    Gapped.prototype.render = function () {
+        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props), this.getProps().vertical ? this.renderVertical() : this.renderHorizontal()));
+    };
+    Gapped.prototype.getGapValue = function () {
+        var propsGap = this.props.gap;
+        if (isNonNullable(propsGap)) {
+            return propsGap;
+        }
+        return 8;
+    };
+    Gapped.prototype.renderVertical = function () {
+        var subsequentItemStyle = {
+            paddingTop: this.getGapValue(),
+        };
+        var children = React.Children.toArray(this.props.children)
+            .filter(this.filterChildren)
+            .map(function (child, index) {
+            var style = index === 0 ? undefined : subsequentItemStyle;
+            return (React.createElement("div", { style: style, key: index }, child));
+        });
+        return React.createElement("div", { "data-tid": GappedDataTids.vertical }, children);
+    };
+    Gapped.prototype.renderHorizontal = function () {
+        var _a = this.props, children = _a.children, verticalAlign = _a.verticalAlign;
+        var wrap = this.getProps().wrap;
+        var gap = this.getGapValue();
+        var itemStyle = __assign({ display: 'inline-block', verticalAlign: verticalAlign }, (wrap ? { marginLeft: gap, marginTop: gap } : {}));
+        var rootStyle = wrap ? { paddingTop: 1 } : {};
+        var contStyle = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };
+        return (React.createElement("div", { "data-tid": GappedDataTids.horizontal, style: rootStyle },
+            React.createElement("div", { style: contStyle }, React.Children.toArray(children)
+                .filter(this.filterChildren)
+                .map(function (child, index) {
+                var marginLeft = index === 0 ? undefined : gap;
+                return (React.createElement("span", { key: index, style: __assign({ marginLeft: marginLeft }, itemStyle) }, child));
+            }))));
+    };
+    Gapped.prototype.filterChildren = function (child) {
+        return Boolean(child) || typeof child === 'number';
+    };
+    var Gapped_1;
+    Gapped.__KONTUR_REACT_UI__ = 'Gapped';
+    Gapped.displayName = 'Gapped';
+    Gapped.defaultProps = {
+        wrap: false,
+        vertical: false,
+        verticalAlign: 'baseline',
+    };
+    Gapped = Gapped_1 = __decorate([
+        rootNode
+    ], Gapped);
+    return Gapped;
+}(React.Component));
+export { Gapped };
+//# sourceMappingURL=Gapped.js.map

package/components/Gapped/Gapped.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gapped.js","sourceRoot":"","sources":["Gapped.tsx"],"names":[],"mappings":";;;AAAA,wDAA0B;AAC1B,kEAAmC;AA0BnC;;GAEG;AACH;IAAqB,kCAA4B;IAAjD;;IA8EA,CAAC;IAnDQ,uBAAM,GAAb;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACvB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;SAC9B;QACD,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC;IAEO,+BAAc,GAAtB;QACE,IAAM,mBAAmB,GAAwB;YAC/C,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG;SAC3B,CAAC;QACF,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAM,QAAQ,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAA,KAAK;YAC5D,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,KAAK,CAAC;aACd;YACD,IAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC;YAExD,OAAO,GAAG,KAAK,CAAC;YAEhB,OAAO,uCAAK,KAAK,EAAE,KAAK,IAAG,KAAK,CAAO,CAAC;QAC1C,CAAC,CAAC,CAAC;QAEH,OAAO,2CAAM,QAAQ,CAAO,CAAC;IAC/B,CAAC;IAEO,iCAAgB,GAAxB;QACQ,IAAA,eAAmD,EAAjD,YAAG,EAAE,sBAAQ,EAAE,gCAAa,EAAE,cAAmB,CAAC;QAC1D,IAAM,SAAS,sBACb,OAAO,EAAE,cAAc,EACvB,aAAa,eAAA,IACV,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CACrD,CAAC;QACF,IAAM,SAAS,GAAwB,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACrE,IAAM,SAAS,GAAwB,IAAI,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,GAAG,GAAG,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;QAEnH,OAAO,CACL,uCAAK,KAAK,EAAE,SAAS;YACnB,uCAAK,KAAK,EAAE,SAAS,IAClB,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK;gBACjD,IAAM,UAAU,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;gBACjD,OAAO,CACL,wCAAM,GAAG,EAAE,KAAK,EAAE,KAAK,qBAAI,UAAU,YAAA,IAAK,SAAS,KAChD,KAAK,CACD,CACR,CAAC;YACJ,CAAC,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC;IA5Ea,0BAAmB,GAAG,QAAQ,CAAC;IAE/B,gBAAS,GAAG;QACxB;;WAEG;QACH,GAAG,EAAE,oBAAS,CAAC,MAAM;QAErB;;WAEG;QACH,QAAQ,EAAE,oBAAS,CAAC,IAAI;QAExB;;WAEG;QACH,aAAa,EAAE,oBAAS,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;KACxE,CAAC;IAEY,mBAAY,GAAG;QAC3B,GAAG,EAAE,EAAE;QACP,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,UAAU;KAC1B,CAAC;IAqDJ,aAAC;CAAA,AA9ED,CAAqB,eAAK,CAAC,SAAS,GA8EnC;AAED,kBAAe,MAAM,CAAC"}
+{"version":3,"file":"Gapped.js","sourceRoot":"","sources":["../../../components/Gapped/Gapped.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isNonNullable } from '../../lib/utils.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\n\nexport interface GappedProps extends CommonProps {\n  /** Задает расстояние между элементами в пикселях. */\n  gap?: number;\n\n  /** Задает вертикальное выравнивание. */\n  verticalAlign?: 'top' | 'middle' | 'baseline' | 'bottom';\n\n  /** Располагает элементы по вертикали. */\n  vertical?: boolean;\n\n  /** Переносит элементы на новую строку при горизонтальном расположении. */\n  wrap?: boolean;\n\n  /** @ignore */\n  children: React.ReactNode;\n}\n\nexport const GappedDataTids = {\n  vertical: 'Gapped__vertical',\n  horizontal: 'Gapped__horizontal',\n} as const;\n\ntype DefaultProps = Required<Pick<GappedProps, 'wrap' | 'vertical' | 'verticalAlign'>>;\n\n/**\n * Контейнер `Gapped` устанавливает расстояние равное `gap` между элементами.\n */\n@rootNode\nexport class Gapped extends React.Component<GappedProps> {\n  public static __KONTUR_REACT_UI__ = 'Gapped';\n  public static displayName = 'Gapped';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    wrap: false,\n    vertical: false,\n    verticalAlign: 'baseline',\n  };\n\n  private getProps = createPropsGetter(Gapped.defaultProps);\n\n  public render(): React.JSX.Element {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {this.getProps().vertical ? this.renderVertical() : this.renderHorizontal()}\n      </CommonWrapper>\n    );\n  }\n\n  private getGapValue() {\n    const { gap: propsGap } = this.props;\n    if (isNonNullable(propsGap)) {\n      return propsGap;\n    }\n\n    return 8;\n  }\n\n  private renderVertical() {\n    const subsequentItemStyle: React.CSSProperties = {\n      paddingTop: this.getGapValue(),\n    };\n    const children = React.Children.toArray(this.props.children)\n      .filter(this.filterChildren)\n      .map((child, index) => {\n        const style = index === 0 ? undefined : subsequentItemStyle;\n        return (\n          <div style={style} key={index}>\n            {child}\n          </div>\n        );\n      });\n\n    return <div data-tid={GappedDataTids.vertical}>{children}</div>;\n  }\n\n  private renderHorizontal() {\n    const { children, verticalAlign } = this.props;\n    const wrap = this.getProps().wrap;\n    const gap = this.getGapValue();\n    const itemStyle: React.CSSProperties = {\n      display: 'inline-block',\n      verticalAlign,\n      ...(wrap ? { marginLeft: gap, marginTop: gap } : {}),\n    };\n    const rootStyle: React.CSSProperties = wrap ? { paddingTop: 1 } : {};\n    const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };\n\n    return (\n      <div data-tid={GappedDataTids.horizontal} style={rootStyle}>\n        <div style={contStyle}>\n          {React.Children.toArray(children)\n            .filter(this.filterChildren)\n            .map((child, index) => {\n              const marginLeft = index === 0 ? undefined : gap;\n              return (\n                <span key={index} style={{ marginLeft, ...itemStyle }}>\n                  {child}\n                </span>\n              );\n            })}\n        </div>\n      </div>\n    );\n  }\n\n  private filterChildren(child: React.ReactNode): boolean {\n    return Boolean(child) || typeof child === 'number';\n  }\n}\n"]}

package/components/Gapped/index.d.ts

@@ -1 +1 @@
-export { default, GappedProps } from './Gapped';
+export * from './Gapped.js';

package/components/Gapped/index.js

@@ -1,4 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var Gapped_1 = require("./Gapped");
-exports["default"] = Gapped_1["default"];
+export * from './Gapped.js';
+//# sourceMappingURL=index.js.map

package/components/Gapped/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";;AAAA,mCAAgD;AAAvC,2BAAA,OAAO,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/Gapped/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","sourcesContent":["export * from './Gapped.js';\n"]}

package/components/GlobalLoader/GlobalLoader.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import type { TGetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';
+export interface GlobalLoaderProps {
+    /** Задержка до появления лоадера в миллисекундах. */
+    delayBeforeShow?: number;
+    /** Задержка до исчезновения лоадера в миллисекундах. */
+    delayBeforeHide?: number;
+    /** Ожидаемое время(ms) ответа сервера. */
+    expectedResponseTime?: number;
+    /** Показывать лоадер в виде бегающей полоски. */
+    rejected?: boolean;
+    /** Показывать лоадер. */
+    active?: boolean;
+    /** Отключить анимацию. */
+    disableAnimations?: boolean;
+    /** Событие после появления лоадера. */
+    onStart?(): void;
+    /** Событие после исчезновения лоадера. */
+    onDone?(): void;
+    /** Событие после вызова reject. */
+    onReject?(): void;
+    /** Событие после вызова accept. */
+    onAccept?(): void;
+}
+export interface GlobalLoaderState {
+    visible: boolean;
+    done: boolean;
+    rejected: boolean;
+    accept: boolean;
+    dead: boolean;
+    successAnimationInProgress: boolean;
+    expectedResponseTime: number;
+    started: boolean;
+}
+export declare const GlobalLoaderDataTids: {
+    readonly root: "GlobalLoader";
+};
+type DefaultProps = Required<Pick<GlobalLoaderProps, 'expectedResponseTime' | 'delayBeforeShow' | 'delayBeforeHide' | 'rejected' | 'active' | 'disableAnimations'>>;
+/**
+ * Универсальный индикатор обмена данными с сервером.
+ * Он появляется у верхней границы экрана и выглядит как тоненькая полоска, окрашенная в фирменный цвет продукта.
+ *
+ * Глобальный лоадер может быть только один в приложении. Поэтому каждый новый экземпляр компонента заменяет предыдущий экземпляр и начинает перехватывать статические методы.
+ *
+ * Предполагается монтирование компонента в единственном месте. И управление им через статические методы, либо через пропсы.
+ *
+ */
+export declare class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoaderState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private getProps;
+    private readonly startTask;
+    private readonly stopTask;
+    private readonly resumeTaskAfterSuccessAnimation;
+    static defaultProps: DefaultProps;
+    constructor(props: GlobalLoaderProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: Readonly<GlobalLoaderProps>): void;
+    render(): React.JSX.Element | false;
+    /**
+     * Запускает анимацию лоадера. <br />
+     * Равносильно установке пропа `active = true`.
+     *
+     * @public
+     */
+    static start: (expectedResponseTime?: number) => void;
+    /**
+     * Показывает анимацию успешного завершения загрузки. <br />
+     * Равносильно установке пропа `active = false`.
+     *
+     * @public
+     */
+    static done: () => void;
+    /**
+     * Переключает анимацию лоадера в состояние бегающей полоски. <br />
+     * Равносильно установке пропа `rejected = true`.
+     *
+     * @public
+     */
+    static reject: () => void;
+    /**
+     * Возвращает лоадер из состояния бегающей полоски в обычное и продолжает анимацию с того места, на котором она была прервана. <br />
+     * Равносильно установке пропа `rejected = false`.
+     *
+     * @public
+     */
+    static accept: () => void;
+    setActive: () => void;
+    setDone: () => void;
+    setReject: (reject: boolean) => void;
+    updateExpectedResponseTime(expectedResponseTime: number): void;
+    kill: () => void;
+}
+export {};

package/components/GlobalLoader/GlobalLoader.js

@@ -0,0 +1,240 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import debounce from 'lodash.debounce';
+import { isTestEnv } from '../../lib/currentEnvironment.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { GlobalLoaderView } from './GlobalLoaderView.js';
+export var GlobalLoaderDataTids = {
+    root: 'GlobalLoader',
+};
+var currentGlobalLoader;
+/**
+ * Универсальный индикатор обмена данными с сервером.
+ * Он появляется у верхней границы экрана и выглядит как тоненькая полоска, окрашенная в фирменный цвет продукта.
+ *
+ * Глобальный лоадер может быть только один в приложении. Поэтому каждый новый экземпляр компонента заменяет предыдущий экземпляр и начинает перехватывать статические методы.
+ *
+ * Предполагается монтирование компонента в единственном месте. И управление им через статические методы, либо через пропсы.
+ *
+ */
+var GlobalLoader = /** @class */ (function (_super) {
+    __extends(GlobalLoader, _super);
+    function GlobalLoader(props) {
+        var _this = _super.call(this, props) || this;
+        _this.getProps = createPropsGetter(GlobalLoader_1.defaultProps);
+        _this.startTask = debounce(function () {
+            var _a, _b;
+            _this.setState({ visible: true });
+            (_b = (_a = _this.props).onStart) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }, _this.getProps().delayBeforeShow);
+        _this.stopTask = debounce(function () {
+            var _a, _b;
+            _this.setState({ visible: false, successAnimationInProgress: false, started: false });
+            (_b = (_a = _this.props).onDone) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }, _this.getProps().delayBeforeHide);
+        _this.resumeTaskAfterSuccessAnimation = debounce(function () {
+            _this.setActive();
+        }, _this.getProps().delayBeforeHide);
+        _this.setActive = function () {
+            _this.startTask.cancel();
+            if (_this.state.successAnimationInProgress) {
+                _this.resumeTaskAfterSuccessAnimation();
+            }
+            else {
+                _this.setState({ visible: false, done: false, rejected: false, accept: false, started: true });
+                if (_this.getProps().rejected) {
+                    _this.setReject(true);
+                }
+                else {
+                    _this.stopTask.cancel();
+                    _this.startTask();
+                }
+            }
+        };
+        _this.setDone = function () {
+            if (!_this.state.started) {
+                return;
+            }
+            _this.setState({ done: true, successAnimationInProgress: true });
+            _this.startTask.cancel();
+            _this.resumeTaskAfterSuccessAnimation.cancel();
+            _this.stopTask();
+        };
+        _this.setReject = function (reject) {
+            var _a, _b, _c, _d;
+            if (!_this.state.visible && (_this.state.started || _this.getProps().active)) {
+                _this.setState({ visible: true });
+            }
+            _this.startTask.cancel();
+            _this.stopTask.cancel();
+            if (reject) {
+                (_b = (_a = _this.props).onReject) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+            else if (_this.state.rejected) {
+                _this.setState({ accept: true });
+                (_d = (_c = _this.props).onAccept) === null || _d === void 0 ? void 0 : _d.call(_c);
+            }
+            _this.setState({ rejected: reject });
+        };
+        _this.kill = function () {
+            _this.stopTask.cancel();
+            _this.startTask.cancel();
+            _this.resumeTaskAfterSuccessAnimation.cancel();
+            _this.setState({
+                dead: true,
+            });
+        };
+        _this.state = {
+            started: false,
+            visible: false,
+            done: false,
+            rejected: false,
+            accept: false,
+            dead: false,
+            successAnimationInProgress: false,
+            expectedResponseTime: _this.getProps().expectedResponseTime,
+        };
+        return _this;
+    }
+    GlobalLoader_1 = GlobalLoader;
+    GlobalLoader.prototype.componentDidMount = function () {
+        currentGlobalLoader === null || currentGlobalLoader === void 0 ? void 0 : currentGlobalLoader.kill();
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        currentGlobalLoader = this;
+        var _a = this.getProps(), active = _a.active, rejected = _a.rejected;
+        if (active) {
+            this.setActive();
+        }
+        if (rejected) {
+            this.setReject(true);
+        }
+    };
+    GlobalLoader.prototype.componentWillUnmount = function () {
+        currentGlobalLoader = null;
+    };
+    GlobalLoader.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.getProps(), expectedResponseTime = _a.expectedResponseTime, rejected = _a.rejected, active = _a.active;
+        if (expectedResponseTime !== prevProps.expectedResponseTime) {
+            this.setState({ expectedResponseTime: expectedResponseTime });
+        }
+        if (rejected !== prevProps.rejected) {
+            this.setReject(rejected);
+        }
+        if (active !== prevProps.active) {
+            if (active) {
+                this.setActive();
+            }
+            else {
+                this.setDone();
+            }
+        }
+    };
+    GlobalLoader.prototype.render = function () {
+        var status = 'standard';
+        if (this.state.done) {
+            status = 'success';
+        }
+        else if (this.state.rejected) {
+            status = 'error';
+        }
+        else if (this.state.accept) {
+            status = 'accept';
+        }
+        var _a = this.getProps(), delayBeforeHide = _a.delayBeforeHide, disableAnimations = _a.disableAnimations;
+        return (!this.state.dead &&
+            this.state.visible && (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
+            React.createElement(GlobalLoaderView, { expectedResponseTime: this.state.expectedResponseTime, delayBeforeHide: delayBeforeHide, status: status, "data-tid": GlobalLoaderDataTids.root, disableAnimations: disableAnimations }))));
+    };
+    GlobalLoader.prototype.updateExpectedResponseTime = function (expectedResponseTime) {
+        this.setState({ expectedResponseTime: expectedResponseTime });
+    };
+    var GlobalLoader_1;
+    GlobalLoader.__KONTUR_REACT_UI__ = 'GlobalLoader';
+    GlobalLoader.displayName = 'GlobalLoader';
+    GlobalLoader.defaultProps = {
+        expectedResponseTime: 1000,
+        delayBeforeShow: 1000,
+        delayBeforeHide: 1000,
+        rejected: false,
+        active: false,
+        disableAnimations: isTestEnv,
+    };
+    /**
+     * Запускает анимацию лоадера. <br />
+     * Равносильно установке пропа `active = true`.
+     *
+     * @public
+     */
+    GlobalLoader.start = function (expectedResponseTime) {
+        currentGlobalLoader === null || currentGlobalLoader === void 0 ? void 0 : currentGlobalLoader.setActive();
+        if (typeof expectedResponseTime === 'number') {
+            currentGlobalLoader === null || currentGlobalLoader === void 0 ? void 0 : currentGlobalLoader.updateExpectedResponseTime(expectedResponseTime);
+        }
+    };
+    /**
+     * Показывает анимацию успешного завершения загрузки. <br />
+     * Равносильно установке пропа `active = false`.
+     *
+     * @public
+     */
+    GlobalLoader.done = function () {
+        currentGlobalLoader === null || currentGlobalLoader === void 0 ? void 0 : currentGlobalLoader.setDone();
+    };
+    /**
+     * Переключает анимацию лоадера в состояние бегающей полоски. <br />
+     * Равносильно установке пропа `rejected = true`.
+     *
+     * @public
+     */
+    GlobalLoader.reject = function () {
+        currentGlobalLoader === null || currentGlobalLoader === void 0 ? void 0 : currentGlobalLoader.setReject(true);
+    };
+    /**
+     * Возвращает лоадер из состояния бегающей полоски в обычное и продолжает анимацию с того места, на котором она была прервана. <br />
+     * Равносильно установке пропа `rejected = false`.
+     *
+     * @public
+     */
+    GlobalLoader.accept = function () {
+        currentGlobalLoader === null || currentGlobalLoader === void 0 ? void 0 : currentGlobalLoader.setReject(false);
+    };
+    GlobalLoader = GlobalLoader_1 = __decorate([
+        rootNode
+    ], GlobalLoader);
+    return GlobalLoader;
+}(React.Component));
+export { GlobalLoader };
+//# sourceMappingURL=GlobalLoader.js.map

package/components/GlobalLoader/GlobalLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalLoader.js","sourceRoot":"","sources":["../../../components/GlobalLoader/GlobalLoader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AA4CzD,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,cAAc;CACZ,CAAC;AASX,IAAI,mBAAwC,CAAC;AAE7C;;;;;;;;GAQG;AAEH;IAAkC,gCAAqD;IA+BrF,sBAAY,KAAwB;QAClC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QA1BP,cAAQ,GAAG,iBAAiB,CAAC,cAAY,CAAC,YAAY,CAAC,CAAC;QAE/C,eAAS,GAAG,QAAQ,CAAC;;YACpC,KAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACjC,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,OAAO,kDAAI,CAAC;QACzB,CAAC,EAAE,KAAI,CAAC,QAAQ,EAAE,CAAC,eAAe,CAAC,CAAC;QAEnB,cAAQ,GAAG,QAAQ,CAAC;;YACnC,KAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;YACrF,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,MAAM,kDAAI,CAAC;QACxB,CAAC,EAAE,KAAI,CAAC,QAAQ,EAAE,CAAC,eAAe,CAAC,CAAC;QAEnB,qCAA+B,GAAG,QAAQ,CAAC;YAC1D,KAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC,EAAE,KAAI,CAAC,QAAQ,EAAE,CAAC,eAAe,CAAC,CAAC;QAgI7B,eAAS,GAAG;YACjB,KAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,KAAI,CAAC,KAAK,CAAC,0BAA0B,EAAE,CAAC;gBAC1C,KAAI,CAAC,+BAA+B,EAAE,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,KAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC9F,IAAI,KAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC;oBAC7B,KAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC;qBAAM,CAAC;oBACN,KAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;oBACvB,KAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEK,aAAO,GAAG;YACf,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YACD,KAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,EAAE,CAAC,CAAC;YAChE,KAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACxB,KAAI,CAAC,+BAA+B,CAAC,MAAM,EAAE,CAAC;YAC9C,KAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC;QAEK,eAAS,GAAG,UAAC,MAAe;;YACjC,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC1E,KAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACnC,CAAC;YACD,KAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACxB,KAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACvB,IAAI,MAAM,EAAE,CAAC;gBACX,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,QAAQ,kDAAI,CAAC;YAC1B,CAAC;iBAAM,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAC/B,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;gBAChC,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,QAAQ,kDAAI,CAAC;YAC1B,CAAC;YACD,KAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QAMK,UAAI,GAAG;YACZ,KAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACvB,KAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACxB,KAAI,CAAC,+BAA+B,CAAC,MAAM,EAAE,CAAC;YAC9C,KAAI,CAAC,QAAQ,CAAC;gBACZ,IAAI,EAAE,IAAI;aACX,CAAC,CAAC;QACL,CAAC,CAAC;QAtKA,KAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,KAAK;YACb,IAAI,EAAE,KAAK;YACX,0BAA0B,EAAE,KAAK;YACjC,oBAAoB,EAAE,KAAI,CAAC,QAAQ,EAAE,CAAC,oBAAoB;SAC3D,CAAC;;IACJ,CAAC;qBA3CU,YAAY;IA4CvB,wCAAiB,GAAjB;QACE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,IAAI,EAAE,CAAC;QAC5B,4DAA4D;QAC5D,mBAAmB,GAAG,IAAI,CAAC;QACrB,IAAA,KAAuB,IAAI,CAAC,QAAQ,EAAE,EAApC,MAAM,YAAA,EAAE,QAAQ,cAAoB,CAAC;QAC7C,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;QACD,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,2CAAoB,GAApB;QACE,mBAAmB,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,yCAAkB,GAAlB,UAAmB,SAAsC;QACjD,IAAA,KAA6C,IAAI,CAAC,QAAQ,EAAE,EAA1D,oBAAoB,0BAAA,EAAE,QAAQ,cAAA,EAAE,MAAM,YAAoB,CAAC;QACnE,IAAI,oBAAoB,KAAK,SAAS,CAAC,oBAAoB,EAAE,CAAC;YAC5D,IAAI,CAAC,QAAQ,CAAC,EAAE,oBAAoB,sBAAA,EAAE,CAAC,CAAC;QAC1C,CAAC;QACD,IAAI,QAAQ,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;YAChC,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,6BAAM,GAAb;QACE,IAAI,MAAM,GAAoC,UAAU,CAAC;QAEzD,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACpB,MAAM,GAAG,SAAS,CAAC;QACrB,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC/B,MAAM,GAAG,OAAO,CAAC;QACnB,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAC7B,MAAM,GAAG,QAAQ,CAAC;QACpB,CAAC;QACK,IAAA,KAAyC,IAAI,CAAC,QAAQ,EAAE,EAAtD,eAAe,qBAAA,EAAE,iBAAiB,uBAAoB,CAAC;QAC/D,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI;YAChB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CACpB,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK;YAC1D,oBAAC,gBAAgB,IACf,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,EACrD,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,MAAM,cACJ,oBAAoB,CAAC,IAAI,EACnC,iBAAiB,EAAE,iBAAiB,GACpC,CACY,CACjB,CACF,CAAC;IACJ,CAAC;IAqFM,iDAA0B,GAAjC,UAAkC,oBAA4B;QAC5D,IAAI,CAAC,QAAQ,CAAC,EAAE,oBAAoB,sBAAA,EAAE,CAAC,CAAC;IAC1C,CAAC;;IA7La,gCAAmB,GAAG,cAAc,AAAjB,CAAkB;IACrC,wBAAW,GAAG,cAAc,AAAjB,CAAkB;IAoB7B,yBAAY,GAAiB;QACzC,oBAAoB,EAAE,IAAI;QAC1B,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,KAAK;QACb,iBAAiB,EAAE,SAAS;KAC7B,AAPyB,CAOxB;IA4EF;;;;;OAKG;IACW,kBAAK,GAAG,UAAC,oBAA6B;QAClD,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,EAAE,CAAC;QACjC,IAAI,OAAO,oBAAoB,KAAK,QAAQ,EAAE,CAAC;YAC7C,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;QACxE,CAAC;IACH,CAAC,AALkB,CAKjB;IAEF;;;;;OAKG;IACW,iBAAI,GAAG;QACnB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,EAAE,CAAC;IACjC,CAAC,AAFiB,CAEhB;IAEF;;;;;OAKG;IACW,mBAAM,GAAG;QACrB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC,AAFmB,CAElB;IAEF;;;;;OAKG;IACW,mBAAM,GAAG;QACrB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,AAFmB,CAElB;IAlJS,YAAY;QADxB,QAAQ;OACI,YAAY,CAwMxB;IAAD,mBAAC;CAAA,AAxMD,CAAkC,KAAK,CAAC,SAAS,GAwMhD;SAxMY,YAAY","sourcesContent":["import React from 'react';\nimport debounce from 'lodash.debounce';\n\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\n\nimport type { GlobalLoaderViewProps } from './GlobalLoaderView.js';\nimport { GlobalLoaderView } from './GlobalLoaderView.js';\n\nexport interface GlobalLoaderProps {\n  /** Задержка до появления лоадера в миллисекундах. */\n  delayBeforeShow?: number;\n\n  /** Задержка до исчезновения лоадера в миллисекундах. */\n  delayBeforeHide?: number;\n\n  /** Ожидаемое время(ms) ответа сервера. */\n  expectedResponseTime?: number;\n\n  /** Показывать лоадер в виде бегающей полоски. */\n  rejected?: boolean;\n\n  /** Показывать лоадер. */\n  active?: boolean;\n\n  /** Отключить анимацию. */\n  disableAnimations?: boolean;\n\n  /** Событие после появления лоадера. */\n  onStart?(): void;\n\n  /** Событие после исчезновения лоадера. */\n  onDone?(): void;\n\n  /** Событие после вызова reject. */\n  onReject?(): void;\n\n  /** Событие после вызова accept. */\n  onAccept?(): void;\n}\nexport interface GlobalLoaderState {\n  visible: boolean;\n  done: boolean;\n  rejected: boolean;\n  accept: boolean;\n  dead: boolean;\n  successAnimationInProgress: boolean;\n  expectedResponseTime: number;\n  started: boolean;\n}\n\nexport const GlobalLoaderDataTids = {\n  root: 'GlobalLoader',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<\n    GlobalLoaderProps,\n    'expectedResponseTime' | 'delayBeforeShow' | 'delayBeforeHide' | 'rejected' | 'active' | 'disableAnimations'\n  >\n>;\n\nlet currentGlobalLoader: GlobalLoader | null;\n\n/**\n * Универсальный индикатор обмена данными с сервером.\n * Он появляется у верхней границы экрана и выглядит как тоненькая полоска, окрашенная в фирменный цвет продукта.\n *\n * Глобальный лоадер может быть только один в приложении. Поэтому каждый новый экземпляр компонента заменяет предыдущий экземпляр и начинает перехватывать статические методы.\n *\n * Предполагается монтирование компонента в единственном месте. И управление им через статические методы, либо через пропсы.\n *\n */\n@rootNode\nexport class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoaderState> {\n  public static __KONTUR_REACT_UI__ = 'GlobalLoader';\n  public static displayName = 'GlobalLoader';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private getProps = createPropsGetter(GlobalLoader.defaultProps);\n\n  private readonly startTask = debounce(() => {\n    this.setState({ visible: true });\n    this.props.onStart?.();\n  }, this.getProps().delayBeforeShow);\n\n  private readonly stopTask = debounce(() => {\n    this.setState({ visible: false, successAnimationInProgress: false, started: false });\n    this.props.onDone?.();\n  }, this.getProps().delayBeforeHide);\n\n  private readonly resumeTaskAfterSuccessAnimation = debounce(() => {\n    this.setActive();\n  }, this.getProps().delayBeforeHide);\n\n  public static defaultProps: DefaultProps = {\n    expectedResponseTime: 1000,\n    delayBeforeShow: 1000,\n    delayBeforeHide: 1000,\n    rejected: false,\n    active: false,\n    disableAnimations: isTestEnv,\n  };\n\n  constructor(props: GlobalLoaderProps) {\n    super(props);\n    this.state = {\n      started: false,\n      visible: false,\n      done: false,\n      rejected: false,\n      accept: false,\n      dead: false,\n      successAnimationInProgress: false,\n      expectedResponseTime: this.getProps().expectedResponseTime,\n    };\n  }\n  componentDidMount() {\n    currentGlobalLoader?.kill();\n    // eslint-disable-next-line @typescript-eslint/no-this-alias\n    currentGlobalLoader = this;\n    const { active, rejected } = this.getProps();\n    if (active) {\n      this.setActive();\n    }\n    if (rejected) {\n      this.setReject(true);\n    }\n  }\n\n  componentWillUnmount(): void {\n    currentGlobalLoader = null;\n  }\n\n  componentDidUpdate(prevProps: Readonly<GlobalLoaderProps>) {\n    const { expectedResponseTime, rejected, active } = this.getProps();\n    if (expectedResponseTime !== prevProps.expectedResponseTime) {\n      this.setState({ expectedResponseTime });\n    }\n    if (rejected !== prevProps.rejected) {\n      this.setReject(rejected);\n    }\n    if (active !== prevProps.active) {\n      if (active) {\n        this.setActive();\n      } else {\n        this.setDone();\n      }\n    }\n  }\n\n  public render(): React.JSX.Element | false {\n    let status: GlobalLoaderViewProps['status'] = 'standard';\n\n    if (this.state.done) {\n      status = 'success';\n    } else if (this.state.rejected) {\n      status = 'error';\n    } else if (this.state.accept) {\n      status = 'accept';\n    }\n    const { delayBeforeHide, disableAnimations } = this.getProps();\n    return (\n      !this.state.dead &&\n      this.state.visible && (\n        <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n          <GlobalLoaderView\n            expectedResponseTime={this.state.expectedResponseTime}\n            delayBeforeHide={delayBeforeHide}\n            status={status}\n            data-tid={GlobalLoaderDataTids.root}\n            disableAnimations={disableAnimations}\n          />\n        </CommonWrapper>\n      )\n    );\n  }\n\n  /**\n   * Запускает анимацию лоадера. <br />\n   * Равносильно установке пропа `active = true`.\n   *\n   * @public\n   */\n  public static start = (expectedResponseTime?: number): void => {\n    currentGlobalLoader?.setActive();\n    if (typeof expectedResponseTime === 'number') {\n      currentGlobalLoader?.updateExpectedResponseTime(expectedResponseTime);\n    }\n  };\n\n  /**\n   * Показывает анимацию успешного завершения загрузки. <br />\n   * Равносильно установке пропа `active = false`.\n   *\n   * @public\n   */\n  public static done = (): void => {\n    currentGlobalLoader?.setDone();\n  };\n\n  /**\n   * Переключает анимацию лоадера в состояние бегающей полоски. <br />\n   * Равносильно установке пропа `rejected = true`.\n   *\n   * @public\n   */\n  public static reject = (): void => {\n    currentGlobalLoader?.setReject(true);\n  };\n\n  /**\n   * Возвращает лоадер из состояния бегающей полоски в обычное и продолжает анимацию с того места, на котором она была прервана. <br />\n   * Равносильно установке пропа `rejected = false`.\n   *\n   * @public\n   */\n  public static accept = (): void => {\n    currentGlobalLoader?.setReject(false);\n  };\n\n  public setActive = (): void => {\n    this.startTask.cancel();\n    if (this.state.successAnimationInProgress) {\n      this.resumeTaskAfterSuccessAnimation();\n    } else {\n      this.setState({ visible: false, done: false, rejected: false, accept: false, started: true });\n      if (this.getProps().rejected) {\n        this.setReject(true);\n      } else {\n        this.stopTask.cancel();\n        this.startTask();\n      }\n    }\n  };\n\n  public setDone = (): void => {\n    if (!this.state.started) {\n      return;\n    }\n    this.setState({ done: true, successAnimationInProgress: true });\n    this.startTask.cancel();\n    this.resumeTaskAfterSuccessAnimation.cancel();\n    this.stopTask();\n  };\n\n  public setReject = (reject: boolean): void => {\n    if (!this.state.visible && (this.state.started || this.getProps().active)) {\n      this.setState({ visible: true });\n    }\n    this.startTask.cancel();\n    this.stopTask.cancel();\n    if (reject) {\n      this.props.onReject?.();\n    } else if (this.state.rejected) {\n      this.setState({ accept: true });\n      this.props.onAccept?.();\n    }\n    this.setState({ rejected: reject });\n  };\n\n  public updateExpectedResponseTime(expectedResponseTime: number): void {\n    this.setState({ expectedResponseTime });\n  }\n\n  public kill = (): void => {\n    this.stopTask.cancel();\n    this.startTask.cancel();\n    this.resumeTaskAfterSuccessAnimation.cancel();\n    this.setState({\n      dead: true,\n    });\n  };\n}\n"]}

package/components/GlobalLoader/GlobalLoaderView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+export interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {
+    /** Устанавливает ожидаемое время(ms) ответа сервера. */
+    expectedResponseTime: number;
+    /** Устанавливает задержку в миллисекундах до исчезновения лоадера. */
+    delayBeforeHide: number;
+    /** Устанавливает статус операции. */
+    status?: 'success' | 'error' | 'standard' | 'accept';
+    /** Отключает анимацию. */
+    disableAnimations: boolean;
+}
+export interface GlobalLoaderViewRef {
+    element: HTMLDivElement;
+    refObject: React.RefObject<GlobalLoaderViewRef['element'] | null>;
+}
+export declare const GlobalLoaderView: React.ForwardRefExoticComponent<GlobalLoaderViewProps & React.RefAttributes<CommonWrapper<CommonProps>>>;