refactor(deps): remove react-sizeme

src/GraphView/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useContext, useRef, memo } from 'react';
-import ReactSizeMe from 'react-sizeme';
 
 import { Provider } from '../ConnectionContext';
 import { GraphContext } from '../GraphContext';
@@ -11,19 +10,29 @@ import { setNodesSelection } from '../state/actions';
 import { updateSize, fitView, zoomIn, zoomOut } from '../state/view-actions';
 import useKeyPress from '../hooks/useKeyPress';
 import useD3Zoom from '../hooks/useD3Zoom';
+import { getDimensions } from '../utils';
 
 const GraphView = memo((props) => {
-  const zoomPane = useRef(null);
+  const zoomPane = useRef();
+  const rendererNode = useRef();
   const { state, dispatch } = useContext(GraphContext);
   const shiftPressed = useKeyPress('Shift');
+  const updateDimensions = () => {
+    const size = getDimensions(rendererNode.current);
+    dispatch(updateSize(size));
+  };
+
+  useEffect(() => {
+    updateDimensions();
+    window.onresize = updateDimensions;
+
+    return () => {
+      window.onresize = null;
+    };
+  }, []);
 
   useD3Zoom(zoomPane, props.onMove, shiftPressed);
 
-  useEffect(
-    () => dispatch(updateSize(props.size)),
-    [props.size.width, props.size.height]
-  );
-
   useEffect(() => {
     if (state.d3Initialised) {
       props.onLoad({
@@ -37,7 +46,7 @@ const GraphView = memo((props) => {
   }, [state.d3Initialised]);
 
   return (
-    <div className="react-graph__renderer">
+    <div className="react-graph__renderer" ref={rendererNode}>
       <Provider onConnect={props.onConnect}>
         <NodeRenderer
           nodeTypes={props.nodeTypes}
@@ -64,4 +73,6 @@ const GraphView = memo((props) => {
   );
 });
 
-export default ReactSizeMe.withSize({ monitorHeight: true })(GraphView);
+GraphView.displayName = 'GraphView';
+
+export default GraphView;

src/ReactGraph/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, memo } from 'react';
+import React, { useMemo } from 'react';
 
 if (process.env.NODE_ENV !== 'production') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
@@ -21,16 +21,14 @@ import { createEdgeTypes } from '../EdgeRenderer/utils';
 
 import '../style.css';
 
-const ReactGraph = (props) => {
+const ReactGraph = ({
+  style, onElementClick, elements, children,
+  onLoad, onMove, onElementsRemove, onConnect,
+  onNodeDragStop, connectionLineType, connectionLineStyle
+}) => {
   const nodeTypes = useMemo(() => createNodeTypes(props.nodeTypes), []);
   const edgeTypes = useMemo(() => createEdgeTypes(props.edgeTypes), []);
 
-  const {
-    style, onElementClick, elements, children,
-    onLoad, onMove, onElementsRemove, onConnect,
-    onNodeDragStop, connectionLineType, connectionLineStyle
-  } = props;
-
   return (
     <div style={style} className="react-graph">
       <Provider elements={elements}>

src/utils.js

@@ -1 +1,8 @@
-export const isFunction = obj => !!(obj && obj.constructor && obj.call && obj.apply);
+export const isFunction = obj => !!(obj && obj.constructor && obj.call && obj.apply);
+
+export const getDimensions = (node) => {
+  return {
+    width: node.offsetWidth,
+    height: node.offsetHeight
+  };
+};