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 (
<>
>
);
};
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 (
{items
.filter((item) => item.pid === pid)
.map((item, index) => {
const expand = expands.includes(item.id);
return (
<>
{
expand
? setExpand([...expands.filter((ex) => ex !== item.id)])
: setExpand([...expands, item.id]);
setSelected(item.id);
setTop(e.target.offsetTop);
}}
>
{item.name}
{item.id}
{expand && (
)}
>
);
})}
);
};
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: "فیلمها وعکس مربوط به حادثه",
},
],
};