54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
import React ,{ useState , useRef } from 'react';
|
||
import { Input , Menu , Icon } from 'antd';
|
||
import { getImageUrl } from 'educoder';
|
||
import Drop from './drop';
|
||
const { Search } = Input;
|
||
|
||
// name：未选择时显示的内容
|
||
// lists：下拉列表，从接口获取，需一一填充
|
||
// imgControl:控制是否显示头像
|
||
// size:下拉框宽度，small：120px,large:260px;
|
||
// chooseValue: 默认选择的项的id
|
||
// search: 搜索方法
|
||
// chooseFunc: 选择项后需调用列表的查询方法
|
||
// update: 编辑状态
|
||
function Menus({name, id , lists , size , imgControl , searchFunc , chooseFunc , update },ref){
|
||
const dropRef = useRef(null);
|
||
|
||
|
||
// 修改menus数组里的字段值
|
||
function changeMenusValue(value,id){
|
||
chooseFunc(id,value);
|
||
dropRef.current && dropRef.current.clearVisible(false);
|
||
}
|
||
|
||
function menu(data){
|
||
return <div className={`overlaydrop ${size}`}>
|
||
{ size !== "small" &&
|
||
<div className="pb10"><Search placeholder={`搜索${name}`} allowClear onChange={(e)=>searchFunc(e.target.value)}/></div>
|
||
}
|
||
{
|
||
data && data.length>0 ?
|
||
<Menu selectedKeys={[`${id}`]}>
|
||
{
|
||
data.map((i,j)=>{
|
||
return <Menu.Item key={i.id}>
|
||
{imgControl && <img src={getImageUrl(i.image_url)} alt=""/>}
|
||
<span onClick={()=>changeMenusValue(i.name,i.id)}>{i.name}</span>
|
||
</Menu.Item>
|
||
})
|
||
}
|
||
</Menu>
|
||
:
|
||
<div className="pl15">暂无{id ? <span>'{name}'</span>: name}</div>
|
||
}
|
||
</div>
|
||
}
|
||
return(
|
||
<Drop ref={dropRef} overlay={menu(lists)} placement={"bottomRight"} >
|
||
<span className="task-hide">{(update && !id) ? `更换${name}` : name }</span>
|
||
<Icon type="caret-down" className="ml5 color-grey-6" />
|
||
</Drop>
|
||
)
|
||
}
|
||
export default Menus; |