From 8c508c517f4c6d60036333e64516db13eaa79565 Mon Sep 17 00:00:00 2001 From: hexxa Date: Thu, 10 Mar 2022 16:20:38 +0800 Subject: [PATCH] fix(fe): hotkeys should not be enabled when component is not active --- src/client/web/src/common/hotkeys.ts | 3 +++ .../components/__test__/pane_login.test.tsx | 3 ++- .../components/__test__/panel_files.test.tsx | 3 ++- src/client/web/src/components/layers.tsx | 26 ++++++++++--------- src/client/web/src/components/pane_login.tsx | 11 ++++++-- src/client/web/src/components/panel_files.tsx | 24 ++++++++++++++--- src/client/web/src/components/root_frame.tsx | 3 ++- 7 files changed, 52 insertions(+), 21 deletions(-) diff --git a/src/client/web/src/common/hotkeys.ts b/src/client/web/src/common/hotkeys.ts index 20a39a5..579d2f0 100644 --- a/src/client/web/src/common/hotkeys.ts +++ b/src/client/web/src/common/hotkeys.ts @@ -37,6 +37,9 @@ export class HotkeyHandler { }; handle = (ev: KeyboardEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + const hotKey = { key: ev.key, ctrl: ev.ctrlKey, diff --git a/src/client/web/src/components/__test__/pane_login.test.tsx b/src/client/web/src/components/__test__/pane_login.test.tsx index 5cde0af..0142e2d 100644 --- a/src/client/web/src/components/__test__/pane_login.test.tsx +++ b/src/client/web/src/components/__test__/pane_login.test.tsx @@ -35,7 +35,8 @@ describe("Login", () => { login: coreState.login, msg: coreState.msg, ui: coreState.ui, - update: (updater: (prevState: ICoreState) => ICoreState) => {}, + enabled: true, + update: (updater: (prevState: ICoreState) => ICoreState) => { }, }); const usersCl = NewMockUsersClient(""); diff --git a/src/client/web/src/components/__test__/panel_files.test.tsx b/src/client/web/src/components/__test__/panel_files.test.tsx index edb96b0..b830c52 100644 --- a/src/client/web/src/components/__test__/panel_files.test.tsx +++ b/src/client/web/src/components/__test__/panel_files.test.tsx @@ -33,7 +33,8 @@ describe("FilesPanel", () => { msg: coreState.msg, login: coreState.login, ui: coreState.ui, - update: (updater: (prevState: ICoreState) => ICoreState) => {}, + enabled: true, + update: (updater: (prevState: ICoreState) => ICoreState) => { }, }); return { diff --git a/src/client/web/src/components/layers.tsx b/src/client/web/src/components/layers.tsx index 7dafc53..e62a141 100644 --- a/src/client/web/src/components/layers.tsx +++ b/src/client/web/src/components/layers.tsx @@ -30,7 +30,7 @@ export interface Props { update?: (updater: (prevState: ICoreState) => ICoreState) => void; } -export interface State {} +export interface State { } export class Layers extends React.Component { private hotkeyHandler: HotkeyHandler; constructor(p: Props) { @@ -39,11 +39,7 @@ export class Layers extends React.Component { componentDidMount(): void { this.hotkeyHandler = new HotkeyHandler(); - - const closeHandler = () => { - this.setControlOption(settingsDialogCtrl, ctrlOff); - }; - this.hotkeyHandler.add({ key: "Escape" }, closeHandler); + this.hotkeyHandler.add({ key: "Escape" }, this.closeHandler); document.addEventListener("keyup", this.hotkeyHandler.handle); } @@ -52,18 +48,23 @@ export class Layers extends React.Component { document.removeEventListener("keyup", this.hotkeyHandler.handle); } + closeHandler = () => { + if (this.props.ui.control.controls.get(settingsDialogCtrl) === ctrlOn) { + this.setControlOption(settingsDialogCtrl, ctrlOff); + } + }; + setControlOption = (targetControl: string, option: string) => { updater().setControlOption(targetControl, option); this.props.update(updater().updateUI); }; render() { - const showLogin = - this.props.login.authed || + const hideLogin = this.props.login.authed || (this.props.ui.control.controls.get(sharingCtrl) === ctrlOn && - this.props.filesInfo.isSharing) - ? "hidden" - : ""; + this.props.filesInfo.isSharing); + const loginPaneClass = hideLogin ? "hidden" : ""; + const showSettings = this.props.ui.control.controls.get(settingsDialogCtrl) === ctrlOn ? "" @@ -79,13 +80,14 @@ export class Layers extends React.Component { -
+
diff --git a/src/client/web/src/components/pane_login.tsx b/src/client/web/src/components/pane_login.tsx index 729a2ba..84445bb 100644 --- a/src/client/web/src/components/pane_login.tsx +++ b/src/client/web/src/components/pane_login.tsx @@ -28,6 +28,7 @@ export interface Props { login: LoginProps; msg: MsgProps; ui: UIProps; + enabled: boolean; update?: (updater: (prevState: ICoreState) => ICoreState) => void; } @@ -57,11 +58,17 @@ export class AuthPane extends React.Component { this.hotkeyHandler = new HotkeyHandler(); this.hotkeyHandler.add({ key: "Enter" }, this.login); - document.addEventListener("keyup", this.hotkeyHandler.handle); + document.addEventListener("keyup", this.handleHotKey); } componentWillUnmount() { - document.removeEventListener("keyup", this.hotkeyHandler.handle); + document.removeEventListener("keyup", this.handleHotKey); + } + + handleHotKey = (ev: KeyboardEvent) => { + if (this.props.enabled) { + this.hotkeyHandler.handle(ev); + } } changeUser = (ev: React.ChangeEvent) => { diff --git a/src/client/web/src/components/panel_files.tsx b/src/client/web/src/components/panel_files.tsx index a16c0fd..c92858a 100644 --- a/src/client/web/src/components/panel_files.tsx +++ b/src/client/web/src/components/panel_files.tsx @@ -61,6 +61,7 @@ export interface Props { msg: MsgProps; login: LoginProps; ui: UIProps; + enabled: boolean; update?: (updater: (prevState: ICoreState) => ICoreState) => void; } @@ -100,6 +101,10 @@ export class FilesPanel extends React.Component { this.uploadInput = ReactDOM.findDOMNode(input); }; this.onClickUpload = () => { + if (!this.props.enabled) { + return; + } + const uploadInput = this.uploadInput as HTMLButtonElement; uploadInput.click(); }; @@ -227,6 +232,10 @@ export class FilesPanel extends React.Component { }; delete = async () => { + if (!this.props.enabled) { + return; + } + // TODO: selected should be cleaned after change the cwd if (this.props.filesInfo.dirPath.join("/") !== this.state.selectedSrc) { alertMsg(this.props.msg.pkg.get("browser.del.fail")); @@ -239,8 +248,7 @@ export class FilesPanel extends React.Component { const filesToDel = this.state.selectedItems.keySeq().join(", "); if ( !confirmMsg( - `${this.props.msg.pkg.get("op.confirm")} [${ - this.state.selectedItems.size + `${this.props.msg.pkg.get("op.confirm")} [${this.state.selectedItems.size }]: ${filesToDel}` ) ) { @@ -284,6 +292,10 @@ export class FilesPanel extends React.Component { }; moveHere = async () => { + if (!this.props.enabled) { + return; + } + const oldDir = this.state.selectedSrc; const newDir = this.props.filesInfo.dirPath.join("/"); if (oldDir === newDir) { @@ -377,6 +389,10 @@ export class FilesPanel extends React.Component { }; selectAll = () => { + if (!this.props.enabled) { + return; + } + let newSelected = Map(); const someSelected = this.state.selectedItems.size === 0 ? true : false; if (someSelected) { @@ -901,7 +917,7 @@ export class FilesPanel extends React.Component { Math.trunc( parseInt(this.props.login.extInfo.usedSpace, 10) / (1024 * 1024) ) * - (1024 * 1024), + (1024 * 1024), { round: 0, } @@ -911,7 +927,7 @@ export class FilesPanel extends React.Component { Math.trunc( parseInt(this.props.login.quota.spaceLimit, 10) / (1024 * 1024) ) * - (1024 * 1024), + (1024 * 1024), { round: 0, } diff --git a/src/client/web/src/components/root_frame.tsx b/src/client/web/src/components/root_frame.tsx index feb698a..a2dbbc8 100644 --- a/src/client/web/src/components/root_frame.tsx +++ b/src/client/web/src/components/root_frame.tsx @@ -25,7 +25,7 @@ export interface Props { update?: (updater: (prevState: ICoreState) => ICoreState) => void; } -export interface State {} +export interface State { } export class RootFrame extends React.Component { constructor(p: Props) { super(p); @@ -114,6 +114,7 @@ export class RootFrame extends React.Component { msg={this.props.msg} login={this.props.login} ui={this.props.ui} + enabled={displaying === "filesPanel"} update={this.props.update} />