fix: update react-resize-panel to fix HMR issue and error thrown on

"Next" load

Author: seveibar

package.json

@@ -8,9 +8,9 @@
   "dependencies": {
     "@material-ui/core": "^4.10.0",
     "@material-ui/icons": "^4.9.1",
+    "@seveibar/react-resize-panel": "^0.3.7",
     "classnames": "^2.2.6",
     "react": "^16.13.1",
-    "react-resize-panel": "^0.3.5",
     "react-use-dimensions": "^1.2.1",
     "use-event-callback": "^0.1.0"
   },

src/RightSidebar/index.stories.js

@@ -5,16 +5,24 @@ import FeaturedVideoIcon from "@material-ui/icons/FeaturedVideo"
 
 export default {
   title: "RightSidebar",
-  component: RightSidebar,
+  component: RightSidebar
 }
 
 export const Basic = () => (
-  <RightSidebar>
-    <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
-      Content inside sidebar box
-    </SidebarBox>
-    <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
-      Content inside sidebar box
-    </SidebarBox>
-  </RightSidebar>
+  <div style={{ width: 500, height: 500 }}>
+    <RightSidebar>
+      <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
+        Content inside sidebar box
+      </SidebarBox>
+      <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
+        Content inside sidebar box
+      </SidebarBox>
+    </RightSidebar>
+  </div>
+)
+
+export const NoChildren = () => (
+  <div style={{ width: 500, height: 500 }}>
+    <RightSidebar></RightSidebar>
+  </div>
 )

src/SidebarBox/index.js

@@ -11,12 +11,12 @@ import classnames from "classnames"
 import useEventCallback from "use-event-callback"
 import Typography from "@material-ui/core/Typography"
 import { useIconDictionary } from "../icon-dictionary.js"
-import ResizePanel from "react-resize-panel"
+import ResizePanel from "@seveibar/react-resize-panel"
 
 const useStyles = makeStyles({
   container: {
     borderBottom: `2px solid ${grey[400]}`,
-    "&:first-child": { borderTop: `1px solid ${grey[400]}` },
+    "&:first-child": { borderTop: `1px solid ${grey[400]}` }
   },
   header: {
     display: "flex",
@@ -32,9 +32,9 @@ const useStyles = makeStyles({
       justifyContent: "center",
       "& .MuiSvgIcon-root": {
         width: 16,
-        height: 16,
-      },
-    },
+        height: 16
+      }
+    }
   },
   title: {
     fontSize: 11,
@@ -44,8 +44,8 @@ const useStyles = makeStyles({
     color: grey[800],
     "& span": {
       color: grey[600],
-      fontSize: 11,
-    },
+      fontSize: 11
+    }
   },
   expandButton: {
     padding: 0,
@@ -56,21 +56,21 @@ const useStyles = makeStyles({
       height: 20,
       transition: "500ms transform",
       "&.expanded": {
-        transform: "rotate(180deg)",
-      },
-    },
+        transform: "rotate(180deg)"
+      }
+    }
   },
   expandedContent: {
     maxHeight: 300,
     overflowY: "auto",
     "&.noScroll": {
       overflowY: "visible",
-      overflow: "visible",
-    },
-  },
+      overflow: "visible"
+    }
+  }
 })
 
-const getExpandedFromLocalStorage = (title) => {
+const getExpandedFromLocalStorage = title => {
   try {
     return JSON.parse(
       window.localStorage[`__REACT_WORKSPACE_SIDEBAR_EXPANDED_${title}`]
@@ -91,7 +91,7 @@ export const SidebarBox = ({
   subTitle,
   children,
   noScroll = false,
-  expandedByDefault,
+  expandedByDefault
 }) => {
   const classes = useStyles()
   const content = (
@@ -108,7 +108,7 @@ export const SidebarBox = ({
       : expandedByDefault
   )
   const changeExpanded = useCallback(
-    (expanded) => {
+    expanded => {
       changeExpandedState(expanded)
       setExpandedInLocalStorage(title, expanded)
     },

src/SidebarBox/index.stories.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react"
+import SidebarBox from "./"
+import FeaturedVideoIcon from "@material-ui/icons/FeaturedVideo"
+
+export default {
+  title: "SidebarBox",
+  component: SidebarBox
+}
+
+export const Basic = () => (
+  <div style={{ width: 300, height: 400 }}>
+    <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
+      Content inside sidebar box
+    </SidebarBox>
+  </div>
+)
+
+export const NoChildren = () => (
+  <div style={{ width: 300, height: 400 }}>
+    <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector" />
+  </div>
+)
+
+export const StopRendering = () => {
+  const [t, setT] = useState(0)
+  useEffect(() => {
+    let tLocal = 0
+    setInterval(() => {
+      setT(tLocal)
+      tLocal = (tLocal + 1) % 4
+    }, 500)
+  }, [])
+  return (
+    <div key={t} style={{ width: 300, height: 500 }}>
+      {(t === 0 || t === 3) && (
+        <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
+          {t === 0 || t === 2 ? <div style={{ height: 300 }}>hello</div> : null}
+        </SidebarBox>
+      )}
+    </div>
+  )
+}

src/Workspace/index.js

@@ -16,15 +16,15 @@ const Container = styled("div")({
   flexDirection: "column",
   height: "100%",
   overflow: "hidden",
-  maxWidth: "100vw",
+  maxWidth: "100vw"
 })
 const SidebarsAndContent = styled("div")({
   display: "flex",
   flexGrow: 1,
   width: "100%",
   height: "100%",
   overflow: "hidden",
-  maxWidth: "100vw",
+  maxWidth: "100vw"
 })
 
 export default ({
@@ -38,9 +38,9 @@ export default ({
   headerLeftSide = null,
   iconDictionary = emptyObj,
   rightSidebarExpanded,
-  children,
+  children
 }) => {
-  const [workContainerRef, workContainerSize] = useDimensions()
+  const [sidebarAndContentRef, sidebarAndContent] = useDimensions()
   return (
     <IconDictionaryContext.Provider value={iconDictionary}>
       <Container style={style}>
@@ -49,19 +49,19 @@ export default ({
           onClickItem={onClickHeaderItem}
           items={headerItems}
         />
-        <SidebarsAndContent>
+        <SidebarsAndContent ref={sidebarAndContentRef}>
           {iconSidebarItems.length === 0 ? null : (
             <IconSidebar
               onClickItem={onClickIconSidebarItem}
               selectedTools={selectedTools}
               items={iconSidebarItems}
             />
           )}
-          <WorkContainer ref={workContainerRef}>{children}</WorkContainer>
+          <WorkContainer>{children}</WorkContainer>
           {rightSidebarItems.length === 0 ? null : (
             <RightSidebar
               initiallyExpanded={rightSidebarExpanded}
-              height={workContainerSize.height || 0}
+              height={sidebarAndContent.height || 0}
             >
               {rightSidebarItems}
             </RightSidebar>

yarn.lock

@@ -1697,6 +1697,16 @@
     micromatch "^4.0.0"
     p-reduce "^2.0.0"
 
+"@seveibar/react-resize-panel@^0.3.7":
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/@seveibar/react-resize-panel/-/react-resize-panel-0.3.7.tgz#7c7bf449b0f2d83697e23008a5bc869c033fcc4c"
+  integrity sha512-oglctCuyCb04Ps4f1nY+IRmy5IyoGPjCv42rNAWdfDHzGb/wf81mvwTegHbouuaKWbmRH2E/c76ypSl2aGZFzQ==
+  dependencies:
+    cash-dom "^4.1.5"
+    classnames "^2.2.6"
+    lodash.debounce "^4.0.8"
+    react-draggable "^4.0.3"
+
 "@sheerun/mutationobserver-shim@^0.3.2":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25"
@@ -11217,16 +11227,6 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-resize-panel@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/react-resize-panel/-/react-resize-panel-0.3.5.tgz#43aa3450bf5b5a2566b40c4201445ced96c2a905"
-  integrity sha512-iyHOFTrSt+WV4Ilzi81x6KH3FU7VsGP736rmxepwGrgAEATmCvXzZdluTm3NpsptP7aC3hLODmXwnxusyA393A==
-  dependencies:
-    cash-dom "^4.1.5"
-    classnames "^2.2.6"
-    lodash.debounce "^4.0.8"
-    react-draggable "^4.0.3"
-
 [email protected]:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"