feat: can change year when you want to change the month

samsam-ahmadi · May 7, 2022 · ee53c38 · ee53c38
1 parent 6d20869
commit ee53c38
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-trip-date",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "date-picker and range-picker for React applications",
   "author": "Samsam Ahmadi",
   "license": "GPL-3.0",

diff --git a/src/components/DisplayMonths.tsx b/src/components/DisplayMonths.tsx
@@ -57,10 +57,11 @@ const Wrapper = styled.div<StyleProps>`
     justify-content: center;
     text-align: center;
     display: flex;
-    background-color: ${({ theme }) => theme.primary.main};
     align-items: center;
     cursor: pointer;
     border: 2px solid #fff;
+    background-color: ${({ theme }) => theme.primary.main};
+    border-radius: ${({ theme }) => theme.shape.borderRadius}px;
     p {
       color: #fff;
     }

diff --git a/src/components/DisplayYears.tsx b/src/components/DisplayYears.tsx
@@ -0,0 +1,58 @@
+import styled from "styled-components";
+import dayjs, { Dayjs } from "dayjs";
+import { Dispatch, SetStateAction } from "react";
+import { useOnClickOutside } from "libs/useClickOutside";
+
+type Props = {
+  setSource: Dispatch<SetStateAction<Dayjs>>;
+  setDisplayYears: Dispatch<SetStateAction<boolean>>;
+};
+
+export const DisplayYears = ({ setDisplayYears, setSource }: Props) => {
+  const years = [];
+  const { ref } = useOnClickOutside(() => setDisplayYears(prev => !prev));
+  for (let i = 0; i < 120; i++) {
+    years.push(
+      <p
+        key={i}
+        onClick={() => {
+          setSource(pre =>
+            pre.set("year", Number(dayjs().subtract(i, "year").format("YYYY"))),
+          );
+          setDisplayYears(prev => !prev);
+        }}
+      >
+        {dayjs().subtract(i, "year").format("YYYY")}
+      </p>,
+    );
+  }
+
+  return <Wrapper ref={ref}> {years} </Wrapper>;
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 80px;
+  height: 40vh;
+  background: #fff;
+  overflow: auto;
+  padding: 10px 0px;
+  border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  > p {
+    display: block;
+    margin: 0;
+    padding: 6px 0;
+    text-align: center;
+    width: 100% !important;
+    color: ${({ theme }) => theme.grey[900]} !important;
+    :hover {
+      background-color: ${({ theme }) => theme.primary.light};
+    }
+  }
+`;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,10 +1,11 @@
 import styled from "styled-components";
 import { Dayjs } from "dayjs";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { InitialComponents } from "constant";
 
 import { ReactComponent as ArrowLeft } from "../assets/chevron-left.svg";
 import { ReactComponent as ArrowRight } from "../assets/chevron-right.svg";
+import { DisplayYears } from "./DisplayYears";
 
 type Props = {
   displayMonths: boolean;
@@ -25,6 +26,8 @@ export const Header = ({
   numberOfMonths,
   setDisplayMonths,
 }: Props) => {
+  const [displayYears, setDisplayYears] = useState(false);
+
   const prev = () => {
     if (displayMonths) {
       setSource(source.subtract(1, "year"));
@@ -46,15 +49,29 @@ export const Header = ({
 
     if (displayMonths) {
       return (
-        <p key={Math.random()} onClick={() => setDisplayMonths(prev => !prev)}>
-          {source.format(
-            components?.header?.format
-              ? components?.header?.format
-              : displayMonths
-              ? "YYYY"
-              : "YYYY-MMMM",
+        <>
+          <p
+            onClick={() =>
+              displayMonths
+                ? setDisplayYears(prev => !prev)
+                : setDisplayMonths(prev => !prev)
+            }
+          >
+            {source.format(
+              components?.header?.format
+                ? components?.header?.format
+                : displayMonths
+                ? "YYYY"
+                : "YYYY-MMMM",
+            )}
+          </p>
+          {displayYears && (
+            <DisplayYears
+              setDisplayYears={setDisplayYears}
+              setSource={setSource}
+            />
           )}
-        </p>
+        </>
       );
     }
 
@@ -63,13 +80,13 @@ export const Header = ({
         source = source.add(1, "day");
       }
       titles.push(
-        <p key={Math.random()} onClick={() => setDisplayMonths(prev => !prev)}>
+        <p key={i} onClick={() => setDisplayMonths(prev => !prev)}>
           {source
             .add(i, "month")
             .format(
               components?.header?.format
                 ? components?.header?.format
-                : "YYYY-MMMM",
+                : "YYYY MMMM",
             )}
         </p>,
       );
@@ -146,13 +163,16 @@ const Wrapper = styled.div<WrapperProps>`
   position: relative;
   background-color: ${({ theme }) => theme.primary.main};
   flex-direction: ${({ jalali }) => (jalali ? "row-reverse" : "row")};
+  border-radius: ${({ theme }) => theme.shape.borderRadius}px;
   p {
     color: #fff;
     text-align: center;
     cursor: pointer;
+    border-radius: ${({ theme }) => theme.shape.borderRadius}px;
     direction: ${({ jalali }) => (jalali ? "ltr" : "rtl")};
     width: ${({ numberOfMonths, displayMonths }) =>
-      displayMonths ? "100%" : `${100 / numberOfMonths}% `};
+      displayMonths ? "120px" : `${100 / numberOfMonths}% `};
+    margin: auto;
   }
   .action {
     position: absolute;

diff --git a/src/constant/theme.ts b/src/constant/theme.ts
@@ -14,6 +14,9 @@ export const theme = {
   text: {
     disabled: "#BABABA",
   },
+  shape: {
+    borderRadius: 4,
+  },
 };
 
 export interface Theme {
@@ -32,4 +35,7 @@ export interface Theme {
   text: {
     disabled: string;
   };
+  shape: {
+    borderRadius: number;
+  };
 }
diff --git a/src/libs/useClickOutside.ts b/src/libs/useClickOutside.ts
@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react";
+
+type Event = MouseEvent | TouchEvent;
+
+export const useOnClickOutside = (handler: (event: Event) => void) => {
+  const ref = useRef<any>();
+
+  useEffect(() => {
+    const listener = (event: Event) => {
+      const el = ref?.current;
+      if (!el || el.contains((event?.target as Node) || null)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+
+  return { ref };
+};