forked from git.gladyson/openmonetis
refactor: reorganiza componentes compartilhados e caminhos do app
This commit is contained in:
Felipe Coutinho
220
components/ui/month-picker.tsx
Normal file
220
components/ui/month-picker.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
import { RiArrowLeftSFill, RiArrowRightSFill } from "@remixicon/react";
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils/ui";
|
||||
import { buttonVariants } from "./button";
|
||||
|
||||
type Month = {
|
||||
number: number;
|
||||
name: string;
|
||||
};
|
||||
|
||||
const MONTHS: Month[][] = [
|
||||
[
|
||||
{ number: 0, name: "Jan" },
|
||||
{ number: 1, name: "Fev" },
|
||||
{ number: 2, name: "Mar" },
|
||||
{ number: 3, name: "Abr" },
|
||||
],
|
||||
[
|
||||
{ number: 4, name: "Mai" },
|
||||
{ number: 5, name: "Jun" },
|
||||
{ number: 6, name: "Jul" },
|
||||
{ number: 7, name: "Ago" },
|
||||
],
|
||||
[
|
||||
{ number: 8, name: "Set" },
|
||||
{ number: 9, name: "Out" },
|
||||
{ number: 10, name: "Nov" },
|
||||
{ number: 11, name: "Dez" },
|
||||
],
|
||||
];
|
||||
|
||||
type MonthCalProps = {
|
||||
selectedMonth?: Date;
|
||||
onMonthSelect?: (date: Date) => void;
|
||||
onYearForward?: () => void;
|
||||
onYearBackward?: () => void;
|
||||
callbacks?: {
|
||||
yearLabel?: (year: number) => string;
|
||||
monthLabel?: (month: Month) => string;
|
||||
};
|
||||
variant?: {
|
||||
calendar?: {
|
||||
main?: ButtonVariant;
|
||||
selected?: ButtonVariant;
|
||||
};
|
||||
chevrons?: ButtonVariant;
|
||||
};
|
||||
minDate?: Date;
|
||||
maxDate?: Date;
|
||||
disabledDates?: Date[];
|
||||
};
|
||||
|
||||
type ButtonVariant =
|
||||
| "default"
|
||||
| "outline"
|
||||
| "ghost"
|
||||
| "link"
|
||||
| "destructive"
|
||||
| "secondary"
|
||||
| null
|
||||
| undefined;
|
||||
|
||||
function MonthPicker({
|
||||
onMonthSelect,
|
||||
selectedMonth,
|
||||
minDate,
|
||||
maxDate,
|
||||
disabledDates,
|
||||
callbacks,
|
||||
onYearBackward,
|
||||
onYearForward,
|
||||
variant,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement> & MonthCalProps) {
|
||||
return (
|
||||
<div className={cn("min-w-[200px] w-[280px] p-3", className)} {...props}>
|
||||
<div className="flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0">
|
||||
<div className="space-y-4 w-full">
|
||||
<MonthCal
|
||||
onMonthSelect={onMonthSelect}
|
||||
callbacks={callbacks}
|
||||
selectedMonth={selectedMonth}
|
||||
onYearBackward={onYearBackward}
|
||||
onYearForward={onYearForward}
|
||||
variant={variant}
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
disabledDates={disabledDates}
|
||||
></MonthCal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MonthCal({
|
||||
selectedMonth,
|
||||
onMonthSelect,
|
||||
callbacks,
|
||||
variant,
|
||||
minDate,
|
||||
maxDate,
|
||||
disabledDates,
|
||||
onYearBackward,
|
||||
onYearForward,
|
||||
}: MonthCalProps) {
|
||||
const [year, setYear] = React.useState<number>(
|
||||
selectedMonth?.getFullYear() ?? new Date().getFullYear(),
|
||||
);
|
||||
const [month, setMonth] = React.useState<number>(
|
||||
selectedMonth?.getMonth() ?? new Date().getMonth(),
|
||||
);
|
||||
const [menuYear, setMenuYear] = React.useState<number>(year);
|
||||
|
||||
if (minDate && maxDate && minDate > maxDate) minDate = maxDate;
|
||||
|
||||
const disabledDatesMapped = disabledDates?.map((d) => {
|
||||
return { year: d.getFullYear(), month: d.getMonth() };
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-center pt-1 relative items-center">
|
||||
<div className="text-sm font-bold">
|
||||
{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear) : menuYear}
|
||||
</div>
|
||||
<div className="space-x-1 flex items-center">
|
||||
<button
|
||||
onClick={() => {
|
||||
setMenuYear(menuYear - 1);
|
||||
if (onYearBackward) onYearBackward();
|
||||
}}
|
||||
className={cn(
|
||||
buttonVariants({ variant: variant?.chevrons ?? "outline" }),
|
||||
"inline-flex items-center justify-center h-7 w-7 p-0 absolute left-1",
|
||||
)}
|
||||
>
|
||||
<RiArrowLeftSFill className="opacity-50 size-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setMenuYear(menuYear + 1);
|
||||
if (onYearForward) onYearForward();
|
||||
}}
|
||||
className={cn(
|
||||
buttonVariants({ variant: variant?.chevrons ?? "outline" }),
|
||||
"inline-flex items-center justify-center h-7 w-7 p-0 absolute right-1",
|
||||
)}
|
||||
>
|
||||
<RiArrowRightSFill className="opacity-50 size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table className="w-full border-collapse space-y-1">
|
||||
<tbody>
|
||||
{MONTHS.map((monthRow, a) => {
|
||||
return (
|
||||
<tr key={`row-${a}`} className="flex w-full mt-2">
|
||||
{monthRow.map((m) => {
|
||||
return (
|
||||
<td
|
||||
key={m.number}
|
||||
className="h-10 w-1/4 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"
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
setMonth(m.number);
|
||||
setYear(menuYear);
|
||||
if (onMonthSelect)
|
||||
onMonthSelect(new Date(menuYear, m.number));
|
||||
}}
|
||||
disabled={
|
||||
(maxDate
|
||||
? menuYear > maxDate?.getFullYear() ||
|
||||
(menuYear === maxDate?.getFullYear() &&
|
||||
m.number > maxDate.getMonth())
|
||||
: false) ||
|
||||
(minDate
|
||||
? menuYear < minDate?.getFullYear() ||
|
||||
(menuYear === minDate?.getFullYear() &&
|
||||
m.number < minDate.getMonth())
|
||||
: false) ||
|
||||
(disabledDatesMapped
|
||||
? disabledDatesMapped?.some(
|
||||
(d) =>
|
||||
d.year === menuYear && d.month === m.number,
|
||||
)
|
||||
: false)
|
||||
}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant:
|
||||
month === m.number && menuYear === year
|
||||
? (variant?.calendar?.selected ?? "default")
|
||||
: (variant?.calendar?.main ?? "ghost"),
|
||||
}),
|
||||
"h-full w-full p-0 font-normal aria-selected:opacity-100",
|
||||
)}
|
||||
>
|
||||
{callbacks?.monthLabel
|
||||
? callbacks.monthLabel(m)
|
||||
: m.name}
|
||||
</button>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
MonthPicker.displayName = "MonthPicker";
|
||||
|
||||
export { MonthPicker };
|
||||
Reference in New Issue
Block a user