{ children }
@@ -10,9 +12,11 @@ export const ModalActions = ({ justify = 'between', className = '', children, ..
ModalActions.propTypes = {
justify: PropTypes.string,
- className: PropTypes.string
+ className: PropTypes.string,
+ children: PropTypes.node
}
+// @ts-ignore
export const ModalBody = ({ className = '', Icon, title, children, ...props }) => (
{ Icon && (
@@ -32,9 +36,11 @@ ModalBody.propTypes = {
title: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node
- ])
+ ]),
+ children: PropTypes.node
}
+// @ts-ignore
export const Modal = ({ onCancel, children, className, ...props }) => {
return (
diff --git a/src/components/notify/Toast.js b/src/components/notify/Toast.js
index b4e9ea89e..d9e169046 100644
--- a/src/components/notify/Toast.js
+++ b/src/components/notify/Toast.js
@@ -1,5 +1,5 @@
import React from 'react'
-import CancelIcon from '../../icons/GlyphSmallCancel.js'
+import CancelIcon from '../../icons/GlyphSmallCancel'
const Toast = ({ error, children, onDismiss }) => {
const bg = error ? 'bg-yellow' : 'bg-green'
diff --git a/src/components/overlay/Overlay.js b/src/components/overlay/Overlay.js
deleted file mode 100644
index 3820ed355..000000000
--- a/src/components/overlay/Overlay.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Modal } from 'react-overlays'
-
-function Overlay ({ children, show, onLeave, className, hidden, ...props }) {
- const handleKeyDown = (e) => {
- if (e.key !== 'Escape') return
-
- e.stopPropagation()
- e.nativeEvent.stopImmediatePropagation()
-
- onLeave()
- }
-
- const renderBackdrop = (props) => (
-
- )
-
- return (
-
- {children}
-
- )
-}
-
-Overlay.propTypes = {
- show: PropTypes.bool.isRequired,
- onLeave: PropTypes.func.isRequired
-}
-
-Overlay.defaultProps = {
- className: ''
-}
-
-export default Overlay
diff --git a/src/components/overlay/Overlay.tsx b/src/components/overlay/Overlay.tsx
new file mode 100644
index 000000000..76b6eeaeb
--- /dev/null
+++ b/src/components/overlay/Overlay.tsx
@@ -0,0 +1,41 @@
+import React, { ReactElement } from 'react'
+import { Modal } from 'react-overlays'
+
+interface OverlayProps {
+ children: React.ReactNode
+ show: boolean
+ onLeave: () => void
+ className: string
+ hidden: boolean
+}
+
+const Overlay: React.FC
= ({ children, show, onLeave, className, hidden, ...props }): ReactElement => {
+ const handleKeyDown = (e: React.KeyboardEvent): null | void => {
+ if (e.key !== 'Escape') return null
+
+ e.stopPropagation()
+ e.nativeEvent.stopImmediatePropagation()
+
+ onLeave()
+ }
+
+ const renderBackdrop = (): React.ReactNode => {
+ return (
+
+ )
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+export default Overlay
diff --git a/src/components/tour/TourHelper.js b/src/components/tour/TourHelper.js
index 91417c0b5..fcac34f69 100644
--- a/src/components/tour/TourHelper.js
+++ b/src/components/tour/TourHelper.js
@@ -8,7 +8,7 @@ export const TourHelper = ({ doEnableTours, className = '', size = 23, t }) => {
}
return (
-
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index 04f66f8fd..e09348fa1 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -12,7 +12,6 @@ import RemoveModal from './remove-modal/RemoveModal.js'
import AddByPathModal from './add-by-path-modal/AddByPathModal.js'
import BulkImportModal from './bulk-import-modal/bulk-import-modal.tsx'
import PublishModal from './publish-modal/PublishModal.js'
-import ShortcutModal from './shortcut-modal/shortcut-modal.js'
import CliTutorMode from '../../components/cli-tutor-mode/CliTutorMode.js'
import { cliCommandList, cliCmdKeys } from '../../bundles/files/consts.js'
import { realMfsPath } from '../../bundles/files/actions.js'
@@ -28,7 +27,6 @@ const BULK_CID_IMPORT = 'bulk_cid_import'
const CLI_TUTOR_MODE = 'cli_tutor_mode'
const PINNING = 'pinning'
const PUBLISH = 'publish'
-const SHORTCUTS = 'shortcuts'
export {
NEW_FOLDER,
@@ -40,8 +38,7 @@ export {
BULK_CID_IMPORT,
CLI_TUTOR_MODE,
PINNING,
- PUBLISH,
- SHORTCUTS
+ PUBLISH
}
class Modals extends React.Component {
@@ -196,9 +193,6 @@ class Modals extends React.Component {
publish: { file }
})
}
- case SHORTCUTS:
- this.setState({ readyToShow: true })
- break
default:
// do nothing
}
@@ -311,12 +305,6 @@ class Modals extends React.Component {
onLeave={this.leave}
onSubmit={this.publish} />
-
-
-
-
)
}
diff --git a/src/files/modals/shortcut-modal/shortcut-modal.js b/src/files/modals/shortcut-modal/shortcut-modal.js
deleted file mode 100644
index 0caeab681..000000000
--- a/src/files/modals/shortcut-modal/shortcut-modal.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { useTranslation } from 'react-i18next'
-import { Modal } from '../../../components/modal/Modal.js'
-import CancelIcon from '../../../icons/GlyphSmallCancel.js'
-
-const keySymbols = {
- ArrowUp: '↑',
- ArrowDown: '↓',
- ArrowLeft: '←',
- ArrowRight: '→',
- Enter: '↵',
- Space: '␣',
- Escape: 'Esc',
- Delete: 'Del',
- Backspace: '⌫',
- mac: {
- Meta: '⌘',
- Alt: '⌥',
- Shift: '⇧',
- Control: '⌃',
- Ctrl: '⌃'
- },
- other: {
- Meta: 'Win',
- Alt: 'Alt',
- Shift: 'Shift',
- Control: 'Ctrl',
- Ctrl: 'Ctrl'
- }
-}
-
-const KeyboardKey = ({ children, platform }) => {
- const getKeySymbol = (key) => {
- if (keySymbols[key]) return keySymbols[key]
- if (platform === 'mac' && keySymbols.mac[key]) return keySymbols.mac[key]
- if (platform !== 'mac' && keySymbols.other[key]) return keySymbols.other[key]
- return key
- }
-
- return (
-
- {getKeySymbol(children)}
-
- )
-}
-
-KeyboardKey.propTypes = {
- children: PropTypes.node.isRequired,
- platform: PropTypes.string.isRequired
-}
-
-const ShortcutItem = ({ shortcut, description, platform }) => (
-
-
{description}
-
- {Array.isArray(shortcut)
- ? shortcut.map((key, i) => (
-
- {key}
- {i < shortcut.length - 1 && +}
- ))
- : {shortcut}}
-
-
-)
-
-ShortcutItem.propTypes = {
- shortcut: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.array
- ]).isRequired,
- description: PropTypes.string.isRequired,
- platform: PropTypes.string.isRequired
-}
-
-const ShortcutSection = ({ title, shortcuts, platform }) => (
-
-
{title}
-
- {shortcuts.map((shortcut, i) => (
-
- ))}
-
-
-)
-
-ShortcutSection.propTypes = {
- title: PropTypes.string.isRequired,
- shortcuts: PropTypes.array.isRequired,
- platform: PropTypes.string.isRequired
-}
-
-const ShortcutModal = ({ onLeave, className, ...props }) => {
- const [platform, setPlatform] = useState('other')
- const { t } = useTranslation('files')
-
- // Detect platform on component mount
- useEffect(() => {
- const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0 ||
- (navigator.userAgent.includes('Mac') && !navigator.userAgent.includes('Mobile'))
- setPlatform(isMac ? 'mac' : 'other')
- }, [])
-
- const navigationShortcuts = [
- { shortcut: 'ArrowDown', description: t('shortcutModal.moveDown') },
- { shortcut: 'ArrowUp', description: t('shortcutModal.moveUp') },
- { shortcut: 'ArrowLeft', description: t('shortcutModal.moveLeft') },
- { shortcut: 'ArrowRight', description: t('shortcutModal.moveRight') },
- { shortcut: 'Enter', description: t('shortcutModal.navigate') }
- ]
-
- const selectionShortcuts = [
- { shortcut: 'Space', description: t('shortcutModal.toggleSelection') },
- { shortcut: 'Escape', description: t('shortcutModal.deselectAll') }
- ]
-
- const actionShortcuts = [
- { shortcut: 'F2', description: t('shortcutModal.rename') },
- { shortcut: 'Delete', description: t('shortcutModal.delete') }
- ]
-
- const otherShortcuts = [
- { shortcut: ['Shift', '?'], description: t('shortcutModal.showShortcuts') }
- ]
-
- return (
-
-
-
{t('shortcutModal.title')}
-
-
-
-
-
- )
-}
-
-ShortcutModal.propTypes = {
- onLeave: PropTypes.func.isRequired,
- className: PropTypes.string
-}
-
-ShortcutModal.defaultProps = {
- className: ''
-}
-
-export default ShortcutModal
diff --git a/src/files/modals/shortcut-modal/shortcut-modal.tsx b/src/files/modals/shortcut-modal/shortcut-modal.tsx
new file mode 100644
index 000000000..b9e63debe
--- /dev/null
+++ b/src/files/modals/shortcut-modal/shortcut-modal.tsx
@@ -0,0 +1,191 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+// @ts-ignore
+import { Modal } from '../../../components/modal/Modal'
+import { useShortcuts } from '../../../contexts/ShortcutsContext'
+
+interface KeySymbols {
+ [key: string]: string | {
+ [key: string]: string
+ }
+ mac: {
+ [key: string]: string
+ }
+ other: {
+ [key: string]: string
+ }
+}
+
+const keySymbols: KeySymbols = {
+ ArrowUp: '↑',
+ ArrowDown: '↓',
+ ArrowLeft: '←',
+ ArrowRight: '→',
+ Enter: '↵',
+ Space: 'Space',
+ Escape: 'Esc',
+ Delete: 'Del',
+ Backspace: '⌫',
+ mac: {
+ Meta: '⌘',
+ Alt: '⌥',
+ Shift: 'Shift',
+ Control: 'Ctrl',
+ Ctrl: 'Ctrl'
+ },
+ other: {
+ Meta: 'Win',
+ Alt: 'Alt',
+ Shift: 'Shift',
+ Control: 'Ctrl',
+ Ctrl: 'Ctrl'
+ }
+}
+
+type PlatformType = 'mac' | 'other'
+
+interface KeyboardKeyProps {
+ children: string
+ platform: PlatformType
+}
+
+const KeyboardKey: React.FC
= ({ children, platform }) => {
+ const getKeySymbol = (key: string): string => {
+ if (keySymbols[key]) return keySymbols[key] as string
+ if (platform === 'mac' && keySymbols.mac[key]) return keySymbols.mac[key]
+ if (platform !== 'mac' && keySymbols.other[key]) return keySymbols.other[key]
+ return key
+ }
+
+ return (
+
+ {getKeySymbol(children)}
+
+ )
+}
+
+interface ShortcutItemProps {
+ shortcut: string | string[]
+ description: string
+ platform: PlatformType,
+ hidden?: boolean
+}
+
+const ShortcutItem: React.FC = ({ shortcut, description, platform }) => (
+
+
{description}
+
+ {Array.isArray(shortcut)
+ ? shortcut.map((key, i) => (
+
+ {key}
+ {i < shortcut.length - 1 && +}
+ ))
+ : {shortcut}}
+
+
+
{title}
+
+ {shortcuts.filter(shortcut => !shortcut.hidden).map((shortcut, i) => (
+
+ ))}
+
+
+
{t('shortcutModal.title')}
+
+
+
+
+ {sortedGroups.map(([group, shortcuts]) => (
+
+ ))}
+
+