You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

156 lines
3.9 KiB

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