|
|
|
@ -1,7 +1,6 @@
|
|
|
|
|
import './InputHint.css';
|
|
|
|
|
|
|
|
|
|
import * as React from 'react';
|
|
|
|
|
import { DOMElement, ReactElement } from 'react';
|
|
|
|
|
import { observer, inject } from 'mobx-react';
|
|
|
|
|
import { CommandStore } from '../../Store/CommandStore';
|
|
|
|
|
|
|
|
|
@ -13,15 +12,12 @@ interface ITodoItemState
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@observer
|
|
|
|
|
export class InputHint extends React.Component<{ commandStore?: CommandStore, isDrag: boolean }, ITodoItemState>
|
|
|
|
|
export class InputHint extends React.Component<{ commandStore?: CommandStore }, ITodoItemState>
|
|
|
|
|
{
|
|
|
|
|
private m_recommendUl: HTMLUListElement;//关联命令列表
|
|
|
|
|
private m_historyUl: HTMLUListElement;//历史命令列表
|
|
|
|
|
private m_liHover: Element; // 当前hover的 li
|
|
|
|
|
private m_box: HTMLElement;//移动命令框区
|
|
|
|
|
public state: ITodoItemState;
|
|
|
|
|
private m_i: number = 0; //选择历史命令索引
|
|
|
|
|
|
|
|
|
|
constructor(props)
|
|
|
|
|
{
|
|
|
|
|
super(props);
|
|
|
|
@ -35,20 +31,19 @@ export class InputHint extends React.Component<{ commandStore?: CommandStore, is
|
|
|
|
|
public handleOnChange = (e: React.FormEvent<HTMLInputElement>) =>
|
|
|
|
|
{
|
|
|
|
|
const store = this.props.commandStore;
|
|
|
|
|
|
|
|
|
|
// 输入的命令
|
|
|
|
|
let m_inputValue = e.currentTarget.value;
|
|
|
|
|
this.setState({ command: m_inputValue });
|
|
|
|
|
|
|
|
|
|
if (!m_inputValue)
|
|
|
|
|
if (m_inputValue.trim() == '')
|
|
|
|
|
{
|
|
|
|
|
store.searchCommand.splice(0, store.searchCommand.length);
|
|
|
|
|
store.searchCommand.length = 0;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 动态生成正则表达式
|
|
|
|
|
let m_searchReg: RegExp = new RegExp('');
|
|
|
|
|
// 拼接动态正则表达式
|
|
|
|
|
let m_comTmp: string = '^' + m_inputValue.toUpperCase().split('').join('\\w*') + '\\w*$';
|
|
|
|
|
let m_comTmp: string = '^' + m_inputValue.trim().toUpperCase().split('').join('\\w*') + '\\w*$';
|
|
|
|
|
m_searchReg = new RegExp(m_comTmp, 'i');
|
|
|
|
|
|
|
|
|
|
//如果没有确认执行命令,将显示推荐索引的命令
|
|
|
|
@ -88,7 +83,6 @@ export class InputHint extends React.Component<{ commandStore?: CommandStore, is
|
|
|
|
|
|
|
|
|
|
store.Prompt(e.currentTarget.innerHTML);
|
|
|
|
|
store.execCommand(e.currentTarget.innerHTML);
|
|
|
|
|
// store.searchCommand.splice(0, store.searchCommand.length);
|
|
|
|
|
store.searchCommand.length = 0;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
@ -97,15 +91,11 @@ export class InputHint extends React.Component<{ commandStore?: CommandStore, is
|
|
|
|
|
{
|
|
|
|
|
let m_li: HTMLCollection = this.m_recommendUl.children;;
|
|
|
|
|
this.m_liHover = this.m_recommendUl.querySelector('.hover');
|
|
|
|
|
const { searchCommand, commandHint, historyCommands, CommandList, viceCommand } = this.props.commandStore;
|
|
|
|
|
let { searchCommand, commandHint, historyCommands, CommandList, viceCommand } = this.props.commandStore;
|
|
|
|
|
|
|
|
|
|
//↑-38 ,↓-40 esc-27
|
|
|
|
|
if (e.keyCode === 27) //按esc键,清空所有命令
|
|
|
|
|
{
|
|
|
|
|
searchCommand.splice(0, searchCommand.length);
|
|
|
|
|
|
|
|
|
|
viceCommand.splice(0, viceCommand.length);
|
|
|
|
|
|
|
|
|
|
this.setState(
|
|
|
|
|
{
|
|
|
|
|
command: '',
|
|
|
|
@ -158,14 +148,6 @@ export class InputHint extends React.Component<{ commandStore?: CommandStore, is
|
|
|
|
|
{
|
|
|
|
|
selectCommand('down');
|
|
|
|
|
}
|
|
|
|
|
if (e.keyCode === 13 || e.keyCode === 32)
|
|
|
|
|
{
|
|
|
|
|
if (!commandHint)
|
|
|
|
|
{
|
|
|
|
|
searchCommand.splice(0, searchCommand.length);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if (!commandHint) //否则如果没有执行命令
|
|
|
|
|
{
|
|
|
|
@ -188,39 +170,6 @@ export class InputHint extends React.Component<{ commandStore?: CommandStore, is
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//确认选中命令
|
|
|
|
|
if (e.keyCode === 13 || e.keyCode === 32)
|
|
|
|
|
{
|
|
|
|
|
//如果没有确认执行命令,运行当前输入的命令,并将命令添加到历史
|
|
|
|
|
if (!commandHint)
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
if (this.state.command && CommandList.indexOf(this.state.command.trim()) !== -1)
|
|
|
|
|
{
|
|
|
|
|
searchCommand.splice(0, searchCommand.length);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
//TODO:输入命令有误
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else // 已经有首条命令了,直接执行后续命名
|
|
|
|
|
{
|
|
|
|
|
//TODO:发送输入命令
|
|
|
|
|
|
|
|
|
|
if (this.state.command === 'U')
|
|
|
|
|
{
|
|
|
|
|
viceCommand.splice(0, viceCommand.length);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
viceCommand.push({ title: '放弃', keyboard: 'U' })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 点击确认命令
|
|
|
|
|
public handleClick = (e: React.MouseEvent<HTMLElement>) =>
|
|
|
|
@ -229,7 +178,7 @@ export class InputHint extends React.Component<{ commandStore?: CommandStore, is
|
|
|
|
|
let m_key = e.currentTarget.firstElementChild.innerHTML.slice(1, 2);
|
|
|
|
|
if (m_key === 'U')
|
|
|
|
|
{
|
|
|
|
|
viceCommand.splice(0, viceCommand.length);
|
|
|
|
|
viceCommand.length = 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//鼠标选择命令
|
|
|
|
@ -243,22 +192,6 @@ export class InputHint extends React.Component<{ commandStore?: CommandStore, is
|
|
|
|
|
}
|
|
|
|
|
(e.target as HTMLElement).className = 'hover';
|
|
|
|
|
}
|
|
|
|
|
//获取元素到屏幕的距离
|
|
|
|
|
public handleGetElHeight = (el: HTMLElement) =>
|
|
|
|
|
{
|
|
|
|
|
let m_actualTop: number = el.offsetTop; //元素离顶部高度
|
|
|
|
|
let m_current = el.offsetParent;
|
|
|
|
|
|
|
|
|
|
while (m_current !== null)
|
|
|
|
|
{
|
|
|
|
|
m_actualTop += (m_current as HTMLElement).offsetTop;
|
|
|
|
|
m_current = (m_current as HTMLElement).offsetParent;
|
|
|
|
|
}
|
|
|
|
|
let m_actualBottom: number = window.innerHeight - m_actualTop - el.clientHeight;//元素离底部高度
|
|
|
|
|
|
|
|
|
|
let m_outPutDes = { m_actualTop, m_actualBottom };//输出距离对象
|
|
|
|
|
return m_outPutDes;
|
|
|
|
|
}
|
|
|
|
|
componentDidMount()
|
|
|
|
|
{
|
|
|
|
|
document.body.addEventListener('keydown', this.handleSelectCommand);
|
|
|
|
@ -326,7 +259,6 @@ export class InputHint extends React.Component<{ commandStore?: CommandStore, is
|
|
|
|
|
<ul
|
|
|
|
|
className="history-command"
|
|
|
|
|
style={this.state.isShow}
|
|
|
|
|
ref={ul => { this.m_historyUl = ul }}
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|