indicator-ui 0.0.167 → 0.0.169

package/dist/index.js

@@ -11695,6 +11695,8 @@ __webpack_require__.r(__webpack_exports__);
  * ##### Компонент для анимации прокрутки вверх и вниз.
  * Для контроля анимации используйте пропс ```animation```.
  *
+ * Важно: анимации `-down` пока еще не доработаны, поэтому работают также как и `-up`
+ *
  * ---
  * ```'enter-down'``` - производит анимацию появления снизу.
  *
@@ -11714,15 +11716,53 @@ __webpack_require__.r(__webpack_exports__);
  * При высокой (автор проводил тесты на 300ms) скорости анимации ощущается нормально (если вы не Флеш).
  * */
 function SlideTransition({ children, animation, className, additionStyles, style, }) {
-    const componentRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: componentRef, style: style, className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.slideTransition, className, additionStyles, {
+    const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    const contentRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    const [clientHeight, setClientHeight] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(contentRef.current?.clientHeight);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
+        const element = contentRef.current;
+        if (!element)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            setClientHeight(entry.target.clientHeight);
+        });
+        resizeObserver.observe(element);
+        return () => resizeObserver.disconnect();
+    }, []);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
+        const isShowAnimation = animation === 'show' || animation === 'enter-up' || animation === 'enter-down';
+        if (isShowAnimation && clientHeight != null) {
+            wrapperRef.current.style.height = clientHeight + 'px';
+        }
+    }, [clientHeight]);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
+        const contentClientHeight = clientHeight;
+        const isShowAnimation = animation === 'show' || animation === 'enter-up' || animation === 'enter-down';
+        if (contentClientHeight != null) {
+            wrapperRef.current.style.height = contentClientHeight + 'px';
+            if (!isShowAnimation) {
+                wrapperRef.current.style.overflow = 'hidden';
+            }
+        }
+        const handleAnimationEnd = () => {
+            if (wrapperRef.current && isShowAnimation) {
+                wrapperRef.current.style.overflow = '';
+            }
+        };
+        wrapperRef.current?.addEventListener('animationend', handleAnimationEnd);
+        return () => {
+            wrapperRef.current?.removeEventListener('animationend', handleAnimationEnd);
+        };
+    }, [animation]);
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: wrapperRef, className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.slideTransition, additionStyles, {
             [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.enterDown]: animation === 'enter-down',
             [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.exitDown]: animation === 'exit-down',
             [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.exitUp]: animation === 'exit-up',
             [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.enterUp]: animation === 'enter-up',
             [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.hide]: animation === 'hide',
             [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.show]: animation === 'show',
-        }), children: children }));
+        }), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: contentRef, style: style, className: className, children: children }) }));
 }