Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!1542 优化:F1面板的焦点响应

Browse Source
pull/1542/MERGE
ChenX 3 years ago
parent 3a38e5e648
commit d684e4442c
3 changed files with 26 additions and 34 deletions
Show Stats Download Patch File Download Diff File

32
src/UI/Components/CommandPanel/CmdPanel.tsx
Unescape View File

@ -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<HTMLInputElement>();
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>
<div
className="bp3-dialog-container"
id="commandPanel"
onKeyDown={e => e.stopPropagation()}
onKeyDown={e =>
{
if (e.key === KeyCode.F1)
e.preventDefault();
else if (e.key === KeyCode.Escape)
app.Editor.ModalManage.Destory();
e.stopPropagation();
}}
>
<div className="bp3-dialog">
<div>
<input
ref={el => 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>
<CommandItem
key={command.command}
commandData={command}
parentInput={this.inputEl}
/>
</>;
}
return <CommandItem
key={command.command}
commandData={command}
parentInput={this.inputEl}
/>;
}
)

23
src/UI/Components/CommandPanel/CommandItem.tsx
Unescape View File

@ -22,6 +22,7 @@ enum TipType
export interface CommandItemProps
{
commandData: ICommand;
parentInput: React.RefObject<HTMLInputElement>;
}
/**
@ -33,7 +34,6 @@ export interface CommandItemProps
export class CommandItem extends React.Component<CommandItemProps, {}>{
@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<CommandItemProps, {}>{
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<CommandItemProps, {}>{
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<CommandItemProps, {}>{
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<CommandItemProps, {}>{
return (
<li
onClick={this.handleLiClick}
ref={el => this.m_commandItemEl = el}
>
<li>{store.commandData.icon ? <img src={`${ICON_CDN}/${store.commandData.icon}`} /> : <></>}</li>
<li>{store.commandData.chName}</li>
@ -195,10 +189,7 @@ export class CommandItem extends React.Component<CommandItemProps, {}>{
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<CommandItemProps, {}>{
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)

5
src/UI/Components/CommandPanel/InputHotKeys.tsx
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save