Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WEB-3237, 3238] dev: date picker enhancements #6466

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions web/core/components/core/filters/date-filter-modal.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";
import { Fragment } from "react";

import { DayPicker } from "react-day-picker";
import { DayPicker, getDefaultClassNames } from "react-day-picker";
import { Controller, useForm } from "react-hook-form";

import { X } from "lucide-react";
Expand Down Expand Up @@ -31,6 +31,8 @@ const defaultValues: TFormValues = {
date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
};

const defaultClassNames = getDefaultClassNames();

export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, onSelect }) => {
const { handleSubmit, watch, control } = useForm<TFormValues>({
defaultValues,
Expand Down Expand Up @@ -97,6 +99,10 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
const date2Value = getDate(watch("date2"));
return (
<DayPicker
classNames={{
root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`,
}}
captionLayout="dropdown"
selected={dateValue}
defaultMonth={dateValue}
onSelect={(date) => {
Expand All @@ -105,7 +111,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
}}
mode="single"
disabled={date2Value ? [{ after: date2Value }] : undefined}
className="border border-custom-border-200 p-3 rounded-md"
/>
);
}}
Expand All @@ -119,6 +124,10 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
const date1Value = getDate(watch("date1"));
return (
<DayPicker
classNames={{
root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`,
}}
captionLayout="dropdown"
selected={dateValue}
defaultMonth={dateValue}
onSelect={(date) => {
Expand All @@ -127,7 +136,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
}}
mode="single"
disabled={date1Value ? [{ before: date1Value }] : undefined}
className="border border-custom-border-200 p-3 rounded-md"
/>
);
}}
Expand Down
11 changes: 8 additions & 3 deletions web/core/components/dropdowns/date-range.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React, { useEffect, useRef, useState } from "react";
import { Placement } from "@popperjs/core";
import { DateRange, DayPicker, Matcher } from "react-day-picker";
import { DateRange, DayPicker, Matcher, getDefaultClassNames } from "react-day-picker";
import { usePopper } from "react-popper";
import { ArrowRight, CalendarCheck2, CalendarDays } from "lucide-react";
import { Combobox } from "@headlessui/react";
Expand Down Expand Up @@ -52,6 +52,8 @@ type Props = {
renderPlaceholder?: boolean;
};

const defaultClassNames = getDefaultClassNames();

export const DateRangeDropdown: React.FC<Props> = (props) => {
const {
applyButtonText = "Apply changes",
Expand Down Expand Up @@ -198,12 +200,14 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3"
className="my-1 bg-custom-background-100 shadow-custom-shadow-rg overflow-hidden"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<DayPicker
captionLayout="dropdown"
classNames={{ root: `${defaultClassNames.root} p-3 rounded-md` }}
selected={dateRange}
onSelect={(val) => {
// if both the dates are not required, immediately call onSelect
Expand All @@ -216,7 +220,8 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
mode="range"
disabled={disabledDays}
showOutsideDays
initialFocus
autoFocus
fixedWeeks
footer={
bothRequired && (
<div className="grid grid-cols-2 items-center gap-3.5 pt-6 relative">
Expand Down
11 changes: 8 additions & 3 deletions web/core/components/dropdowns/date.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useRef, useState } from "react";
import { DayPicker, Matcher } from "react-day-picker";
import { DayPicker, Matcher, getDefaultClassNames } from "react-day-picker";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper";
import { CalendarDays, X } from "lucide-react";
Expand Down Expand Up @@ -33,6 +33,8 @@ type Props = TDropdownProps & {
renderByDefault?: boolean;
};

const defaultClassNames = getDefaultClassNames();

export const DateDropdown: React.FC<Props> = (props) => {
const {
buttonClassName = "",
Expand Down Expand Up @@ -166,23 +168,26 @@ export const DateDropdown: React.FC<Props> = (props) => {
<Combobox.Options data-prevent-outside-click static>
<div
className={cn(
"my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
"my-1 bg-custom-background-100 shadow-custom-shadow-rg overflow-hidden z-20",
optionsClassName
)}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<DayPicker
captionLayout="dropdown"
classNames={{ root: `${defaultClassNames.root} p-3 rounded-md` }}
selected={getDate(value)}
defaultMonth={getDate(value)}
onSelect={(date) => {
dropdownOnChange(date ?? null);
}}
showOutsideDays
initialFocus
autoFocus
disabled={disabledDays}
mode="single"
fixedWeeks
/>
</div>
</Combobox.Options>,
Expand Down
7 changes: 5 additions & 2 deletions web/core/components/inbox/modals/snooze-issue-modal.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { FC, Fragment, useState } from "react";
import { DayPicker } from "react-day-picker";
import { DayPicker, getDefaultClassNames } from "react-day-picker";
import { Dialog, Transition } from "@headlessui/react";
// ui
import { Button } from "@plane/ui";
Expand All @@ -18,6 +18,8 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
// states
const [date, setDate] = useState(value || new Date());

const defaultClassNames = getDefaultClassNames();

return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
Expand Down Expand Up @@ -46,14 +48,15 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
<Dialog.Panel className="relative flex transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<div className="flex h-full w-full flex-col gap-y-1">
<DayPicker
captionLayout="dropdown"
classNames={{root: `${defaultClassNames.root} rounded-md border border-custom-border-200 p-3`}}
selected={date ? new Date(date) : undefined}
defaultMonth={date ? new Date(date) : undefined}
onSelect={(date) => {
if (!date) return;
setDate(date);
}}
mode="single"
className="rounded-md border border-custom-border-200 p-3"
disabled={[
{
before: new Date(),
Expand Down
2 changes: 1 addition & 1 deletion web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
"posthog-js": "^1.131.3",
"react": "^18.3.1",
"react-color": "^2.19.3",
"react-day-picker": "^8.10.0",
"react-day-picker": "^9.5.0",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.3",
"react-hook-form": "7.51.5",
Expand Down
Loading
Loading