refactor(nodewrap): dont pass all props

xyflow · Aug 5, 2019 · 6aa8f9c · 6aa8f9c
1 parent b24d7b6
commit 6aa8f9c
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 113 deletions.
diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
@@ -33224,7 +33224,12 @@
   };
 
   var _onStart = function onStart(evt, _ref) {
-    var setOffset = _ref.setOffset,
+    var dispatch = _ref.dispatch,
+        setOffset = _ref.setOffset,
+        onClick = _ref.onClick,
+        id = _ref.id,
+        type = _ref.type,
+        data = _ref.data,
         position = _ref.position,
         transform = _ref.transform;
 
@@ -33238,10 +33243,21 @@
     };
     var offsetX = scaledClient.x - position.x - [transform[0]];
     var offsetY = scaledClient.y - position.y - [transform[1]];
+    var node = {
+      id: id,
+      type: type,
+      position: position,
+      data: data
+    };
+    dispatch(setSelectedElements({
+      id: id,
+      type: type
+    }));
     setOffset({
       x: offsetX,
       y: offsetY
     });
+    onClick(node);
   };
 
   var _onDrag = function onDrag(evt, _ref2) {
@@ -33261,40 +33277,15 @@
     }));
   };
 
-  var onNodeClick = function onNodeClick(evt, _ref3) {
-    var onClick = _ref3.onClick,
-        dispatch = _ref3.dispatch,
+  var _onStop = function onStop(_ref3) {
+    var onNodeDragStop = _ref3.onNodeDragStop,
+        setDragging = _ref3.setDragging,
+        isDragging = _ref3.isDragging,
         id = _ref3.id,
         type = _ref3.type,
         position = _ref3.position,
         data = _ref3.data;
 
-    if (isInput(evt)) {
-      return false;
-    }
-
-    var node = {
-      id: id,
-      type: type,
-      position: position,
-      data: data
-    };
-    dispatch(setSelectedElements({
-      id: id,
-      type: type
-    }));
-    onClick(node);
-  };
-
-  var _onStop = function onStop(_ref4) {
-    var onNodeDragStop = _ref4.onNodeDragStop,
-        setDragging = _ref4.setDragging,
-        isDragging = _ref4.isDragging,
-        id = _ref4.id,
-        type = _ref4.type,
-        position = _ref4.position,
-        data = _ref4.data;
-
     if (!isDragging) {
       return false;
     }
@@ -33333,9 +33324,9 @@
           yPos = props.yPos,
           selected = props.selected,
           dispatch = props.dispatch,
-          getNodeById = props.getNodeById,
-          _onClick = props.onClick,
-          onNodeDragStop = props.onNodeDragStop;
+          onClick = props.onClick,
+          onNodeDragStop = props.onNodeDragStop,
+          style = props.style;
       var position = {
         x: xPos,
         y: yPos
@@ -33364,6 +33355,11 @@
       return React__default.createElement(reactDraggable.DraggableCore, {
         onStart: function onStart(evt) {
           return _onStart(evt, {
+            dispatch: dispatch,
+            onClick: onClick,
+            id: id,
+            type: type,
+            data: data,
             setOffset: setOffset,
             transform: transform,
             position: position
@@ -33393,23 +33389,16 @@
       }, React__default.createElement("div", {
         className: nodeClasses,
         ref: nodeElement,
-        style: nodeStyle,
-        onClick: function onClick(evt) {
-          return onNodeClick(evt, {
-            getNodeById: getNodeById,
-            onClick: _onClick,
-            dispatch: dispatch,
-            id: id,
-            type: type,
-            position: position,
-            data: data
-          });
-        }
+        style: nodeStyle
       }, React__default.createElement(Provider$2, {
         value: id
-      }, React__default.createElement(NodeComponent, _extends({}, props, {
+      }, React__default.createElement(NodeComponent, {
+        id: id,
+        data: data,
+        type: type,
+        style: style,
         selected: selected
-      })))));
+      }))));
     });
     WrappedComp.displayName = 'Wrapped Node';
     WrappedComp.whyDidYouRender = false;

diff --git a/example/build/example.e31bb0bc.js b/example/build/example.e31bb0bc.js
@@ -41606,8 +41606,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
@@ -41643,7 +41641,12 @@ var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k
 };
 
 var _onStart = function onStart(evt, _ref) {
-  var setOffset = _ref.setOffset,
+  var dispatch = _ref.dispatch,
+      setOffset = _ref.setOffset,
+      onClick = _ref.onClick,
+      id = _ref.id,
+      type = _ref.type,
+      data = _ref.data,
       position = _ref.position,
       transform = _ref.transform;
 
@@ -41657,10 +41660,21 @@ var _onStart = function onStart(evt, _ref) {
   };
   var offsetX = scaledClient.x - position.x - [transform[0]];
   var offsetY = scaledClient.y - position.y - [transform[1]];
+  var node = {
+    id: id,
+    type: type,
+    position: position,
+    data: data
+  };
+  dispatch((0, _actions.setSelectedElements)({
+    id: id,
+    type: type
+  }));
   setOffset({
     x: offsetX,
     y: offsetY
   });
+  onClick(node);
 };
 
 var _onDrag = function onDrag(evt, _ref2) {
@@ -41680,40 +41694,15 @@ var _onDrag = function onDrag(evt, _ref2) {
   }));
 };
 
-var onNodeClick = function onNodeClick(evt, _ref3) {
-  var onClick = _ref3.onClick,
-      dispatch = _ref3.dispatch,
+var _onStop = function onStop(_ref3) {
+  var onNodeDragStop = _ref3.onNodeDragStop,
+      setDragging = _ref3.setDragging,
+      isDragging = _ref3.isDragging,
       id = _ref3.id,
       type = _ref3.type,
       position = _ref3.position,
       data = _ref3.data;
 
-  if (isInput(evt)) {
-    return false;
-  }
-
-  var node = {
-    id: id,
-    type: type,
-    position: position,
-    data: data
-  };
-  dispatch((0, _actions.setSelectedElements)({
-    id: id,
-    type: type
-  }));
-  onClick(node);
-};
-
-var _onStop = function onStop(_ref4) {
-  var onNodeDragStop = _ref4.onNodeDragStop,
-      setDragging = _ref4.setDragging,
-      isDragging = _ref4.isDragging,
-      id = _ref4.id,
-      type = _ref4.type,
-      position = _ref4.position,
-      data = _ref4.data;
-
   if (!isDragging) {
     return false;
   }
@@ -41752,9 +41741,9 @@ var _default = function _default(NodeComponent) {
         yPos = props.yPos,
         selected = props.selected,
         dispatch = props.dispatch,
-        getNodeById = props.getNodeById,
-        _onClick = props.onClick,
-        onNodeDragStop = props.onNodeDragStop;
+        onClick = props.onClick,
+        onNodeDragStop = props.onNodeDragStop,
+        style = props.style;
     var position = {
       x: xPos,
       y: yPos
@@ -41783,6 +41772,11 @@ var _default = function _default(NodeComponent) {
     return _react.default.createElement(_reactDraggable.default.DraggableCore, {
       onStart: function onStart(evt) {
         return _onStart(evt, {
+          dispatch: dispatch,
+          onClick: onClick,
+          id: id,
+          type: type,
+          data: data,
           setOffset: setOffset,
           transform: transform,
           position: position
@@ -41812,23 +41806,16 @@ var _default = function _default(NodeComponent) {
     }, _react.default.createElement("div", {
       className: nodeClasses,
       ref: nodeElement,
-      style: nodeStyle,
-      onClick: function onClick(evt) {
-        return onNodeClick(evt, {
-          getNodeById: getNodeById,
-          onClick: _onClick,
-          dispatch: dispatch,
-          id: id,
-          type: type,
-          position: position,
-          data: data
-        });
-      }
+      style: nodeStyle
     }, _react.default.createElement(_NodeIdContext.Provider, {
       value: id
-    }, _react.default.createElement(NodeComponent, _extends({}, props, {
+    }, _react.default.createElement(NodeComponent, {
+      id: id,
+      data: data,
+      type: type,
+      style: style,
       selected: selected
-    })))));
+    }))));
   });
   WrappedComp.displayName = 'Wrapped Node';
   WrappedComp.whyDidYouRender = false;

diff --git a/example/build/example.e31bb0bc.js.map b/example/build/example.e31bb0bc.js.map
diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js
@@ -31,7 +31,7 @@ const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   };
 };
 
-const onStart = (evt, { setOffset, position, transform }) => {
+const onStart = (evt, { dispatch, setOffset, onClick, id, type, data, position, transform }) => {
   if (isInput(evt) || isHandle(evt)) {
     return false;
   }
@@ -42,8 +42,11 @@ const onStart = (evt, { setOffset, position, transform }) => {
   }
   const offsetX = scaledClient.x - position.x - [transform[0]];
   const offsetY = scaledClient.y - position.y - [transform[1]];
+  const node = { id, type, position, data }
 
+  dispatch(setSelectedElements({ id, type }));
   setOffset({ x: offsetX, y: offsetY });
+  onClick(node);
 };
 
 const onDrag = (evt, { dispatch, setDragging, id, offset, transform }) => {
@@ -59,17 +62,6 @@ const onDrag = (evt, { dispatch, setDragging, id, offset, transform }) => {
   }));
 };
 
-const onNodeClick = (evt, { onClick, dispatch, id, type, position, data }) => {
-  if (isInput(evt)) {
-    return false;
-  }
-
-  const node = { id, type, position, data }
-
-  dispatch(setSelectedElements({ id, type }));
-  onClick(node);
-};
-
 const onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, data }) => {
   if (!isDragging) {
     return false;
@@ -88,7 +80,7 @@ export default NodeComponent => {
     const [isDragging, setDragging] = useState(false);
     const {
       id, type, data, transform, xPos, yPos, selected,
-      dispatch, getNodeById, onClick, onNodeDragStop
+      dispatch, onClick, onNodeDragStop, style
     } = props;
 
     const position = { x: xPos, y: yPos };
@@ -109,7 +101,7 @@ export default NodeComponent => {
 
     return (
       <ReactDraggable.DraggableCore
-        onStart={evt => onStart(evt, { setOffset, transform, position })}
+        onStart={evt => onStart(evt, { dispatch, onClick, id, type, data, setOffset, transform, position })}
         onDrag={evt => onDrag(evt, { dispatch, setDragging, id, offset, transform })}
         onStop={() => onStop({ onNodeDragStop, isDragging, setDragging, id, type, position, data })}
         scale={transform[2]}
@@ -118,10 +110,15 @@ export default NodeComponent => {
           className={nodeClasses}
           ref={nodeElement}
           style={nodeStyle}
-          onClick={evt => onNodeClick(evt, { getNodeById, onClick, dispatch, id, type, position, data })}
         >
           <Provider value={id}>
-            <NodeComponent {...props} selected={selected} />
+            <NodeComponent
+              id={id}
+              data={data}
+              type={type}
+              style={style}
+              selected={selected}
+            />
           </Provider>
         </div>
       </ReactDraggable.DraggableCore>