Develop (#35)

* refactor(ts): add ReactFlowProps

* Refactor/grid.tsx (#24)

* chore(deps-dev): bump start-server-and-test from 1.10.4 to 1.10.5

Bumps [start-server-and-test](https://github.com/bahmutov/start-server-and-test) from 1.10.4 to 1.10.5.
- [Release notes](https://github.com/bahmutov/start-server-and-test/releases)
- [Commits](https://github.com/bahmutov/start-server-and-test/compare/v1.10.4...v1.10.5)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* chore(deps-dev): bump typescript from 3.6.3 to 3.6.4

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.6.3 to 3.6.4.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v3.6.3...v3.6.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* refactor: grid.js -> grid.tsx

* refactor(bg): remove unused renderer

* refactor(connectionline): use ts

* refactor(ts): edges

* chore(build): update

* Refactor/typescript (WIP) (#25)

* refactor(store): use ts

* refactor(edgewrapper): use ts

* fix(handle): provide onConnect default func

* refactor(nodeselection): use ts

* refactor(userselction): use ts

* refactor(plugins): use ts

* refactor(hooks): use ts

* refactor(nodes): use ts

* refactor(edgerenderer): use ts

* refactor(graphview): use ts

* refactor(utils): rename js to ts

* refactor(app): fix ts errors

* fix(ts): errors

* fix(app): ts errors

* refactor(app): ts erros

* refactor(app): ts errors

* fix(utils): removeElements

* feat(example): add empty renderer closes #34

* fix(connect): dont drag node on connect

* chore(build): update

src/container/ReactFlow/index.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
+import React, { useMemo, CSSProperties, ReactNode, SVGAttributes } from 'react';
 import { StoreProvider } from 'easy-peasy';
 
-if (process.env.NODE_ENV !== 'production') {
+const nodeEnv: string = (process.env.NODE_ENV as string);
+
+if (nodeEnv !== 'production') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
   whyDidYouRender(React);
 }
@@ -17,16 +18,40 @@ import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import store from '../../store';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
 
 import '../../style.css';
 
+export interface ReactFlowProps {
+  elements: Elements,
+  style?: CSSProperties,
+  className?: string,
+  children?: ReactNode[],
+  onElementClick: () => void,
+  onElementsRemove: (elements: Elements) => void,
+  onNodeDragStop: () => void,
+  onConnect: () => void,
+	onLoad: OnLoadFunc,
+  onMove: () => void,
+  nodeTypes: NodeTypesType,
+  edgeTypes: EdgeTypesType,
+  connectionLineType: string,
+  connectionLineStyle: SVGAttributes<{}>,
+  deleteKeyCode: number,
+  selectionKeyCode: number,
+  showBackground: boolean,
+  backgroundGap: number,
+  backgroundColor: string,
+  backgroundType: GridType
+};
+
 const ReactFlow = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove,
   onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
   connectionLineStyle, deleteKeyCode, selectionKeyCode,
   showBackground, backgroundGap, backgroundType, backgroundColor
-}) => {
+}: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
 
@@ -60,25 +85,6 @@ const ReactFlow = ({
 
 ReactFlow.displayName = 'ReactFlow';
 
-ReactFlow.propTypes = {
-  onElementClick: PropTypes.func,
-  onElementsRemove: PropTypes.func,
-  onNodeDragStop: PropTypes.func,
-  onConnect: PropTypes.func,
-	onLoad: PropTypes.func,
-  onMove: PropTypes.func,
-  nodeTypes: PropTypes.object,
-  edgeTypes: PropTypes.object,
-  connectionLineType: PropTypes.string,
-  connectionLineStyle: PropTypes.object,
-  deleteKeyCode: PropTypes.number,
-  selectionKeyCode: PropTypes.number,
-  gridColor: PropTypes.string,
-  gridGap: PropTypes.number,
-  showBackground: PropTypes.bool,
-  backgroundType: PropTypes.oneOf(['lines', 'dots'])
-};
-
 ReactFlow.defaultProps = {
   onElementClick: () => {},
   onElementsRemove: () => {},
@@ -103,7 +109,7 @@ ReactFlow.defaultProps = {
   backgroundColor: '#eee',
   backgroundGap: 24,
   showBackground: true,
-  backgroundType: 'dots'
+  backgroundType: GridType.Dots
 };
 
 export default ReactFlow;