Add conditional looking

Author: poshiemaaat

pages/index.js

@@ -1,6 +1,6 @@
 import Datepicker from "../src";
 import { useState } from "react";
-import { COLORS } from "../src/constants";
+import { COLORS, DATE_LOOKING_OPTIONS } from "../src/constants";
 import dayjs from "dayjs";
 import Head from "next/head";
 
@@ -25,6 +25,7 @@ export default function Playground() {
     const [readOnly, setReadOnly] = useState(false);
     const [minDate, setMinDate] = useState("");
     const [maxDate, setMaxDate] = useState("");
+    const [dateLooking, setDateLooking] = useState(true);
     const [disabledDates, setDisabledDates] = useState([]);
     const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
     const [startFrom, setStartFrom] = useState("2023-03-01");
@@ -104,6 +105,7 @@ export default function Playground() {
                     readOnly={readOnly}
                     minDate={minDate}
                     maxDate={maxDate}
+                    dateLooking={dateLooking}
                     disabledDates={disabledDates}
                     startWeekOn={startWeekOn}
                     toggleIcon={isEmpty => {
@@ -298,6 +300,25 @@ export default function Playground() {
                             }}
                         />
                     </div>
+                    <div className="mb-2">
+                        <label className="block" htmlFor="dateLooking">
+                            Date Looking
+                        </label>
+                        <select
+                            className="rounded block w-full border-gray-200 border px-4 py-2"
+                            id="dateLooking"
+                            value={dateLooking}
+                            onChange={e => {
+                                setDateLooking(e.target.value);
+                            }}
+                        >
+                            {DATE_LOOKING_OPTIONS.map((option, i) => (
+                                <option key={i} value={option}>
+                                    {option}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
                 </div>
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">
                     <div className="mb-2">

src/components/Calendar/Years.tsx

@@ -1,8 +1,10 @@
-import React from "react";
+import React, { useContext } from "react";
 
 import { generateArrayNumber } from "../../helpers";
 import { RoundedButton } from "../utils";
 
+import DatepickerContext from "contexts/DatepickerContext";
+
 interface Props {
     year: number;
     minYear: number | null;
@@ -11,9 +13,30 @@ interface Props {
 }
 
 const Years: React.FC<Props> = ({ year, minYear, maxYear, clickYear }) => {
+    const { dateLooking } = useContext(DatepickerContext);
+
+    let startDate = 0;
+    let endDate = 0;
+
+    switch (dateLooking) {
+        case "backward":
+            startDate = year - 11;
+            endDate = year;
+            break;
+        case "middle":
+            startDate = year - 4;
+            endDate = year + 7;
+            break;
+        case "forward":
+        default:
+            startDate = year;
+            endDate = year + 11;
+            break;
+    }
+
     return (
         <div className="w-full grid grid-cols-2 gap-2 mt-2">
-            {generateArrayNumber(year, year + 11).map((item, index) => (
+            {generateArrayNumber(startDate, endDate).map((item, index) => (
                 <RoundedButton
                     key={index}
                     padding="py-3"

src/components/Datepicker.tsx

@@ -35,6 +35,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     readOnly = false,
     minDate = null,
     maxDate = null,
+    dateLooking = "forward",
     disabledDates = null,
     inputId,
     inputName,
@@ -261,6 +262,7 @@ const Datepicker: React.FC<DatepickerType> = ({
             displayFormat,
             minDate,
             maxDate,
+            dateLooking,
             disabledDates,
             inputId,
             inputName,
@@ -293,6 +295,7 @@ const Datepicker: React.FC<DatepickerType> = ({
         displayFormat,
         minDate,
         maxDate,
+        dateLooking,
         disabledDates,
         inputId,
         inputName,

src/constants/index.ts

@@ -29,6 +29,8 @@ export const DATE_FORMAT = "YYYY-MM-DD";
 
 export const START_WEEK = "sun";
 
+export const DATE_LOOKING_OPTIONS = ["forward", "backward", "middle"];
+
 export const DAYS = [0, 1, 2, 3, 4, 5, 6];
 
 export const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

src/contexts/DatepickerContext.ts

@@ -44,6 +44,7 @@ interface DatepickerStore {
     displayFormat: string;
     minDate?: DateType | null;
     maxDate?: DateType | null;
+    dateLooking?: "forward" | "backward" | "middle";
     disabledDates?: DateRangeType[] | null;
     inputId?: string;
     inputName?: string;
@@ -83,6 +84,7 @@ const DatepickerContext = createContext<DatepickerStore>({
     displayFormat: DATE_FORMAT,
     minDate: null,
     maxDate: null,
+    dateLooking: "forward",
     disabledDates: null,
     inputId: undefined,
     inputName: undefined,

src/types/index.ts

@@ -75,6 +75,7 @@ export interface DatepickerType {
     readOnly?: boolean;
     minDate?: Date | null;
     maxDate?: Date | null;
+    dateLooking?: "forward" | "backward" | "middle";
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
     popoverDirection?: PopoverDirectionType;