79 lines
3.1 KiB
React
79 lines
3.1 KiB
React
import React, { useState, useRef, useEffect } from 'react';
|
||
import './Mention.css';
|
||
|
||
const USERS = [
|
||
{ name: '王伟', dept: '华东大区' }, { name: '李娜', dept: '华南大区' }, { name: '张强', dept: '华北大区' },
|
||
{ name: '陈静', dept: '研发中心' }, { name: '刘洋', dept: '市场部' }
|
||
];
|
||
|
||
export default function Mention({ modelValue = '', users = USERS, onChange }) {
|
||
const [open, setOpen] = useState(false);
|
||
const [active, setActive] = useState(-1);
|
||
const [mentioned, setMentioned] = useState([]);
|
||
const inputRef = useRef(null);
|
||
const root = useRef(null);
|
||
|
||
useEffect(() => {
|
||
const onDoc = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); };
|
||
document.addEventListener('click', onDoc);
|
||
return () => document.removeEventListener('click', onDoc);
|
||
}, []);
|
||
|
||
const onInput = (e) => {
|
||
const pos = e.target.selectionStart, v = e.target.value;
|
||
if (onChange) onChange(v);
|
||
const at = v.lastIndexOf('@', pos - 1);
|
||
if (at >= 0 && (at === 0 || /\s/.test(v[at - 1])) && !/\s/.test(v.slice(at + 1, pos))) { setActive(-1); setOpen(true); }
|
||
else setOpen(false);
|
||
};
|
||
const move = (d) => setActive((a) => Math.max(-1, Math.min(users.length - 1, a + d)));
|
||
const insert = (name) => {
|
||
const el = inputRef.current, pos = el.selectionStart, v = el.value;
|
||
const at = v.lastIndexOf('@', pos - 1);
|
||
if (at >= 0 && (at === 0 || /\s/.test(v[at - 1]))) el.value = v.slice(0, at) + '@' + name + ' ' + v.slice(pos);
|
||
else el.value = v.slice(0, pos) + '@' + name + ' ' + v.slice(pos);
|
||
if (mentioned.indexOf(name) < 0) setMentioned((m) => [...m, name]);
|
||
if (onChange) onChange(el.value);
|
||
setOpen(false);
|
||
el.focus();
|
||
};
|
||
const remove = (n) => setMentioned((m) => m.filter((x) => x !== n));
|
||
|
||
return (
|
||
<div className="aa-mention" ref={root}>
|
||
<div className="aa-mention-area">
|
||
<textarea
|
||
ref={inputRef}
|
||
className="aa-mention-input"
|
||
value={modelValue}
|
||
rows={3}
|
||
placeholder="输入 @ 提及同事…"
|
||
onChange={onInput}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
|
||
else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
|
||
else if (e.key === 'Enter') { e.preventDefault(); if (active >= 0) insert(users[active].name); }
|
||
else if (e.key === 'Escape') setOpen(false);
|
||
}}
|
||
/>
|
||
{open && (
|
||
<div className="aa-mention-panel">
|
||
{users.map((u, i) => (
|
||
<div key={u.name} className={'aa-mention-item' + (i === active ? ' is-active' : '')} onClick={() => insert(u.name)}>
|
||
<span className="aa-mention-avatar">{u.name[0]}</span>
|
||
<span className="aa-mention-name">{u.name}</span>
|
||
<span className="aa-mention-dept">{u.dept}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="aa-mention-chips">
|
||
{mentioned.map((n) => (
|
||
<span key={n} className="aa-mention-chip">@{n} <b onClick={() => remove(n)}>×</b></span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|