Web:Common:Section: remove resize-detector

packages/common/components/Section/index.js

@@ -1,30 +1,26 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { inject, observer } from "mobx-react";
+import { isMobile } from "react-device-detect";
 
 import {
   isMobile as isMobileUtils,
   isTablet as isTabletUtils,
 } from "@docspace/components/utils/device";
 import { Provider } from "@docspace/components/utils/context";
-import { isMobile } from "react-device-detect";
 
 import SectionContainer from "./sub-components/section-container";
 import SubSectionHeader from "./sub-components/section-header";
 import SubSectionFilter from "./sub-components/section-filter";
 import SubSectionBody from "./sub-components/section-body";
 import SubSectionBodyContent from "./sub-components/section-body-content";
-
 import SubSectionPaging from "./sub-components/section-paging";
-//import SectionToggler from "./sub-components/section-toggler";
 import InfoPanel from "./sub-components/info-panel";
 import SubInfoPanelBody from "./sub-components/info-panel-body";
 import SubInfoPanelHeader from "./sub-components/info-panel-header";
-
 import SubSectionFooter from "./sub-components/section-footer";
 
-import ReactResizeDetector from "react-resize-detector";
 import FloatingButton from "../FloatingButton";
-import { inject, observer } from "mobx-react";
 
 const Section = (props) => {
   const {
@@ -55,7 +51,13 @@ const Section = (props) => {
     isEmptyPage,
   } = props;
 
+  const [sectionSize, setSectionSize] = React.useState({
+    width: null,
+    height: null,
+  });
+
   const containerRef = React.useRef(null);
+  const timerRef = React.useRef(null);
 
   let sectionHeaderContent = null;
   let sectionFilterContent = null;
@@ -109,25 +111,46 @@ const Section = (props) => {
       isSectionBodyAvailable ||
       isSectionPagingAvailable;
 
+  React.useEffect(() => {
+    window.addEventListener("resize", onResize);
+    onResize();
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  const onResize = React.useCallback(() => {
+    clearTimeout(timerRef.current);
+
+    timerRef.current = setTimeout(() => {
+      if (!containerRef.current) return;
+
+      const computedStyles = window.getComputedStyle(
+        containerRef.current,
+        null
+      );
+      const width = +computedStyles.getPropertyValue("width").replace("px", "");
+      const height = +computedStyles
+        .getPropertyValue("height")
+        .replace("px", "");
+
+      setSectionSize(() => ({ width, height }));
+    }, 100);
+  }, []);
+
   return (
     <>
       {isSectionAvailable && (
-        <ReactResizeDetector
-          refreshRate={100}
-          refreshMode="debounce"
-          refreshOptions={{ trailing: true }}
-        >
-          {({ width, height }) => (
         <Provider
           value={{
-                sectionWidth: width,
-                sectionHeight: height,
+            sectionWidth: sectionSize.width,
+            sectionHeight: sectionSize.height,
           }}
         >
           <SectionContainer
-                widthProp={width}
             showText={showText}
             viewAs={viewAs}
+            ref={containerRef}
             maintenanceExist={maintenanceExist}
             isSectionHeaderAvailable={isSectionHeaderAvailable}
             settingsStudio={settingsStudio}
@@ -257,9 +280,7 @@ const Section = (props) => {
 
           {isInfoPanelAvailable && (
             <InfoPanel viewAs={viewAs}>
-                  <SubInfoPanelHeader>
-                    {infoPanelHeaderContent}
-                  </SubInfoPanelHeader>
+              <SubInfoPanelHeader>{infoPanelHeaderContent}</SubInfoPanelHeader>
               <SubInfoPanelBody
                 isInfoPanelScrollLocked={isInfoPanelScrollLocked}
               >
@@ -269,8 +290,6 @@ const Section = (props) => {
           )}
         </Provider>
       )}
-        </ReactResizeDetector>
-      )}
     </>
   );
 };

packages/common/components/Section/sub-components/section-container.js

@@ -111,12 +111,8 @@ const StyledSectionContainer = styled.section`
 
 StyledSectionContainer.defaultProps = { theme: Base };
 
-class SectionContainer extends React.Component {
-  render() {
-    //console.log("PageLayout Section render");
-
-    return <StyledSectionContainer id="section" {...this.props} />;
-  }
-}
+const SectionContainer = React.forwardRef((props, forwardRef) => {
+  return <StyledSectionContainer ref={forwardRef} id="section" {...props} />;
+});
 
 export default SectionContainer;