[WEB-3237, 3238] dev: date picker enhancements (#6470)
* [WEB-3238] dev: datepicker with month and year selection dropdowns (#6391) * feat: react-day-picker upgrade and caption dropdowns * style fixes * style: css and autofocus improved * fix: fixed weeks for datepicker to ensure static height --------- Co-authored-by: Vineet K <55555696+vineetk13@users.noreply.github.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
f32635a6a8
commit
88b4d32220
6 changed files with 251 additions and 287 deletions
|
|
@ -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";
|
||||
|
|
@ -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,
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -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"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -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"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -52,6 +52,8 @@ type Props = {
|
|||
renderPlaceholder?: boolean;
|
||||
};
|
||||
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
export const DateRangeDropdown: React.FC<Props> = (props) => {
|
||||
const {
|
||||
applyButtonText = "Apply changes",
|
||||
|
|
@ -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
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -33,6 +33,8 @@ type Props = TDropdownProps & {
|
|||
renderByDefault?: boolean;
|
||||
};
|
||||
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
export const DateDropdown: React.FC<Props> = (props) => {
|
||||
const {
|
||||
buttonClassName = "",
|
||||
|
|
@ -166,7 +168,7 @@ 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}
|
||||
|
|
@ -174,15 +176,18 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
|||
{...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>,
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -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}>
|
||||
|
|
@ -46,6 +48,8 @@ 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) => {
|
||||
|
|
@ -53,7 +57,6 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
|
|||
setDate(date);
|
||||
}}
|
||||
mode="single"
|
||||
className="rounded-md border border-custom-border-200 p-3"
|
||||
disabled={[
|
||||
{
|
||||
before: new Date(),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue