build(deps): update App.js, src/components/PopupCard/index.js, src/components/SelectYear/index.js and yarn.lock

src/App.js

@@ -97,17 +97,17 @@ function App() {
         {/* <Testttt /> */}
         {/* <Design2D /> */}
         {/* <Features /> */}
-        <Feedback />
+        {/* <Feedback /> */}
         {/* <Alert /> */}
         {/* <Toast /> */}
-        <ProductSuggestion />
+        {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
-        <ProductTab />
+        {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
-        <CourseChapter />
+        {/* <CourseChapter /> */}
         {/* <SidebarMenu /> */}
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
@@ -130,7 +130,7 @@ function App() {
         </div> */}
         {/* <BreadCrumb /> */}
         {/* <SearchBox /> */}
-        {/* <FileManager /> */}
+        <FileManager />
         {/* <TitleSubtitle /> */}
         {/* <Playlist /> */}
         {/* <Folderlists /> */}
@@ -143,10 +143,10 @@ function App() {
         {/* <CancleIcon /> */}
         {/* <ProfilePicNextToEachOther /> */}
         {/* <SemiDonut /> */}
-        <FolderTree />
+        {/* <FolderTree /> */}
         {/* <GridListTable /> */}
-        {/* <PopupCard /> */}
-        <TimeLine />
+        <PopupCard />
+        {/* <TimeLine /> */}
         {/* <TimeLineComponent /> */}
         <SelectYear />
         {/* <IndianaDragScroll /> */}

src/components/PopupCard/index.js

@@ -18,10 +18,6 @@ const PopupCard = ({ selectedChecklist }) => {
 
   return (
     <section className="">
-      <p>
-        به دایره های ابی وقتی که پاپ اپ باز میشود لطفا نگاه نکنید مربوط به تسک
-        بعدی است
-      </p>
       <button
         className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         type="button"
@@ -66,11 +62,11 @@ const PopupCard = ({ selectedChecklist }) => {
                       name="start"
                       type="text"
                       className="w-full border-2 border-blue-400 rounded-md text-sm h-12
-                    focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
+                      focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
                       placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
                     />
                   </div>
-                </div>{" "}
+                </div>
               </div>
               {/* divider */}
               <div className="border border-[#DBDBDB77] rounded my-5"></div>

src/components/SelectYear/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import ScrollContainer from "react-indiana-drag-scroll";
 
 import "./index.scss";
@@ -9,15 +9,31 @@ import Month from "./Month.js";
 
 const SelectYear = ({ items }) => {
   const [selectedYear, setSelectedYear] = useState(null);
+  const yearEl = useRef(null);
+const h = 40
+  const up = () => {
+    if (yearEl.current) yearEl.current.scrollTop -= h;
+  };
+  const down = () => {
+    if (yearEl.current) yearEl.current.scrollTop += h;
+  };
+  const scrollTo = (index)=>{
+    yearEl.current.scrollTop = (index-1)*h
+  }
 
   return (
     <section className="flex flex-row items-center mx-auto w-8/12 my-20">
       <div className="flex flex-col items-center">
-        <img src={arrowUp} />
-        {console.log(window.scrollY)}
-        <ScrollContainer ignoreElements={"#not-work-drag"} className="">
-          <div
-className="transition ease-in-out delay-500"            id="not-work-drag"
+        <img src={arrowUp} onClick={up} />
+
+        <div
+          ignoreElements={"#not-work-drag"}
+          className={`overflow-y-hidden	 transition-all ease-in-out delay-150 scroll-smooth h-[${3*h}px] mb-2`}
+          ref={yearEl}
+        >
+          {/* <div
+            className="transition ease-in-out delay-500"
+            id="not-work-drag"
             style={{
               height: "100%",
               position: "absolute",
@@ -26,13 +42,16 @@ className="transition ease-in-out delay-500"            id="not-work-drag"
               justifyContent: "space-between",
               left: "12%",
             }}
-          >          
-          </div>
-          <div className="flex flex-col h-28 " style={{}}>
+          ></div> */}
+          <div className="flex flex-col h-28 ">
             {items.map((item, index) => (
               <p
+                id={item.id}
+               // href={`#${item.id}`}
                 onClick={() => {
+                  scrollTo(index)
                   setSelectedYear(item);
+                  // if(index<items.length-2) setTimeout(up, 1);
                 }}
                 key={index}
                 className={`text-base my-2  cursor-pointer text-center transition ease-in-out delay-150 ${
@@ -45,12 +64,12 @@ className="transition ease-in-out delay-500"            id="not-work-drag"
               </p>
             ))}
           </div>
-        </ScrollContainer>
-        <img src={arrowDown} />
+        </div>
+        <img src={arrowDown} onClick={down}  />
       </div>
       <div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
       <div className={`flex flex-col items-center`}>
-      <Month />
+        <Month />
       </div>
     </section>
   );
@@ -61,24 +80,44 @@ export default SelectYear;
 SelectYear.defaultProps = {
   items: [
     {
-      year: "1400"},
+      id: 1,
+      year: "1400",
+    },
     {
-      year: "1399"},
+      id: 2,
+      year: "1399",
+    },
     {
-      year: "1398"},
+      id: 3,
+      year: "1398",
+    },
     {
-      year: "1397"},
+      id: 4,
+      year: "1397",
+    },
     {
-      year: "1396"},
+      id: 5,
+      year: "1396",
+    },
     {
-      year: "1400"},
+      id: 6,
+      year: "1400",
+    },
     {
-      year: "1399"},
+      id: 7,
+      year: "1399",
+    },
     {
-      year: "1398"},
+      id: 8,
+      year: "1398",
+    },
     {
-      year: "1397"},
+      id: 9,
+      year: "1397",
+    },
     {
-      year: "1396"},
+      id: 10,
+      year: "1396",
+    },
   ],
 };