feat(editor): deleteKey as prop

xyflow · Oct 3, 2019 · 5ffe4f9 · 5ffe4f9
1 parent a4887ea
commit 5ffe4f9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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;