diff --git a/src/App.js b/src/App.js index 4f0ca6c..b489690 100644 --- a/src/App.js +++ b/src/App.js @@ -57,6 +57,7 @@ import CardHolder from "./components/CardHolder"; import UploadFile from "./components/UploadFile"; import BarChartApex from "./components/BarChartApex"; import SemiDonut from "./components/SemiDonut"; +import FolderTree from "./components/FolderTree"; // import Digikala from "./components/Digikala/ImageSlider"; @@ -122,6 +123,8 @@ function App() { {/* */} {/* */} {/* */} + + ); diff --git a/src/components/FolderTree/images/arrow.svg b/src/components/FolderTree/images/arrow.svg new file mode 100644 index 0000000..e0e679c --- /dev/null +++ b/src/components/FolderTree/images/arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/FolderTree/images/folder.svg b/src/components/FolderTree/images/folder.svg new file mode 100644 index 0000000..0431a47 --- /dev/null +++ b/src/components/FolderTree/images/folder.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/FolderTree/images/selectedArrow.svg b/src/components/FolderTree/images/selectedArrow.svg new file mode 100644 index 0000000..5e155f5 --- /dev/null +++ b/src/components/FolderTree/images/selectedArrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/FolderTree/images/selectedFolder.svg b/src/components/FolderTree/images/selectedFolder.svg new file mode 100644 index 0000000..53a7e25 --- /dev/null +++ b/src/components/FolderTree/images/selectedFolder.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/FolderTree/index.js b/src/components/FolderTree/index.js new file mode 100644 index 0000000..9a164e5 --- /dev/null +++ b/src/components/FolderTree/index.js @@ -0,0 +1,91 @@ +import React, { useState } from "react"; + +import folder from "./images/folder.svg"; +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); + + return ( +
+ {items.map((item, index) => ( +
+ {/* level1 */} +
+ setActiveDropdown(activeDropdown === item ? null : item) + } + > + {/* روش اول */} + {/* {activeDropdown === item && } + {activeDropdown === null && } */} + {/* روش دوم */} + {activeDropdown === item ? ( + + ) : ( + + )} + {activeDropdown === item ? ( + + ) : ( + + )} + {/* {activeDropdown === null && } + {activeDropdown === item && } */} + + {item.name} + +
+ {item.menuItems.map((menuItem, i) => ( +
+ + + + {menuItem.title} + +
+ ))} +
+ ))} +
+ ); +}; + +export default FolderTree; + +FolderTree.defaultProps = { + items: [ + { + name: "فیلم‌ها وعکس مربوط به حادثه", + menuItems: [ + { title: "فایل‌های مربوط به پارسال" }, + { title: "اخبار و گزارشات سال 1399" }, + { title: "فایل‌های مربوط به پارسال" }, + ], + }, + { + name: "فرایند‌های بازرسی", + menuItems: [], + }, + { + name: "صوت جلسات استاد براتی", + menuItems: [], + }, + { + name: "رویشه اصلی سایت", + menuItems: [], + }, + { + name: "فرایند‌های بازرسی", + menuItems: [], + }, + ], +};