|
|
import React, { useState } from "react"; |
|
|
|
|
|
const FolderState = ({ items }) => { |
|
|
let [selected, setSelected] = useState(1); |
|
|
let [top, setTop] = useState(1); |
|
|
|
|
|
return ( |
|
|
<> |
|
|
<div |
|
|
className={`z-0 absolute w-[265px] right-0 py-2 bg-blue-300 transition-all border-r-4 border-blue-600`} |
|
|
style={{ top: top - 10 }} |
|
|
> |
|
|
|
|
|
</div> |
|
|
<FolderTree |
|
|
items={items} |
|
|
selected={selected} |
|
|
setTop={setTop} |
|
|
setSelected={setSelected} |
|
|
/> |
|
|
</> |
|
|
); |
|
|
}; |
|
|
|
|
|
const FolderTree = ({ |
|
|
items, |
|
|
pid, |
|
|
selected, |
|
|
setSelected, |
|
|
setTop, |
|
|
arrow, |
|
|
selectedArrow, |
|
|
icon1, |
|
|
opened, |
|
|
}) => { |
|
|
const [expands, setExpand] = useState( |
|
|
items.filter((item) => item.exapnd).map((item) => item.id) |
|
|
); |
|
|
|
|
|
if (!pid) pid = null; |
|
|
|
|
|
return ( |
|
|
<div className={"w-fit pr-3"}> |
|
|
{items |
|
|
.filter((item) => item.pid === pid) |
|
|
.map((item, index) => { |
|
|
const expand = expands.includes(item.id); |
|
|
return ( |
|
|
<> |
|
|
<div |
|
|
key={index} |
|
|
className={ |
|
|
"flex flex-row items-center cursor-pointer py-2" |
|
|
// + (selected === item.id ? "bg-blue-200" : "") |
|
|
} |
|
|
onClick={(e) => { |
|
|
expand |
|
|
? setExpand([...expands.filter((ex) => ex !== item.id)]) |
|
|
: setExpand([...expands, item.id]); |
|
|
setSelected(item.id); |
|
|
setTop(e.target.offsetTop); |
|
|
}} |
|
|
> |
|
|
<img |
|
|
alt="" |
|
|
src={expand ? selectedArrow : arrow} |
|
|
className={ |
|
|
"z-10 transition-all duration-700 " + |
|
|
(expand ? "-rotate-90" : "") |
|
|
} |
|
|
/> |
|
|
<img |
|
|
alt="" |
|
|
src={expand ? opened : icon1} |
|
|
className="z-10 w-7 transition-all duration-700" |
|
|
/> |
|
|
<span |
|
|
className={ |
|
|
"z-10 mr-2 " + |
|
|
(selected === item.id ? "text-sm" : "text-xs") |
|
|
} |
|
|
style={{ color: "#00253A" }} |
|
|
> |
|
|
{item.name} |
|
|
{item.id} |
|
|
</span> |
|
|
</div> |
|
|
{expand && ( |
|
|
<FolderTree |
|
|
items={items} |
|
|
pid={item.id} |
|
|
selected={selected} |
|
|
setTop={setTop} |
|
|
setSelected={setSelected} |
|
|
/> |
|
|
)} |
|
|
</> |
|
|
); |
|
|
})} |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default FolderState; |
|
|
|
|
|
FolderState.defaultProps = { |
|
|
arrow: "images/FolderTreearrow.svg", |
|
|
selectedArrow: "images/FolderTreeselectedArrow.svg", |
|
|
icon1: "images/FolderTreeicon1.svg", |
|
|
opened: "images/FolderTreeopened.svg", |
|
|
|
|
|
items: [ |
|
|
{ |
|
|
id: 1, |
|
|
pid: null, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
pid: null, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
pid: null, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
pid: null, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
pid: 1, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
pid: 1, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
pid: 1, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 8, |
|
|
pid: 7, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 9, |
|
|
pid: 8, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
{ |
|
|
id: 10, |
|
|
pid: 2, |
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
}, |
|
|
], |
|
|
};
|
|
|
|