38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
|
import {React, useState} from 'react'
|
||
|
|
import {SbTitle, SbSub, SbLink} from './Sb.style'
|
||
|
|
import { FcFolder, FcOpenedFolder, FcFile } from 'react-icons/fc'
|
||
|
|
import { AiOutlinePlusSquare, AiOutlineMinusSquare } from 'react-icons/ai'
|
||
|
|
|
||
|
|
|
||
|
|
const SbItem = ({ item }) => {
|
||
|
|
const [collapsed, setCollapsed] = useState(false);
|
||
|
|
|
||
|
|
function toggleCollapse() {
|
||
|
|
setCollapsed(prevValue => !prevValue);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(item.childrens.length > 0){
|
||
|
|
const icon1 = collapsed?<AiOutlinePlusSquare />:<AiOutlineMinusSquare />;
|
||
|
|
const icon2 = collapsed?<FcOpenedFolder />:<FcFolder />;
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<SbTitle depth={item.doc_level} onClick={toggleCollapse}>{icon1}{icon2} {(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</SbTitle>
|
||
|
|
<SbSub isOpen={collapsed}>
|
||
|
|
{item.childrens.map((child) => (
|
||
|
|
<SbItem item={child} />
|
||
|
|
))}
|
||
|
|
</SbSub>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}else{
|
||
|
|
const icon = <FcFile />;
|
||
|
|
return (
|
||
|
|
<SbTitle depth={item.doc_level}>
|
||
|
|
<SbLink>{icon} {(item.doc_level === 1?'':item.doc_code)+' '+item.doc_code_name}</SbLink>
|
||
|
|
</SbTitle>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SbItem
|