refactor(lib): forward ref closes #1050

src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent } from 'react';
+import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent, forwardRef } from 'react';
 import cc from 'classcat';
 
 import GraphView from '../GraphView';
@@ -119,157 +119,164 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   edgeTypesId?: string;
 }
 
-const ReactFlow = ({
+export type ReactFlowRefType = HTMLDivElement;
-  elements = [],
-  className,
-  nodeTypes = defaultNodeTypes,
-  edgeTypes = defaultEdgeTypes,
-  onElementClick,
-  onLoad,
-  onMove,
-  onMoveStart,
-  onMoveEnd,
-  onElementsRemove,
-  onConnect,
-  onConnectStart,
-  onConnectStop,
-  onConnectEnd,
-  onNodeMouseEnter,
-  onNodeMouseMove,
-  onNodeMouseLeave,
-  onNodeContextMenu,
-  onNodeDoubleClick,
-  onNodeDragStart,
-  onNodeDrag,
-  onNodeDragStop,
-  onSelectionChange,
-  onSelectionDragStart,
-  onSelectionDrag,
-  onSelectionDragStop,
-  onSelectionContextMenu,
-  connectionMode = ConnectionMode.Strict,
-  connectionLineType = ConnectionLineType.Bezier,
-  connectionLineStyle,
-  connectionLineComponent,
-  deleteKeyCode = 'Backspace',
-  selectionKeyCode = 'Shift',
-  multiSelectionKeyCode = 'Meta',
-  zoomActivationKeyCode = 'Meta',
-  snapToGrid = false,
-  snapGrid = [15, 15],
-  onlyRenderVisibleElements = true,
-  selectNodesOnDrag = true,
-  nodesDraggable,
-  nodesConnectable,
-  elementsSelectable,
-  minZoom,
-  maxZoom,
-  defaultZoom = 1,
-  defaultPosition = [0, 0],
-  translateExtent,
-  nodeExtent,
-  arrowHeadColor = '#b1b1b7',
-  markerEndId,
-  zoomOnScroll = true,
-  zoomOnPinch = true,
-  panOnScroll = false,
-  panOnScrollSpeed = 0.5,
-  panOnScrollMode = PanOnScrollMode.Free,
-  zoomOnDoubleClick = true,
-  paneMoveable = true,
-  onPaneClick,
-  onPaneScroll,
-  onPaneContextMenu,
-  children,
-  onEdgeUpdate,
-  onEdgeContextMenu,
-  onEdgeMouseEnter,
-  onEdgeMouseMove,
-  onEdgeMouseLeave,
-  edgeUpdaterRadius = 10,
-  nodeTypesId = '1',
-  edgeTypesId = '1',
-  ...rest
-}: ReactFlowProps) => {
-  const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);
-  const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), [edgeTypesId]);
-  const reactFlowClasses = cc(['react-flow', className]);
 
-  return (
+const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
-    <div {...rest} className={reactFlowClasses}>
+  (
-      <Wrapper>
+    {
-        <GraphView
+      elements = [],
-          onLoad={onLoad}
+      className,
-          onMove={onMove}
+      nodeTypes = defaultNodeTypes,
-          onMoveStart={onMoveStart}
+      edgeTypes = defaultEdgeTypes,
-          onMoveEnd={onMoveEnd}
+      onElementClick,
-          onElementClick={onElementClick}
+      onLoad,
-          onNodeMouseEnter={onNodeMouseEnter}
+      onMove,
-          onNodeMouseMove={onNodeMouseMove}
+      onMoveStart,
-          onNodeMouseLeave={onNodeMouseLeave}
+      onMoveEnd,
-          onNodeContextMenu={onNodeContextMenu}
+      onElementsRemove,
-          onNodeDoubleClick={onNodeDoubleClick}
+      onConnect,
-          onNodeDragStart={onNodeDragStart}
+      onConnectStart,
-          onNodeDrag={onNodeDrag}
+      onConnectStop,
-          onNodeDragStop={onNodeDragStop}
+      onConnectEnd,
-          nodeTypes={nodeTypesParsed}
+      onNodeMouseEnter,
-          edgeTypes={edgeTypesParsed}
+      onNodeMouseMove,
-          connectionMode={connectionMode}
+      onNodeMouseLeave,
-          connectionLineType={connectionLineType}
+      onNodeContextMenu,
-          connectionLineStyle={connectionLineStyle}
+      onNodeDoubleClick,
-          connectionLineComponent={connectionLineComponent}
+      onNodeDragStart,
-          selectionKeyCode={selectionKeyCode}
+      onNodeDrag,
-          onElementsRemove={onElementsRemove}
+      onNodeDragStop,
-          deleteKeyCode={deleteKeyCode}
+      onSelectionChange,
-          multiSelectionKeyCode={multiSelectionKeyCode}
+      onSelectionDragStart,
-          zoomActivationKeyCode={zoomActivationKeyCode}
+      onSelectionDrag,
-          onConnect={onConnect}
+      onSelectionDragStop,
-          onConnectStart={onConnectStart}
+      onSelectionContextMenu,
-          onConnectStop={onConnectStop}
+      connectionMode = ConnectionMode.Strict,
-          onConnectEnd={onConnectEnd}
+      connectionLineType = ConnectionLineType.Bezier,
-          snapToGrid={snapToGrid}
+      connectionLineStyle,
-          snapGrid={snapGrid}
+      connectionLineComponent,
-          onlyRenderVisibleElements={onlyRenderVisibleElements}
+      deleteKeyCode = 'Backspace',
-          nodesDraggable={nodesDraggable}
+      selectionKeyCode = 'Shift',
-          nodesConnectable={nodesConnectable}
+      multiSelectionKeyCode = 'Meta',
-          elementsSelectable={elementsSelectable}
+      zoomActivationKeyCode = 'Meta',
-          selectNodesOnDrag={selectNodesOnDrag}
+      snapToGrid = false,
-          minZoom={minZoom}
+      snapGrid = [15, 15],
-          maxZoom={maxZoom}
+      onlyRenderVisibleElements = true,
-          defaultZoom={defaultZoom}
+      selectNodesOnDrag = true,
-          defaultPosition={defaultPosition}
+      nodesDraggable,
-          translateExtent={translateExtent}
+      nodesConnectable,
-          nodeExtent={nodeExtent}
+      elementsSelectable,
-          arrowHeadColor={arrowHeadColor}
+      minZoom,
-          markerEndId={markerEndId}
+      maxZoom,
-          zoomOnScroll={zoomOnScroll}
+      defaultZoom = 1,
-          zoomOnPinch={zoomOnPinch}
+      defaultPosition = [0, 0],
-          zoomOnDoubleClick={zoomOnDoubleClick}
+      translateExtent,
-          panOnScroll={panOnScroll}
+      nodeExtent,
-          panOnScrollSpeed={panOnScrollSpeed}
+      arrowHeadColor = '#b1b1b7',
-          panOnScrollMode={panOnScrollMode}
+      markerEndId,
-          paneMoveable={paneMoveable}
+      zoomOnScroll = true,
-          onPaneClick={onPaneClick}
+      zoomOnPinch = true,
-          onPaneScroll={onPaneScroll}
+      panOnScroll = false,
-          onPaneContextMenu={onPaneContextMenu}
+      panOnScrollSpeed = 0.5,
-          onSelectionDragStart={onSelectionDragStart}
+      panOnScrollMode = PanOnScrollMode.Free,
-          onSelectionDrag={onSelectionDrag}
+      zoomOnDoubleClick = true,
-          onSelectionDragStop={onSelectionDragStop}
+      paneMoveable = true,
-          onSelectionContextMenu={onSelectionContextMenu}
+      onPaneClick,
-          onEdgeUpdate={onEdgeUpdate}
+      onPaneScroll,
-          onEdgeContextMenu={onEdgeContextMenu}
+      onPaneContextMenu,
-          onEdgeMouseEnter={onEdgeMouseEnter}
+      children,
-          onEdgeMouseMove={onEdgeMouseMove}
+      onEdgeUpdate,
-          onEdgeMouseLeave={onEdgeMouseLeave}
+      onEdgeContextMenu,
-          edgeUpdaterRadius={edgeUpdaterRadius}
+      onEdgeMouseEnter,
-        />
+      onEdgeMouseMove,
-        <ElementUpdater elements={elements} />
+      onEdgeMouseLeave,
-        {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
+      edgeUpdaterRadius = 10,
-        {children}
+      nodeTypesId = '1',
-      </Wrapper>
+      edgeTypesId = '1',
-    </div>
+      ...rest
-  );
+    },
-};
+    ref
+  ) => {
+    const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);
+    const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), [edgeTypesId]);
+    const reactFlowClasses = cc(['react-flow', className]);
+
+    return (
+      <div {...rest} ref={ref} className={reactFlowClasses}>
+        <Wrapper>
+          <GraphView
+            onLoad={onLoad}
+            onMove={onMove}
+            onMoveStart={onMoveStart}
+            onMoveEnd={onMoveEnd}
+            onElementClick={onElementClick}
+            onNodeMouseEnter={onNodeMouseEnter}
+            onNodeMouseMove={onNodeMouseMove}
+            onNodeMouseLeave={onNodeMouseLeave}
+            onNodeContextMenu={onNodeContextMenu}
+            onNodeDoubleClick={onNodeDoubleClick}
+            onNodeDragStart={onNodeDragStart}
+            onNodeDrag={onNodeDrag}
+            onNodeDragStop={onNodeDragStop}
+            nodeTypes={nodeTypesParsed}
+            edgeTypes={edgeTypesParsed}
+            connectionMode={connectionMode}
+            connectionLineType={connectionLineType}
+            connectionLineStyle={connectionLineStyle}
+            connectionLineComponent={connectionLineComponent}
+            selectionKeyCode={selectionKeyCode}
+            onElementsRemove={onElementsRemove}
+            deleteKeyCode={deleteKeyCode}
+            multiSelectionKeyCode={multiSelectionKeyCode}
+            zoomActivationKeyCode={zoomActivationKeyCode}
+            onConnect={onConnect}
+            onConnectStart={onConnectStart}
+            onConnectStop={onConnectStop}
+            onConnectEnd={onConnectEnd}
+            snapToGrid={snapToGrid}
+            snapGrid={snapGrid}
+            onlyRenderVisibleElements={onlyRenderVisibleElements}
+            nodesDraggable={nodesDraggable}
+            nodesConnectable={nodesConnectable}
+            elementsSelectable={elementsSelectable}
+            selectNodesOnDrag={selectNodesOnDrag}
+            minZoom={minZoom}
+            maxZoom={maxZoom}
+            defaultZoom={defaultZoom}
+            defaultPosition={defaultPosition}
+            translateExtent={translateExtent}
+            nodeExtent={nodeExtent}
+            arrowHeadColor={arrowHeadColor}
+            markerEndId={markerEndId}
+            zoomOnScroll={zoomOnScroll}
+            zoomOnPinch={zoomOnPinch}
+            zoomOnDoubleClick={zoomOnDoubleClick}
+            panOnScroll={panOnScroll}
+            panOnScrollSpeed={panOnScrollSpeed}
+            panOnScrollMode={panOnScrollMode}
+            paneMoveable={paneMoveable}
+            onPaneClick={onPaneClick}
+            onPaneScroll={onPaneScroll}
+            onPaneContextMenu={onPaneContextMenu}
+            onSelectionDragStart={onSelectionDragStart}
+            onSelectionDrag={onSelectionDrag}
+            onSelectionDragStop={onSelectionDragStop}
+            onSelectionContextMenu={onSelectionContextMenu}
+            onEdgeUpdate={onEdgeUpdate}
+            onEdgeContextMenu={onEdgeContextMenu}
+            onEdgeMouseEnter={onEdgeMouseEnter}
+            onEdgeMouseMove={onEdgeMouseMove}
+            onEdgeMouseLeave={onEdgeMouseLeave}
+            edgeUpdaterRadius={edgeUpdaterRadius}
+          />
+          <ElementUpdater elements={elements} />
+          {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
+          {children}
+        </Wrapper>
+      </div>
+    );
+  }
+);
 
 ReactFlow.displayName = 'ReactFlow';