80 lines
2.0 KiB
JavaScript
80 lines
2.0 KiB
JavaScript
import React , { useState , useEffect } from 'react';
|
|
import { AutoComplete } from 'antd';
|
|
import { getImageUrl } from "educoder";
|
|
import axios from 'axios';
|
|
|
|
const Option = AutoComplete.Option;
|
|
|
|
export default ({ getUser , placeholder, width ,value, userList=[] })=>{
|
|
const [ source , setSource ] = useState(undefined);
|
|
useEffect(()=>{
|
|
if(userList && userList.length){
|
|
sourceOptions(userList);
|
|
}else{
|
|
getUserList();
|
|
}
|
|
},[])
|
|
|
|
function getUserList(value){
|
|
const url = `/users/list.json`;
|
|
axios.get(url, {
|
|
params: {
|
|
search: value,
|
|
},
|
|
}).then((result) => {
|
|
if (result) {
|
|
sourceOptions(result.data.users);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
function sourceOptions(userDataSource){
|
|
const s = userDataSource && userDataSource.map((item, key) => {
|
|
return (
|
|
<Option
|
|
key={key}
|
|
value={`${item.user_id}`}
|
|
login={`${item.login}`}
|
|
name={item.username}
|
|
>
|
|
<img
|
|
className="user_img radius"
|
|
width="28"
|
|
height="28"
|
|
src={getImageUrl(`/${item && item.image_url}`)}
|
|
alt=""
|
|
/>
|
|
<span className="ml10" style={{ "vertical-align": "middle" }}>
|
|
{item.username}
|
|
<span className="color-grey ml10">({item.login})</span>
|
|
</span>
|
|
</Option>
|
|
);
|
|
});
|
|
setSource(s);
|
|
}
|
|
|
|
// 选择用户
|
|
function selectInputUser(e, option){
|
|
getUserList(option.props.name);
|
|
getUser(option.props.login);
|
|
};
|
|
|
|
return(
|
|
<div className="addPanel">
|
|
<AutoComplete
|
|
getPopupContainer={trigger => trigger.parentNode}
|
|
dataSource={source}
|
|
style={{ width: width || 300 }}
|
|
onSearch={(value)=>{getUserList(value)}}
|
|
onSelect={selectInputUser}
|
|
placeholder={placeholder || "搜索需要添加的用户..."}
|
|
allowClear
|
|
optionLabelProp="name"
|
|
/>
|
|
</div>
|
|
)
|
|
} |