11import React from 'react' ;
22
3+ import type { HotkeysGroup } from '@gravity-ui/navigation' ;
34import { HotkeysPanel as UIKitHotkeysPanel } from '@gravity-ui/navigation' ;
45import { Hotkey } from '@gravity-ui/uikit' ;
56import hotkeys from 'hotkeys-js' ;
@@ -13,7 +14,7 @@ export const isMac = () => navigator.platform.toUpperCase().includes('MAC');
1314
1415export const SHORTCUTS_HOTKEY = isMac ( ) ? 'cmd+K' : 'ctrl+K' ;
1516
16- export const HOTKEYS = [
17+ export const DEFAULT_HOTKEY_GROUPS : HotkeysGroup [ ] = [
1718 {
1819 title : 'Query Editor' ,
1920 items : [
@@ -48,6 +49,7 @@ export const HOTKEYS = [
4849export interface HotkeysPanelProps {
4950 visible : boolean ;
5051 closePanel : ( ) => void ;
52+ hotkeyGroups ?: HotkeysGroup [ ] ;
5153}
5254
5355/**
@@ -60,7 +62,11 @@ export interface HotkeysPanelProps {
6062 * This wrapper ensures the component mounts first, then sets visible=true in a subsequent render cycle
6163 * to make transition actually happen.
6264 */
63- export const HotkeysPanelWrapper = ( { visible : propsVisible , closePanel} : HotkeysPanelProps ) => {
65+ export const HotkeysPanelWrapper = ( {
66+ visible : propsVisible ,
67+ closePanel,
68+ hotkeyGroups = DEFAULT_HOTKEY_GROUPS ,
69+ } : HotkeysPanelProps ) => {
6470 const [ visible , setVisible ] = React . useState ( false ) ;
6571
6672 React . useEffect ( ( ) => {
@@ -70,7 +76,7 @@ export const HotkeysPanelWrapper = ({visible: propsVisible, closePanel}: Hotkeys
7076 return (
7177 < UIKitHotkeysPanel
7278 visible = { visible }
73- hotkeys = { HOTKEYS }
79+ hotkeys = { hotkeyGroups }
7480 className = { b ( 'hotkeys-panel' ) }
7581 title = {
7682 < div className = { b ( 'hotkeys-panel-title' ) } >
@@ -87,9 +93,15 @@ interface UseHotkeysPanel {
8793 isPanelVisible : boolean ;
8894 openPanel : ( ) => void ;
8995 closePanel : ( ) => void ;
96+ hotkeyGroups ?: HotkeysGroup [ ] ;
9097}
9198
92- export const useHotkeysPanel = ( { isPanelVisible, openPanel, closePanel} : UseHotkeysPanel ) => {
99+ export const useHotkeysPanel = ( {
100+ isPanelVisible,
101+ openPanel,
102+ closePanel,
103+ hotkeyGroups = DEFAULT_HOTKEY_GROUPS ,
104+ } : UseHotkeysPanel ) => {
93105 React . useEffect ( ( ) => {
94106 hotkeys ( SHORTCUTS_HOTKEY , openPanel ) ;
95107
@@ -102,8 +114,14 @@ export const useHotkeysPanel = ({isPanelVisible, openPanel, closePanel}: UseHotk
102114 } , [ openPanel ] ) ;
103115
104116 const renderPanel = React . useCallback (
105- ( ) => < HotkeysPanelWrapper visible = { isPanelVisible } closePanel = { closePanel } /> ,
106- [ isPanelVisible , closePanel ] ,
117+ ( ) => (
118+ < HotkeysPanelWrapper
119+ visible = { isPanelVisible }
120+ closePanel = { closePanel }
121+ hotkeyGroups = { hotkeyGroups }
122+ />
123+ ) ,
124+ [ isPanelVisible , closePanel , hotkeyGroups ] ,
107125 ) ;
108126
109127 return {
0 commit comments