indicator-ui 0.0.167 → 0.0.168
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/dist/index.js
CHANGED
|
@@ -11695,6 +11695,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
11695
11695
|
* ##### Компонент для анимации прокрутки вверх и вниз.
|
|
11696
11696
|
* Для контроля анимации используйте пропс ```animation```.
|
|
11697
11697
|
*
|
|
11698
|
+
* Важно: анимации `-down` пока еще не доработаны, поэтому работают также как и `-up`
|
|
11699
|
+
*
|
|
11698
11700
|
* ---
|
|
11699
11701
|
* ```'enter-down'``` - производит анимацию появления снизу.
|
|
11700
11702
|
*
|
|
@@ -11714,15 +11716,35 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
11714
11716
|
* При высокой (автор проводил тесты на 300ms) скорости анимации ощущается нормально (если вы не Флеш).
|
|
11715
11717
|
* */
|
|
11716
11718
|
function SlideTransition({ children, animation, className, additionStyles, style, }) {
|
|
11717
|
-
const
|
|
11718
|
-
|
|
11719
|
+
const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|
11720
|
+
const contentRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|
11721
|
+
(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
|
|
11722
|
+
const contentClientHeight = contentRef.current?.clientHeight;
|
|
11723
|
+
const isShowAnimation = animation === 'show' || animation === 'enter-up' || animation === 'enter-down';
|
|
11724
|
+
if (contentClientHeight != null) {
|
|
11725
|
+
wrapperRef.current.style.height = contentClientHeight + 'px';
|
|
11726
|
+
if (!isShowAnimation) {
|
|
11727
|
+
wrapperRef.current.style.overflow = 'hidden';
|
|
11728
|
+
}
|
|
11729
|
+
}
|
|
11730
|
+
const handleAnimationEnd = () => {
|
|
11731
|
+
if (wrapperRef.current && isShowAnimation) {
|
|
11732
|
+
wrapperRef.current.style.overflow = '';
|
|
11733
|
+
}
|
|
11734
|
+
};
|
|
11735
|
+
wrapperRef.current?.addEventListener('animationend', handleAnimationEnd);
|
|
11736
|
+
return () => {
|
|
11737
|
+
wrapperRef.current?.removeEventListener('animationend', handleAnimationEnd);
|
|
11738
|
+
};
|
|
11739
|
+
}, [animation]);
|
|
11740
|
+
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, {
|
|
11719
11741
|
[_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.enterDown]: animation === 'enter-down',
|
|
11720
11742
|
[_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.exitDown]: animation === 'exit-down',
|
|
11721
11743
|
[_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.exitUp]: animation === 'exit-up',
|
|
11722
11744
|
[_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.enterUp]: animation === 'enter-up',
|
|
11723
11745
|
[_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.hide]: animation === 'hide',
|
|
11724
11746
|
[_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.show]: animation === 'show',
|
|
11725
|
-
}), children: children }));
|
|
11747
|
+
}), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: contentRef, style: style, className: className, children: children }) }));
|
|
11726
11748
|
}
|
|
11727
11749
|
|
|
11728
11750
|
|