Nigel
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

at我列表

This commit is contained in:
谢思 2021-11-01 09:31:08 +08:00
parent 1c46617144
commit 2078a044b6
2 changed files with 87 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/forge/Merge/Files.jsx
View File

@ -18,7 +18,7 @@ function Files({ data,history,owner,projectsId , parentsSha }){
useEffect(()=>{
document.addEventListener('click',()=>{setIsOpen(false)})
})
},[])
function showDown(flag,index,isBin){
if(!isBin){

106
src/modules/tpm/challengesnew/tpm-md-editor.js
View File

@ -136,6 +136,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
})
atWhoLoginList.current = Array.from(list);
setAtWhoLoginListState(Array.from(list));
//销毁atWhoKeyDown键盘监听事件
// document.removeEventListener("keydown",atWhoKeyDown);
}
function onMouseOver(key){
@ -144,9 +146,11 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
}
//markdown编辑器中输入的键盘监听事件
function mdKeyDown(){
document.onkeydown = e=>{
if (e.key === "@") {
function mdKeyDown(e){
console.log("11111111111");
// document.onkeydown = e=>{
if (e.shiftKey && e.key === "@") {
console.log("markdown编辑器的鼠标事件",e);
// 输入@键后在对应的位置显示可选的项目成员
setAtWhoVisible(true);
//获取光标位置
@ -161,7 +165,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
setAtWhoVisible(false);
}
//处理本来@了某人 -> 删掉 -> 撤回 的情况
if(e.code === "KeyZ" && users.length != 0){
if(e.ctrlKey && e.code === "KeyZ" && users.length != 0){
const codemirror = editorInstance.cm;
let value = codemirror.getValue();
//处理初始内容就自带@谁的情况
@ -188,30 +192,85 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
}
})
}
}
// const atWhoListDiv = document.getElementById("at_who_list");
// if(atWhoListDiv && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Enter")){
// return false;
// }
// const atWhoDivs = document.getElementsByClassName("at_who");
// let index;
// for(let i = 0; i<atWhoDivs.length;i++){
// atWhoDivs[i].className === "at_who active" && (index = i);
// }
// //当可选@列表div弹出之后监听上下键（不能通过判断atWhoVisible，因为atWhoVisible还未更新为true）
// if(e.key === "ArrowUp" && index > 0){
// e.preventDefault();
// index <=atWhoDivs.length-4 && (atWhoListDiv.scrollTop -=40)
// atWhoDivs[index].className = "at_who";
// atWhoDivs[index-1].className = "at_who active";
// }
// if(e.key === "ArrowDown"){
// e.preventDefault();
// console.log("ArrowDown",atWhoVisible);
// const atWhoListDiv = document.getElementById("at_who_list");
// const atWhoDivs = document.getElementsByClassName("at_who");
// let index;
// for(let i = 0; i<atWhoDivs.length;i++){
// atWhoDivs[i].className === "at_who active" && (index = i);
// }
// index >=3 && (atWhoListDiv.scrollTop +=40)
// atWhoDivs[index].className = "at_who";
// atWhoDivs[index+1].className = "at_who active";
// }
// if(e.key === "Enter"){
// //阻止默认事件
// e.preventDefault();
// //找到classname为at_who active的div，执行click事件
// document.getElementsByClassName("at_who active")[0].click();
// }
// editorInstance.addKeyMap({
// 'ArrowUp':()=>{
// index <=atWhoDivs.length-4 && (atWhoListDiv.scrollTop -=40)
// atWhoDivs[index].className = "at_who";
// atWhoDivs[index-1].className = "at_who active";
// },
// 'ArrowDown':()=>{
// index >=3 && (atWhoListDiv.scrollTop +=40)
// atWhoDivs[index].className = "at_who";
// atWhoDivs[index+1].className = "at_who active";
// },
// 'Enter':()=>{
// //找到classname为at_who active的div，执行click事件
// document.getElementsByClassName("at_who active")[0].click();
// },
// })
// }
// }
}
//弹出可选@用户列表之后的键盘监听事件
function atWhoKeyDown(){
function atWhoKeyDown(e){
//监听上下和enter键
document.onkeydown = (e) =>{
// document.onkeydown = (e) =>{
const atWhoListDiv = document.getElementById("at_who_list");
const atWhoDivs = document.getElementsByClassName("at_who");
let index;
for(let i = 0; i<atWhoDivs.length;i++){
atWhoDivs[i].className === "at_who active" && (index = i);
}
console.log("监听上下和enter键",e,atWhoListDiv,atWhoDivs,index);
if(e.key === "ArrowUp" && index > 0){
// index >=4 && (atWhoListDiv.scrollTop -=40)
atWhoListDiv.scrollTop -= 40;
index <=atWhoDivs.length-4 && (atWhoListDiv.scrollTop -=40)
atWhoDivs[index].className = "at_who";
atWhoDivs[index-1].className = "at_who active";
return;
}
if(e.key === "ArrowDown" && index < atWhoDivs.length-1){
// index >=3 && (atWhoListDiv.scrollTop +=40)
atWhoListDiv.scrollTop += 40;
index >=3 && (atWhoListDiv.scrollTop +=40)
atWhoDivs[index].className = "at_who";
atWhoDivs[index+1].className = "at_who active";
return;
}
if(e.key === "Enter"){
//阻止默认事件
@ -219,9 +278,14 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
//找到classname为at_who active的div，执行click事件
document.getElementsByClassName("at_who active")[0].click();
}
}
// }
}
//点击其他地方关闭弹框
useEffect(()=>{
document.addEventListener('click',()=>{setAtWhoVisible(false)})
},[])
useEffect(()=>{
console.log('@谁列表发生变化,atWhoLoginList.current：',atWhoLoginList.current,'atWhoLoginListState: ',atWhoLoginListState);
changeAtWhoLoginList && changeAtWhoLoginList(atWhoLoginListState);
@ -240,15 +304,17 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
</div>
)
useEffect(()=>{
document.addEventListener('click',()=>{setAtWhoVisible(false)});
})
useEffect(()=>{
//当atWhoVisible为true的时候，失焦，监听上下和enter键
if(atWhoVisible){
document.activeElement.id !== "blur_atWho" && document.getElementById("blur_atWho").focus();
document.addEventListener("keydown",atWhoKeyDown());
// document.activeElement.id !== "blur_atWho" && document.getElementById("blur_atWho").focus();
// const atWhoDivs = document.getElementsByClassName("at_who");
// let index = 0;
// for(let i = 0; i<atWhoDivs.length;i++){
// atWhoDivs[i].className === "at_who active" && (index = i);
// }
// const atWhoListDiv = document.getElementById("at_who_list");
document.addEventListener("keydown",atWhoKeyDown);
}
},[atWhoVisible])
@ -352,10 +418,10 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
//isCanAtme:只有issue和合并请求以及评论部分可以@他人操作
//当光标或选中内容时触发绑定@事件
isCanAtme && editorInstance.cm.on("focus", () => {
document.addEventListener("keydown", mdKeyDown());
document.addEventListener("keydown", mdKeyDown);
});
isCanAtme && editorInstance.cm.on("blur", () => {
document.removeEventListener("keydown",mdKeyDown());
document.removeEventListener("keydown",mdKeyDown);
});
editorInstance.cm.on("change", (cm) => {
onChange && onChange(cm.getValue());