Skip to content

Commit

Permalink
feat: replace datepicker (#48)
Browse files Browse the repository at this point in the history 
* feat: replace datepicker

* chore: remove react-datepicker

* style: change date format to decrease length
  • Loading branch information
@KevinWu098
KevinWu098 authored Apr 3, 2024
1 parent 5d84f77 commit 65eb6fa
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 115 deletions.
95 changes: 75 additions & 20 deletions components/search/FilterComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,18 @@
import React, { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
import { FaCheck, FaChevronDown } from "react-icons/fa";
import { CollegeObject } from "./Search";
import DatePicker from "react-datepicker";
import { format } from "date-fns";

import "react-datepicker/dist/react-datepicker.css";
import { Calendar } from "@/components/ui/calendar";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";

import { Button } from "../ui/button";
import { CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";

interface FilterCheckboxProps {
title: string;
Expand Down Expand Up @@ -70,19 +79,24 @@ interface CalendarFilterProps {
export const CalendarFilter = (props: CalendarFilterProps) => {
const { onStartChange, onEndChange, defaultStart, defaultEnd } = props;

const [start, setStart] = useState(
const [startDate, setStartDate] = useState<Date | undefined>(
defaultStart ? new Date(defaultStart) : new Date(),
);
const [end, setEnd] = useState(defaultEnd);
const [endDate, setEndDate] = useState<Date | undefined>(defaultEnd);

const handleStartChange = (date: Date | undefined) => {
if (!date) {
console.error("No start date selected");
return;
}

const handleStartChange = (date: Date) => {
onStartChange(date);
setStart(date);
setStartDate(date);
};

const handleEndChange = (date: Date) => {
const handleEndChange = (date: Date | undefined) => {
onEndChange(date);
setEnd(date);
setEndDate(date);
};

return (
Expand All @@ -94,25 +108,66 @@ export const CalendarFilter = (props: CalendarFilterProps) => {
Starts After
</label>
<div className="flex flex-row items-center gap-2">
<DatePicker
selected={start}
onChange={handleStartChange}
onSelect={handleStartChange}
className="w-44 appearance-none rounded-lg border-[1px] border-gray px-4 py-2"
/>
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-44 justify-start rounded-lg border-[1px] border-gray text-left font-normal",
!startDate && "text-muted-foreground",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{startDate ? (
format(startDate, "PP")
) : (
<span>Start date</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={startDate}
onSelect={handleStartChange}
initialFocus
required
/>
</PopoverContent>
</Popover>
</div>
</div>
<div>
<label className="text-sm font-medium text-gray">
Ends Before
</label>
<div className="flex flex-row items-center gap-2">
<DatePicker
selected={end}
onChange={handleEndChange}
onSelect={handleEndChange}
className="w-44 appearance-none rounded-lg border-[1px] border-gray px-4 py-2"
/>
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-44 justify-start rounded-lg border-[1px] border-gray text-left font-normal",
!endDate && "text-muted-foreground",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{endDate ? (
format(endDate, "PP")
) : (
<span>End date</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={endDate}
onSelect={handleEndChange}
initialFocus
/>
</PopoverContent>
</Popover>
</div>
</div>
</div>
Expand Down
66 changes: 66 additions & 0 deletions components/ui/calendar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: CalendarProps) {
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
month: "space-y-4",
caption: "flex justify-center pt-1 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
day: cn(
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
),
day_range_end: "day-range-end",
day_selected:
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",
day_outside:
"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
day_disabled: "text-muted-foreground opacity-50",
day_range_middle:
"aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
...classNames,
}}
components={{
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
}}
{...props}
/>
)
}
Calendar.displayName = "Calendar"

export { Calendar }
Loading

0 comments on commit 65eb6fa

Please sign in to comment.