mirror of https://gitee.com/cf-fz/WebCAD.git
parent
a61be4cc9d
commit
5796b2f853
@ -0,0 +1,19 @@
|
|||||||
|
#hint-block {
|
||||||
|
position: fixed;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint-block input {
|
||||||
|
background: #fff;
|
||||||
|
width: 4rem;
|
||||||
|
height: 2rem;
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint-block label {
|
||||||
|
display: inline-block;
|
||||||
|
background: #999999;
|
||||||
|
color: #000;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import './HintBlock.css';
|
||||||
|
|
||||||
|
export interface HintBlockProps
|
||||||
|
{
|
||||||
|
title: string; //标题
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HintBlockState
|
||||||
|
{
|
||||||
|
pos: React.CSSProperties; //提示块位置
|
||||||
|
isShow: React.CSSProperties;
|
||||||
|
inputValue: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class HintBlock extends React.Component<HintBlockProps, HintBlockState>
|
||||||
|
{
|
||||||
|
public state: HintBlockState;
|
||||||
|
private m_y: number;
|
||||||
|
constructor(props: HintBlockProps)
|
||||||
|
{
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state =
|
||||||
|
{
|
||||||
|
isShow: {},
|
||||||
|
pos: { display: 'none', left: 0, top: 0 },
|
||||||
|
inputValue: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
public handleshowBlock()
|
||||||
|
{
|
||||||
|
let moveBlock = (e: MouseEvent) =>
|
||||||
|
{
|
||||||
|
let m_inputData = (this.refs.inputData as HTMLInputElement)
|
||||||
|
this.setState({ pos: { display: 'block', left: e.clientX + 20 + 'px', top: e.clientY + 20 + 'px' } });
|
||||||
|
m_inputData.value = e.clientX + '';
|
||||||
|
this.m_y = window.innerHeight - e.clientY - 24;
|
||||||
|
m_inputData.focus();
|
||||||
|
m_inputData.setSelectionRange(0, (e.clientX + '').length);
|
||||||
|
}
|
||||||
|
document.addEventListener('click', (e: MouseEvent) =>
|
||||||
|
{
|
||||||
|
|
||||||
|
if (this.state.pos.display === 'none')
|
||||||
|
{
|
||||||
|
document.addEventListener('mousemove', moveBlock)
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.setState({ pos: { display: 'none' } });
|
||||||
|
document.removeEventListener('mousemove', moveBlock);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
componentDidMount()
|
||||||
|
{
|
||||||
|
this.handleshowBlock();
|
||||||
|
|
||||||
|
}
|
||||||
|
componentWillUnmount()
|
||||||
|
{
|
||||||
|
//TODO: 此处应该写入销毁的注入事件.
|
||||||
|
}
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div id="hint-block" style={this.state.pos}>
|
||||||
|
<label>{this.props.title}</label>
|
||||||
|
<input type="text" autoFocus ref='inputData' />
|
||||||
|
<label>{this.m_y}</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
/*
|
||||||
|
* @Author: Zoe
|
||||||
|
* @Date: 2017-12-01 10:25:21
|
||||||
|
* @Last Modified by: Zoe
|
||||||
|
* @Last Modified time: 2017-12-01 17:31:41
|
||||||
|
* 命令框样式
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 10px;
|
||||||
|
background: #212830;
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 提示命令 */
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vice-hint {
|
||||||
|
background: #D2D2D2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vice-hint>span {
|
||||||
|
color: blue
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 命令输入框 */
|
||||||
|
|
||||||
|
#input-hint input {
|
||||||
|
border: none;
|
||||||
|
outline: medium;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .input,
|
||||||
|
#input-hint .set {
|
||||||
|
display: inline-block;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
/* border: 1px solid #000000; */
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .input {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .input a {
|
||||||
|
border: 1px solid #C8E8F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .set {
|
||||||
|
width: 2%;
|
||||||
|
color: #fff;
|
||||||
|
background: #484A4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .input a:hover {
|
||||||
|
background: #C8E8F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint ul {
|
||||||
|
position: absolute;
|
||||||
|
left: -1rem;
|
||||||
|
list-style: none;
|
||||||
|
width: 10rem;
|
||||||
|
background: #fff;
|
||||||
|
margin: 0 2rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .history-command>li {
|
||||||
|
padding: .2rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .history-command>li:hover {
|
||||||
|
background: #eaf0f3
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint span.pt-icon-standard {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .recommend-command {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #777777;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input-hint .recommend-command>li.hover {
|
||||||
|
background-color: #94ACCE;
|
||||||
|
}
|
||||||
@ -0,0 +1,484 @@
|
|||||||
|
import './InputHint.css';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { DOMElement, ReactElement } from 'react';
|
||||||
|
import { observer, inject } from 'mobx-react';
|
||||||
|
import { CommandStore } from '../../Store/CommandStore';
|
||||||
|
|
||||||
|
export interface InputHintProps
|
||||||
|
{
|
||||||
|
isDrag: Boolean
|
||||||
|
}
|
||||||
|
interface ITodoItemState
|
||||||
|
{
|
||||||
|
command: string, //输入的命令
|
||||||
|
historyCommands: Array<string>,// 历史命令
|
||||||
|
isShow: React.CSSProperties,// 是否显示历史命令框
|
||||||
|
isShowSet: React.CSSProperties,//是否显示设置块
|
||||||
|
commands: Array<string>, //命令库
|
||||||
|
searchCommand: Array<string>, //联想命令库
|
||||||
|
executeCommand: string, //所执行的命令
|
||||||
|
viceCommand: Array<{ title: string, keyboard: string }>,//副命令
|
||||||
|
pos: React.CSSProperties,// 命令框位置
|
||||||
|
reUlPos: React.CSSProperties, //关联列表位置
|
||||||
|
hiUlPos: React.CSSProperties//历史命令列表位置
|
||||||
|
}
|
||||||
|
export default class InputHint extends React.Component<{ commandStore?: CommandStore, isDrag: boolean }, 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);
|
||||||
|
this.state =
|
||||||
|
{
|
||||||
|
command: "",
|
||||||
|
historyCommands: [],
|
||||||
|
isShow: { display: 'none' },
|
||||||
|
hiUlPos: { bottom: '2rem' },
|
||||||
|
commands: ['LINE', 'LINETYPE', 'TR', 'TRANSLATE', 'TEXT1', 'TEXT2', 'TEXT3', 'TEXT4'],
|
||||||
|
searchCommand: [],
|
||||||
|
executeCommand: '',
|
||||||
|
viceCommand: [],
|
||||||
|
pos: { left: 0, bottom: 0 },
|
||||||
|
reUlPos: { bottom: '2rem' },
|
||||||
|
isShowSet: { display: 'none' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 获取input输入的命令
|
||||||
|
public handleOnChange = (e: React.FormEvent<HTMLInputElement>) =>
|
||||||
|
{
|
||||||
|
// 输入的命令
|
||||||
|
let m_inputValue = e.currentTarget.value.toUpperCase();
|
||||||
|
|
||||||
|
this.setState({ command: m_inputValue });
|
||||||
|
//储存找到的相关命令
|
||||||
|
let m_searchCommand: Array<string> = [];
|
||||||
|
//
|
||||||
|
if (!m_inputValue)
|
||||||
|
{
|
||||||
|
this.setState({ searchCommand: [] })
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 动态生成正则表达式
|
||||||
|
let m_searchReg: RegExp = new RegExp('');
|
||||||
|
// 拼接动态正则表达式
|
||||||
|
let m_comTmp: string = '^' + m_inputValue.split('').join('\\w*') + '\\w*$';
|
||||||
|
m_searchReg = new RegExp(m_comTmp, 'i');
|
||||||
|
|
||||||
|
//如果没有确认执行命令，将显示推荐索引的命令
|
||||||
|
if (!this.state.executeCommand)
|
||||||
|
{
|
||||||
|
|
||||||
|
this.state.commands.forEach((value: string) =>
|
||||||
|
{
|
||||||
|
|
||||||
|
if (m_searchReg.test(value))
|
||||||
|
{
|
||||||
|
|
||||||
|
m_searchCommand.push(value);
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.setState({ searchCommand: m_searchCommand });
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
// 把确认输入命令,并添加到历史记录
|
||||||
|
public handleConfirmInput = (e: React.KeyboardEvent<HTMLInputElement>) =>
|
||||||
|
{
|
||||||
|
}
|
||||||
|
// 是否显示历史命令
|
||||||
|
public handleShowHistoryCommand = () =>
|
||||||
|
{
|
||||||
|
|
||||||
|
if (this.state.isShow.display === "none")
|
||||||
|
{
|
||||||
|
this.setState({ isShow: { display: 'block' } })
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
this.setState({ isShow: { display: 'none' } })
|
||||||
|
}
|
||||||
|
document.onclick = () =>
|
||||||
|
{
|
||||||
|
this.setState({ isShow: { display: 'none' } });
|
||||||
|
document.onclick = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 点击确认执行命令
|
||||||
|
public handleConfirmCommand = (e: React.MouseEvent<HTMLLIElement>) =>
|
||||||
|
{
|
||||||
|
let historyCommands = this.state.historyCommands;
|
||||||
|
historyCommands.unshift(e.currentTarget.innerHTML);
|
||||||
|
//去掉重复历史命令
|
||||||
|
historyCommands = Array.from(new Set(historyCommands));
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
executeCommand: e.currentTarget.innerHTML,
|
||||||
|
searchCommand: [],
|
||||||
|
command: '',
|
||||||
|
historyCommands
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//绑定键盘命令
|
||||||
|
public handleSelectCommand = (e: KeyboardEvent) =>
|
||||||
|
{
|
||||||
|
// (this.refs.command as HTMLInputElement).focus();
|
||||||
|
|
||||||
|
let m_li: HTMLCollection = this.m_recommendUl.children;;
|
||||||
|
let historyCommands = this.state.historyCommands;
|
||||||
|
this.m_liHover = this.m_recommendUl.querySelector('.hover');
|
||||||
|
|
||||||
|
//↑-38 ，↓-40 esc-27
|
||||||
|
if (e.keyCode === 27) //按esc键,清空所有命令
|
||||||
|
{
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
executeCommand: '',
|
||||||
|
command: '',
|
||||||
|
searchCommand: [],
|
||||||
|
viceCommand: [],
|
||||||
|
isShow: { display: 'none' }
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//如果没输入命令，空格键为上一次输入命令
|
||||||
|
if (!this.state.command && this.state.historyCommands.length > 0)
|
||||||
|
{
|
||||||
|
if (e.keyCode === 32)
|
||||||
|
{
|
||||||
|
this.setState({ command: this.state.historyCommands[0].trim() });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//放下键选择命令函数,des-方向
|
||||||
|
let selectCommand = (des: string) =>
|
||||||
|
{
|
||||||
|
let el1: Element;
|
||||||
|
let el2: Element;
|
||||||
|
|
||||||
|
if (des === 'up')
|
||||||
|
{
|
||||||
|
el1 = this.m_liHover.previousElementSibling;
|
||||||
|
el2 = this.m_recommendUl.lastElementChild;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
el1 = this.m_liHover.nextElementSibling;
|
||||||
|
el2 = this.m_recommendUl.firstElementChild;
|
||||||
|
}
|
||||||
|
if (el1)
|
||||||
|
{
|
||||||
|
this.m_liHover.className = '';
|
||||||
|
el1.className = 'hover';
|
||||||
|
this.m_liHover = el1;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.m_liHover.className = '';
|
||||||
|
el2.className = 'hover';
|
||||||
|
this.m_liHover = el2;
|
||||||
|
|
||||||
|
}
|
||||||
|
this.setState({ command: this.m_liHover.innerHTML });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//如果有关联命令执行以下逻辑
|
||||||
|
if (this.state.searchCommand.length > 0)
|
||||||
|
{
|
||||||
|
|
||||||
|
if (e.keyCode === 38)
|
||||||
|
{
|
||||||
|
selectCommand('up');
|
||||||
|
}
|
||||||
|
else if (e.keyCode === 40)
|
||||||
|
{
|
||||||
|
selectCommand('down');
|
||||||
|
}
|
||||||
|
if (e.keyCode === 13 || e.keyCode === 32)
|
||||||
|
{
|
||||||
|
if (!this.state.executeCommand)
|
||||||
|
{
|
||||||
|
historyCommands.unshift(this.m_liHover.innerHTML);
|
||||||
|
//去掉重复历史命令
|
||||||
|
historyCommands = Array.from(new Set(historyCommands));
|
||||||
|
this.setState({ historyCommands });
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
executeCommand: this.m_liHover.innerHTML,
|
||||||
|
searchCommand: [],
|
||||||
|
command: ''
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (!this.state.executeCommand) //否则如果没有执行命令
|
||||||
|
{
|
||||||
|
// 如果存在历史命令,方向键切换历史命令
|
||||||
|
if (this.state.historyCommands.length > 0)
|
||||||
|
{
|
||||||
|
if (e.keyCode === 40)
|
||||||
|
{
|
||||||
|
|
||||||
|
if (this.m_i >= this.state.historyCommands.length) this.m_i = 0;
|
||||||
|
this.setState({ command: this.state.historyCommands[this.m_i] });
|
||||||
|
this.m_i++;
|
||||||
|
}
|
||||||
|
else if (e.keyCode === 38)
|
||||||
|
{
|
||||||
|
|
||||||
|
if (this.m_i < 0) this.m_i = this.state.historyCommands.length - 1;
|
||||||
|
this.setState({ command: this.state.historyCommands[this.m_i] });
|
||||||
|
this.m_i--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//确认选中命令
|
||||||
|
if (e.keyCode === 13 || e.keyCode === 32)
|
||||||
|
{
|
||||||
|
//如果没有确认执行命令，运行当前输入的命令，并将命令添加到历史
|
||||||
|
if (!this.state.executeCommand)
|
||||||
|
{
|
||||||
|
|
||||||
|
if (this.state.command && this.state.commands.indexOf(this.state.command.trim()) !== -1)
|
||||||
|
{
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
executeCommand: this.state.command,
|
||||||
|
searchCommand: [],
|
||||||
|
command: ''
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
//TODO:输入命令有误
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else // 已经有首条命令了，直接执行后续命名
|
||||||
|
{
|
||||||
|
//TODO:发送输入命令
|
||||||
|
|
||||||
|
if (this.state.command === 'U')
|
||||||
|
{
|
||||||
|
this.setState({ viceCommand: [], command: '' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
viceCommand: [{ title: '放弃', keyboard: 'U' }],
|
||||||
|
command: ''
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
//移动命令框
|
||||||
|
public dragBox = () =>
|
||||||
|
{
|
||||||
|
//移动回调函数
|
||||||
|
let movePos = (e: MouseEvent) =>
|
||||||
|
{
|
||||||
|
if (e.clientY >= window.innerHeight - 20)
|
||||||
|
{
|
||||||
|
this.m_box.parentElement.style.width = '100%';
|
||||||
|
this.setState({ pos: { left: 0, bottom: 0 } });
|
||||||
|
} else if (e.clientY < 20)
|
||||||
|
{
|
||||||
|
this.m_box.parentElement.style.width = '100%';
|
||||||
|
this.setState({ pos: { left: 0, top: 0 } });
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
this.m_box.parentElement.style.width = '80%';
|
||||||
|
this.setState({ pos: { left: e.clientX + 'px', top: e.clientY + 'px' } });
|
||||||
|
}
|
||||||
|
//调整位置
|
||||||
|
this.handleAdjustPos();
|
||||||
|
|
||||||
|
}
|
||||||
|
this.m_box.onmousedown = () =>
|
||||||
|
{
|
||||||
|
document.addEventListener('mousemove', movePos);
|
||||||
|
|
||||||
|
}
|
||||||
|
this.m_box.onmouseup = () =>
|
||||||
|
{
|
||||||
|
document.removeEventListener('mousemove', movePos);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 点击确认命令
|
||||||
|
public handleClick = (e: React.MouseEvent<HTMLElement>) =>
|
||||||
|
{
|
||||||
|
|
||||||
|
let m_key = e.currentTarget.firstElementChild.innerHTML.slice(1, 2);
|
||||||
|
if (m_key === 'U')
|
||||||
|
{
|
||||||
|
this.setState({ viceCommand: [] });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//鼠标选择命令
|
||||||
|
public handleSelectCom = (e: React.MouseEvent<HTMLUListElement>) =>
|
||||||
|
{
|
||||||
|
|
||||||
|
this.m_liHover = this.m_recommendUl.querySelector('.hover');
|
||||||
|
if (this.m_liHover)
|
||||||
|
{
|
||||||
|
this.m_liHover.className = '';
|
||||||
|
}
|
||||||
|
(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;
|
||||||
|
}
|
||||||
|
//调整弹出命令选择框位置
|
||||||
|
public handleAdjustPos = () =>
|
||||||
|
{
|
||||||
|
let m_reDes = this.handleGetElHeight(this.m_recommendUl);//关联命令列表
|
||||||
|
let m_hiDes = this.handleGetElHeight(this.m_historyUl); //历史命令列表
|
||||||
|
if (m_reDes.m_actualTop <= 0)
|
||||||
|
{
|
||||||
|
this.setState({ reUlPos: { top: '2rem' } });
|
||||||
|
}
|
||||||
|
if (m_reDes.m_actualBottom <= 0)
|
||||||
|
{
|
||||||
|
this.setState({ reUlPos: { bottom: '2rem' } });
|
||||||
|
}
|
||||||
|
if (m_hiDes.m_actualTop <= 0)
|
||||||
|
{
|
||||||
|
this.setState({ hiUlPos: { top: '2rem' } });
|
||||||
|
}
|
||||||
|
if (m_hiDes.m_actualBottom <= 0)
|
||||||
|
{
|
||||||
|
this.setState({ hiUlPos: { bottom: '2rem' } });
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
componentDidMount()
|
||||||
|
{
|
||||||
|
if (this.props.isDrag)
|
||||||
|
{
|
||||||
|
this.setState({ isShowSet: { display: 'inline-block' } });
|
||||||
|
this.dragBox();
|
||||||
|
//调整位置
|
||||||
|
this.handleAdjustPos();
|
||||||
|
this.m_recommendUl.parentElement.style.width = '98%';
|
||||||
|
}
|
||||||
|
document.body.addEventListener('keydown', this.handleSelectCommand);
|
||||||
|
}
|
||||||
|
componentDidUpdate()
|
||||||
|
{
|
||||||
|
//当没有选中命令时，默认第一个选中
|
||||||
|
if (!this.m_recommendUl.querySelector('.hover'))
|
||||||
|
{
|
||||||
|
this.m_liHover = this.m_recommendUl.firstElementChild;
|
||||||
|
if (this.m_liHover)
|
||||||
|
{
|
||||||
|
|
||||||
|
this.m_liHover.className = 'hover';
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
public render()
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div id="input-hint" style={this.state.pos}>
|
||||||
|
<div
|
||||||
|
className="set"
|
||||||
|
ref={el => { this.m_box = el }}
|
||||||
|
style={this.state.isShowSet}
|
||||||
|
>
|
||||||
|
<a>
|
||||||
|
<span className="pt-icon-standard pt-icon-drag-handle-vertical"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="input">
|
||||||
|
<ul
|
||||||
|
className="recommend-command"
|
||||||
|
ref={ul => { this.m_recommendUl = ul }}
|
||||||
|
onMouseMove={this.handleSelectCom}
|
||||||
|
style={this.state.reUlPos}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
this.state.searchCommand.map((item: string, index: number) =>
|
||||||
|
{
|
||||||
|
return <li onClick={this.handleConfirmCommand} key={index}>{item}</li>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
<span
|
||||||
|
className="pt-icon-standard pt-icon-sort-asc pt-intent-primary"
|
||||||
|
onClick={this.handleShowHistoryCommand}
|
||||||
|
/>
|
||||||
|
<span className="hint">{this.state.executeCommand}</span>
|
||||||
|
{
|
||||||
|
this.state.viceCommand.map((item, index: number) =>
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<span key={index}
|
||||||
|
className="hint vice-hint"
|
||||||
|
onClick={this.handleClick}
|
||||||
|
>
|
||||||
|
[{item.title}<span>({item.keyboard})</span>]
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入命令"
|
||||||
|
ref={o => { this.props.commandStore.elInput = o; }}
|
||||||
|
onKeyPress={this.handleConfirmInput}
|
||||||
|
onChange={this.handleOnChange}
|
||||||
|
// value={this.state.command}
|
||||||
|
/>
|
||||||
|
<ul
|
||||||
|
className="history-command"
|
||||||
|
style={{ ...this.state.isShow, ...this.state.hiUlPos }}
|
||||||
|
ref={ul => { this.m_historyUl = ul }}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
this.state.historyCommands.map((item: string, index: number) =>
|
||||||
|
{
|
||||||
|
return <li onClick={this.handleConfirmCommand} key={index}>{item}</li>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue