[IMPROVE] KeyboardShortcuts as React component (#19518)
Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz> Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>pull/19579/head
Tiago Evangelista Pinto
5 years ago
committed by
GitHub
parent
800896f202
commit
2c06fcc52f
@ -1,49 +0,0 @@ |
||||
<template name="keyboardShortcuts"> |
||||
<div class="section"> |
||||
<h2>{{_ "Keyboard_Shortcuts_Open_Channel_Slash_User_Search"}}</h2> |
||||
<hr /> |
||||
<div>{{{_ "Keyboard_Shortcuts_Keys_1"}}}</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2>{{_ "Keyboard_Shortcuts_Mark_all_as_read"}}</h2> |
||||
<hr /> |
||||
<div>{{{_ "Keyboard_Shortcuts_Keys_8"}}}</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2>{{_ "Keyboard_Shortcuts_Edit_Previous_Message"}}</h2> |
||||
<hr /> |
||||
<div>{{{_ "Keyboard_Shortcuts_Keys_2"}}}</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2>{{_ "Keyboard_Shortcuts_Move_To_Beginning_Of_Message"}}</h2> |
||||
<hr /> |
||||
<div>{{{_ "Keyboard_Shortcuts_Keys_3"}}}</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2>{{_ "Keyboard_Shortcuts_Move_To_Beginning_Of_Message"}}</h2> |
||||
<hr /> |
||||
<div>{{{_ "Keyboard_Shortcuts_Keys_4"}}}</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2>{{_ "Keyboard_Shortcuts_Move_To_End_Of_Message"}}</h2> |
||||
<hr /> |
||||
<div>{{{_ "Keyboard_Shortcuts_Keys_5"}}}</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2>{{_ "Keyboard_Shortcuts_Move_To_End_Of_Message"}}</h2> |
||||
<hr /> |
||||
<div>{{{_ "Keyboard_Shortcuts_Keys_6"}}}</div> |
||||
</div> |
||||
|
||||
<div class="section"> |
||||
<h2>{{_ "Keyboard_Shortcuts_New_Line_In_Message"}}</h2> |
||||
<hr /> |
||||
<div>{{{_ "Keyboard_Shortcuts_Keys_7"}}}</div> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,9 @@ |
||||
import React from 'react'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import KeyboardShortcuts from '../../components/basic/KeyboardShortcuts'; |
||||
|
||||
export default React.memo(({ tabBar }) => { |
||||
const handleClose = useMutableCallback(() => tabBar && tabBar.close()); |
||||
return <KeyboardShortcuts handleClose={handleClose}/>; |
||||
}); |
||||
@ -0,0 +1,3 @@ |
||||
import KeyboardShortcuts from './KeyboardShortcuts'; |
||||
|
||||
export default KeyboardShortcuts; |
||||
@ -0,0 +1,62 @@ |
||||
import React from 'react'; |
||||
import { Box, Divider } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import VerticalBar from './VerticalBar'; |
||||
|
||||
const ShortcutSection = ({ title, command }) => |
||||
<Box is='section' mb='x16'> |
||||
<Box fontScale='p2' fontWeight='700'>{title}</Box> |
||||
<Divider /> |
||||
<Box fontScale='p1'>{command}</Box> |
||||
</Box>; |
||||
|
||||
const KeyboardShortcuts = ({ handleClose }) => { |
||||
const t = useTranslation(); |
||||
|
||||
return ( |
||||
<> |
||||
<VerticalBar.Header> |
||||
<VerticalBar.Icon name='keyboard'/> |
||||
<VerticalBar.Text>{t('Keyboard_Shortcuts_Title')}</VerticalBar.Text> |
||||
{handleClose && <VerticalBar.Close onClick={handleClose}/>} |
||||
</VerticalBar.Header> |
||||
<VerticalBar.ScrollableContent> |
||||
<ShortcutSection |
||||
title={t('Keyboard_Shortcuts_Open_Channel_Slash_User_Search')} |
||||
command={t('Keyboard_Shortcuts_Keys_1')} |
||||
/> |
||||
<ShortcutSection |
||||
title={t('Keyboard_Shortcuts_Mark_all_as_read')} |
||||
command={t('Keyboard_Shortcuts_Keys_8')} |
||||
/> |
||||
<ShortcutSection |
||||
title={t('Keyboard_Shortcuts_Edit_Previous_Message')} |
||||
command={t('Keyboard_Shortcuts_Keys_2')} |
||||
/> |
||||
<ShortcutSection |
||||
title={t('Keyboard_Shortcuts_Move_To_Beginning_Of_Message')} |
||||
command={t('Keyboard_Shortcuts_Keys_3')} |
||||
/> |
||||
<ShortcutSection |
||||
title={t('Keyboard_Shortcuts_Move_To_Beginning_Of_Message')} |
||||
command={t('Keyboard_Shortcuts_Keys_4')} |
||||
/> |
||||
<ShortcutSection |
||||
title={t('Keyboard_Shortcuts_Move_To_End_Of_Message')} |
||||
command={t('Keyboard_Shortcuts_Keys_5')} |
||||
/> |
||||
<ShortcutSection |
||||
title={t('Keyboard_Shortcuts_Move_To_End_Of_Message')} |
||||
command={t('Keyboard_Shortcuts_Keys_6')} |
||||
/> |
||||
<ShortcutSection |
||||
title={t('Keyboard_Shortcuts_New_Line_In_Message')} |
||||
command={t('Keyboard_Shortcuts_Keys_7')} |
||||
/> |
||||
</VerticalBar.ScrollableContent> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default React.memo(KeyboardShortcuts); |
||||
@ -0,0 +1,16 @@ |
||||
import React from 'react'; |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
|
||||
import VerticalBar from './VerticalBar'; |
||||
import KeyboardShortcuts from './KeyboardShortcuts'; |
||||
|
||||
export default { |
||||
title: 'components/basic/KeyboardShortcut', |
||||
component: KeyboardShortcuts, |
||||
}; |
||||
|
||||
export const Default = () => <Box height='600px'> |
||||
<VerticalBar> |
||||
<KeyboardShortcuts /> |
||||
</VerticalBar> |
||||
</Box>; |
||||
Loading…
Reference in new issue