sanity
Version:
Sanity is a real-time content infrastructure with a scalable, hosted backend featuring a Graph Oriented Query Language (GROQ), asset pipelines and fast edge caches
253 lines (252 loc) • 15.4 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { c } from "react/compiler-runtime";
import { ChevronLeftIcon } from "@sanity/icons/ChevronLeft";
import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
import { Text, Card, Box, Label, Grid, Flex } from "@sanity/ui";
import { addDays } from "date-fns/addDays";
import { addMonths } from "date-fns/addMonths";
import { setHours } from "date-fns/setHours";
import { setMinutes } from "date-fns/setMinutes";
import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from "react";
import { Button, TooltipDelayGroupProvider } from "./index.js";
import { useTimeZone, useWeeksOfMonth, DEFAULT_WEEK_DAY_NAMES, useTranslation, DEFAULT_MONTH_NAMES, ARROW_KEYS } from "./index2.js";
import { isSameDay } from "date-fns/isSameDay";
import { isSameMonth } from "date-fns/isSameMonth";
import { CloseIcon } from "@sanity/icons/Close";
import { isWeekend } from "date-fns/isWeekend";
function CalendarDay(props) {
const $ = c(33), {
date,
focused,
isCurrentMonth,
isToday,
onSelect,
selected,
disabled,
dateStyles: t0
} = props;
let t1;
$[0] !== t0 ? (t1 = t0 === void 0 ? {} : t0, $[0] = t0, $[1] = t1) : t1 = $[1];
const dateStyles = t1;
let t2;
$[2] !== date || $[3] !== onSelect || $[4] !== selected ? (t2 = () => {
onSelect(selected ? void 0 : date);
}, $[2] = date, $[3] = onSelect, $[4] = selected, $[5] = t2) : t2 = $[5];
const handleClick = t2;
let tone;
isToday || selected ? tone = "primary" : (isWeekend(date), tone = "default");
let t3;
$[6] !== date ? (t3 = date.toDateString(), $[6] = date, $[7] = t3) : t3 = $[7];
const t4 = focused ? "true" : "";
let t5;
$[8] !== date || $[9] !== isToday ? (t5 = isToday ? "day-tile-today" : `day-tile-${date.getDate()}-${date.getMonth()}`, $[8] = date, $[9] = isToday, $[10] = t5) : t5 = $[10];
let t6;
$[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t6 = {
position: "relative"
}, $[11] = t6) : t6 = $[11];
const t7 = !selected && !isCurrentMonth ? 0.35 : 1;
let t8;
$[12] !== dateStyles || $[13] !== t7 ? (t8 = {
opacity: t7,
textAlign: "center",
...dateStyles
}, $[12] = dateStyles, $[13] = t7, $[14] = t8) : t8 = $[14];
let t9;
$[15] !== date || $[16] !== selected ? (t9 = selected ? /* @__PURE__ */ jsx(CloseIcon, {}) : date.getDate(), $[15] = date, $[16] = selected, $[17] = t9) : t9 = $[17];
let t10;
$[18] !== t8 || $[19] !== t9 ? (t10 = /* @__PURE__ */ jsx(Text, { size: 1, style: t8, children: t9 }), $[18] = t8, $[19] = t9, $[20] = t10) : t10 = $[20];
let t11;
$[21] !== disabled || $[22] !== handleClick || $[23] !== selected || $[24] !== t10 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== tone ? (t11 = /* @__PURE__ */ jsx(Card, { "aria-label": t3, "aria-pressed": selected, as: "button", __unstable_focusRing: !0, "data-weekday": !0, "data-focused": t4, "data-testid": t5, role: "button", tabIndex: -1, onClick: handleClick, paddingX: 3, paddingY: 4, radius: 2, selected, style: t6, tone, disabled, children: t10 }), $[21] = disabled, $[22] = handleClick, $[23] = selected, $[24] = t10, $[25] = t3, $[26] = t4, $[27] = t5, $[28] = tone, $[29] = t11) : t11 = $[29];
let t12;
return $[30] !== selected || $[31] !== t11 ? (t12 = /* @__PURE__ */ jsx("div", { "aria-selected": selected, "data-ui": "CalendarDay", children: t11 }), $[30] = selected, $[31] = t11, $[32] = t12) : t12 = $[32], t12;
}
function CalendarMonth(props) {
const $ = c(24), {
date,
renderCalendarDay,
hidden,
disabled,
timeZoneScope
} = props, {
getCurrentZoneDate
} = useTimeZone(timeZoneScope), CalendarDay$1 = renderCalendarDay || CalendarDay, weeksOfMonth = useWeeksOfMonth(date), t0 = hidden || !1;
let t1, t2;
$[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = {
gridGap: "1px",
gridTemplateColumns: "repeat(7, 1fr)"
}, t2 = DEFAULT_WEEK_DAY_NAMES.map(_temp), $[0] = t1, $[1] = t2) : (t1 = $[0], t2 = $[1]);
let t3;
if ($[2] !== CalendarDay$1 || $[3] !== date || $[4] !== disabled || $[5] !== getCurrentZoneDate || $[6] !== props.focused || $[7] !== props.onSelect || $[8] !== props.selected || $[9] !== weeksOfMonth) {
let t42;
$[11] !== CalendarDay$1 || $[12] !== date || $[13] !== disabled || $[14] !== getCurrentZoneDate || $[15] !== props.focused || $[16] !== props.onSelect || $[17] !== props.selected ? (t42 = (week, weekIdx) => week.days.map((dayDate, dayIdx) => {
const focused = props.focused && isSameDay(dayDate, props.focused), selected = props.selected && isSameDay(dayDate, props.selected), isToday = isSameDay(dayDate, getCurrentZoneDate()), isCurrentMonth = isSameMonth(dayDate, props.focused || date);
return /* @__PURE__ */ jsx(CalendarDay$1, { date: dayDate, focused, isCurrentMonth, isToday, onSelect: props.onSelect, selected, disabled }, `${weekIdx}-${dayIdx}`);
}), $[11] = CalendarDay$1, $[12] = date, $[13] = disabled, $[14] = getCurrentZoneDate, $[15] = props.focused, $[16] = props.onSelect, $[17] = props.selected, $[18] = t42) : t42 = $[18], t3 = weeksOfMonth.map(t42), $[2] = CalendarDay$1, $[3] = date, $[4] = disabled, $[5] = getCurrentZoneDate, $[6] = props.focused, $[7] = props.onSelect, $[8] = props.selected, $[9] = weeksOfMonth, $[10] = t3;
} else
t3 = $[10];
let t4;
$[19] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Grid, { style: t1, children: [
t2,
t3
] }), $[19] = t3, $[20] = t4) : t4 = $[20];
let t5;
return $[21] !== t0 || $[22] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, { "aria-hidden": t0, "data-ui": "CalendarMonth", children: t4 }), $[21] = t0, $[22] = t4, $[23] = t5) : t5 = $[23], t5;
}
function _temp(weekday) {
return /* @__PURE__ */ jsx(Card, { paddingY: 3, children: /* @__PURE__ */ jsx(Label, { size: 1, style: {
textAlign: "center"
}, children: weekday.slice(0, 1) }) }, weekday);
}
const PRESERVE_FOCUS_ELEMENT = /* @__PURE__ */ jsx("span", { "data-preserve-focus": !0, style: {
overflow: "hidden",
position: "absolute",
outline: "none"
}, tabIndex: -1 }), CalendarFilter = forwardRef(function(props, forwardedRef) {
const $ = c(86);
let handleOnFocusedDateChange, onSelect, providedFocusedDate, renderCalendarDay, restProps, selectedDate, timeZoneScope;
$[0] !== props ? ({
focusedDate: providedFocusedDate,
onFocusedDateChange: handleOnFocusedDateChange,
onSelect,
selectedDate,
renderCalendarDay,
timeZoneScope,
...restProps
} = props, $[0] = props, $[1] = handleOnFocusedDateChange, $[2] = onSelect, $[3] = providedFocusedDate, $[4] = renderCalendarDay, $[5] = restProps, $[6] = selectedDate, $[7] = timeZoneScope) : (handleOnFocusedDateChange = $[1], onSelect = $[2], providedFocusedDate = $[3], renderCalendarDay = $[4], restProps = $[5], selectedDate = $[6], timeZoneScope = $[7]);
let t0;
$[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ new Date(), $[8] = t0) : t0 = $[8];
const [_focusedDate, _setFocusedDate] = useState(t0), {
t: tCore
} = useTranslation(), {
zoneDateToUtc
} = useTimeZone(timeZoneScope), focusedDate = providedFocusedDate || _focusedDate;
let t1;
$[9] !== handleOnFocusedDateChange || $[10] !== providedFocusedDate ? (t1 = (date) => {
handleOnFocusedDateChange && providedFocusedDate ? handleOnFocusedDateChange(date) : _setFocusedDate(date);
}, $[9] = handleOnFocusedDateChange, $[10] = providedFocusedDate, $[11] = t1) : t1 = $[11];
const onFocusedDateChange = t1;
let t2;
$[12] !== onFocusedDateChange || $[13] !== zoneDateToUtc ? (t2 = (date_0) => {
onFocusedDateChange(zoneDateToUtc(date_0));
}, $[12] = onFocusedDateChange, $[13] = zoneDateToUtc, $[14] = t2) : t2 = $[14];
const setFocusedDate = t2;
let t3;
$[15] !== focusedDate || $[16] !== setFocusedDate ? (t3 = (by) => setFocusedDate(addMonths(focusedDate, by)), $[15] = focusedDate, $[16] = setFocusedDate, $[17] = t3) : t3 = $[17];
const moveFocusedDate = t3;
let t4;
$[18] !== onFocusedDateChange || $[19] !== onSelect || $[20] !== zoneDateToUtc ? (t4 = (date_1) => {
if (date_1) {
const targetDate = zoneDateToUtc(setMinutes(setHours(date_1, date_1.getHours()), date_1.getMinutes()));
onSelect(targetDate), onFocusedDateChange(targetDate);
} else
onSelect(void 0);
}, $[18] = onFocusedDateChange, $[19] = onSelect, $[20] = zoneDateToUtc, $[21] = t4) : t4 = $[21];
const handleDateChange = t4, ref = useRef(null);
let t5;
$[22] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[22] = t5) : t5 = $[22], useImperativeHandle(forwardedRef, t5);
let t6;
$[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t6 = () => {
ref.current?.querySelector('[data-focused="true"]')?.focus();
}, $[23] = t6) : t6 = $[23];
const focusCurrentWeekDay = t6;
let t7;
$[24] !== focusedDate || $[25] !== onFocusedDateChange || $[26] !== zoneDateToUtc ? (t7 = (event) => {
if (ARROW_KEYS.includes(event.key)) {
if (event.preventDefault(), event.currentTarget.hasAttribute("data-calendar-grid")) {
focusCurrentWeekDay();
return;
}
event.key === "ArrowUp" && onFocusedDateChange(zoneDateToUtc(addDays(focusedDate, -7))), event.key === "ArrowDown" && onFocusedDateChange(zoneDateToUtc(addDays(focusedDate, 7))), event.key === "ArrowLeft" && onFocusedDateChange(zoneDateToUtc(addDays(focusedDate, -1))), event.key === "ArrowRight" && onFocusedDateChange(zoneDateToUtc(addDays(focusedDate, 1))), ref.current?.querySelector("[data-preserve-focus]")?.focus();
}
}, $[24] = focusedDate, $[25] = onFocusedDateChange, $[26] = zoneDateToUtc, $[27] = t7) : t7 = $[27];
const handleKeyDown = t7;
let t8, t9;
$[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t8 = () => {
focusCurrentWeekDay();
}, t9 = [focusCurrentWeekDay], $[28] = t8, $[29] = t9) : (t8 = $[28], t9 = $[29]), useEffect(t8, t9);
let t10;
$[30] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t10 = () => {
document.activeElement?.matches("[data-calendar-grid], [data-calendar-grid] [data-preserve-focus]") && focusCurrentWeekDay();
}, $[30] = t10) : t10 = $[30];
let t11;
$[31] !== focusedDate ? (t11 = [ref, focusCurrentWeekDay, focusedDate], $[31] = focusedDate, $[32] = t11) : t11 = $[32], useEffect(t10, t11);
let t12;
$[33] !== onFocusedDateChange || $[34] !== onSelect ? (t12 = () => {
const now = /* @__PURE__ */ new Date();
onSelect(now), onFocusedDateChange(now);
}, $[33] = onFocusedDateChange, $[34] = onSelect, $[35] = t12) : t12 = $[35];
const handleNowClick = t12;
let t13;
$[36] !== moveFocusedDate ? (t13 = () => moveFocusedDate(-1), $[36] = moveFocusedDate, $[37] = t13) : t13 = $[37];
const handlePrevMonthClick = t13;
let t14;
$[38] !== moveFocusedDate ? (t14 = () => moveFocusedDate(1), $[38] = moveFocusedDate, $[39] = t14) : t14 = $[39];
const handleNextMonthClick = t14;
let t15;
$[40] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t15 = {
borderBottom: "1px solid var(--card-border-color)",
minHeight: "55px",
position: "sticky",
top: 0
}, $[40] = t15) : t15 = $[40];
const t16 = DEFAULT_MONTH_NAMES[focusedDate?.getMonth()];
let t17;
$[41] !== focusedDate ? (t17 = focusedDate?.getFullYear(), $[41] = focusedDate, $[42] = t17) : t17 = $[42];
let t18;
$[43] !== t16 || $[44] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Text, { weight: "medium", size: 1, children: [
t16,
" ",
t17
] }), $[43] = t16, $[44] = t17, $[45] = t18) : t18 = $[45];
let t19;
$[46] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t19 = {
content: "Previous month"
}, $[46] = t19) : t19 = $[46];
let t20;
$[47] !== handlePrevMonthClick || $[48] !== restProps.disabled ? (t20 = /* @__PURE__ */ jsx(Button, { icon: ChevronLeftIcon, mode: "bleed", onClick: handlePrevMonthClick, tooltipProps: t19, disabled: restProps.disabled }), $[47] = handlePrevMonthClick, $[48] = restProps.disabled, $[49] = t20) : t20 = $[49];
let t21;
$[50] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t21 = {
content: "Next month"
}, $[50] = t21) : t21 = $[50];
let t22;
$[51] !== handleNextMonthClick || $[52] !== restProps.disabled ? (t22 = /* @__PURE__ */ jsx(Button, { icon: ChevronRightIcon, mode: "bleed", onClick: handleNextMonthClick, tooltipProps: t21, disabled: restProps.disabled }), $[51] = handleNextMonthClick, $[52] = restProps.disabled, $[53] = t22) : t22 = $[53];
let t23;
$[54] !== t20 || $[55] !== t22 ? (t23 = /* @__PURE__ */ jsx(Flex, { paddingRight: 3, gap: 2, children: /* @__PURE__ */ jsxs(TooltipDelayGroupProvider, { children: [
t20,
t22
] }) }), $[54] = t20, $[55] = t22, $[56] = t23) : t23 = $[56];
let t24;
$[57] !== t18 || $[58] !== t23 ? (t24 = /* @__PURE__ */ jsx(Flex, { align: "center", paddingLeft: 4, style: t15, children: /* @__PURE__ */ jsxs(Flex, { align: "center", flex: 1, justify: "space-between", children: [
t18,
t23
] }) }), $[57] = t18, $[58] = t23, $[59] = t24) : t24 = $[59];
let t25;
$[60] !== focusedDate || $[61] !== handleDateChange || $[62] !== providedFocusedDate || $[63] !== renderCalendarDay || $[64] !== restProps.disabled || $[65] !== selectedDate || $[66] !== timeZoneScope ? (t25 = /* @__PURE__ */ jsx(CalendarMonth, { date: focusedDate, focused: providedFocusedDate, onSelect: handleDateChange, selected: selectedDate, renderCalendarDay, disabled: restProps.disabled, timeZoneScope }), $[60] = focusedDate, $[61] = handleDateChange, $[62] = providedFocusedDate, $[63] = renderCalendarDay, $[64] = restProps.disabled, $[65] = selectedDate, $[66] = timeZoneScope, $[67] = t25) : t25 = $[67];
let t26;
$[68] !== handleKeyDown || $[69] !== t25 ? (t26 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Box, { "data-calendar-grid": !0, onKeyDown: handleKeyDown, overflow: "hidden", paddingBottom: 1, paddingX: 1, tabIndex: 0, children: [
t25,
PRESERVE_FOCUS_ELEMENT
] }) }), $[68] = handleKeyDown, $[69] = t25, $[70] = t26) : t26 = $[70];
let t27;
$[71] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t27 = {
borderBottom: "1px solid var(--card-border-color)"
}, $[71] = t27) : t27 = $[71];
const t28 = restProps.disabled;
let t29;
$[72] !== tCore ? (t29 = tCore("calendar.action.go-to-today-aria-label"), $[72] = tCore, $[73] = t29) : t29 = $[73];
let t30;
$[74] !== tCore ? (t30 = tCore("calendar.action.go-to-today"), $[74] = tCore, $[75] = t30) : t30 = $[75];
let t31;
$[76] !== handleNowClick || $[77] !== restProps.disabled || $[78] !== t29 || $[79] !== t30 ? (t31 = /* @__PURE__ */ jsx(Box, { flex: 1, style: t27, children: /* @__PURE__ */ jsx(Button, { disabled: t28, mode: "bleed", onClick: handleNowClick, width: "fill", "aria-label": t29, text: t30 }) }), $[76] = handleNowClick, $[77] = restProps.disabled, $[78] = t29, $[79] = t30, $[80] = t31) : t31 = $[80];
let t32;
return $[81] !== restProps || $[82] !== t24 || $[83] !== t26 || $[84] !== t31 ? (t32 = /* @__PURE__ */ jsxs(Box, { "data-ui": "Calendar", ...restProps, ref, children: [
t24,
t26,
t31
] }), $[81] = restProps, $[82] = t24, $[83] = t26, $[84] = t31, $[85] = t32) : t32 = $[85], t32;
});
export {
CalendarDay,
CalendarFilter
};
//# sourceMappingURL=CalendarFilter.js.map