@coorpacademy/components 11.3.1 → 11.4.1
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/es/atom/lottie-wrapper/index.d.ts.map +1 -1
- package/es/atom/lottie-wrapper/index.js +12 -16
- package/es/atom/lottie-wrapper/index.js.map +1 -1
- package/es/template/back-office/brand-update/style.css +1 -0
- package/lib/atom/lottie-wrapper/index.d.ts.map +1 -1
- package/lib/atom/lottie-wrapper/index.js +13 -16
- package/lib/atom/lottie-wrapper/index.js.map +1 -1
- package/lib/template/back-office/brand-update/style.css +1 -0
- package/package.json +2 -2
- package/locales/.mtslconfig.json +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/lottie-wrapper/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/lottie-wrapper/index.js"],"names":[],"mappings":"AAWO,iMAmCN;;AAED,wDAwGC"}
|
|
@@ -4,6 +4,7 @@ import React, { useMemo, useRef, useEffect, useState } from 'react';
|
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import lottie from 'lottie-web';
|
|
6
6
|
import includes from 'lodash/fp/includes';
|
|
7
|
+
import isNil from 'lodash/fp/isNil';
|
|
7
8
|
import keys from 'lodash/fp/keys';
|
|
8
9
|
import omit from 'lodash/fp/omit';
|
|
9
10
|
import unfetch from 'isomorphic-unfetch';
|
|
@@ -54,19 +55,18 @@ const LottieWrapper = props => {
|
|
|
54
55
|
className: animationClassName,
|
|
55
56
|
hideOnTransparent = true
|
|
56
57
|
} = rendererSettings;
|
|
57
|
-
const containerRef = useRef(null);
|
|
58
|
+
const containerRef = useRef(null);
|
|
59
|
+
const isCancelledRef = useRef(null); // lottie's animation instance
|
|
58
60
|
|
|
59
61
|
const [animationItem, setAnimationItem] = useState(null);
|
|
60
62
|
const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);
|
|
61
63
|
const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);
|
|
62
64
|
const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [animationClassName]);
|
|
63
65
|
useEffect(() => {
|
|
64
|
-
|
|
65
|
-
// to remove when the migration towards @testing-library/react is done
|
|
66
|
-
|
|
67
|
-
/* istanbul ignore next */
|
|
68
|
-
if (containerRef.current && includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {
|
|
66
|
+
if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {
|
|
69
67
|
setIsAnimationVisible(true);
|
|
68
|
+
/* istanbul ignore next */
|
|
69
|
+
|
|
70
70
|
if (animationItem) animationItem[animationControl]();
|
|
71
71
|
if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);
|
|
72
72
|
}
|
|
@@ -74,23 +74,19 @@ const LottieWrapper = props => {
|
|
|
74
74
|
useEffect(() => {
|
|
75
75
|
const loadAnimation = async () => {
|
|
76
76
|
/* istanbul ignore else */
|
|
77
|
-
if (!animationItem) {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
const animation = await fetchAndLoadAnimation(lottie, unfetch, animationSrc, containerRef, loop, lottieAnimationClassName, hideOnTransparent, autoplay);
|
|
84
|
-
containerRef.current && setAnimationItem(animation);
|
|
77
|
+
if (!animationItem && typeof window !== 'undefined') {
|
|
78
|
+
window.lottie = lottie;
|
|
79
|
+
const animation = await fetchAndLoadAnimation(window.lottie, unfetch, animationSrc, containerRef, loop, lottieAnimationClassName, hideOnTransparent, autoplay);
|
|
80
|
+
isNil(isCancelledRef.current) && setAnimationItem(animation);
|
|
85
81
|
}
|
|
86
82
|
};
|
|
87
83
|
|
|
88
84
|
loadAnimation();
|
|
89
85
|
return () => {
|
|
90
|
-
|
|
86
|
+
isCancelledRef.current = true;
|
|
91
87
|
return animationItem &&
|
|
92
88
|
/* istanbul ignore next */
|
|
93
|
-
lottie.destroy(animationItem.name);
|
|
89
|
+
window.lottie.destroy(animationItem.name);
|
|
94
90
|
};
|
|
95
91
|
}, [lottieAnimationClassName, containerRef, hideOnTransparent, loop, animationSrc, animationItem, autoplay]);
|
|
96
92
|
const accessibilityProps = ariaLabel ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useRef","useEffect","useState","classnames","lottie","includes","keys","omit","unfetch","style","propTypes","ANIMATION_CONTROL","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","wrapperClassName","lottieContainer","lottieAnimationClassName","stop","window","destroy","name","accessibilityProps","role","maxWidth","maxHeight","opacity","transition"],"sources":["../../../src/atom/lottie-wrapper/index.js"],"sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\nimport propTypes, {ANIMATION_CONTROL} from './prop-types';\n\nexport const fetchAndLoadAnimation = async (\n _lottie,\n _fetch,\n animationSrc,\n containerRef,\n loop,\n animationClassnames,\n hideOnTransparent,\n autoplay\n) => {\n const animationUrl = new URL(animationSrc).toString();\n const fetchResult = await _fetch(animationUrl, {\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json'\n }\n });\n\n const animationData = await fetchResult.json();\n\n const animation =\n _lottie.loadAnimation &&\n _lottie.loadAnimation({\n container: containerRef.current, // the dom element that will contain the animation\n renderer: 'svg',\n autoplay,\n loop,\n animationData,\n rendererSettings: {\n className: animationClassnames,\n hideOnTransparent,\n preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n }\n });\n return animation;\n};\n\nconst LottieWrapper = props => {\n const {\n className,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n animationSrc,\n loop = false,\n rendererSettings = {},\n width,\n height,\n autoplay = true,\n animationControl\n } = props;\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useRef","useEffect","useState","classnames","lottie","includes","isNil","keys","omit","unfetch","style","propTypes","ANIMATION_CONTROL","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","animationControl","animationClassName","isCancelledRef","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","wrapperClassName","lottieContainer","lottieAnimationClassName","stop","window","destroy","name","accessibilityProps","role","maxWidth","maxHeight","opacity","transition"],"sources":["../../../src/atom/lottie-wrapper/index.js"],"sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport includes from 'lodash/fp/includes';\nimport isNil from 'lodash/fp/isNil';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\nimport propTypes, {ANIMATION_CONTROL} from './prop-types';\n\nexport const fetchAndLoadAnimation = async (\n _lottie,\n _fetch,\n animationSrc,\n containerRef,\n loop,\n animationClassnames,\n hideOnTransparent,\n autoplay\n) => {\n const animationUrl = new URL(animationSrc).toString();\n const fetchResult = await _fetch(animationUrl, {\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json'\n }\n });\n\n const animationData = await fetchResult.json();\n\n const animation =\n _lottie.loadAnimation &&\n _lottie.loadAnimation({\n container: containerRef.current, // the dom element that will contain the animation\n renderer: 'svg',\n autoplay,\n loop,\n animationData,\n rendererSettings: {\n className: animationClassnames,\n hideOnTransparent,\n preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n }\n });\n return animation;\n};\n\nconst LottieWrapper = props => {\n const {\n className,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n animationSrc,\n loop = false,\n rendererSettings = {},\n width,\n height,\n autoplay = true,\n animationControl\n } = props;\n const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n const containerRef = useRef(null);\n const isCancelledRef = useRef(null);\n\n // lottie's animation instance\n const [animationItem, setAnimationItem] = useState(null);\n\n const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n const lottieAnimationClassName = useMemo(\n () => classnames(animationClassName, style.animation),\n [animationClassName]\n );\n\n useEffect(() => {\n if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {\n setIsAnimationVisible(true);\n /* istanbul ignore next */\n if (animationItem) animationItem[animationControl]();\n if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n }\n }, [animationControl, animationItem, autoplay]);\n\n useEffect(() => {\n const loadAnimation = async () => {\n /* istanbul ignore else */\n if (!animationItem && typeof window !== 'undefined') {\n window.lottie = lottie;\n const animation = await fetchAndLoadAnimation(\n window.lottie,\n unfetch,\n animationSrc,\n containerRef,\n loop,\n lottieAnimationClassName,\n hideOnTransparent,\n autoplay\n );\n\n isNil(isCancelledRef.current) && setAnimationItem(animation);\n }\n };\n\n loadAnimation();\n return () => {\n isCancelledRef.current = true;\n return animationItem && /* istanbul ignore next */ window.lottie.destroy(animationItem.name);\n };\n }, [\n lottieAnimationClassName,\n containerRef,\n hideOnTransparent,\n loop,\n animationSrc,\n animationItem,\n autoplay\n ]);\n\n const accessibilityProps = ariaLabel\n ? {\n 'aria-label': ariaLabel,\n role: 'img'\n }\n : {\n 'aria-hidden': 'true',\n role: 'presentation'\n };\n\n return (\n <div\n {...accessibilityProps}\n ref={containerRef}\n data-name={dataName}\n className={wrapperClassName}\n style={{\n ...(width && {\n width: `${width}px`,\n maxWidth: `${width}px`\n }),\n ...(height && {\n height: `${height}px`,\n maxHeight: `${height}px`\n }),\n opacity: isAnimationVisible ? 1 : 0,\n transition: 'opacity 0.25s ease-in'\n }}\n />\n );\n};\n\nLottieWrapper.propTypes = propTypes;\n\nexport default LottieWrapper;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/lottie-wrapper/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/lottie-wrapper/index.js"],"names":[],"mappings":"AAWO,iMAmCN;;AAED,wDAwGC"}
|
|
@@ -11,6 +11,8 @@ var _lottieWeb = _interopRequireDefault(require("lottie-web"));
|
|
|
11
11
|
|
|
12
12
|
var _includes = _interopRequireDefault(require("lodash/fp/includes"));
|
|
13
13
|
|
|
14
|
+
var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
|
|
15
|
+
|
|
14
16
|
var _keys = _interopRequireDefault(require("lodash/fp/keys"));
|
|
15
17
|
|
|
16
18
|
var _omit = _interopRequireDefault(require("lodash/fp/omit"));
|
|
@@ -76,19 +78,18 @@ const LottieWrapper = props => {
|
|
|
76
78
|
className: animationClassName,
|
|
77
79
|
hideOnTransparent = true
|
|
78
80
|
} = rendererSettings;
|
|
79
|
-
const containerRef = (0, _react.useRef)(null);
|
|
81
|
+
const containerRef = (0, _react.useRef)(null);
|
|
82
|
+
const isCancelledRef = (0, _react.useRef)(null); // lottie's animation instance
|
|
80
83
|
|
|
81
84
|
const [animationItem, setAnimationItem] = (0, _react.useState)(null);
|
|
82
85
|
const [isAnimationVisible, setIsAnimationVisible] = (0, _react.useState)(autoplay);
|
|
83
86
|
const wrapperClassName = (0, _react.useMemo)(() => (0, _classnames.default)(className, _style.default.lottieContainer), [className]);
|
|
84
87
|
const lottieAnimationClassName = (0, _react.useMemo)(() => (0, _classnames.default)(animationClassName, _style.default.animation), [animationClassName]);
|
|
85
88
|
(0, _react.useEffect)(() => {
|
|
86
|
-
|
|
87
|
-
// to remove when the migration towards @testing-library/react is done
|
|
88
|
-
|
|
89
|
-
/* istanbul ignore next */
|
|
90
|
-
if (containerRef.current && (0, _includes.default)(animationControl, (0, _keys.default)((0, _omit.default)('loading', _propTypes.ANIMATION_CONTROL))) && !autoplay) {
|
|
89
|
+
if ((0, _includes.default)(animationControl, (0, _keys.default)((0, _omit.default)('loading', _propTypes.ANIMATION_CONTROL))) && !autoplay) {
|
|
91
90
|
setIsAnimationVisible(true);
|
|
91
|
+
/* istanbul ignore next */
|
|
92
|
+
|
|
92
93
|
if (animationItem) animationItem[animationControl]();
|
|
93
94
|
if (animationControl === _propTypes.ANIMATION_CONTROL.stop) setIsAnimationVisible(false);
|
|
94
95
|
}
|
|
@@ -96,23 +97,19 @@ const LottieWrapper = props => {
|
|
|
96
97
|
(0, _react.useEffect)(() => {
|
|
97
98
|
const loadAnimation = async () => {
|
|
98
99
|
/* istanbul ignore else */
|
|
99
|
-
if (!animationItem) {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
const animation = await fetchAndLoadAnimation(_lottieWeb.default, _isomorphicUnfetch.default, animationSrc, containerRef, loop, lottieAnimationClassName, hideOnTransparent, autoplay);
|
|
106
|
-
containerRef.current && setAnimationItem(animation);
|
|
100
|
+
if (!animationItem && typeof window !== 'undefined') {
|
|
101
|
+
window.lottie = _lottieWeb.default;
|
|
102
|
+
const animation = await fetchAndLoadAnimation(window.lottie, _isomorphicUnfetch.default, animationSrc, containerRef, loop, lottieAnimationClassName, hideOnTransparent, autoplay);
|
|
103
|
+
(0, _isNil.default)(isCancelledRef.current) && setAnimationItem(animation);
|
|
107
104
|
}
|
|
108
105
|
};
|
|
109
106
|
|
|
110
107
|
loadAnimation();
|
|
111
108
|
return () => {
|
|
112
|
-
|
|
109
|
+
isCancelledRef.current = true;
|
|
113
110
|
return animationItem &&
|
|
114
111
|
/* istanbul ignore next */
|
|
115
|
-
|
|
112
|
+
window.lottie.destroy(animationItem.name);
|
|
116
113
|
};
|
|
117
114
|
}, [lottieAnimationClassName, containerRef, hideOnTransparent, loop, animationSrc, animationItem, autoplay]);
|
|
118
115
|
const accessibilityProps = ariaLabel ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","animationControl","animationClassName","useRef","animationItem","setAnimationItem","useState","isAnimationVisible","setIsAnimationVisible","wrapperClassName","useMemo","classnames","style","lottieContainer","lottieAnimationClassName","useEffect","includes","keys","omit","ANIMATION_CONTROL","stop","window","lottie","unfetch","destroy","name","accessibilityProps","role","maxWidth","maxHeight","opacity","transition","propTypes"],"sources":["../../../src/atom/lottie-wrapper/index.js"],"sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\nimport propTypes, {ANIMATION_CONTROL} from './prop-types';\n\nexport const fetchAndLoadAnimation = async (\n _lottie,\n _fetch,\n animationSrc,\n containerRef,\n loop,\n animationClassnames,\n hideOnTransparent,\n autoplay\n) => {\n const animationUrl = new URL(animationSrc).toString();\n const fetchResult = await _fetch(animationUrl, {\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json'\n }\n });\n\n const animationData = await fetchResult.json();\n\n const animation =\n _lottie.loadAnimation &&\n _lottie.loadAnimation({\n container: containerRef.current, // the dom element that will contain the animation\n renderer: 'svg',\n autoplay,\n loop,\n animationData,\n rendererSettings: {\n className: animationClassnames,\n hideOnTransparent,\n preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n }\n });\n return animation;\n};\n\nconst LottieWrapper = props => {\n const {\n className,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n animationSrc,\n loop = false,\n rendererSettings = {},\n width,\n height,\n autoplay = true,\n animationControl\n } = props;\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","animationControl","animationClassName","useRef","isCancelledRef","animationItem","setAnimationItem","useState","isAnimationVisible","setIsAnimationVisible","wrapperClassName","useMemo","classnames","style","lottieContainer","lottieAnimationClassName","useEffect","includes","keys","omit","ANIMATION_CONTROL","stop","window","lottie","unfetch","isNil","destroy","name","accessibilityProps","role","maxWidth","maxHeight","opacity","transition","propTypes"],"sources":["../../../src/atom/lottie-wrapper/index.js"],"sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport includes from 'lodash/fp/includes';\nimport isNil from 'lodash/fp/isNil';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\nimport propTypes, {ANIMATION_CONTROL} from './prop-types';\n\nexport const fetchAndLoadAnimation = async (\n _lottie,\n _fetch,\n animationSrc,\n containerRef,\n loop,\n animationClassnames,\n hideOnTransparent,\n autoplay\n) => {\n const animationUrl = new URL(animationSrc).toString();\n const fetchResult = await _fetch(animationUrl, {\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json'\n }\n });\n\n const animationData = await fetchResult.json();\n\n const animation =\n _lottie.loadAnimation &&\n _lottie.loadAnimation({\n container: containerRef.current, // the dom element that will contain the animation\n renderer: 'svg',\n autoplay,\n loop,\n animationData,\n rendererSettings: {\n className: animationClassnames,\n hideOnTransparent,\n preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n }\n });\n return animation;\n};\n\nconst LottieWrapper = props => {\n const {\n className,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n animationSrc,\n loop = false,\n rendererSettings = {},\n width,\n height,\n autoplay = true,\n animationControl\n } = props;\n const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n const containerRef = useRef(null);\n const isCancelledRef = useRef(null);\n\n // lottie's animation instance\n const [animationItem, setAnimationItem] = useState(null);\n\n const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n const lottieAnimationClassName = useMemo(\n () => classnames(animationClassName, style.animation),\n [animationClassName]\n );\n\n useEffect(() => {\n if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {\n setIsAnimationVisible(true);\n /* istanbul ignore next */\n if (animationItem) animationItem[animationControl]();\n if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n }\n }, [animationControl, animationItem, autoplay]);\n\n useEffect(() => {\n const loadAnimation = async () => {\n /* istanbul ignore else */\n if (!animationItem && typeof window !== 'undefined') {\n window.lottie = lottie;\n const animation = await fetchAndLoadAnimation(\n window.lottie,\n unfetch,\n animationSrc,\n containerRef,\n loop,\n lottieAnimationClassName,\n hideOnTransparent,\n autoplay\n );\n\n isNil(isCancelledRef.current) && setAnimationItem(animation);\n }\n };\n\n loadAnimation();\n return () => {\n isCancelledRef.current = true;\n return animationItem && /* istanbul ignore next */ window.lottie.destroy(animationItem.name);\n };\n }, [\n lottieAnimationClassName,\n containerRef,\n hideOnTransparent,\n loop,\n animationSrc,\n animationItem,\n autoplay\n ]);\n\n const accessibilityProps = ariaLabel\n ? {\n 'aria-label': ariaLabel,\n role: 'img'\n }\n : {\n 'aria-hidden': 'true',\n role: 'presentation'\n };\n\n return (\n <div\n {...accessibilityProps}\n ref={containerRef}\n data-name={dataName}\n className={wrapperClassName}\n style={{\n ...(width && {\n width: `${width}px`,\n maxWidth: `${width}px`\n }),\n ...(height && {\n height: `${height}px`,\n maxHeight: `${height}px`\n }),\n opacity: isAnimationVisible ? 1 : 0,\n transition: 'opacity 0.25s ease-in'\n }}\n />\n );\n};\n\nLottieWrapper.propTypes = propTypes;\n\nexport default LottieWrapper;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.4.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -160,5 +160,5 @@
|
|
|
160
160
|
"last 2 versions",
|
|
161
161
|
"IE 11"
|
|
162
162
|
],
|
|
163
|
-
"gitHead": "
|
|
163
|
+
"gitHead": "1f12f016086da85344c1ceaef2a7d0426a051d73"
|
|
164
164
|
}
|
package/locales/.mtslconfig.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"ignore_dirs":[]}
|