mostly works, need to clean things up

Author: hoorayimhelping

src/components/DatePicker/DateRangePicker.stories.tsx

@@ -20,6 +20,9 @@ const defaultStory = {
     placeholder: {
       control: "text",
     },
+    predefinedDatesCount: {
+      control: "number",
+    },
     onSelectDateRange: {
       control: "object",
     },
@@ -28,13 +31,18 @@ const defaultStory = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
+    const predefinedDatesCount = args.predefinedDatesCount
+      ? args.predefinedDatesCount
+      : undefined;
+
     return (
       <DateRangePicker
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
         onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
+        predefinedDatesCount={predefinedDatesCount}
         startDate={startDate}
       />
     );
@@ -45,6 +53,30 @@ const defaultStory = {
 
 export default defaultStory;
 
+// export const PredefinedRanges = {
+//   args: {
+//     ...defaultStory.args
+//   },
+//   render: (args: Args) => {
+//     const endDate = args.endDate ? new Date(args.endDate) : undefined;
+//     const startDate = args.startDate ? new Date(args.startDate) : undefined;
+
+//     console.log('predefined dates story', args.predefinedDatesCount)
+//     return (
+//       <DateRangePicker
+//         endDate={endDate}
+//         disabled={args.disabled}
+//         futureDatesDisabled={args.futureDatesDisabled}
+//         onSelectDateRange={args.onSelectDateRange}
+//         placeholder={args.placeholder}
+//         predefinedDatesCount={6}
+//         startDate={startDate}
+//       />
+//     );
+//   },
+//   title: "Display/DateRangePickerPredefinedDates"
+// };
+
 export const Playground = {
   ...defaultStory,
 };

src/components/DatePicker/DateRangePicker.tsx

@@ -1,8 +1,19 @@
-import { useCallback, useEffect, useState } from "react";
+import {
+  Dispatch,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { isSameDate, UseCalendarOptions } from "@h6s/calendar";
 import { styled } from "styled-components";
 import Dropdown from "../Dropdown/Dropdown";
 import { Body, CalendarRenderer, DateRangePickerInput, DateTableCell } from "./Common";
+import { Container } from "../Container/Container";
+import dayjs from "dayjs";
+import { Panel } from "../Panel/Panel";
+import { Icon } from "../Icon/Icon";
 
 const DateRangeTableCell = styled(DateTableCell)<{
   $shouldShowRangeIndicator?: boolean;
@@ -16,6 +27,14 @@ const DateRangeTableCell = styled(DateTableCell)<{
     `}
 `;
 
+const PredefinedDatesContainer = styled(Container)`
+  width: 275px;
+`;
+
+const StyledDropdownItem = styled(Dropdown.Item)`
+  min-height: 24px;
+`;
+
 interface CalendarProps {
   calendarBody: Body;
   closeDatepicker: () => void;
@@ -91,7 +110,7 @@ const Calendar = ({
           return (
             <DateRangeTableCell
               $shouldShowRangeIndicator={
-                shouldShowRangeIndicator || isBetweenStartAndEndDates
+                !isSelected && (shouldShowRangeIndicator || isBetweenStartAndEndDates)
               }
               $isCurrentMonth={isCurrentMonth}
               $isDisabled={isDisabled}
@@ -111,12 +130,108 @@ const Calendar = ({
   });
 };
 
-export interface DatePickerProps {
+const locale = "en-US";
+const monthFormatter = new Intl.DateTimeFormat(locale, {
+  month: "short",
+  year: "numeric",
+});
+
+interface DateRange {
+  startDate: Date;
+  endDate: Date;
+}
+
+const getLastMonths = (numberOfMonths: number = 6): Array<DateRange> => {
+  const now = dayjs();
+
+  const lastSixMonths: Array<DateRange> = [];
+  for (let i = 0; i < numberOfMonths; i++) {
+    const date = now.subtract(i, "month");
+    lastSixMonths.push({
+      startDate: date.startOf("month").toDate(),
+      endDate: i === 0 ? now.toDate() : date.endOf("month").toDate(),
+    });
+  }
+
+  return lastSixMonths;
+};
+
+interface PredefinedDatesProps {
+  onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
+  predefinedDatesCount: number;
+  selectedEndDate: Date | undefined;
+  selectedStartDate: Date | undefined;
+  setEndDate: Dispatch<SetStateAction<Date | undefined>>;
+  setStartDate: Dispatch<SetStateAction<Date | undefined>>;
+  shouldShowCustomRange: boolean;
+  showCustomDateRange: Dispatch<SetStateAction<boolean>>;
+}
+
+const PredefinedDates = ({
+  onSelectDateRange,
+  predefinedDatesCount,
+  selectedEndDate,
+  selectedStartDate,
+  setEndDate,
+  setStartDate,
+  shouldShowCustomRange,
+  showCustomDateRange,
+}: PredefinedDatesProps) => {
+  const pastSixMonths = getLastMonths(predefinedDatesCount);
+
+  const handleCustomTimePeriodClick = (event: MouseEvent) => {
+    event.preventDefault();
+    showCustomDateRange(!shouldShowCustomRange);
+  };
+
+  return (
+    <PredefinedDatesContainer
+      isResponsive={false}
+      orientation="vertical"
+    >
+      {pastSixMonths.map(({ startDate, endDate }) => {
+        const handleItemClick = () => {
+          setStartDate(startDate);
+          setEndDate(endDate);
+          onSelectDateRange(startDate, endDate);
+        };
+        return (
+          <StyledDropdownItem
+            key={startDate.toISOString()}
+            onClick={handleItemClick}
+          >
+            <Container
+              justifyContent="space-between"
+              orientation="horizontal"
+            >
+              {monthFormatter.format(startDate)}
+              {selectedEndDate &&
+                isSameDate(selectedEndDate, endDate) &&
+                selectedStartDate &&
+                isSameDate(selectedStartDate, startDate) && <Icon name="check" />}
+            </Container>
+          </StyledDropdownItem>
+        );
+      })}
+      <StyledDropdownItem onClick={handleCustomTimePeriodClick}>
+        <Container
+          justifyContent="space-between"
+          orientation="horizontal"
+        >
+          Custom time period <Icon name="chevron-right" />
+        </Container>
+      </StyledDropdownItem>
+    </PredefinedDatesContainer>
+  );
+};
+
+export interface DateRangePickerProps {
   endDate?: Date;
   disabled?: boolean;
   futureDatesDisabled?: boolean;
   onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
   placeholder?: string;
+  predefinedDatesCount?: number;
   startDate?: Date;
 }
 
@@ -127,10 +242,12 @@ export const DateRangePicker = ({
   futureDatesDisabled = false,
   onSelectDateRange,
   placeholder = "start date – end date",
-}: DatePickerProps) => {
+  predefinedDatesCount,
+}: DateRangePickerProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selectedStartDate, setSelectedStartDate] = useState<Date>();
   const [selectedEndDate, setSelectedEndDate] = useState<Date>();
+  const [shouldShowCustomRange, setShouldShowCustomRange] = useState<boolean>(false);
 
   const calendarOptions: UseCalendarOptions = {};
 
@@ -153,8 +270,17 @@ export const DateRangePicker = ({
 
   const closeDatePicker = useCallback((): void => {
     setIsOpen(false);
+    setShouldShowCustomRange(false);
   }, []);
 
+  const handleOpenChange = (isOpen: boolean): void => {
+    setIsOpen(isOpen);
+
+    if (!isOpen) {
+      setShouldShowCustomRange(false);
+    }
+  };
+
   const handleSelectDate = useCallback(
     (selectedDate: Date): void => {
       // Start date and end date are selected, user clicks any date.
@@ -183,6 +309,7 @@ export const DateRangePicker = ({
         // Otherwise, set the end date to the date the user clicked.
         setSelectedEndDate(selectedDate);
         onSelectDateRange(selectedStartDate, selectedDate);
+        setShouldShowCustomRange(false);
         return;
       }
 
@@ -193,7 +320,7 @@ export const DateRangePicker = ({
 
   return (
     <Dropdown
-      onOpenChange={setIsOpen}
+      onOpenChange={handleOpenChange}
       open={isOpen}
     >
       <Dropdown.Trigger disabled={disabled}>
@@ -207,18 +334,51 @@ export const DateRangePicker = ({
         />
       </Dropdown.Trigger>
       <Dropdown.Content align="start">
-        <CalendarRenderer calendarOptions={calendarOptions}>
-          {body => (
-            <Calendar
-              calendarBody={body}
-              closeDatepicker={closeDatePicker}
-              futureDatesDisabled={futureDatesDisabled}
-              setSelectedDate={handleSelectDate}
-              startDate={selectedStartDate}
-              endDate={selectedEndDate}
+        {predefinedDatesCount !== undefined && predefinedDatesCount > 0 ? (
+          <Panel
+            orientation="horizontal"
+            padding="none"
+          >
+            <PredefinedDates
+              onSelectDateRange={onSelectDateRange}
+              predefinedDatesCount={Math.min(6, predefinedDatesCount)}
+              selectedEndDate={selectedEndDate}
+              selectedStartDate={selectedStartDate}
+              setEndDate={setSelectedEndDate}
+              setStartDate={setSelectedStartDate}
+              shouldShowCustomRange={shouldShowCustomRange}
+              showCustomDateRange={setShouldShowCustomRange}
             />
-          )}
-        </CalendarRenderer>
+
+            {shouldShowCustomRange && (
+              <CalendarRenderer calendarOptions={calendarOptions}>
+                {body => (
+                  <Calendar
+                    calendarBody={body}
+                    closeDatepicker={closeDatePicker}
+                    futureDatesDisabled={futureDatesDisabled}
+                    setSelectedDate={handleSelectDate}
+                    startDate={selectedStartDate}
+                    endDate={selectedEndDate}
+                  />
+                )}
+              </CalendarRenderer>
+            )}
+          </Panel>
+        ) : (
+          <CalendarRenderer calendarOptions={calendarOptions}>
+            {body => (
+              <Calendar
+                calendarBody={body}
+                closeDatepicker={closeDatePicker}
+                futureDatesDisabled={futureDatesDisabled}
+                setSelectedDate={handleSelectDate}
+                startDate={selectedStartDate}
+                endDate={selectedEndDate}
+              />
+            )}
+          </CalendarRenderer>
+        )}
       </Dropdown.Content>
     </Dropdown>
   );