@hh.ru/magritte-ui-full-screen-loader 1.0.1

package/FullScreenLoader.d.ts

@@ -0,0 +1,5 @@
+import { LoaderProps } from '@hh.ru/magritte-ui-loader';
+export interface FullScreenLoaderProps {
+    loading: boolean;
+}
+export declare const FullScreenLoader: React.FC<FullScreenLoaderProps & Omit<LoaderProps, 'size'>>;

package/FullScreenLoader.js

@@ -0,0 +1,58 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+import { useServerEnv } from '@hh.ru/magritte-common-is-server-env';
+import { disableScroll } from '@hh.ru/magritte-common-modal-helper';
+import { Layer } from '@hh.ru/magritte-ui-layer';
+import { Loader } from '@hh.ru/magritte-ui-loader';
+import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
+
+var styles = {"animation-timeout":"magritte-animation-timeout___aTdGa_1-0-1","animationTimeout":"magritte-animation-timeout___aTdGa_1-0-1","enter-animation":"magritte-enter-animation___TqSXR_1-0-1","enterAnimation":"magritte-enter-animation___TqSXR_1-0-1","enter-animation-active":"magritte-enter-animation-active___Jfsvw_1-0-1","enterAnimationActive":"magritte-enter-animation-active___Jfsvw_1-0-1","exit-animation":"magritte-exit-animation___6VlKj_1-0-1","exitAnimation":"magritte-exit-animation___6VlKj_1-0-1","exit-animation-active":"magritte-exit-animation-active___VanCA_1-0-1","exitAnimationActive":"magritte-exit-animation-active___VanCA_1-0-1","overlay":"magritte-overlay___YsKtP_1-0-1","loader":"magritte-loader___vx7PF_1-0-1"};
+
+const CSS_CLASSES = {
+    enter: styles.enterAnimation,
+    enterActive: styles.enterAnimationActive,
+    exit: styles.exitAnimation,
+    exitActive: styles.exitAnimationActive,
+};
+const toInteger = (value) => {
+    const result = parseInt(value, 10);
+    return !Number.isNaN(result) ? result : 0;
+};
+const FullScreenLoader = ({ loading, ...props }) => {
+    const [animationTimeout, setAnimationTimeout] = useState(null);
+    const animationTimeoutRef = useRef(animationTimeout);
+    animationTimeoutRef.current = animationTimeout;
+    const animatedElementRef = useRef(null);
+    useEffect(() => {
+        const animationTimeoutElement = document.createElement('div');
+        animationTimeoutElement.classList.add(styles.animationTimeout);
+        document.body.appendChild(animationTimeoutElement);
+        const style = window.getComputedStyle(animationTimeoutElement);
+        const enter = toInteger(style.getPropertyValue('--enter-animation-duration'));
+        const exit = toInteger(style.getPropertyValue('--exit-animation-duration'));
+        setAnimationTimeout({ enter, exit });
+        document.body.removeChild(animationTimeoutElement);
+    }, [setAnimationTimeout]);
+    useEffect(() => {
+        if (loading) {
+            let enableScroll = disableScroll();
+            return () => {
+                enableScroll?.(animationTimeoutRef.current?.exit);
+                enableScroll = undefined;
+            };
+        }
+        return void 0;
+    }, [loading]);
+    const isServerEnv = useServerEnv();
+    if (!animationTimeout || isServerEnv) {
+        return null;
+    }
+    return createPortal(jsx(CSSTransition, { appear: true, classNames: CSS_CLASSES, in: loading, mountOnEnter: true, nodeRef: animatedElementRef, timeout: animationTimeout, unmountOnExit: true, children: jsx(ThemeWrapper, { children: (themeClass) => (jsx(Layer, { layer: "full-screen-loader", children: jsx("div", { className: classnames(styles.animationTimeout, styles.overlay, themeClass), ref: animatedElementRef, children: jsx("div", { className: styles.loader, children: jsx(Loader, { initial: "contrast", size: 48, ...props }) }) }) })) }) }), document.body);
+};
+
+export { FullScreenLoader };
+//# sourceMappingURL=FullScreenLoader.js.map

package/FullScreenLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenLoader.js","sources":["../src/FullScreenLoader.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { disableScroll, TimeoutCallback } from '@hh.ru/magritte-common-modal-helper';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { Loader, LoaderProps } from '@hh.ru/magritte-ui-loader';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from './full-screen-loader.less';\n\ntype AnimationTimeout = { enter: number; exit: number };\n\nexport interface FullScreenLoaderProps {\n    loading: boolean;\n}\n\nconst CSS_CLASSES = {\n    enter: styles.enterAnimation,\n    enterActive: styles.enterAnimationActive,\n    exit: styles.exitAnimation,\n    exitActive: styles.exitAnimationActive,\n};\n\nconst toInteger = (value: string) => {\n    const result = parseInt(value, 10);\n    return !Number.isNaN(result) ? result : 0;\n};\n\nexport const FullScreenLoader: React.FC<FullScreenLoaderProps & Omit<LoaderProps, 'size'>> = ({\n    loading,\n    ...props\n}) => {\n    const [animationTimeout, setAnimationTimeout] = useState<AnimationTimeout | null>(null);\n    const animationTimeoutRef = useRef(animationTimeout);\n    animationTimeoutRef.current = animationTimeout;\n    const animatedElementRef = useRef(null);\n\n    useEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.animationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const enter = toInteger(style.getPropertyValue('--enter-animation-duration'));\n        const exit = toInteger(style.getPropertyValue('--exit-animation-duration'));\n        setAnimationTimeout({ enter, exit });\n        document.body.removeChild(animationTimeoutElement);\n    }, [setAnimationTimeout]);\n\n    useEffect(() => {\n        if (loading) {\n            let enableScroll: TimeoutCallback | undefined = disableScroll();\n            return () => {\n                enableScroll?.(animationTimeoutRef.current?.exit);\n                enableScroll = undefined;\n            };\n        }\n\n        return void 0;\n    }, [loading]);\n\n    const isServerEnv = useServerEnv();\n    if (!animationTimeout || isServerEnv) {\n        return null;\n    }\n\n    return createPortal(\n        <CSSTransition\n            appear\n            classNames={CSS_CLASSES}\n            in={loading}\n            mountOnEnter\n            nodeRef={animatedElementRef}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            <ThemeWrapper>\n                {(themeClass) => (\n                    <Layer layer=\"full-screen-loader\">\n                        <div\n                            className={classnames(styles.animationTimeout, styles.overlay, themeClass)}\n                            ref={animatedElementRef}\n                        >\n                            <div className={styles.loader}>\n                                <Loader initial=\"contrast\" size={48} {...props} />\n                            </div>\n                        </div>\n                    </Layer>\n                )}\n            </ThemeWrapper>\n        </CSSTransition>,\n        document.body\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/index.css

@@ -0,0 +1,57 @@
+:root{
+  --magritte-color-background-overlay-v23-2-3:#20262b99;
+  --magritte-color-background-constant-secondary-v23-2-3:#303030;
+}
+
+:root{
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v23-2-3:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v23-2-3:200ms;
+  --magritte-semantic-animation-ease-in-out-300-timing-function-v23-2-3:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-300-duration-v23-2-3:300ms;
+}
+
+.magritte-night-theme{
+  --magritte-color-background-constant-secondary-v23-2-3:#343c43;
+}
+.magritte-animation-timeout___aTdGa_1-0-1{
+  --enter-animation-duration:0ms;
+  --exit-animation-duration:0ms;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-timeout___aTdGa_1-0-1{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v23-2-3);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v23-2-3);
+  }
+}
+.magritte-enter-animation___TqSXR_1-0-1{
+  opacity:0;
+}
+.magritte-enter-animation-active___Jfsvw_1-0-1{
+  opacity:1;
+  transition-property:opacity;
+  transition-duration:var(--enter-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v23-2-3);
+}
+.magritte-exit-animation___6VlKj_1-0-1{
+  opacity:1;
+}
+.magritte-exit-animation-active___VanCA_1-0-1{
+  opacity:0;
+  transition-property:opacity;
+  transition-duration:var(--exit-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v23-2-3);
+}
+.magritte-overlay___YsKtP_1-0-1{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  position:fixed;
+  inset:0;
+  background-color:var(--magritte-color-background-overlay-v23-2-3);
+}
+.magritte-loader___vx7PF_1-0-1{
+  background-color:var(--magritte-color-background-constant-secondary-v23-2-3);
+  border-radius:28px;
+  line-height:0;
+  padding:20px;
+}

package/index.d.ts

@@ -0,0 +1 @@
+export * from '@hh.ru/magritte-ui-full-screen-loader/FullScreenLoader';

package/index.js

@@ -0,0 +1,13 @@
+import './index.css';
+export { FullScreenLoader } from './FullScreenLoader.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-dom';
+import 'react-transition-group';
+import 'classnames';
+import '@hh.ru/magritte-common-is-server-env';
+import '@hh.ru/magritte-common-modal-helper';
+import '@hh.ru/magritte-ui-layer';
+import '@hh.ru/magritte-ui-loader';
+import '@hh.ru/magritte-ui-theme-wrapper';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/index.mock.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@hh.ru/magritte-ui-full-screen-loader",
+  "version": "1.0.1",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-check": "yarn root:stylelint-check $(pwd)",
+    "eslint-check": "yarn root:eslint-check $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)",
+    "watch": "yarn root:watch $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-is-server-env": "1.0.7",
+    "@hh.ru/magritte-common-modal-helper": "1.2.10",
+    "@hh.ru/magritte-design-tokens": "23.2.3",
+    "@hh.ru/magritte-ui-layer": "3.0.5",
+    "@hh.ru/magritte-ui-loader": "2.0.13",
+    "@hh.ru/magritte-ui-theme-wrapper": "1.1.3"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "react-transition-group": ">=4.4.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "90a91eaf0ef55ef0ae534be060b7bf4c27736f36"
+}