@who列表

This commit is contained in:
谢思 2021-10-13 11:52:54 +08:00
parent 85ef26f70e
commit 7e69c64c9c
2 changed files with 42 additions and 15 deletions

View File

@ -9,8 +9,26 @@
/*md编辑器中输入@弹出可选人列表样式*/
.at_who_list{
position: absolute;
z-index: 99;
width: 180px;
max-height: 160px;
background: #FFFFFF;
box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5);
border-radius: 4px;
top: 100px;
left: 100px;
background-color: red;
z-index: 99;
overflow-y: scroll;
}
.at_who{
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid rgba(212, 212, 212, 0.5);
}
.at_who img{
width:30px;
height:30px;
border-radius:50%;
margin-right: 10px;
}

View File

@ -1,13 +1,11 @@
import React, { Fragment, useEffect, useRef, useState } from 'react';
import { getUploadActionUrl, getUrl } from 'educoder';
import ResizeObserver from 'resize-observer-polyfill';
import { getImageUrl } from 'educoder';
import '../../courses/css/Courses.css';
import './css/TPMchallengesnew.css';
import 'codemirror/lib/codemirror.css';
import './css/newquestion.css';
import { AutoComplete } from 'antd';
const $ = window.$
const mdIcons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "link", "|", "inline-latex", "latex", '|', "image", "table", '|', "line-break", "watch", "clear"];
@ -41,7 +39,6 @@ function md_rec_data(k, mdu, id) {
}
window.md_rec_data = md_rec_data;
function md_elocalStorage(editor, mdu, id) {
let oc = window.sessionStorage.getItem('content' + mdu)
if (oc !== null && oc !== editor.getValue()) {
@ -76,14 +73,6 @@ function md_elocalStorage(editor, mdu, id) {
return tid
}
const atWhoList = (
<div className="at_who_list">aaa</div>
)
const users = [{image_url: "system/lets/letter_avatars/2/J/241_157_191/120.png",login: "jasonjun",profile_completed: false,user_id: 84965,username: "jasonjun"},
{image_url: "system/lets/letter_avatars/2/E/122_185_146/120.png",login: "Eo9ygbqns",profile_completed: false,user_id: 84963,username: "Eo9ygbqns"},
{image_url: "system/lets/letter_avatars/2/P/238_117_19/120.png",login: "postwoman",profile_completed: true,user_id: 84961,username: "PostWoman"}]
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 }) => {
const editorEl = useRef();
@ -93,6 +82,12 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
const containerId = `mdEditor_${mdID}`;
const editorBodyId = `mdEditors_${mdID}`;
const tipId = `e_tips_mdEditor_${mdID}`;
const users = [{image_url: "system/lets/letter_avatars/2/J/241_157_191/120.png",login: "jasonjun",profile_completed: false,user_id: 84965,username: "jasonjun"},
{image_url: "system/lets/letter_avatars/2/E/122_185_146/120.png",login: "Eo9ygbqns",profile_completed: false,user_id: 84963,username: "Eo9ygbqns"},
{image_url: "system/lets/letter_avatars/2/P/238_117_19/120.png",login: "postwoman",profile_completed: true,user_id: 84961,username: "PostWoman"},
{image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "Es5ghtfik",profile_completed: false,user_id: 89516,username: "徐准"},
{image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "Es5ghtfik",profile_completed: false,user_id: 89516,username: "徐准1"}]
function onLayout() {
let ro;
@ -111,6 +106,19 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
return ro;
}
const atWhoList = (
<div className="at_who_list">
{users && users.map((item,key)=>{
return(
<div className="at_who">
{ item.image_url && <img src={getImageUrl(item.image_url)}></img> }
<span>{item.username}</span>
</div>
)
})}
</div>
)
useEffect(() => {
if (editorInstance) {
return
@ -288,7 +296,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
<div ref={editorEl} className={`df ${className} ${imageExpand && 'editormd-image-click-expand'} `} >
<div className={`edu-back-greyf5 radius4 editormd ${error ? 'error' : ''}`} id={containerId} >
<textarea style={{ display: 'none' }} id={editorBodyId} name="content"></textarea>
{atWhoVisible && atWhoList}
{/* {atWhoVisible && atWhoList} */}
{atWhoList}
<div className="CodeMirror cm-s-defualt"></div>
</div>
</div>