Skip to content

Commit 72d9a11

Browse files
authored
Upgrade react-hotkeys (streamlit#2525)
1 parent f6c0f23 commit 72d9a11

File tree

6 files changed

+21
-52
lines changed

6 files changed

+21
-52
lines changed

frontend/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
"react-dropzone": "^11.2.0",
8181
"react-feather": "^2.0.8",
8282
"react-google-login": "^5.1.21",
83-
"react-hotkeys": "^1.1.4",
83+
"react-hotkeys": "^2.0.0",
8484
"react-json-view": "^1.19.1",
8585
"react-katex": "^2.0.2",
8686
"react-map-gl": "^5.2.7",

frontend/src/App.tsx

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
import React, { Fragment, PureComponent, ReactNode } from "react"
1919
import moment from "moment"
20-
import { HotKeys, KeyMap } from "react-hotkeys"
20+
import { GlobalHotKeys, KeyMap } from "react-hotkeys"
2121
import { fromJS } from "immutable"
2222
import classNames from "classnames"
2323
// Other local imports.
@@ -922,10 +922,6 @@ export class App extends PureComponent<Props, State> {
922922
})
923923
: null
924924

925-
// Attach and focused props provide a way to handle Global Hot Keys
926-
// https://github.com/greena13/react-hotkeys/issues/41
927-
// attach: DOM element the keyboard listeners should attach to
928-
// focused: A way to force focus behaviour
929925
return (
930926
<PageLayoutContext.Provider
931927
value={{
@@ -937,12 +933,7 @@ export class App extends PureComponent<Props, State> {
937933
setFullScreen: this.handleFullScreen,
938934
}}
939935
>
940-
<HotKeys
941-
keyMap={this.keyMap}
942-
handlers={this.keyHandlers}
943-
attach={window}
944-
focused={true}
945-
>
936+
<GlobalHotKeys keyMap={this.keyMap} handlers={this.keyHandlers}>
946937
<StyledApp className={outerDivClass}>
947938
{/* The tabindex below is required for testing. */}
948939
<Header>
@@ -985,7 +976,7 @@ export class App extends PureComponent<Props, State> {
985976
/>
986977
{renderedDialog}
987978
</StyledApp>
988-
</HotKeys>
979+
</GlobalHotKeys>
989980
</PageLayoutContext.Provider>
990981
)
991982
}

frontend/src/components/core/StatusWidget/StatusWidget.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { EmotionIcon } from "@emotion-icons/emotion-icon"
1818
import { Ellipses, Info, Warning } from "@emotion-icons/open-iconic"
1919
import { RERUN_PROMPT_MODAL_DIALOG } from "lib/baseconsts"
2020
import React, { PureComponent, ReactNode } from "react"
21-
import { HotKeys } from "react-hotkeys"
21+
import { GlobalHotKeys } from "react-hotkeys"
2222
import { CSSTransition } from "react-transition-group"
2323
import Button, { Kind, Size } from "components/shared/Button"
2424
import Tooltip, { Placement } from "components/shared/Tooltip"
@@ -343,10 +343,8 @@ class StatusWidget extends PureComponent<StatusWidgetProps, State> {
343343
this.props.reportRunState === ReportRunState.RERUN_REQUESTED
344344
const minimized = this.state.promptMinimized && !this.state.promptHovered
345345

346-
// Not sure exactly why attach and focused are necessary on the
347-
// HotKeys component here but its not working without them
348346
return (
349-
<HotKeys handlers={this.keyHandlers} attach={window} focused={true}>
347+
<GlobalHotKeys handlers={this.keyHandlers}>
350348
<div
351349
onMouseEnter={this.onReportPromptHover}
352350
onMouseLeave={this.onReportPromptUnhover}
@@ -373,7 +371,7 @@ class StatusWidget extends PureComponent<StatusWidgetProps, State> {
373371
)}
374372
</StyledReportStatus>
375373
</div>
376-
</HotKeys>
374+
</GlobalHotKeys>
377375
)
378376
}
379377

frontend/src/components/core/StreamlitDialog/ScriptChangedDialog.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
*/
1717

1818
import React, { PureComponent, ReactNode } from "react"
19-
import { HotKeys } from "react-hotkeys"
19+
import { GlobalHotKeys } from "react-hotkeys"
2020
import Modal, {
2121
ModalHeader,
2222
ModalBody,
@@ -55,10 +55,8 @@ export class ScriptChangedDialog extends PureComponent<Props> {
5555
}
5656

5757
public render(): ReactNode {
58-
// Not sure exactly why attach and focused are necessary on the
59-
// HotKeys component here but its not working without them
6058
return (
61-
<HotKeys handlers={this.keyHandlers} attach={window} focused={true}>
59+
<GlobalHotKeys handlers={this.keyHandlers}>
6260
<Modal isOpen onClose={this.props.onClose}>
6361
<ModalHeader>App changed</ModalHeader>
6462
<ModalBody>
@@ -75,7 +73,7 @@ export class ScriptChangedDialog extends PureComponent<Props> {
7573
</ModalButton>
7674
</ModalFooter>
7775
</Modal>
78-
</HotKeys>
76+
</GlobalHotKeys>
7977
)
8078
}
8179

frontend/src/components/core/StreamlitDialog/StreamlitDialog.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import Modal, {
2525
ModalFooter,
2626
ModalButton,
2727
} from "components/shared/Modal"
28-
import { HotKeys } from "react-hotkeys"
28+
import { GlobalHotKeys } from "react-hotkeys"
2929

3030
import {
3131
ScriptChangedDialog,
@@ -156,10 +156,8 @@ function clearCacheDialog(props: ClearCacheProps): ReactElement {
156156
enter: () => props.defaultAction(),
157157
}
158158

159-
// Not sure exactly why attach is necessary on the HotKeys
160-
// component here but it's not working without it
161159
return (
162-
<HotKeys handlers={keyHandlers} attach={window}>
160+
<GlobalHotKeys handlers={keyHandlers}>
163161
<Modal isOpen onClose={props.onClose}>
164162
<ModalHeader>Clear Cache</ModalHeader>
165163
<ModalBody>
@@ -177,7 +175,7 @@ function clearCacheDialog(props: ClearCacheProps): ReactElement {
177175
</ModalButton>
178176
</ModalFooter>
179177
</Modal>
180-
</HotKeys>
178+
</GlobalHotKeys>
181179
)
182180
}
183181

@@ -208,10 +206,8 @@ function rerunScriptDialog(props: RerunScriptProps): ReactElement {
208206
enter: () => props.defaultAction(),
209207
}
210208

211-
// Not sure exactly why attach is necessary on the HotKeys
212-
// component here but it's not working without it
213209
return (
214-
<HotKeys handlers={keyHandlers} attach={window}>
210+
<GlobalHotKeys handlers={keyHandlers}>
215211
<Modal isOpen onClose={props.onClose}>
216212
<ModalBody>
217213
<StyledRerunHeader>Command line:</StyledRerunHeader>
@@ -236,7 +232,7 @@ function rerunScriptDialog(props: RerunScriptProps): ReactElement {
236232
</ModalButton>
237233
</ModalFooter>
238234
</Modal>
239-
</HotKeys>
235+
</GlobalHotKeys>
240236
)
241237
}
242238

frontend/yarn.lock

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11558,11 +11558,6 @@ lodash.flow@^3.3.0:
1155811558
resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
1155911559
integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
1156011560

11561-
lodash.isboolean@^3.0.3:
11562-
version "3.0.3"
11563-
resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
11564-
integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
11565-
1156611561
lodash.isempty@^4.4.0:
1156711562
version "4.4.0"
1156811563
resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
@@ -12358,11 +12353,6 @@ mouse-wheel@^1.2.0:
1235812353
signum "^1.0.0"
1235912354
to-px "^1.0.1"
1236012355

12361-
mousetrap@^1.5.2:
12362-
version "1.6.5"
12363-
resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
12364-
integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
12365-
1236612356
move-concurrently@^1.0.1:
1236712357
version "1.0.1"
1236812358
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -14565,7 +14555,7 @@ prop-types-extra@^1.1.0:
1456514555
react-is "^16.3.2"
1456614556
warning "^4.0.0"
1456714557

14568-
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
14558+
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
1456914559
version "15.7.2"
1457014560
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
1457114561
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -14978,16 +14968,12 @@ react-google-login@^5.1.21:
1497814968
"@types/react" "*"
1497914969
prop-types "^15.6.0"
1498014970

14981-
react-hotkeys@^1.1.4:
14982-
version "1.1.4"
14983-
resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-1.1.4.tgz#a0712aa2e0c03a759fd7885808598497a4dace72"
14984-
integrity sha1-oHEqouDAOnWf14hYCFmEl6TaznI=
14971+
react-hotkeys@^2.0.0:
14972+
version "2.0.0"
14973+
resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
14974+
integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==
1498514975
dependencies:
14986-
lodash.isboolean "^3.0.3"
14987-
lodash.isequal "^4.5.0"
14988-
lodash.isobject "^3.0.2"
14989-
mousetrap "^1.5.2"
14990-
prop-types "^15.6.0"
14976+
prop-types "^15.6.1"
1499114977

1499214978
react-input-mask@^2.0.4:
1499314979
version "2.0.4"

0 commit comments

Comments
 (0)