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

atwho

This commit is contained in:
谢思 2021-11-08 15:14:04 +08:00
parent 2078a044b6
commit ac4488a907
6 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/forge/Merge/merge_form.js
View File

@ -285,6 +285,8 @@ class MergeForm extends Component {
onChange={this.onContentChange}
isCanAtme = {true}
changeAtWhoLoginList = {this.changeAtWhoLoginList}
owner = {owner}
projectsId = {projectsId}
></MDEditor>
<p className="clearfix mt20">
<Button

2
src/forge/Order/order_form.js
View File

@ -342,6 +342,8 @@ class order_form extends Component {
onChange={this.onContentChange}
isCanAtme = {true}
changeAtWhoLoginList = {this.changeAtWhoLoginList}
owner = {owner}
projectsId = {projectsId}
></MDEditor>
</div>
{get_attachments && get_attachments.length > 0 ? (

2
src/forge/UsersList/fork_users.js
View File

@ -27,7 +27,7 @@ class ForkUsers extends Component {
});
const { projectsId , owner } = this.props.match.params;
const url = `/${owner}/${projectsId}/members.json`;
const url = `/${owner}/${projectsId}/forks.json`;
axios
.get(url, {
params: {

5
src/forge/comments/comments.js
View File

@ -65,7 +65,7 @@ class comments extends Component {
atWhoLoginList,
} = this.state;
const { owner } = this.props.match.params;
const url = `/issues/${orderId}/journals.json`;
axios
@ -320,6 +320,7 @@ class comments extends Component {
new_journal_id,
} = this.state;
const { current_user, only_show_content } = this.props;
const { projectsId ,owner } = this.props.match.params;
const new_comment = (is_reply, item_id) => {
return (
@ -353,6 +354,8 @@ class comments extends Component {
}
isCanAtme = {true}
changeAtWhoLoginList = {this.changeAtWhoLoginList}
owner = {owner}
projectsId = {projectsId}
></MDEditor>
<p className="quillFlag">
{quillFlag && <span className="">请输入评论内容</span>}

5
src/modules/tpm/challengesnew/css/newquestion.css
View File

@ -35,6 +35,11 @@
border-radius:50%;
margin-right: 10px;
}
.at_who span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blur_atWho{
position: absolute;
top: -100px;

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

@ -74,7 +74,7 @@ function md_elocalStorage(editor, mdu, id) {
return tid
}
export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, className = '', noStorage = false, imageExpand = true, placeholder = '', width = '100%', height = 400, initValue = '', emoji, watch, showNullButton = false, showResizeBar = false, startInit = true , forMember = true , isCanAtme = false ,changeAtWhoLoginList }) => {
export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, className = '', noStorage = false, imageExpand = true, placeholder = '', width = '100%', height = 400, initValue = '', emoji, watch, showNullButton = false, showResizeBar = false, startInit = true , forMember = true , isCanAtme = false , changeAtWhoLoginList, owner, projectsId }) => {
const editorEl = useRef();
const resizeBarEl = useRef();
@ -82,17 +82,18 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
const [atWhoVisible, setAtWhoVisible] = useState(false);
const [atWhoLoginListState, setAtWhoLoginListState] = useState([]);
const [users, setUsers] = useState([]);
//用户输入的@之后的搜索词
const [search, setSeacrch] = useState(undefined);
const atWhoLoginList = useRef([]);
const containerId = `mdEditor_${mdID}`;
const editorBodyId = `mdEditors_${mdID}`;
const tipId = `e_tips_mdEditor_${mdID}`;
//todo：需要替换成可@用户列表接口,由于forge接口名称冲突，src\forge\UsersList\fork_users.js接口/members.json需要换成/forks.json
useEffect(()=>{
isCanAtme && axios.get('/users/list.json',{
params: {
search: 'admin',
},
isCanAtme && axios.get(`/${owner}/${projectsId}/members.json`,{
// params: {
// search: 'admin',
// },
}).then(response=>{
if(response && response.status === 200){
setUsers(response.data.users);
@ -147,10 +148,13 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
//markdown编辑器中输入的键盘监听事件
function mdKeyDown(e){
console.log("11111111111");
const cm = editorInstance.cm;
//获取鼠标所在行的行数和ch
const line = cm.doc.getCursor().line;//行
atWhoVisible && console.log('cmaa',cm.getLine(line));
console.log("markdown编辑器--------键盘监听事件");
// document.onkeydown = e=>{
if (e.shiftKey && e.key === "@") {
console.log("markdown编辑器的鼠标事件",e);
// 输入@键后在对应的位置显示可选的项目成员
setAtWhoVisible(true);
//获取光标位置
@ -161,8 +165,6 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
//将第一个用户默认选中
const at_who_divs = document.getElementsByClassName("at_who");
at_who_divs[0].className = "at_who active";
} else {
setAtWhoVisible(false);
}
//处理本来@了某人 -> 删掉 -> 撤回 的情况
if(e.ctrlKey && e.code === "KeyZ" && users.length != 0){
@ -287,7 +289,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
},[])
useEffect(()=>{
console.log('@谁列表发生变化,atWhoLoginList.current：',atWhoLoginList.current,'atWhoLoginListState: ',atWhoLoginListState);
console.log('@谁列表发生变化,atWhoLoginList.current：',atWhoLoginList.current);
changeAtWhoLoginList && changeAtWhoLoginList(atWhoLoginListState);
},[atWhoLoginListState])
@ -307,6 +309,10 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
useEffect(()=>{
//当atWhoVisible为true的时候，失焦，监听上下和enter键
if(atWhoVisible){
const cm = editorInstance.cm;
//获取鼠标所在行的行数和ch
const line = cm.doc.getCursor().line;//行
// console.log('cmaa',cm.getLine(line));
// document.activeElement.id !== "blur_atWho" && document.getElementById("blur_atWho").focus();
// const atWhoDivs = document.getElementsByClassName("at_who");
// let index = 0;
@ -314,7 +320,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
// atWhoDivs[i].className === "at_who active" && (index = i);
// }
// const atWhoListDiv = document.getElementById("at_who_list");
document.addEventListener("keydown",atWhoKeyDown);
// document.addEventListener("keydown",atWhoKeyDown);
}
},[atWhoVisible])
@ -416,7 +422,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId)
}
//isCanAtme:只有issue和合并请求以及评论部分可以@他人操作
//当光标或选中内容时触发绑定@事件
//绑定@事件
isCanAtme && editorInstance.cm.on("focus", () => {
document.addEventListener("keydown", mdKeyDown);
});
@ -425,6 +431,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
});
editorInstance.cm.on("change", (cm) => {
onChange && onChange(cm.getValue());
//当内容发生改变并且有已@列表时
if(atWhoLoginList.current.length != 0){
const codemirror = editorInstance.cm;
let value = codemirror.getValue();
@ -480,6 +487,10 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
})
}
}
// const cm = editorInstance.cm;
//获取鼠标所在行的行数和ch
const line = cmEl.doc.getCursor().line;//行
atWhoVisible && console.log('cmaa',cmEl.getLine(line));
});
ro = onLayout()
return () => {