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