|
|
|
@ -6,169 +6,146 @@ import selectedFolder from "./images/selectedFolder.svg"; |
|
|
|
|
import arrow from "./images/arrow.svg"; |
|
|
|
|
import selectedArrow from "./images/selectedArrow.svg"; |
|
|
|
|
|
|
|
|
|
const FolderTree = ({ items }) => { |
|
|
|
|
const [activeDropdown, setActiveDropdown] = useState(null); |
|
|
|
|
|
|
|
|
|
const FolderState = ({ items }) => { |
|
|
|
|
let [selected, setSelected] = useState(1); |
|
|
|
|
let [top, setTop] = useState(1); |
|
|
|
|
return ( |
|
|
|
|
<div className="w-fit p-4"> |
|
|
|
|
{items.map((item, index) => ( |
|
|
|
|
<div> |
|
|
|
|
{/* level1 */} |
|
|
|
|
<div |
|
|
|
|
key={index} |
|
|
|
|
className="flex flex-row items-center mb-2 cursor-pointer" |
|
|
|
|
onClick={() => |
|
|
|
|
setActiveDropdown(activeDropdown === item ? null : item) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
{/* روش اول */} |
|
|
|
|
{/* {activeDropdown === item && <img src={item.normalArrow} />} |
|
|
|
|
{activeDropdown === null && <img src={item.icon} />} */} |
|
|
|
|
{/* روش دوم */} |
|
|
|
|
{activeDropdown === item ? ( |
|
|
|
|
<img |
|
|
|
|
src={selectedArrow} |
|
|
|
|
className="-rotate-90 transition-all duration-700" |
|
|
|
|
/> |
|
|
|
|
) : ( |
|
|
|
|
<img src={arrow} className=" transition-all duration-700" /> |
|
|
|
|
)} |
|
|
|
|
{activeDropdown === item ? ( |
|
|
|
|
<img |
|
|
|
|
src={selectedFolder} |
|
|
|
|
className=" transition-all duration-700" |
|
|
|
|
/> |
|
|
|
|
) : ( |
|
|
|
|
<img src={folder} className=" transition-all duration-700" /> |
|
|
|
|
)} |
|
|
|
|
<span className="text-sm mr-2" style={{ color: "#00253A" }}> |
|
|
|
|
{item.name} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
{activeDropdown === item && |
|
|
|
|
item.menuItems.map((menuItem, i) => ( |
|
|
|
|
<> |
|
|
|
|
<div |
|
|
|
|
className={`z-0 absolute w-3/12 right-0 py-2 bg-blue-100 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={i} |
|
|
|
|
className="flex flex-row items-center mb-2 cursor-pointer mr-5" |
|
|
|
|
// onClick={() =>
|
|
|
|
|
// setActiveDropdown(
|
|
|
|
|
// activeDropdown === menuItem ? null : menuItem
|
|
|
|
|
// )
|
|
|
|
|
// }
|
|
|
|
|
key={index} |
|
|
|
|
className={ |
|
|
|
|
"flex flex-row items-center cursor-pointer py-1 " |
|
|
|
|
// + (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); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{activeDropdown === menuItem ? ( |
|
|
|
|
<img |
|
|
|
|
src={selectedArrow} |
|
|
|
|
className="-rotate-90 transition-all duration-700" |
|
|
|
|
/> |
|
|
|
|
) : ( |
|
|
|
|
<img src={arrow} className=" transition-all duration-700" /> |
|
|
|
|
)} |
|
|
|
|
{activeDropdown === menuItem ? ( |
|
|
|
|
<img |
|
|
|
|
src={selectedFolder} |
|
|
|
|
className=" transition-all duration-700" |
|
|
|
|
/> |
|
|
|
|
) : ( |
|
|
|
|
<img src={folder} className=" transition-all duration-700" /> |
|
|
|
|
)} |
|
|
|
|
<span className="text-sm mr-2" style={{ color: "#00253A" }}> |
|
|
|
|
{menuItem.title} |
|
|
|
|
<img |
|
|
|
|
alt="" |
|
|
|
|
src={expand ? selectedArrow : arrow} |
|
|
|
|
className={ |
|
|
|
|
"z-10 transition-all duration-700 " + |
|
|
|
|
(expand ? "-rotate-90" : "") |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
<img |
|
|
|
|
alt="" |
|
|
|
|
src={expand ? selectedFolder : selectedFolder} |
|
|
|
|
className="z-10 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> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
{expand && ( |
|
|
|
|
<FolderTree |
|
|
|
|
items={items} |
|
|
|
|
pid={item.id} |
|
|
|
|
selected={selected} |
|
|
|
|
setTop={setTop} |
|
|
|
|
setSelected={setSelected} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
// item.menuItem.menuSubItems.map((menuSubItem, j) => (
|
|
|
|
|
// <div
|
|
|
|
|
// key={j}
|
|
|
|
|
// className="flex flex-row items-center mb-2 cursor-pointer mr-5"
|
|
|
|
|
// >
|
|
|
|
|
// <img src={arrow} />
|
|
|
|
|
// <img src={folder} />
|
|
|
|
|
// <span className="text-sm mr-2" style={{ color: "#00253A" }}>
|
|
|
|
|
// {menuSubItem.subTitle}
|
|
|
|
|
// </span>
|
|
|
|
|
// </div>
|
|
|
|
|
// ));
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
export default FolderTree; |
|
|
|
|
|
|
|
|
|
FolderTree.defaultProps = { |
|
|
|
|
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: "فیلمها وعکس مربوط به حادثه", |
|
|
|
|
menuItems: [ |
|
|
|
|
{ |
|
|
|
|
title: "فایلهای مربوط به پارسال", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "اخبار و گزارشات سال 1399", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "فایلهای مربوط به پارسال", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 8, |
|
|
|
|
pid: 7, |
|
|
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
|
|
menuItems: [ |
|
|
|
|
{ |
|
|
|
|
title: "فایلهای مربوط به پارسال", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "اخبار و گزارشات سال 1399", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "فایلهای مربوط به پارسال", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 9, |
|
|
|
|
pid: 8, |
|
|
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
|
|
menuItems: [ |
|
|
|
|
{ |
|
|
|
|
title: "فایلهای مربوط به پارسال", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "اخبار و گزارشات سال 1399", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "فایلهای مربوط به پارسال", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 10, |
|
|
|
|
pid: 2, |
|
|
|
|
name: "فیلمها وعکس مربوط به حادثه", |
|
|
|
|
menuItems: [ |
|
|
|
|
{ |
|
|
|
|
title: "فایلهای مربوط به پارسال", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "اخبار و گزارشات سال 1399", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "فایلهای مربوط به پارسال", |
|
|
|
|
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|