From 5ffe4f9c93d39fc7c79a659077c418fcdcf8d823 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 3 Oct 2019 17:46:14 +0200
Subject: [PATCH] feat(editor): deleteKey as prop

---
 src/GlobalKeyHandler/index.js | 6 +++---
 src/ReactGraph/index.js       | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/GlobalKeyHandler/index.js b/src/GlobalKeyHandler/index.js
index 96b38832..666cbcad 100644
--- a/src/GlobalKeyHandler/index.js
+++ b/src/GlobalKeyHandler/index.js
@@ -4,10 +4,10 @@ import { useStoreState, useStoreActions } from 'easy-peasy';
 import useKeyPress from '../hooks/useKeyPress';
 import { isEdge, getConnectedEdges } from '../graph-utils';
 
-export default memo((props) => {
+export default memo(({ deleteKey, onElementsRemove }) => {
   const state = useStoreState(s => ({ selectedElements: s.selectedElements, edges: s.edges }))
   const setNodesSelection = useStoreActions(a => a.setNodesSelection);
-  const removePressed = useKeyPress('Backspace');
+  const removePressed = useKeyPress(deleteKey);
 
   useEffect(() => {
     if (removePressed && state.selectedElements.length) {
@@ -19,7 +19,7 @@ export default memo((props) => {
         elementsToRemove = [...state.selectedElements, ...connectedEdges];
       }
 
-      props.onElementsRemove(elementsToRemove);
+      onElementsRemove(elementsToRemove);
       setNodesSelection({ isActive: false });
     }
   }, [removePressed])
diff --git a/src/ReactGraph/index.js b/src/ReactGraph/index.js
index dfce364b..d07739ac 100644
--- a/src/ReactGraph/index.js
+++ b/src/ReactGraph/index.js
@@ -26,7 +26,8 @@ import '../style.css';
 const ReactGraph = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove,
-  onConnect, onNodeDragStop, connectionLineType, connectionLineStyle
+  onConnect, onNodeDragStop, connectionLineType, connectionLineStyle,
+  deleteKey
 }) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -47,6 +48,7 @@ const ReactGraph = ({
         />
         <GlobalKeyHandler
           onElementsRemove={onElementsRemove}
+          deleteKey={deleteKey}
         />
         {children}
       </StoreProvider>
@@ -74,7 +76,8 @@ ReactGraph.defaultProps = {
     step: StepEdge
   },
   connectionLineType: 'bezier',
-  connectionLineStyle: {}
+  connectionLineStyle: {},
+  deleteKey: 'Backspace'
 };
 
 export default ReactGraph;