ivt
Version:
Ivt Components Library
346 lines (340 loc) • 13.3 kB
JavaScript
import * as React from 'react';
import { c as cn } from './utils-BDcRwQMd.mjs';
import { C as CalendarDays } from './calendar-days-DnYx8d46.mjs';
import { X } from './x-B6hDJA_l.mjs';
import { c as constructFrom, a as addDays, f as format, s as startOfWeek } from './format-8qs-kXlN.mjs';
import { n as normalizeInterval, b as addMonths, e as endOfWeek, C as Calendar, c as endOfMonth, s as startOfMonth, d as dateMatchModifiers, a as CalendarDayButton } from './calendar-CDJv1B--.mjs';
import { P as Popover, a as PopoverTrigger, b as PopoverContent } from './popover-CdZgcLPo.mjs';
import { B as Button } from './button-CZpmCmNo.mjs';
import { c as TooltipProvider, T as Tooltip, a as TooltipTrigger, b as TooltipContent } from './tooltip-njN_ok-r.mjs';
import { p as ptBR } from './date-Dqmv8Nr4.mjs';
/**
* The {@link eachDayOfInterval} function options.
*/ /**
* The {@link eachDayOfInterval} function result type. It resolves the proper data type.
* It uses the first argument date object type, starting from the date argument,
* then the start interval date, and finally the end interval date. If
* a context function is passed, it uses the context function return type.
*/ /**
* @name eachDayOfInterval
* @category Interval Helpers
* @summary Return the array of dates within the specified time interval.
*
* @description
* Return the array of dates within the specified time interval.
*
* @typeParam IntervalType - Interval type.
* @typeParam Options - Options type.
*
* @param interval - The interval.
* @param options - An object with options.
*
* @returns The array with starts of days from the day of the interval start to the day of the interval end
*
* @example
* // Each day between 6 October 2014 and 10 October 2014:
* const result = eachDayOfInterval({
* start: new Date(2014, 9, 6),
* end: new Date(2014, 9, 10)
* })
* //=> [
* // Mon Oct 06 2014 00:00:00,
* // Tue Oct 07 2014 00:00:00,
* // Wed Oct 08 2014 00:00:00,
* // Thu Oct 09 2014 00:00:00,
* // Fri Oct 10 2014 00:00:00
* // ]
*/ function eachDayOfInterval(interval, options) {
const { start, end } = normalizeInterval(options?.in, interval);
let reversed = +start > +end;
const endTime = reversed ? +start : +end;
const date = reversed ? end : start;
date.setHours(0, 0, 0, 0);
let step = 1;
const dates = [];
while(+date <= endTime){
dates.push(constructFrom(start, date));
date.setDate(date.getDate() + step);
date.setHours(0, 0, 0, 0);
}
return reversed ? dates.reverse() : dates;
}
/**
* The {@link subDays} function options.
*/ /**
* @name subDays
* @category Day Helpers
* @summary Subtract the specified number of days from the given date.
*
* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
* @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
*
* @param date - The date to be changed
* @param amount - The amount of days to be subtracted.
* @param options - An object with options
*
* @returns The new date with the days subtracted
*
* @example
* // Subtract 10 days from 1 September 2014:
* const result = subDays(new Date(2014, 8, 1), 10)
* //=> Fri Aug 22 2014 00:00:00
*/ function subDays(date, amount, options) {
return addDays(date, -amount, options);
}
/**
* The subMonths function options.
*/ /**
* @name subMonths
* @category Month Helpers
* @summary Subtract the specified number of months from the given date.
*
* @description
* Subtract the specified number of months from the given date.
*
* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
* @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
*
* @param date - The date to be changed
* @param amount - The amount of months to be subtracted.
* @param options - An object with options
*
* @returns The new date with the months subtracted
*
* @example
* // Subtract 5 months from 1 February 2015:
* const result = subMonths(new Date(2015, 1, 1), 5)
* //=> Mon Sep 01 2014 00:00:00
*/ function subMonths(date, amount, options) {
return addMonths(date, -1, options);
}
const defaultQuickRanges = [
{
label: "Hoje",
getRange: ()=>({
from: new Date(),
to: new Date()
})
},
{
label: "Esta Semana",
getRange: ()=>({
from: startOfWeek(new Date(), {
weekStartsOn: 1
}),
to: endOfWeek(new Date(), {
weekStartsOn: 1
})
})
},
{
label: "Últimos 7 dias",
getRange: ()=>({
from: subDays(new Date(), 6),
to: new Date()
})
},
{
label: "Últimos 14 dias",
getRange: ()=>({
from: subDays(new Date(), 13),
to: new Date()
})
},
{
label: "Últimos 30 dias",
getRange: ()=>({
from: subDays(new Date(), 29),
to: new Date()
})
},
{
label: "Mês anterior",
getRange: ()=>{
const previousMonth = subMonths(new Date());
return {
from: startOfMonth(previousMonth),
to: endOfMonth(previousMonth)
};
}
},
{
label: "Este ano",
getRange: ()=>{
const currentYear = new Date().getFullYear();
return {
from: new Date(currentYear, 0, 1),
to: new Date(currentYear, 11, 31)
};
}
}
];
function CalendarRange({ value, onChange, placeholder = "Selecione uma data", id = "date", buttonProps, popoverProps, popoverContentClassName, className, disabled, disabledDateTooltip, showQuickRanges = false, quickRanges = defaultQuickRanges, clearable = true, ...props }) {
const [open, setOpen] = React.useState(false);
const [leftMonth, setLeftMonth] = React.useState(value?.from ?? props.defaultMonth ?? new Date());
const [rightMonth, setRightMonth] = React.useState(value?.to ?? addMonths(value?.from ?? props.defaultMonth ?? new Date(), 1));
// biome-ignore lint/correctness/useExhaustiveDependencies: <useEffect>
React.useEffect(()=>{
if (open) {
const left = value?.from ?? props.defaultMonth ?? new Date();
const right = value?.to ?? addMonths(left, 1);
setLeftMonth(left);
setRightMonth(right);
}
}, [
open
]);
React.useEffect(()=>{
if (!open) {
setLeftMonth(value?.from ?? props.defaultMonth ?? new Date());
setRightMonth(value?.to ?? addMonths(value?.from ?? props.defaultMonth ?? new Date(), 1));
}
}, [
value?.from,
value?.to,
open,
props.defaultMonth
]);
const isButtonDisabled = typeof disabled === "boolean" ? disabled : false;
const isRangeDisabled = (range)=>{
if (!disabled) return false;
if (typeof disabled === "boolean") return disabled;
if (!range.from || !range.to) return false;
const days = eachDayOfInterval({
start: range.from,
end: range.to
});
return days.some((day)=>dateMatchModifiers(day, disabled));
};
const applyQuickRange = (range)=>{
if (isRangeDisabled(range)) return;
onChange(range);
const baseDate = range.from ?? new Date();
setLeftMonth(baseDate);
setRightMonth(addMonths(baseDate, 1));
};
const DayButtonWrapper = (buttonProps)=>{
const { day } = buttonProps;
const date = day.date;
const tooltip = date ? disabledDateTooltip?.(date) : undefined;
if (tooltip) {
return /*#__PURE__*/ React.createElement(TooltipProvider, null, /*#__PURE__*/ React.createElement(Tooltip, {
delayDuration: 300
}, /*#__PURE__*/ React.createElement(TooltipTrigger, {
asChild: true
}, /*#__PURE__*/ React.createElement("span", {
className: "h-full w-full"
}, /*#__PURE__*/ React.createElement(CalendarDayButton, buttonProps))), /*#__PURE__*/ React.createElement(TooltipContent, {
className: "bg-secondary text-xs"
}, /*#__PURE__*/ React.createElement("p", null, tooltip))));
}
return /*#__PURE__*/ React.createElement(CalendarDayButton, buttonProps);
};
return /*#__PURE__*/ React.createElement(Popover, {
...popoverProps,
open: open,
onOpenChange: setOpen
}, /*#__PURE__*/ React.createElement(PopoverTrigger, {
asChild: true
}, /*#__PURE__*/ React.createElement(Button, {
id: id,
variant: "outline",
className: cn("hover:foreground justify-between text-left font-normal", !value && "text-muted-foreground hover:text-muted-foreground", className),
disabled: isButtonDisabled,
...buttonProps
}, /*#__PURE__*/ React.createElement("div", {
className: "flex items-center"
}, /*#__PURE__*/ React.createElement(CalendarDays, {
className: "mr-2 size-4"
}), value?.from ? value.to ? /*#__PURE__*/ React.createElement(React.Fragment, null, format(value.from, "P", {
locale: ptBR
}), " -", " ", format(value.to, "P", {
locale: ptBR
})) : format(value.from, "P", {
locale: ptBR
}) : /*#__PURE__*/ React.createElement("span", null, placeholder)), value?.from && !isButtonDisabled && clearable && // biome-ignore lint/a11y/useKeyWithClickEvents: clear button action
// biome-ignore lint/a11y/noStaticElementInteractions: clear button action
/*#__PURE__*/ React.createElement("div", {
onClick: (e)=>{
e.stopPropagation();
onChange(null);
},
className: "cursor-pointer p-1"
}, /*#__PURE__*/ React.createElement(X, {
className: "h-4 w-4 opacity-50 hover:opacity-100"
})))), /*#__PURE__*/ React.createElement(PopoverContent, {
className: cn("w-auto p-0", popoverContentClassName),
align: "start"
}, /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col sm:flex-row"
}, showQuickRanges && /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-1 border-r p-2"
}, quickRanges.map((range, index)=>{
const dateRange = range.getRange();
const isDisabled = isRangeDisabled(dateRange);
return /*#__PURE__*/ React.createElement(TooltipProvider, {
key: range.label
}, /*#__PURE__*/ React.createElement(Tooltip, {
delayDuration: 300
}, /*#__PURE__*/ React.createElement(TooltipTrigger, {
asChild: true
}, /*#__PURE__*/ React.createElement(Button, {
variant: "ghost",
size: "sm",
className: cn("justify-start font-normal", index % 2 === 0 && "bg-accent/40"),
disabled: isDisabled,
onClick: ()=>applyQuickRange(dateRange)
}, range.label)), /*#__PURE__*/ React.createElement(TooltipContent, {
side: "right",
className: "bg-secondary text-xs"
}, /*#__PURE__*/ React.createElement("p", null, dateRange.from && format(dateRange.from, "P", {
locale: ptBR
}), dateRange.to && dateRange.to !== dateRange.from && ` - ${format(dateRange.to, "P", {
locale: ptBR
})}`))));
})), /*#__PURE__*/ React.createElement("div", {
className: "flex gap-4 p-3"
}, /*#__PURE__*/ React.createElement(Calendar, {
...props,
disabled: disabled,
autoFocus: false,
captionLayout: "dropdown",
selected: value ?? undefined,
onSelect: (r)=>{
if (r) onChange(r);
},
locale: ptBR,
numberOfMonths: 1,
month: leftMonth,
onMonthChange: (m)=>setLeftMonth(m),
mode: "range",
components: {
DayButton: DayButtonWrapper
},
modifiersClassNames: {
disabled: "pointer-events-auto opacity-50 hover:bg-transparent"
}
}), /*#__PURE__*/ React.createElement(Calendar, {
...props,
disabled: disabled,
autoFocus: false,
captionLayout: "dropdown",
selected: value ?? undefined,
onSelect: (r)=>{
if (r) onChange(r);
},
locale: ptBR,
numberOfMonths: 1,
month: rightMonth,
onMonthChange: (m)=>setRightMonth(m),
mode: "range",
components: {
DayButton: DayButtonWrapper
},
modifiersClassNames: {
disabled: "pointer-events-auto opacity-50 hover:bg-transparent"
}
})))));
}
export { CalendarRange as C };
//# sourceMappingURL=CalendarRange-BZ-rc5Ns.mjs.map