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.
 
 
 

164 lines
3.9 KiB

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 }}
>
&nbsp;
</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: "فیلمها وعکس مربوط به حادثه",
},
],
};