fix(Foldable): fix issues with content height calculation on resize (#156)

* fix(Foldable): fix issues with content height calculation on resize

* fix(HeightCalculator): lint

Author: DC-RomanKarpov

src/components/Foldable/Foldable.scss

@@ -4,9 +4,11 @@
 $block: '.#{$ns}foldable-block';
 
 #{$block} {
+    height: 0;
+    overflow-y: hidden;
+    transition: height $animationDuration, margin-bottom $animationDuration;
+
     &__content-container {
-        height: 0;
-        overflow-y: hidden;
-        transition: height $animationDuration, margin-bottom $animationDuration;
+        overflow: auto;
     }
 }

src/components/Foldable/Foldable.tsx

@@ -1,8 +1,8 @@
-import React, {useRef, useState, useCallback, useEffect} from 'react';
+import React, {useRef, useEffect} from 'react';
 
 import {block} from '../../utils';
-import HeightCalculator from '../../components/HeightCalculator/HeightCalculator';
 import {WithChildren} from '../../models';
+import useHeightCalculator from '../../hooks/useHeightCalculator';
 
 import './Foldable.scss';
 
@@ -14,24 +14,21 @@ export interface FoldableProps {
 }
 
 const Foldable = ({isOpened, children, className}: WithChildren<FoldableProps>) => {
+    const blockRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
-    const [contentHeight, setContentHeight] = useState<number>();
-    const onHeightCalculation = useCallback((height: number) => {
-        setContentHeight(height);
-    }, []);
+    const contentHeight = useHeightCalculator(contentRef);
 
     useEffect(() => {
-        if (contentRef && contentRef.current) {
-            contentRef.current.style.height = isOpened ? `${contentHeight}px` : '0';
+        if (blockRef && blockRef.current) {
+            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
 
     return (
-        <div className={b(null, className)}>
-            <div ref={contentRef} className={b('content-container', {open: isOpened})}>
+        <div ref={blockRef} className={b({open: isOpened}, className)}>
+            <div ref={contentRef} className={b('content-container')}>
                 {children}
             </div>
-            <HeightCalculator onCalculate={onHeightCalculation}>{children}</HeightCalculator>
         </div>
     );
 };

src/components/HeightCalculator/HeightCalculator.tsx

@@ -12,6 +12,10 @@ export interface HeightCalculatorProps {
     onCalculate: (height: number) => void;
 }
 
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 const HeightCalculator = ({onCalculate, children}: WithChildren<HeightCalculatorProps>) => {
     const [isCalculating, setIsCalculating] = useState(true);
     const container = useRef<HTMLDivElement>(null);

src/hooks/useHeightCalculator.ts

@@ -0,0 +1,39 @@
+import React, {useState, useEffect, useCallback} from 'react';
+import _ from 'lodash';
+
+type HeightCalculatorOptions = {
+    recalculateOnResizeDelay: number;
+};
+
+const DEFAULT_RECALCULATE_ON_RESIZE_DELAY = 1000;
+const DEFAULT_OPTIONS = {
+    recalculateOnResizeDelay: DEFAULT_RECALCULATE_ON_RESIZE_DELAY,
+};
+
+const useHeightCalculator: (
+    containerRef: React.RefObject<HTMLElement>,
+    options?: HeightCalculatorOptions,
+) => number | undefined = (containerRef, options = DEFAULT_OPTIONS) => {
+    const recalculateOnResizeDelay = options.recalculateOnResizeDelay;
+    const [containerHeight, setContainerHeight] = useState<number | undefined>(undefined);
+
+    const calculateContainerHeight = useCallback(() => {
+        if (containerRef.current && containerRef.current.offsetHeight !== containerHeight)
+            setContainerHeight(containerRef.current.offsetHeight);
+    }, [containerRef, containerHeight, setContainerHeight]);
+
+    useEffect(() => {
+        const handleResize = _.debounce(calculateContainerHeight, recalculateOnResizeDelay);
+
+        calculateContainerHeight();
+
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [calculateContainerHeight, recalculateOnResizeDelay]);
+
+    return containerHeight;
+};
+
+export default useHeightCalculator;