From d684e4442cce2bf80bed96a090b2a577f829eebf Mon Sep 17 00:00:00 2001 From: ChenX Date: Tue, 8 Jun 2021 14:08:42 +0800 Subject: [PATCH] =?UTF-8?q?!1542=20=E4=BC=98=E5=8C=96:F1=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=E7=9A=84=E7=84=A6=E7=82=B9=E5=93=8D=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/UI/Components/CommandPanel/CmdPanel.tsx | 32 ++++++++++--------- .../Components/CommandPanel/CommandItem.tsx | 23 ++++--------- .../Components/CommandPanel/InputHotKeys.tsx | 5 ++- 3 files changed, 26 insertions(+), 34 deletions(-) diff --git a/src/UI/Components/CommandPanel/CmdPanel.tsx b/src/UI/Components/CommandPanel/CmdPanel.tsx index 8be229e81..bdd603e14 100644 --- a/src/UI/Components/CommandPanel/CmdPanel.tsx +++ b/src/UI/Components/CommandPanel/CmdPanel.tsx @@ -20,7 +20,7 @@ export class CommandPanel extends React.Component<{}, CommandPanelState> { private searchList: ICommand[] = CommandList; private searchRes: ICommand[] = CommandList;//用于展示的搜索结果 - private inputEl: HTMLInputElement; + private inputEl = React.createRef(); private ulRef: HTMLUListElement; private scrollCard: HTMLElement; @observable private regexp: RegExp = new RegExp('^.*$', "i"); @@ -69,10 +69,10 @@ export class CommandPanel extends React.Component<{}, CommandPanelState> const Focus = async () => { - for (let i = 0; i < 6; i++) + for (let i = 0; i < 4; i++) { - if (this.inputEl) - this.inputEl.focus(); + if (this.inputEl.current) + this.inputEl.current.focus(); await Sleep(100); } }; @@ -86,6 +86,7 @@ export class CommandPanel extends React.Component<{}, CommandPanelState> if (elc) this.scrollCard.scrollTop = elc.offsetTop - 59;//59是该节点到顶部的距离 await cserver.SetLastScrollTop(this.scrollCard.scrollTop); + this.inputEl.current.focus(); }; componentWillUnmount() { @@ -100,23 +101,22 @@ export class CommandPanel extends React.Component<{}, CommandPanelState>
e.stopPropagation()} + onKeyDown={e => + { + if (e.key === KeyCode.F1) + e.preventDefault(); + else if (e.key === KeyCode.Escape) + app.Editor.ModalManage.Destory(); + e.stopPropagation(); + }} >
this.inputEl = el} + ref={this.inputEl} className="bp3-input" placeholder=">搜索命令..." type="search" - onKeyDown={(e) => - { - if (e.key === KeyCode.F1) - e.preventDefault(); - else if (e.key === KeyCode.Escape) - app.Editor.ModalManage.Destory(); - e.stopPropagation(); - }} onChange={v => { this.searchString = v.currentTarget.value.trim(); @@ -216,7 +216,7 @@ export class CommandPanel extends React.Component<{}, CommandPanelState> this.id = lastVisId; let activeId = document.activeElement.getAttribute("data-tab-id"); if (activeId && document.activeElement instanceof HTMLElement && activeId !== lastVisId) - this.inputEl.focus(); + this.inputEl.current.focus(); } await cserver.SetLastScrollTop(this.scrollCard.scrollTop); }} @@ -247,12 +247,14 @@ export class CommandPanel extends React.Component<{}, CommandPanelState> ; } return ; } ) diff --git a/src/UI/Components/CommandPanel/CommandItem.tsx b/src/UI/Components/CommandPanel/CommandItem.tsx index 6d1f1255b..cdb5a5848 100644 --- a/src/UI/Components/CommandPanel/CommandItem.tsx +++ b/src/UI/Components/CommandPanel/CommandItem.tsx @@ -22,6 +22,7 @@ enum TipType export interface CommandItemProps { commandData: ICommand; + parentInput: React.RefObject; } /** @@ -33,7 +34,6 @@ export interface CommandItemProps export class CommandItem extends React.Component{ @observable private flag: TipType = TipType.OK; private m_InputEl: HTMLInputElement; - private m_commandItemEl: HTMLLIElement; @observable private isCNInput: boolean = false; private isReset = false; constructor(props) @@ -47,20 +47,16 @@ export class CommandItem extends React.Component{ if (e.keyCode === KeyBoard.Escape) { this.flag = TipType.InputNull; - this.m_InputEl.blur(); + this.props.parentInput.current?.focus(); + } else if (e.keyCode === KeyBoard.Enter || e.keyCode === KeyBoard.Space) { - this.m_InputEl.blur(); + this.props.parentInput.current?.focus(); e.preventDefault(); } e.stopPropagation(); }; - this.m_InputEl.addEventListener('blur', () => - { - if (this.m_commandItemEl) - this.m_commandItemEl.parentElement.focus(); - }); } handleLiClick = () => { @@ -109,7 +105,6 @@ export class CommandItem extends React.Component{ handleOnBlur = () => { let target = this.m_InputEl; - let cserver = CommandServer.GetInstance() as CommandServer; const commandData = this.props.commandData; @@ -141,8 +136,8 @@ export class CommandItem extends React.Component{ else { target.value = commandData.customizeed || commandData.defaultCustom; + this.flag = TipType.OK; } - this.flag = TipType.OK; }; render() @@ -164,7 +159,6 @@ export class CommandItem extends React.Component{ return (
  • this.m_commandItemEl = el} >
  • {store.commandData.icon ? : <>}
  • {store.commandData.chName}
    • @@ -195,10 +189,7 @@ export class CommandItem extends React.Component{ this.isCNInput = false; this.handleOnChange(); }} - onFocus={e => - { - e.target.setSelectionRange(0, e.target.value.length); - }} + onFocus={e => e.target.select()} onClick={(e) => e.stopPropagation()} onChange={this.handleOnChange} onBlur={this.handleOnBlur} @@ -223,7 +214,7 @@ export class CommandItem extends React.Component{ if (e.keyCode === KeyBoard.Escape) { (e.currentTarget.lastElementChild.firstElementChild as HTMLButtonElement).click(); - this.m_commandItemEl.parentElement.focus(); + this.props.parentInput.current?.focus(); } else if (e.keyCode === KeyBoard.Enter) diff --git a/src/UI/Components/CommandPanel/InputHotKeys.tsx b/src/UI/Components/CommandPanel/InputHotKeys.tsx index 8bbcbc109..3dbe546cd 100644 --- a/src/UI/Components/CommandPanel/InputHotKeys.tsx +++ b/src/UI/Components/CommandPanel/InputHotKeys.tsx @@ -116,8 +116,6 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; }, } commandData.hotkeysCustomize = this.str; cserver.AddCustonCommand(commandData); - console.log(cserver); - } } else @@ -167,7 +165,8 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; }, if (e.keyCode === KeyBoard.Escape) { this.str = this.props.store.commandData.hotkeysCustomize || this.props.store.commandData.defaultHotkeys || ""; - this._InputElKey.current.blur(); + this.props.store.parentInput.current.focus(); + e.stopPropagation(); return; } if (this.keys.indexOf(e.key) !== -1) return;