indicator-ui 0.0.44 → 0.0.46

package/dist/index.js

@@ -10119,6 +10119,10 @@ __webpack_require__.r(__webpack_exports__);
  *
  * ```'exit-up'``` - производит анимацию скрытия сверху.
  *
+ *  ```'hide'``` - изначально скрывает элемент.
+ *
+ * ```'show'``` - изначально показывает элемент.
+ *
  * ---
  * Учтите, что анимации **"снизу"** сужают компонент, поэтому он будет деформироваться.
  * При высокой (автор проводил тесты на 300ms) скорости анимации это незаметно (если вы не Флеш).
@@ -10126,6 +10130,16 @@ __webpack_require__.r(__webpack_exports__);
 function SlideTransition({ children, animation, additionStyles, animationOptions = { duration: 300, easing: 'ease-in-out', fill: 'forwards' } }) {
     const mainRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
     const animateDropWrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    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) {
             return animationOptions[type];
@@ -10134,29 +10148,39 @@ function SlideTransition({ children, animation, additionStyles, animationOptions
     };
     const animateExitDown = () => {
         const animateConfig = getConfig('exit-down');
-        animateDropWrapperRef.current.animate([
+        animateDropWrapperRef.current.style.display = 'block';
+        const animateDropWrapper = animateDropWrapperRef.current.animate([
             { transform: 'scaleY(1)', transformOrigin: 'bottom' },
-            { transform: 'scaleY(0)', transformOrigin: 'bottom', display: 'none' },
+            { 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;
+        animateDropWrapperRef.current.style.display = 'block';
+        lastClientHeight.current = mainHeight;
         const animateConfig = getConfig('exit-up');
-        animateDropWrapperRef.current.animate([
+        const animateDropWrapper = animateDropWrapperRef.current.animate([
             { height: `${mainHeight}px` },
-            { height: `0`, display: 'none' },
+            { 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('exit-down');
+        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' },
@@ -10167,10 +10191,11 @@ function SlideTransition({ children, animation, additionStyles, animationOptions
         ], animateConfig);
     };
     const animateEnterUp = () => {
-        const mainHeight = mainRef.current.clientHeight;
-        const animateConfig = getConfig('exit-up');
+        const animateConfig = getConfig('enter-up');
+        animateDropWrapperRef.current.style.display = 'block';
+        const mainHeight = mainRef.current.clientHeight || lastClientHeight.current;
         animateDropWrapperRef.current.animate([
-            { height: `0`, display: 'block' },
+            { height: `0` },
             { height: `${mainHeight}px` },
         ], animateConfig);
         mainRef.current.animate([