master
mahdi andalib 3 years ago
parent 032291db96
commit e0302c3e24
  1. 137
      src/components/FolderTree/index.js

@ -26,32 +26,72 @@ const FolderTree = ({ items }) => {
{activeDropdown === null && <img src={item.icon} />} */} {activeDropdown === null && <img src={item.icon} />} */}
{/* روش دوم */} {/* روش دوم */}
{activeDropdown === item ? ( {activeDropdown === item ? (
<img src={selectedArrow} className="-rotate-90" /> <img
src={selectedArrow}
className="-rotate-90 transition-all duration-700"
/>
) : ( ) : (
<img src={arrow} /> <img src={arrow} className=" transition-all duration-700" />
)} )}
{activeDropdown === item ? ( {activeDropdown === item ? (
<img src={selectedFolder} /> <img
src={selectedFolder}
className=" transition-all duration-700"
/>
) : ( ) : (
<img src={folder} /> <img src={folder} className=" transition-all duration-700" />
)} )}
{/* {activeDropdown === null && <img src={folder} />}
{activeDropdown === item && <img src={selectedFolder} />} */}
<span className="text-sm mr-2" style={{ color: "#00253A" }}> <span className="text-sm mr-2" style={{ color: "#00253A" }}>
{item.name} {item.name}
</span> </span>
</div> </div>
{item.menuItems.map((menuItem, i) => ( {activeDropdown === item &&
item.menuItems.map((menuItem, i) => (
<div>
<button
onClick={() =>
setActiveDropdown(
activeDropdown === menuItem ? null : menuItem
)
}
className="transform translate-x-10"
>
mahdi
</button>
<div <div
key={i} key={i}
className="flex flex-row items-center mb-2 cursor-pointer mr-5" className="flex flex-row items-center mb-2 cursor-pointer mr-5"
// onClick={() =>
// setActiveDropdown(
// activeDropdown === menuItem ? null : menuItem
// )
// }
> >
<img src={arrow} /> {activeDropdown === menuItem ? (
<img src={folder} /> <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" }}> <span className="text-sm mr-2" style={{ color: "#00253A" }}>
{menuItem.title} {menuItem.title}
</span> </span>
</div> </div>
</div>
))} ))}
</div> </div>
))} ))}
@ -59,6 +99,19 @@ const FolderTree = ({ items }) => {
); );
}; };
// {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; export default FolderTree;
FolderTree.defaultProps = { FolderTree.defaultProps = {
@ -66,26 +119,70 @@ FolderTree.defaultProps = {
{ {
name: "فیلمها وعکس مربوط به حادثه", name: "فیلمها وعکس مربوط به حادثه",
menuItems: [ menuItems: [
{ title: "فایلهای مربوط به پارسال" }, {
{ title: "اخبار و گزارشات سال 1399" }, title: "فایلهای مربوط به پارسال",
{ title: "فایلهای مربوط به پارسال" }, menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
{
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
], ],
}, },
{ {
name: "فرایندهای بازرسی", name: "فیلمها وعکس مربوط به حادثه",
menuItems: [], menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
}, },
{ {
name: "صوت جلسات استاد براتی", title: "اخبار و گزارشات سال 1399",
menuItems: [], menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
}, },
{ {
name: "رویشه اصلی سایت", title: "فایلهای مربوط به پارسال",
menuItems: [], menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
{
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
}, },
{ {
name: "فرایندهای بازرسی", title: "فایلهای مربوط به پارسال",
menuItems: [], menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
}, },
], ],
}; };

Loading…
Cancel
Save