fix(base-modal): fix has scroll bug (#712)

* fix(base-modal): fix has scroll bug * fix(base-modal): revert observer on content ref * fix(base-select): revert ref Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com> Co-authored-by: reme3d2y <AYatsenko@alfabank.ru>
core-ds · Jun 28, 2021 · a6749a1 · a6749a1
1 parent 1f7391d
commit a6749a1
Showing 1 changed file with 43 additions and 33 deletions.
diff --git a/packages/base-modal/src/Component.tsx b/packages/base-modal/src/Component.tsx
@@ -110,7 +110,7 @@ export type BaseModalProps = {
     /**
      * Обработчик скролла контента
      */
-    scrollHandler?: 'wrapper' | 'content' | MutableRefObject<HTMLElement | null>;
+    scrollHandler?: 'wrapper' | 'content' | MutableRefObject<HTMLDivElement | null>;
 
     /**
      * Пропсы для анимации (CSSTransition)
@@ -219,52 +219,54 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
         const [footerHighlighted, setFooterHighlighted] = useState(false);
 
         const componentRef = useRef<HTMLDivElement>(null);
-        const contentRef = useRef<HTMLDivElement>(null);
         const wrapperRef = useRef<HTMLDivElement>(null);
-        const scrollableNodeRef = useRef<HTMLElement | null>(null);
+        const scrollableNodeRef = useRef<HTMLDivElement | null>(null);
+        const contentNodeRef = useRef<HTMLDivElement | null>(null);
         const restoreContainerStyles = useRef<null | Function>(null);
 
-        const shouldRender = keepMounted || open || !exited;
+        const checkToHasScrollBar = () => {
+            if (scrollableNodeRef.current) {
+                const scrollExists = hasScrollbar(scrollableNodeRef.current);
+                setFooterHighlighted(scrollExists);
+                setHasScroll(scrollExists);
+            }
+        };
 
-        const resizeObserver = useMemo(() => {
-            return new ResizeObserver(() => {
-                if (scrollableNodeRef.current) {
-                    const scrollExists = hasScrollbar(scrollableNodeRef.current);
-                    setFooterHighlighted(scrollExists);
-                    setHasScroll(scrollExists);
-                }
-            });
+        const contentRef = useCallback((node: HTMLDivElement) => {
+            if (node !== null) {
+                contentNodeRef.current = node;
+                checkToHasScrollBar();
+            }
         }, []);
 
+        const shouldRender = keepMounted || open || !exited;
+
+        const resizeObserver = useMemo(() => new ResizeObserver(checkToHasScrollBar), []);
+
         const addResizeHandle = useCallback(() => {
-            if (scrollableNodeRef.current && contentRef.current) {
-                resizeObserver.observe(scrollableNodeRef.current);
-                resizeObserver.observe(contentRef.current);
-            }
+            if (scrollableNodeRef.current) resizeObserver.observe(scrollableNodeRef.current);
+            if (contentNodeRef.current) resizeObserver.observe(contentNodeRef.current);
         }, [resizeObserver]);
 
         const removeResizeHandle = useCallback(() => {
             resizeObserver.disconnect();
         }, [resizeObserver]);
 
         const handleScroll = useCallback(() => {
-            if (!scrollableNodeRef.current) return;
-
-            if (componentRef.current) {
-                if (hasHeader) {
-                    setHeaderHighlighted(
-                        isScrolledToTop(scrollableNodeRef.current) === false &&
-                            componentRef.current.getBoundingClientRect().top <= 0,
-                    );
-                }
+            if (!scrollableNodeRef.current || !componentRef.current) return;
 
-                if (hasFooter) {
-                    setFooterHighlighted(
-                        isScrolledToBottom(scrollableNodeRef.current) === false &&
-                            componentRef.current.getBoundingClientRect().bottom >=
-                                window.innerHeight,
-                    );
-                }
+            if (hasHeader) {
+                setHeaderHighlighted(
+                    !isScrolledToTop(scrollableNodeRef.current) &&
+                        componentRef.current.getBoundingClientRect().top <= 0,
+                );
+            }
+
+            if (hasFooter) {
+                setFooterHighlighted(
+                    !isScrolledToBottom(scrollableNodeRef.current) &&
+                        componentRef.current.getBoundingClientRect().bottom >= window.innerHeight,
+                );
             }
         }, [hasFooter, hasHeader]);
 
@@ -399,7 +401,15 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
                 setHasFooter,
                 onClose: handleClose,
             }),
-            [hasHeader, hasFooter, hasScroll, headerHighlighted, footerHighlighted, handleClose],
+            [
+                contentRef,
+                hasHeader,
+                hasFooter,
+                hasScroll,
+                headerHighlighted,
+                footerHighlighted,
+                handleClose,
+            ],
         );
 
         if (!shouldRender) return null;