indicator-ui 0.0.45 → 0.0.47

package/dist/index.js

@@ -10119,6 +10119,10 @@ __webpack_require__.r(__webpack_exports__);
  *
  * ```'exit-up'``` - производит анимацию скрытия сверху.
  *
+ *  ```'hide'``` - изначально скрывает элемент.
+ *
+ * ```'show'``` - изначально показывает элемент.
+ *
  * ---
  * Учтите, что анимации **"снизу"** сужают компонент, поэтому он будет деформироваться.
  * При высокой (автор проводил тесты на 300ms) скорости анимации это незаметно (если вы не Флеш).
@@ -10129,6 +10133,12 @@ function SlideTransition({ children, animation, additionStyles, animationOptions
     const lastClientHeight = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(undefined);
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
         lastClientHeight.current = mainRef.current.clientHeight;
+        if (animation === 'hide') {
+            animateDropWrapperRef.current.style.display = 'none';
+        }
+        else if (animation === 'show') {
+            animateDropWrapperRef.current.style.display = 'block';
+        }
     }, []);
     const getConfig = (type) => {
         if (type in animationOptions) {
@@ -10138,58 +10148,68 @@ function SlideTransition({ children, animation, additionStyles, animationOptions
     };
     const animateExitDown = () => {
         const animateConfig = getConfig('exit-down');
-        const animateDropWrapper = animateDropWrapperRef.current.animate([
-            { transform: 'scaleY(1)', transformOrigin: 'bottom' },
-            { transform: 'scaleY(0)', transformOrigin: 'bottom' },
-        ], animateConfig);
-        mainRef.current.animate([
-            { transform: 'translateY(0)' },
-            { transform: 'translateY(100%)' },
-        ], animateConfig);
-        animateDropWrapper.finished.then(() => {
-            animateDropWrapperRef.current.style.display = `none`;
-        });
+        if (animateDropWrapperRef.current && mainRef.current) {
+            animateDropWrapperRef.current.style.display = 'block';
+            const animateDropWrapper = animateDropWrapperRef.current.animate([
+                { transform: 'scaleY(1)', transformOrigin: 'bottom' },
+                { transform: 'scaleY(0)', transformOrigin: 'bottom' },
+            ], animateConfig);
+            mainRef.current.animate([
+                { transform: 'translateY(0)' },
+                { transform: 'translateY(100%)' },
+            ], animateConfig);
+            animateDropWrapper.finished.then(() => {
+                animateDropWrapperRef.current.style.display = `none`;
+            });
+        }
     };
     const animateExitUp = () => {
-        const mainHeight = mainRef.current.clientHeight;
-        lastClientHeight.current = mainHeight;
         const animateConfig = getConfig('exit-up');
-        const animateDropWrapper = animateDropWrapperRef.current.animate([
-            { height: `${mainHeight}px` },
-            { height: `0` },
-        ], animateConfig);
-        mainRef.current.animate([
-            { transform: 'translateY(0)' },
-            { transform: 'translateY(-100%)' },
-        ], animateConfig);
-        animateDropWrapper.finished.then(() => {
-            animateDropWrapperRef.current.style.display = `none`;
-        });
+        if (animateDropWrapperRef.current && mainRef.current) {
+            const mainHeight = mainRef.current.clientHeight;
+            animateDropWrapperRef.current.style.display = 'block';
+            lastClientHeight.current = mainHeight;
+            const animateDropWrapper = animateDropWrapperRef.current.animate([
+                { height: `${mainHeight}px` },
+                { height: `0` },
+            ], animateConfig);
+            mainRef.current.animate([
+                { transform: 'translateY(0)' },
+                { transform: 'translateY(-100%)' },
+            ], animateConfig);
+            animateDropWrapper.finished.then(() => {
+                animateDropWrapperRef.current.style.display = `none`;
+            });
+        }
     };
     const animateEnterDown = () => {
         const animateConfig = getConfig('enter-down');
-        animateDropWrapperRef.current.style.display = 'block';
-        animateDropWrapperRef.current.animate([
-            { transform: 'scaleY(0)', transformOrigin: 'bottom', display: 'block' },
-            { transform: 'scaleY(1)', transformOrigin: 'bottom' },
-        ], animateConfig);
-        mainRef.current.animate([
-            { transform: 'translateY(100%)' },
-            { transform: 'translateY(0)' },
-        ], animateConfig);
+        if (animateDropWrapperRef.current && mainRef.current) {
+            animateDropWrapperRef.current.style.display = 'block';
+            animateDropWrapperRef.current.animate([
+                { transform: 'scaleY(0)', transformOrigin: 'bottom', display: 'block' },
+                { transform: 'scaleY(1)', transformOrigin: 'bottom' },
+            ], animateConfig);
+            mainRef.current.animate([
+                { transform: 'translateY(100%)' },
+                { transform: 'translateY(0)' },
+            ], animateConfig);
+        }
     };
     const animateEnterUp = () => {
         const animateConfig = getConfig('enter-up');
-        animateDropWrapperRef.current.style.display = 'block';
-        const mainHeight = mainRef.current.clientHeight || lastClientHeight.current;
-        animateDropWrapperRef.current.animate([
-            { height: `0` },
-            { height: `${mainHeight}px` },
-        ], animateConfig);
-        mainRef.current.animate([
-            { transform: 'translateY(-100%)' },
-            { transform: 'translateY(0)' },
-        ], animateConfig);
+        if (animateDropWrapperRef.current && mainRef.current) {
+            animateDropWrapperRef.current.style.display = 'block';
+            const mainHeight = mainRef.current.clientHeight || lastClientHeight.current;
+            animateDropWrapperRef.current.animate([
+                { height: `0` },
+                { height: `${mainHeight}px` },
+            ], animateConfig);
+            mainRef.current.animate([
+                { transform: 'translateY(-100%)' },
+                { transform: 'translateY(0)' },
+            ], animateConfig);
+        }
     };
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
         switch (animation) {