Skip to content

Commit

Permalink
Added transitions to dropdown elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@severinlandolt
severinlandolt committed Oct 24, 2023
1 parent 260efdb commit 9c5bedf
Show file tree
Hide file tree
Showing 5 changed files with 237 additions and 184 deletions.
75 changes: 42 additions & 33 deletions src/components/input-elements/DatePicker/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { DayPickerSingleProps } from "react-day-picker";
import { startOfMonth, startOfToday } from "date-fns";
import { enUS } from "date-fns/locale";

import { Popover } from "@headlessui/react";
import { Popover, Transition } from "@headlessui/react";
import { CalendarIcon, XCircleIcon } from "assets";
import { Calendar } from "components/input-elements/Calendar";
import { makeDatePickerClassName } from "components/input-elements/DatePicker/datePickerUtils";
Expand Down Expand Up @@ -148,39 +148,48 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
/>
</button>
) : null}
<Popover.Panel
className={tremorTwMerge(
// common
"absolute z-10 divide-y overflow-y-auto min-w-min left-0 outline-none rounded-tremor-default p-3",
// light
"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
// dark
"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown",
spacing.twoXs.marginTop,
spacing.twoXs.marginBottom,
border.sm.all,
)}
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
{({ close }) => (
<Calendar<DayPickerSingleProps>
showOutsideDays={true}
mode="single"
defaultMonth={defaultMonth}
selected={selectedValue}
weekStartsOn={weekStartsOn}
onSelect={
((v: Date) => {
onValueChange?.(v);
setSelectedValue(v);
close();
}) as any
}
locale={locale}
disabled={disabledDays}
enableYearNavigation={enableYearNavigation}
/>
)}
</Popover.Panel>
<Popover.Panel
className={tremorTwMerge(
// common
"absolute z-10 divide-y overflow-y-auto min-w-min left-0 outline-none rounded-tremor-default p-3",
// light
"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
// dark
"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown",
spacing.twoXs.marginTop,
spacing.twoXs.marginBottom,
border.sm.all,
)}
>
{({ close }) => (
<Calendar<DayPickerSingleProps>
showOutsideDays={true}
mode="single"
defaultMonth={defaultMonth}
selected={selectedValue}
weekStartsOn={weekStartsOn}
onSelect={
((v: Date) => {
onValueChange?.(v);
setSelectedValue(v);
close();
}) as any
}
locale={locale}
disabled={disabledDays}
enableYearNavigation={enableYearNavigation}
/>
)}
</Popover.Panel>
</Transition>
</Popover>
);
});
Expand Down
144 changes: 81 additions & 63 deletions src/components/input-elements/DateRangePicker/DateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { Listbox, Popover } from "@headlessui/react";
import { Listbox, Popover, Transition } from "@headlessui/react";
import { CalendarIcon, XCircleIcon } from "assets";
import { startOfMonth, startOfToday } from "date-fns";
import { border, sizing, spacing, tremorTwMerge } from "lib";
Expand Down Expand Up @@ -239,50 +239,59 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
</button>
) : null}
</div>
<Popover.Panel
focus={true}
className={tremorTwMerge(
// common
"absolute z-10 divide-y overflow-y-auto min-w-min left-0 outline-none rounded-tremor-default p-3",
// light
"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
// dark
"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown",
spacing.twoXs.marginTop,
spacing.twoXs.marginBottom,
border.sm.all,
)}
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Calendar<DayPickerRangeProps>
mode="range"
showOutsideDays={true}
defaultMonth={defaultMonth}
selected={{
from: selectedStartDate,
to: selectedEndDate,
}}
onSelect={
((v: DateRange) => {
onValueChange?.({ from: v?.from, to: v?.to });
setSelectedValue({ from: v?.from, to: v?.to });
}) as any
}
locale={locale}
disabled={disabledDays}
enableYearNavigation={enableYearNavigation}
classNames={{
day_range_middle: tremorTwMerge(
"!rounded-none aria-selected:!bg-tremor-background-subtle aria-selected:dark:!bg-dark-tremor-background-subtle aria-selected:!text-tremor-content aria-selected:dark:!bg-dark-tremor-background-subtle",
),
day_range_start:
"rounded-r-none rounded-l-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
day_range_end:
"rounded-l-none rounded-r-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
}}
weekStartsOn={weekStartsOn}
{...props}
/>
</Popover.Panel>
<Popover.Panel
focus={true}
className={tremorTwMerge(
// common
"absolute z-10 divide-y overflow-y-auto min-w-min left-0 outline-none rounded-tremor-default p-3",
// light
"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
// dark
"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown",
spacing.twoXs.marginTop,
spacing.twoXs.marginBottom,
border.sm.all,
)}
>
<Calendar<DayPickerRangeProps>
mode="range"
showOutsideDays={true}
defaultMonth={defaultMonth}
selected={{
from: selectedStartDate,
to: selectedEndDate,
}}
onSelect={
((v: DateRange) => {
onValueChange?.({ from: v?.from, to: v?.to });
setSelectedValue({ from: v?.from, to: v?.to });
}) as any
}
locale={locale}
disabled={disabledDays}
enableYearNavigation={enableYearNavigation}
classNames={{
day_range_middle: tremorTwMerge(
"!rounded-none aria-selected:!bg-tremor-background-subtle aria-selected:dark:!bg-dark-tremor-background-subtle aria-selected:!text-tremor-content aria-selected:dark:!bg-dark-tremor-background-subtle",
),
day_range_start:
"rounded-r-none rounded-l-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
day_range_end:
"rounded-l-none rounded-r-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
}}
weekStartsOn={weekStartsOn}
{...props}
/>
</Popover.Panel>
</Transition>
</Popover>
{enableSelect && (
<Listbox
Expand Down Expand Up @@ -317,26 +326,35 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
>
{value ? valueToNameMapping.get(value) ?? selectPlaceholder : selectPlaceholder}
</Listbox.Button>
<Listbox.Options
className={tremorTwMerge(
// common
"absolute z-10 divide-y overflow-y-auto w-full inset-x-0 right-0 outline-none",
// light
"shadow-tremor-dropdown bg-tremor-background border-tremor-border divide-tremor-border rounded-tremor-default",
// dark
"dark:shadow-dark-tremor-dropdown dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border",
spacing.twoXs.marginTop,
spacing.twoXs.marginBottom,
border.sm.all,
)}
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
{children ??
defaultOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.text}
</SelectItem>
))}
</Listbox.Options>
<Listbox.Options
className={tremorTwMerge(
// common
"absolute z-10 divide-y overflow-y-auto w-full inset-x-0 right-0 outline-none",
// light
"shadow-tremor-dropdown bg-tremor-background border-tremor-border divide-tremor-border rounded-tremor-default",
// dark
"dark:shadow-dark-tremor-dropdown dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border",
spacing.twoXs.marginTop,
spacing.twoXs.marginBottom,
border.sm.all,
)}
>
{children ??
defaultOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.text}
</SelectItem>
))}
</Listbox.Options>
</Transition>
</>
)}
</Listbox>
Expand Down
Loading

0 comments on commit 9c5bedf

Please sign in to comment.