forked from Gitlink/forgeplus-react
61 lines
1.7 KiB
React
61 lines
1.7 KiB
React
|
import React , { useState , useEffect } from 'react';
|
||
|
|
import { Select } from 'antd';
|
||
|
|
import { getUrl } from 'educoder';
|
||
|
|
|
||
|
|
import axios from 'axios';
|
||
|
|
const Option = Select.Option;
|
||
|
|
|
||
|
|
export default (({ language , select_language })=>{
|
||
|
|
const [ six , setSix ] = useState(undefined);
|
||
|
|
const [ languages , setLanguage ] = useState(undefined);
|
||
|
|
|
||
|
|
useEffect(()=>{
|
||
|
|
const url = '/ci/languages.json';
|
||
|
|
axios.get(url).then(result=>{
|
||
|
|
if(result){
|
||
|
|
setLanguage(result.data);
|
||
|
|
}
|
||
|
|
}).catch(error=>{
|
||
|
|
console.log(error);
|
||
|
|
})
|
||
|
|
},[])
|
||
|
|
|
||
|
|
function changelanguage(value){
|
||
|
|
let array = value ? languages.filter(item=>item.name === value) :undefined;
|
||
|
|
select_language(value,array && array[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(()=>{
|
||
|
|
const url = '/ci/languages/common.json';
|
||
|
|
axios.get(url).then(result=>{
|
||
|
|
if(result){
|
||
|
|
setSix(result.data);
|
||
|
|
}
|
||
|
|
}).catch(error=>{
|
||
|
|
console.log(error);
|
||
|
|
})
|
||
|
|
},[])
|
||
|
|
|
||
|
|
return(
|
||
|
|
<React.Fragment>
|
||
|
|
{
|
||
|
|
six &&
|
||
|
|
<ul className="language">
|
||
|
|
{
|
||
|
|
six.map((item,key)=>{
|
||
|
|
return(
|
||
|
|
key < 6 ? <li className={language ===item.name ? "active":""} onClick={()=>changelanguage(item.name)}><img alt="" src={item.cover_url && getUrl(item.cover_url)} /></li> : ""
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</ul>
|
||
|
|
}
|
||
|
|
<Select showSearch={true} placeholder={"请选择文本语言"} style={{ width: 200 }} value={language} onChange={changelanguage}>
|
||
|
|
<Option value={undefined}>请选择文本语言</Option>
|
||
|
|
{languages && languages.map((item, key) => {
|
||
|
|
return <Option value={item.name}>{item.name}</Option>;
|
||
|
|
})}
|
||
|
|
</Select>
|
||
|
|
</React.Fragment>
|
||
|
|
)
|
||
|
|
})
|