add ability to disable hotkeys

reaviz · Aug 23, 2021 · b670d4a · b670d4a
1 parent 9fe8bf0
commit b670d4a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/docs/Helpers/Selection.stories.mdx b/docs/Helpers/Selection.stories.mdx
@@ -33,6 +33,11 @@ export interface SelectionProps {
    */
   edges?: EdgeData[];
 
+  /**
+   * Hotkey types.
+   */
+  hotkeys?: HotkeyTypes[];
+
   /**
    * Disabled or not.
    */

diff --git a/src/helpers/useSelection.ts b/src/helpers/useSelection.ts
@@ -3,6 +3,8 @@ import { useHotkeys } from 'reakeys';
 import { EdgeData, NodeData } from '../types';
 import { removeNode } from './crudHelpers';
 
+export type HotkeyTypes = 'selectAll' | 'deselect' | 'delete';
+
 export interface SelectionProps {
   /**
    * Current selections.
@@ -26,6 +28,11 @@ export interface SelectionProps {
    */
   disabled?: boolean;
 
+  /**
+   * Hotkey types
+   */
+  hotkeys?: HotkeyTypes[];
+
   /**
    * On selection change.
    */
@@ -91,6 +98,7 @@ export const useSelection = ({
   selections = [],
   nodes = [],
   edges = [],
+  hotkeys = ['selectAll', 'deselect', 'delete'],
   disabled,
   onSelection,
   onDataChange
@@ -115,7 +123,7 @@ export const useSelection = ({
     if (!disabled) {
       const has = internalSelections.includes(item);
       if (has) {
-        const next = internalSelections.filter((i) => i !== item);
+        const next = internalSelections.filter(i => i !== item);
         onSelection?.(next);
         setInternalSelections(next);
       }
@@ -151,7 +159,7 @@ export const useSelection = ({
     setMetaKeyDown(false);
   };
 
-  const onKeyDown = (event) => {
+  const onKeyDown = event => {
     event.preventDefault();
     setMetaKeyDown(event.metaKey || event.ctrlKey);
   };
@@ -165,13 +173,14 @@ export const useSelection = ({
     {
       name: 'Select All',
       keys: 'mod+a',
+      disabled: !hotkeys.includes('selectAll'),
       category: 'Canvas',
       description: 'Select all nodes and edges',
-      callback: (event) => {
+      callback: event => {
         event.preventDefault();
 
         if (!disabled) {
-          const next = nodes.map((n) => n.id);
+          const next = nodes.map(n => n.id);
           onDataChange?.(nodes, edges);
           onSelection?.(next);
           setInternalSelections(next);
@@ -181,9 +190,10 @@ export const useSelection = ({
     {
       name: 'Delete Selections',
       category: 'Canvas',
+      disabled: !hotkeys.includes('delete'),
       description: 'Delete selected nodes and edges',
       keys: 'backspace',
-      callback: (event) => {
+      callback: event => {
         if (!disabled) {
           event.preventDefault();
           const result = removeNode(nodes, edges, internalSelections);
@@ -196,9 +206,10 @@ export const useSelection = ({
     {
       name: 'Deselect Selections',
       category: 'Canvas',
+      disabled: !hotkeys.includes('deselect'),
       description: 'Deselect selected nodes and edges',
       keys: 'escape',
-      callback: (event) => {
+      callback: event => {
         if (!disabled) {
           event.preventDefault();
           onSelection?.([]);