@hh.ru/magritte-ui-full-screen-loader 1.1.8 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/FullScreenLoader.js +2 -2
- package/FullScreenLoader.js.map +1 -1
- package/index.css +8 -8
- package/package.json +3 -3
package/FullScreenLoader.js
CHANGED
|
@@ -10,7 +10,7 @@ import { Layer } from '@hh.ru/magritte-ui-layer';
|
|
|
10
10
|
import { Loader } from '@hh.ru/magritte-ui-loader';
|
|
11
11
|
import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
|
|
12
12
|
|
|
13
|
-
var styles = {"animation-timeout":"magritte-animation-timeout___aTdGa_1-1-
|
|
13
|
+
var styles = {"animation-timeout":"magritte-animation-timeout___aTdGa_1-1-9","animationTimeout":"magritte-animation-timeout___aTdGa_1-1-9","enter-animation":"magritte-enter-animation___TqSXR_1-1-9","enterAnimation":"magritte-enter-animation___TqSXR_1-1-9","enter-animation-active":"magritte-enter-animation-active___Jfsvw_1-1-9","enterAnimationActive":"magritte-enter-animation-active___Jfsvw_1-1-9","exit-animation":"magritte-exit-animation___6VlKj_1-1-9","exitAnimation":"magritte-exit-animation___6VlKj_1-1-9","exit-animation-active":"magritte-exit-animation-active___VanCA_1-1-9","exitAnimationActive":"magritte-exit-animation-active___VanCA_1-1-9","overlay":"magritte-overlay___YsKtP_1-1-9","loader":"magritte-loader___vx7PF_1-1-9"};
|
|
14
14
|
|
|
15
15
|
const CSS_CLASSES = {
|
|
16
16
|
enter: styles.enterAnimation,
|
|
@@ -51,7 +51,7 @@ const FullScreenLoader = ({ loading, ...props }) => {
|
|
|
51
51
|
if (!animationTimeout || isServerEnv) {
|
|
52
52
|
return null;
|
|
53
53
|
}
|
|
54
|
-
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: "
|
|
54
|
+
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: "constant", size: 48, ...props }) }) }) })) }) }), document.body);
|
|
55
55
|
};
|
|
56
56
|
|
|
57
57
|
export { FullScreenLoader };
|
package/FullScreenLoader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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=\"
|
|
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=\"constant\" 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
CHANGED
|
@@ -13,35 +13,35 @@
|
|
|
13
13
|
.magritte-night-theme{
|
|
14
14
|
--magritte-color-background-constant-secondary-v24-5-0:#343c43;
|
|
15
15
|
}
|
|
16
|
-
.magritte-animation-timeout___aTdGa_1-1-
|
|
16
|
+
.magritte-animation-timeout___aTdGa_1-1-9{
|
|
17
17
|
--enter-animation-duration:0ms;
|
|
18
18
|
--exit-animation-duration:0ms;
|
|
19
19
|
}
|
|
20
20
|
@media (prefers-reduced-motion: no-preference){
|
|
21
|
-
.magritte-animation-timeout___aTdGa_1-1-
|
|
21
|
+
.magritte-animation-timeout___aTdGa_1-1-9{
|
|
22
22
|
--enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v24-5-0);
|
|
23
23
|
--exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-5-0);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
.magritte-enter-animation___TqSXR_1-1-
|
|
26
|
+
.magritte-enter-animation___TqSXR_1-1-9{
|
|
27
27
|
opacity:0;
|
|
28
28
|
}
|
|
29
|
-
.magritte-enter-animation-active___Jfsvw_1-1-
|
|
29
|
+
.magritte-enter-animation-active___Jfsvw_1-1-9{
|
|
30
30
|
opacity:1;
|
|
31
31
|
transition-property:opacity;
|
|
32
32
|
transition-duration:var(--enter-animation-duration);
|
|
33
33
|
transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v24-5-0);
|
|
34
34
|
}
|
|
35
|
-
.magritte-exit-animation___6VlKj_1-1-
|
|
35
|
+
.magritte-exit-animation___6VlKj_1-1-9{
|
|
36
36
|
opacity:1;
|
|
37
37
|
}
|
|
38
|
-
.magritte-exit-animation-active___VanCA_1-1-
|
|
38
|
+
.magritte-exit-animation-active___VanCA_1-1-9{
|
|
39
39
|
opacity:0;
|
|
40
40
|
transition-property:opacity;
|
|
41
41
|
transition-duration:var(--exit-animation-duration);
|
|
42
42
|
transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v24-5-0);
|
|
43
43
|
}
|
|
44
|
-
.magritte-overlay___YsKtP_1-1-
|
|
44
|
+
.magritte-overlay___YsKtP_1-1-9{
|
|
45
45
|
display:flex;
|
|
46
46
|
align-items:center;
|
|
47
47
|
justify-content:center;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
inset:0;
|
|
50
50
|
background-color:var(--magritte-color-background-overlay-v24-5-0);
|
|
51
51
|
}
|
|
52
|
-
.magritte-loader___vx7PF_1-1-
|
|
52
|
+
.magritte-loader___vx7PF_1-1-9{
|
|
53
53
|
background-color:var(--magritte-color-background-constant-secondary-v24-5-0);
|
|
54
54
|
border-radius:28px;
|
|
55
55
|
line-height:0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-full-screen-loader",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@hh.ru/magritte-common-modal-helper": "1.3.1",
|
|
24
24
|
"@hh.ru/magritte-design-tokens": "24.5.0",
|
|
25
25
|
"@hh.ru/magritte-ui-layer": "3.2.2",
|
|
26
|
-
"@hh.ru/magritte-ui-loader": "
|
|
26
|
+
"@hh.ru/magritte-ui-loader": "3.0.0",
|
|
27
27
|
"@hh.ru/magritte-ui-theme-wrapper": "1.1.14"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"access": "public"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "e019f700cfff466975b65b96124aaac592268720"
|
|
39
39
|
}
|