|
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
|
|
import arrow from "./images/arrow.svg";
|
|
|
|
|
import selectedArrow from "./images/selectedArrow.svg";
|
|
|
|
|
|
|
|
|
|
import icon1 from "./images/icon1.svg";
|
|
|
|
|
import opened from "./images/opened.svg";
|
|
|
|
|
|
|
|
|
|
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 }) => {
|
|
|
|
|
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 = {
|
|
|
|
|
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: "فیلمها وعکس مربوط به حادثه",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|