@lobehub/ui 5.63.4 → 5.64.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/base-ui/DatePicker/DatePicker.d.mts +7 -2
- package/es/base-ui/DatePicker/DatePicker.mjs +13 -83
- package/es/base-ui/DatePicker/DatePicker.mjs.map +1 -1
- package/es/base-ui/DatePicker/DateRangePicker.d.mts +3 -2
- package/es/base-ui/DatePicker/DateRangePicker.mjs +3 -123
- package/es/base-ui/DatePicker/DateRangePicker.mjs.map +1 -1
- package/es/base-ui/DatePicker/PurePanel.mjs +80 -0
- package/es/base-ui/DatePicker/PurePanel.mjs.map +1 -0
- package/es/base-ui/DatePicker/RangePicker.mjs +120 -0
- package/es/base-ui/DatePicker/RangePicker.mjs.map +1 -0
- package/es/base-ui/DatePicker/SinglePicker.mjs +143 -0
- package/es/base-ui/DatePicker/SinglePicker.mjs.map +1 -0
- package/es/base-ui/DatePicker/generateConfig.mjs +12 -0
- package/es/base-ui/DatePicker/generateConfig.mjs.map +1 -0
- package/es/base-ui/DatePicker/generatePicker.d.mts +12 -0
- package/es/base-ui/DatePicker/generatePicker.mjs +22 -0
- package/es/base-ui/DatePicker/generatePicker.mjs.map +1 -0
- package/es/base-ui/DatePicker/index.d.mts +4 -3
- package/es/base-ui/DatePicker/locale.d.mts +16 -0
- package/es/base-ui/DatePicker/locale.mjs +136 -0
- package/es/base-ui/DatePicker/locale.mjs.map +1 -0
- package/es/base-ui/DatePicker/semantic.mjs +34 -0
- package/es/base-ui/DatePicker/semantic.mjs.map +1 -0
- package/es/base-ui/DatePicker/style.mjs +990 -139
- package/es/base-ui/DatePicker/style.mjs.map +1 -1
- package/es/base-ui/DatePicker/type.d.mts +281 -25
- package/es/base-ui/DatePicker/usePanelKeyboard.mjs +230 -0
- package/es/base-ui/DatePicker/usePanelKeyboard.mjs.map +1 -0
- package/es/base-ui/DatePicker/usePickerShared.mjs +136 -0
- package/es/base-ui/DatePicker/usePickerShared.mjs.map +1 -0
- package/es/base-ui/DatePicker/usePresetActive.mjs +48 -0
- package/es/base-ui/DatePicker/usePresetActive.mjs.map +1 -0
- package/es/base-ui/Text/style.d.mts +1 -1
- package/es/base-ui/index.d.mts +4 -3
- package/es/base-ui/index.mjs +3 -1
- package/es/i18n/resources/en/datePicker.d.mts +47 -0
- package/es/i18n/resources/en/datePicker.mjs +48 -1
- package/es/i18n/resources/en/datePicker.mjs.map +1 -1
- package/es/i18n/resources/zhCn/datePicker.d.mts +47 -0
- package/es/i18n/resources/zhCn/datePicker.mjs +48 -1
- package/es/i18n/resources/zhCn/datePicker.mjs.map +1 -1
- package/es/i18n/resources/zhCn/index.mjs +1 -1
- package/es/utils/styleEngine.mjs +1 -0
- package/package.json +2 -1
- package/es/base-ui/DatePicker/CalendarPanel.mjs +0 -188
- package/es/base-ui/DatePicker/CalendarPanel.mjs.map +0 -1
- package/es/base-ui/DatePicker/PickerShell.mjs +0 -43
- package/es/base-ui/DatePicker/PickerShell.mjs.map +0 -1
- package/es/base-ui/DatePicker/calendar.d.mts +0 -5
- package/es/base-ui/DatePicker/calendar.mjs +0 -46
- package/es/base-ui/DatePicker/calendar.mjs.map +0 -1
|
@@ -1,12 +1,59 @@
|
|
|
1
1
|
//#region src/i18n/resources/zhCn/datePicker.ts
|
|
2
2
|
var datePicker_default = {
|
|
3
|
+
"datePicker.backToToday": "返回今天",
|
|
4
|
+
"datePicker.cellDateFormat": "D",
|
|
5
|
+
"datePicker.cellQuarterFormat": "[Q]Q",
|
|
6
|
+
"datePicker.cellYearFormat": "YYYY",
|
|
7
|
+
"datePicker.clear": "清除",
|
|
8
|
+
"datePicker.dateSelect": "选择日期",
|
|
9
|
+
"datePicker.decadeSelect": "选择年代",
|
|
3
10
|
"datePicker.endPlaceholder": "结束日期",
|
|
11
|
+
"datePicker.fieldDateFormat": "YYYY-MM-DD",
|
|
12
|
+
"datePicker.fieldMonthFormat": "YYYY-MM",
|
|
13
|
+
"datePicker.fieldQuarterFormat": "YYYY-[Q]Q",
|
|
14
|
+
"datePicker.fieldWeekFormat": "gggg-wo",
|
|
15
|
+
"datePicker.fieldYearFormat": "YYYY",
|
|
16
|
+
"datePicker.month": "月",
|
|
17
|
+
"datePicker.monthBeforeYear": "false",
|
|
4
18
|
"datePicker.monthPlaceholder": "选择月份",
|
|
19
|
+
"datePicker.monthSelect": "选择月份",
|
|
5
20
|
"datePicker.next": "下一页",
|
|
21
|
+
"datePicker.nextCentury": "下一世纪",
|
|
22
|
+
"datePicker.nextDecade": "下一年代",
|
|
23
|
+
"datePicker.nextMonth": "下个月",
|
|
24
|
+
"datePicker.nextYear": "下一年",
|
|
25
|
+
"datePicker.now": "此刻",
|
|
26
|
+
"datePicker.ok": "确定",
|
|
6
27
|
"datePicker.placeholder": "选择日期",
|
|
7
28
|
"datePicker.previous": "上一页",
|
|
29
|
+
"datePicker.previousCentury": "上一世纪",
|
|
30
|
+
"datePicker.previousDecade": "上一年代",
|
|
31
|
+
"datePicker.previousMonth": "上个月",
|
|
32
|
+
"datePicker.previousYear": "上一年",
|
|
33
|
+
"datePicker.quarterPlaceholder": "选择季度",
|
|
34
|
+
"datePicker.rangeMonthPlaceholder.end": "结束月份",
|
|
35
|
+
"datePicker.rangeMonthPlaceholder.start": "开始月份",
|
|
36
|
+
"datePicker.rangeQuarterPlaceholder.end": "结束季度",
|
|
37
|
+
"datePicker.rangeQuarterPlaceholder.start": "开始季度",
|
|
38
|
+
"datePicker.rangeTimePlaceholder.end": "结束时间",
|
|
39
|
+
"datePicker.rangeTimePlaceholder.start": "开始时间",
|
|
40
|
+
"datePicker.rangeWeekPlaceholder.end": "结束周",
|
|
41
|
+
"datePicker.rangeWeekPlaceholder.start": "开始周",
|
|
42
|
+
"datePicker.rangeYearPlaceholder.end": "结束年份",
|
|
43
|
+
"datePicker.rangeYearPlaceholder.start": "开始年份",
|
|
44
|
+
"datePicker.shortMonths": "1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月",
|
|
45
|
+
"datePicker.shortWeekDays": "日,一,二,三,四,五,六",
|
|
8
46
|
"datePicker.startPlaceholder": "开始日期",
|
|
9
|
-
"datePicker.
|
|
47
|
+
"datePicker.timePlaceholder": "选择时间",
|
|
48
|
+
"datePicker.timeSelect": "选择时间",
|
|
49
|
+
"datePicker.today": "今天",
|
|
50
|
+
"datePicker.week": "周",
|
|
51
|
+
"datePicker.weekPlaceholder": "选择周",
|
|
52
|
+
"datePicker.weekSelect": "选择周",
|
|
53
|
+
"datePicker.year": "年",
|
|
54
|
+
"datePicker.yearFormat": "YYYY年",
|
|
55
|
+
"datePicker.yearPlaceholder": "选择年份",
|
|
56
|
+
"datePicker.yearSelect": "选择年份"
|
|
10
57
|
};
|
|
11
58
|
//#endregion
|
|
12
59
|
export { datePicker_default as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../src/i18n/resources/zhCn/datePicker.ts"],"sourcesContent":["export default {\n 'datePicker.endPlaceholder': '结束日期',\n 'datePicker.monthPlaceholder': '选择月份',\n 'datePicker.next': '下一页',\n 'datePicker.placeholder': '选择日期',\n 'datePicker.previous': '上一页',\n 'datePicker.startPlaceholder': '开始日期',\n 'datePicker.yearPlaceholder': '选择年份',\n} as const;\n"],"mappings":";AAAA,IAAA,qBAAe;CACb,6BAA6B;CAC7B,+BAA+B;CAC/B,mBAAmB;CACnB,0BAA0B;CAC1B,uBAAuB;CACvB,+BAA+B;CAC/B,8BAA8B;
|
|
1
|
+
{"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../src/i18n/resources/zhCn/datePicker.ts"],"sourcesContent":["export default {\n 'datePicker.backToToday': '返回今天',\n 'datePicker.cellDateFormat': 'D',\n 'datePicker.cellQuarterFormat': '[Q]Q',\n 'datePicker.cellYearFormat': 'YYYY',\n 'datePicker.clear': '清除',\n 'datePicker.dateSelect': '选择日期',\n 'datePicker.decadeSelect': '选择年代',\n 'datePicker.endPlaceholder': '结束日期',\n 'datePicker.fieldDateFormat': 'YYYY-MM-DD',\n 'datePicker.fieldMonthFormat': 'YYYY-MM',\n 'datePicker.fieldQuarterFormat': 'YYYY-[Q]Q',\n 'datePicker.fieldWeekFormat': 'gggg-wo',\n 'datePicker.fieldYearFormat': 'YYYY',\n 'datePicker.month': '月',\n 'datePicker.monthBeforeYear': 'false',\n 'datePicker.monthPlaceholder': '选择月份',\n 'datePicker.monthSelect': '选择月份',\n 'datePicker.next': '下一页',\n 'datePicker.nextCentury': '下一世纪',\n 'datePicker.nextDecade': '下一年代',\n 'datePicker.nextMonth': '下个月',\n 'datePicker.nextYear': '下一年',\n 'datePicker.now': '此刻',\n 'datePicker.ok': '确定',\n 'datePicker.placeholder': '选择日期',\n 'datePicker.previous': '上一页',\n 'datePicker.previousCentury': '上一世纪',\n 'datePicker.previousDecade': '上一年代',\n 'datePicker.previousMonth': '上个月',\n 'datePicker.previousYear': '上一年',\n 'datePicker.quarterPlaceholder': '选择季度',\n 'datePicker.rangeMonthPlaceholder.end': '结束月份',\n 'datePicker.rangeMonthPlaceholder.start': '开始月份',\n 'datePicker.rangeQuarterPlaceholder.end': '结束季度',\n 'datePicker.rangeQuarterPlaceholder.start': '开始季度',\n 'datePicker.rangeTimePlaceholder.end': '结束时间',\n 'datePicker.rangeTimePlaceholder.start': '开始时间',\n 'datePicker.rangeWeekPlaceholder.end': '结束周',\n 'datePicker.rangeWeekPlaceholder.start': '开始周',\n 'datePicker.rangeYearPlaceholder.end': '结束年份',\n 'datePicker.rangeYearPlaceholder.start': '开始年份',\n 'datePicker.shortMonths': '1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月',\n 'datePicker.shortWeekDays': '日,一,二,三,四,五,六',\n 'datePicker.startPlaceholder': '开始日期',\n 'datePicker.timePlaceholder': '选择时间',\n 'datePicker.timeSelect': '选择时间',\n 'datePicker.today': '今天',\n 'datePicker.week': '周',\n 'datePicker.weekPlaceholder': '选择周',\n 'datePicker.weekSelect': '选择周',\n 'datePicker.year': '年',\n 'datePicker.yearFormat': 'YYYY年',\n 'datePicker.yearPlaceholder': '选择年份',\n 'datePicker.yearSelect': '选择年份',\n} as const;\n"],"mappings":";AAAA,IAAA,qBAAe;CACb,0BAA0B;CAC1B,6BAA6B;CAC7B,gCAAgC;CAChC,6BAA6B;CAC7B,oBAAoB;CACpB,yBAAyB;CACzB,2BAA2B;CAC3B,6BAA6B;CAC7B,8BAA8B;CAC9B,+BAA+B;CAC/B,iCAAiC;CACjC,8BAA8B;CAC9B,8BAA8B;CAC9B,oBAAoB;CACpB,8BAA8B;CAC9B,+BAA+B;CAC/B,0BAA0B;CAC1B,mBAAmB;CACnB,0BAA0B;CAC1B,yBAAyB;CACzB,wBAAwB;CACxB,uBAAuB;CACvB,kBAAkB;CAClB,iBAAiB;CACjB,0BAA0B;CAC1B,uBAAuB;CACvB,8BAA8B;CAC9B,6BAA6B;CAC7B,4BAA4B;CAC5B,2BAA2B;CAC3B,iCAAiC;CACjC,wCAAwC;CACxC,0CAA0C;CAC1C,0CAA0C;CAC1C,4CAA4C;CAC5C,uCAAuC;CACvC,yCAAyC;CACzC,uCAAuC;CACvC,yCAAyC;CACzC,uCAAuC;CACvC,yCAAyC;CACzC,0BAA0B;CAC1B,4BAA4B;CAC5B,+BAA+B;CAC/B,8BAA8B;CAC9B,yBAAyB;CACzB,oBAAoB;CACpB,mBAAmB;CACnB,8BAA8B;CAC9B,yBAAyB;CACzB,mBAAmB;CACnB,yBAAyB;CACzB,8BAA8B;CAC9B,yBAAyB;AAC3B"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __exportAll } from "../../../_virtual/_rolldown/runtime.mjs";
|
|
2
|
+
import datePicker_default from "./datePicker.mjs";
|
|
2
3
|
import burger_default from "./burger.mjs";
|
|
3
4
|
import chat_default from "./chat.mjs";
|
|
4
5
|
import colorPicker_default from "./colorPicker.mjs";
|
|
5
6
|
import common_default from "./common.mjs";
|
|
6
|
-
import datePicker_default from "./datePicker.mjs";
|
|
7
7
|
import editableMessage_default from "./editableMessage.mjs";
|
|
8
8
|
import emojiPicker_default from "./emojiPicker.mjs";
|
|
9
9
|
import form_default from "./form.mjs";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createStaticStyles, cx, useThemeMode } from "antd-style";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobehub/ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.64.1",
|
|
4
4
|
"description": "Lobe UI is an open-source UI component library for building AIGC web apps",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lobehub",
|
|
@@ -165,6 +165,7 @@
|
|
|
165
165
|
"@mdx-js/react": "^3.1.1",
|
|
166
166
|
"@pierre/diffs": "1.2.12",
|
|
167
167
|
"@radix-ui/react-slot": "^1.3.0",
|
|
168
|
+
"@rc-component/picker": "~1.12.2",
|
|
168
169
|
"@rc-component/table": "~1.11.1",
|
|
169
170
|
"@shikijs/core": "^4.3.1",
|
|
170
171
|
"@shikijs/stream": "^4.3.1",
|
|
@@ -1,188 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import Icon from "../../Icon/Icon.mjs";
|
|
3
|
-
import { useTranslation } from "../../i18n/useTranslation.mjs";
|
|
4
|
-
import { panelStyles } from "../panelStyles.mjs";
|
|
5
|
-
import datePicker_default from "../../i18n/resources/en/datePicker.mjs";
|
|
6
|
-
import { buildMonthGrid, getWeekStart, getWeekdayLabels, isDayDisabled, isMonthDisabled, isSameDay, isYearDisabled, moveDayFocus, orderRange } from "./calendar.mjs";
|
|
7
|
-
import { styles } from "./style.mjs";
|
|
8
|
-
import { memo, useEffect, useRef, useState } from "react";
|
|
9
|
-
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
import { cx } from "antd-style";
|
|
11
|
-
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
12
|
-
import dayjs from "dayjs";
|
|
13
|
-
//#region src/base-ui/DatePicker/CalendarPanel.tsx
|
|
14
|
-
const MONTHS = Array.from({ length: 12 }, (_, index) => index);
|
|
15
|
-
const CalendarPanel = memo(({ bounds, hovered, mode, month, onHover, onMonthChange, onSelect, range, selected, showNav = true }) => {
|
|
16
|
-
const { t } = useTranslation(datePicker_default);
|
|
17
|
-
const [view, setView] = useState(mode);
|
|
18
|
-
const [focused, setFocused] = useState(selected ?? month);
|
|
19
|
-
const gridRef = useRef(null);
|
|
20
|
-
const weekStart = getWeekStart();
|
|
21
|
-
const today = /* @__PURE__ */ new Date();
|
|
22
|
-
const current = dayjs(month);
|
|
23
|
-
const decadeStart = Math.floor(current.year() / 12) * 12;
|
|
24
|
-
const days = buildMonthGrid(month, weekStart);
|
|
25
|
-
const focusDay = dayjs(focused).isSame(month, "month") && !isDayDisabled(focused, bounds) ? focused : days.find((day) => dayjs(day).isSame(month, "month") && !isDayDisabled(day, bounds)) ?? current.startOf("month").toDate();
|
|
26
|
-
const keyboardMoveRef = useRef(false);
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
if (!keyboardMoveRef.current) return;
|
|
29
|
-
keyboardMoveRef.current = false;
|
|
30
|
-
gridRef.current?.querySelector("[data-focus-target]")?.focus();
|
|
31
|
-
}, [focused, month]);
|
|
32
|
-
const step = (direction) => {
|
|
33
|
-
const unit = view === "date" ? "month" : "year";
|
|
34
|
-
const amount = view === "year" ? 12 * direction : direction;
|
|
35
|
-
onMonthChange(current.add(amount, unit).toDate());
|
|
36
|
-
};
|
|
37
|
-
const drillUp = () => setView(view === "date" ? "month" : "year");
|
|
38
|
-
const handleDayKey = (event) => {
|
|
39
|
-
let next = moveDayFocus(focusDay, event.key, weekStart);
|
|
40
|
-
if (!next) return;
|
|
41
|
-
event.preventDefault();
|
|
42
|
-
for (let step = 0; next && isDayDisabled(next, bounds) && step < 366; step++) next = moveDayFocus(next, event.key, weekStart);
|
|
43
|
-
if (!next || isDayDisabled(next, bounds)) return;
|
|
44
|
-
keyboardMoveRef.current = true;
|
|
45
|
-
setFocused(next);
|
|
46
|
-
if (!dayjs(next).isSame(month, "month")) onMonthChange(next);
|
|
47
|
-
};
|
|
48
|
-
const band = (() => {
|
|
49
|
-
if (!range?.[0]) return null;
|
|
50
|
-
const end = range[1] ?? hovered;
|
|
51
|
-
return end ? orderRange(range[0], end) : null;
|
|
52
|
-
})();
|
|
53
|
-
const renderDays = () => {
|
|
54
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
55
|
-
"aria-label": current.format("MMMM YYYY"),
|
|
56
|
-
className: styles.grid,
|
|
57
|
-
ref: gridRef,
|
|
58
|
-
role: "grid",
|
|
59
|
-
onMouseLeave: () => onHover?.(null),
|
|
60
|
-
children: [getWeekdayLabels(weekStart).map((label) => /* @__PURE__ */ jsx("span", {
|
|
61
|
-
className: cx(styles.weekday, panelStyles.label),
|
|
62
|
-
role: "columnheader",
|
|
63
|
-
children: label
|
|
64
|
-
}, label)), days.map((date) => {
|
|
65
|
-
const outside = !dayjs(date).isSame(month, "month");
|
|
66
|
-
const isStart = !outside && !!band && isSameDay(date, band[0]);
|
|
67
|
-
const isEnd = !outside && !!band && isSameDay(date, band[1]);
|
|
68
|
-
const inBand = !outside && !!band && dayjs(date).isAfter(band[0], "day") && dayjs(date).isBefore(band[1], "day");
|
|
69
|
-
const pressed = !outside && (isSameDay(date, selected) || isStart || isEnd);
|
|
70
|
-
const focusTarget = isSameDay(date, focusDay) && !outside;
|
|
71
|
-
return /* @__PURE__ */ jsx("span", {
|
|
72
|
-
"aria-selected": pressed,
|
|
73
|
-
role: "gridcell",
|
|
74
|
-
className: cx(styles.cell, inBand && styles.band, isStart && !isEnd && styles.bandStart, isEnd && !isStart && styles.bandEnd),
|
|
75
|
-
children: /* @__PURE__ */ jsx("button", {
|
|
76
|
-
"aria-label": dayjs(date).format("MMMM D, YYYY"),
|
|
77
|
-
"aria-pressed": pressed,
|
|
78
|
-
className: styles.day,
|
|
79
|
-
"data-focus-target": focusTarget ? "" : void 0,
|
|
80
|
-
"data-outside": outside ? "" : void 0,
|
|
81
|
-
"data-today": isSameDay(date, today) ? "" : void 0,
|
|
82
|
-
disabled: isDayDisabled(date, bounds),
|
|
83
|
-
tabIndex: focusTarget ? 0 : -1,
|
|
84
|
-
type: "button",
|
|
85
|
-
onClick: () => onSelect(dayjs(date).startOf("day").toDate()),
|
|
86
|
-
onKeyDown: handleDayKey,
|
|
87
|
-
onMouseEnter: () => onHover?.(date),
|
|
88
|
-
children: date.getDate()
|
|
89
|
-
})
|
|
90
|
-
}, date.toISOString());
|
|
91
|
-
})]
|
|
92
|
-
});
|
|
93
|
-
};
|
|
94
|
-
const renderMonths = () => /* @__PURE__ */ jsx("div", {
|
|
95
|
-
className: styles.tiles,
|
|
96
|
-
children: MONTHS.map((index) => {
|
|
97
|
-
const date = current.month(index).startOf("month").toDate();
|
|
98
|
-
return /* @__PURE__ */ jsx("button", {
|
|
99
|
-
"aria-pressed": !!selected && dayjs(selected).isSame(date, "month"),
|
|
100
|
-
className: styles.tile,
|
|
101
|
-
"data-today": dayjs(today).isSame(date, "month") ? "" : void 0,
|
|
102
|
-
disabled: isMonthDisabled(date, bounds),
|
|
103
|
-
type: "button",
|
|
104
|
-
onClick: () => {
|
|
105
|
-
if (mode === "month") return onSelect(date);
|
|
106
|
-
onMonthChange(date);
|
|
107
|
-
setView("date");
|
|
108
|
-
},
|
|
109
|
-
children: dayjs(date).format("MMM")
|
|
110
|
-
}, index);
|
|
111
|
-
})
|
|
112
|
-
});
|
|
113
|
-
const renderYears = () => /* @__PURE__ */ jsx("div", {
|
|
114
|
-
className: styles.tiles,
|
|
115
|
-
children: MONTHS.map((index) => {
|
|
116
|
-
const date = dayjs(new Date(decadeStart + index, 0, 1)).toDate();
|
|
117
|
-
return /* @__PURE__ */ jsx("button", {
|
|
118
|
-
"aria-pressed": !!selected && dayjs(selected).isSame(date, "year"),
|
|
119
|
-
className: styles.tile,
|
|
120
|
-
"data-today": dayjs(today).isSame(date, "year") ? "" : void 0,
|
|
121
|
-
disabled: isYearDisabled(date, bounds),
|
|
122
|
-
type: "button",
|
|
123
|
-
onClick: () => {
|
|
124
|
-
if (mode === "year") return onSelect(date);
|
|
125
|
-
onMonthChange(current.year(decadeStart + index).toDate());
|
|
126
|
-
setView("month");
|
|
127
|
-
},
|
|
128
|
-
children: decadeStart + index
|
|
129
|
-
}, index);
|
|
130
|
-
})
|
|
131
|
-
});
|
|
132
|
-
const title = (() => {
|
|
133
|
-
if (view === "date") return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
134
|
-
current.format("MMMM"),
|
|
135
|
-
" ",
|
|
136
|
-
/* @__PURE__ */ jsx("span", {
|
|
137
|
-
className: panelStyles.titleMuted,
|
|
138
|
-
children: current.format("YYYY")
|
|
139
|
-
})
|
|
140
|
-
] });
|
|
141
|
-
if (view === "month") return current.format("YYYY");
|
|
142
|
-
return `${decadeStart} – ${decadeStart + 11}`;
|
|
143
|
-
})();
|
|
144
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
145
|
-
className: styles.calendar,
|
|
146
|
-
children: [
|
|
147
|
-
/* @__PURE__ */ jsxs("div", {
|
|
148
|
-
className: styles.header,
|
|
149
|
-
children: [/* @__PURE__ */ jsx("button", {
|
|
150
|
-
className: panelStyles.title,
|
|
151
|
-
disabled: view === "year",
|
|
152
|
-
type: "button",
|
|
153
|
-
onClick: drillUp,
|
|
154
|
-
children: title
|
|
155
|
-
}), showNav && /* @__PURE__ */ jsxs("div", {
|
|
156
|
-
className: styles.navGroup,
|
|
157
|
-
children: [/* @__PURE__ */ jsx("button", {
|
|
158
|
-
"aria-label": t("datePicker.previous"),
|
|
159
|
-
className: panelStyles.nav,
|
|
160
|
-
type: "button",
|
|
161
|
-
onClick: () => step(-1),
|
|
162
|
-
children: /* @__PURE__ */ jsx(Icon, {
|
|
163
|
-
icon: ChevronLeft,
|
|
164
|
-
size: 14
|
|
165
|
-
})
|
|
166
|
-
}), /* @__PURE__ */ jsx("button", {
|
|
167
|
-
"aria-label": t("datePicker.next"),
|
|
168
|
-
className: panelStyles.nav,
|
|
169
|
-
type: "button",
|
|
170
|
-
onClick: () => step(1),
|
|
171
|
-
children: /* @__PURE__ */ jsx(Icon, {
|
|
172
|
-
icon: ChevronRight,
|
|
173
|
-
size: 14
|
|
174
|
-
})
|
|
175
|
-
})]
|
|
176
|
-
})]
|
|
177
|
-
}),
|
|
178
|
-
view === "date" && renderDays(),
|
|
179
|
-
view === "month" && renderMonths(),
|
|
180
|
-
view === "year" && renderYears()
|
|
181
|
-
]
|
|
182
|
-
});
|
|
183
|
-
});
|
|
184
|
-
CalendarPanel.displayName = "CalendarPanel";
|
|
185
|
-
//#endregion
|
|
186
|
-
export { CalendarPanel as default };
|
|
187
|
-
|
|
188
|
-
//# sourceMappingURL=CalendarPanel.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarPanel.mjs","names":["datePickerMessages"],"sources":["../../../src/base-ui/DatePicker/CalendarPanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport dayjs from 'dayjs';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { type KeyboardEvent, memo, useEffect, useRef, useState } from 'react';\n\nimport { panelStyles } from '@/base-ui/panelStyles';\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\n\nimport {\n buildMonthGrid,\n type CalendarMode,\n type DateBounds,\n getWeekdayLabels,\n getWeekStart,\n isDayDisabled,\n isMonthDisabled,\n isSameDay,\n isYearDisabled,\n moveDayFocus,\n orderRange,\n} from './calendar';\nimport { styles } from './style';\n\nexport interface CalendarPanelProps {\n bounds: DateBounds;\n hovered?: Date | null;\n mode: CalendarMode;\n month: Date;\n onHover?: (date: Date | null) => void;\n onMonthChange: (month: Date) => void;\n onSelect: (date: Date) => void;\n range?: [Date | null, Date | null];\n selected?: Date | null;\n showNav?: boolean;\n}\n\nconst MONTHS = Array.from({ length: 12 }, (_, index) => index);\n\nconst CalendarPanel = memo<CalendarPanelProps>(\n ({\n bounds,\n hovered,\n mode,\n month,\n onHover,\n onMonthChange,\n onSelect,\n range,\n selected,\n showNav = true,\n }) => {\n const { t } = useTranslation(datePickerMessages);\n const [view, setView] = useState<CalendarMode>(mode);\n const [focused, setFocused] = useState<Date>(selected ?? month);\n const gridRef = useRef<HTMLDivElement>(null);\n const weekStart = getWeekStart();\n const today = new Date();\n const current = dayjs(month);\n const decadeStart = Math.floor(current.year() / 12) * 12;\n const days = buildMonthGrid(month, weekStart);\n const focusDay =\n dayjs(focused).isSame(month, 'month') && !isDayDisabled(focused, bounds)\n ? focused\n : (days.find((day) => dayjs(day).isSame(month, 'month') && !isDayDisabled(day, bounds)) ??\n current.startOf('month').toDate());\n const keyboardMoveRef = useRef(false);\n\n useEffect(() => {\n if (!keyboardMoveRef.current) return;\n keyboardMoveRef.current = false;\n gridRef.current?.querySelector<HTMLButtonElement>('[data-focus-target]')?.focus();\n }, [focused, month]);\n\n const step = (direction: 1 | -1) => {\n const unit = view === 'date' ? 'month' : 'year';\n const amount = view === 'year' ? 12 * direction : direction;\n onMonthChange(current.add(amount, unit).toDate());\n };\n\n const drillUp = () => setView(view === 'date' ? 'month' : 'year');\n\n const handleDayKey = (event: KeyboardEvent<HTMLButtonElement>) => {\n let next = moveDayFocus(focusDay, event.key, weekStart);\n if (!next) return;\n event.preventDefault();\n for (let step = 0; next && isDayDisabled(next, bounds) && step < 366; step++) {\n next = moveDayFocus(next, event.key, weekStart);\n }\n if (!next || isDayDisabled(next, bounds)) return;\n keyboardMoveRef.current = true;\n setFocused(next);\n if (!dayjs(next).isSame(month, 'month')) onMonthChange(next);\n };\n\n const band = (() => {\n if (!range?.[0]) return null;\n const end = range[1] ?? hovered;\n return end ? orderRange(range[0], end) : null;\n })();\n\n const renderDays = () => {\n return (\n <div\n aria-label={current.format('MMMM YYYY')}\n className={styles.grid}\n ref={gridRef}\n role=\"grid\"\n onMouseLeave={() => onHover?.(null)}\n >\n {getWeekdayLabels(weekStart).map((label) => (\n <span className={cx(styles.weekday, panelStyles.label)} key={label} role=\"columnheader\">\n {label}\n </span>\n ))}\n {days.map((date) => {\n const outside = !dayjs(date).isSame(month, 'month');\n const isStart = !outside && !!band && isSameDay(date, band[0]);\n const isEnd = !outside && !!band && isSameDay(date, band[1]);\n const inBand =\n !outside &&\n !!band &&\n dayjs(date).isAfter(band[0], 'day') &&\n dayjs(date).isBefore(band[1], 'day');\n const pressed = !outside && (isSameDay(date, selected) || isStart || isEnd);\n const focusTarget = isSameDay(date, focusDay) && !outside;\n\n return (\n <span\n aria-selected={pressed}\n key={date.toISOString()}\n role=\"gridcell\"\n className={cx(\n styles.cell,\n inBand && styles.band,\n isStart && !isEnd && styles.bandStart,\n isEnd && !isStart && styles.bandEnd,\n )}\n >\n <button\n aria-label={dayjs(date).format('MMMM D, YYYY')}\n aria-pressed={pressed}\n className={styles.day}\n data-focus-target={focusTarget ? '' : undefined}\n data-outside={outside ? '' : undefined}\n data-today={isSameDay(date, today) ? '' : undefined}\n disabled={isDayDisabled(date, bounds)}\n tabIndex={focusTarget ? 0 : -1}\n type=\"button\"\n onClick={() => onSelect(dayjs(date).startOf('day').toDate())}\n onKeyDown={handleDayKey}\n onMouseEnter={() => onHover?.(date)}\n >\n {date.getDate()}\n </button>\n </span>\n );\n })}\n </div>\n );\n };\n\n const renderMonths = () => (\n <div className={styles.tiles}>\n {MONTHS.map((index) => {\n const date = current.month(index).startOf('month').toDate();\n return (\n <button\n aria-pressed={!!selected && dayjs(selected).isSame(date, 'month')}\n className={styles.tile}\n data-today={dayjs(today).isSame(date, 'month') ? '' : undefined}\n disabled={isMonthDisabled(date, bounds)}\n key={index}\n type=\"button\"\n onClick={() => {\n if (mode === 'month') return onSelect(date);\n onMonthChange(date);\n setView('date');\n }}\n >\n {dayjs(date).format('MMM')}\n </button>\n );\n })}\n </div>\n );\n\n const renderYears = () => (\n <div className={styles.tiles}>\n {MONTHS.map((index) => {\n const date = dayjs(new Date(decadeStart + index, 0, 1)).toDate();\n return (\n <button\n aria-pressed={!!selected && dayjs(selected).isSame(date, 'year')}\n className={styles.tile}\n data-today={dayjs(today).isSame(date, 'year') ? '' : undefined}\n disabled={isYearDisabled(date, bounds)}\n key={index}\n type=\"button\"\n onClick={() => {\n if (mode === 'year') return onSelect(date);\n onMonthChange(current.year(decadeStart + index).toDate());\n setView('month');\n }}\n >\n {decadeStart + index}\n </button>\n );\n })}\n </div>\n );\n\n const title = (() => {\n if (view === 'date')\n return (\n <>\n {current.format('MMMM')}{' '}\n <span className={panelStyles.titleMuted}>{current.format('YYYY')}</span>\n </>\n );\n if (view === 'month') return current.format('YYYY');\n return `${decadeStart} – ${decadeStart + 11}`;\n })();\n\n return (\n <div className={styles.calendar}>\n <div className={styles.header}>\n <button\n className={panelStyles.title}\n disabled={view === 'year'}\n type=\"button\"\n onClick={drillUp}\n >\n {title}\n </button>\n {showNav && (\n <div className={styles.navGroup}>\n <button\n aria-label={t('datePicker.previous')}\n className={panelStyles.nav}\n type=\"button\"\n onClick={() => step(-1)}\n >\n <Icon icon={ChevronLeft} size={14} />\n </button>\n <button\n aria-label={t('datePicker.next')}\n className={panelStyles.nav}\n type=\"button\"\n onClick={() => step(1)}\n >\n <Icon icon={ChevronRight} size={14} />\n </button>\n </div>\n )}\n </div>\n {view === 'date' && renderDays()}\n {view === 'month' && renderMonths()}\n {view === 'year' && renderYears()}\n </div>\n );\n },\n);\n\nCalendarPanel.displayName = 'CalendarPanel';\n\nexport default CalendarPanel;\n"],"mappings":"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"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { rootVariants } from "../Input/style.mjs";
|
|
3
|
-
import ClearButton from "../Input/ClearButton.mjs";
|
|
4
|
-
import { panelStyles } from "../panelStyles.mjs";
|
|
5
|
-
import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement } from "../Popover/atoms.mjs";
|
|
6
|
-
import { memo, useRef } from "react";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { cx, useThemeMode } from "antd-style";
|
|
9
|
-
//#region src/base-ui/DatePicker/PickerShell.tsx
|
|
10
|
-
const PickerShell = memo(({ children, className, disabled, icon, onClear, onOpenChange, open, shadow, showClear, size = "middle", style, trigger, variant }) => {
|
|
11
|
-
const { isDarkMode } = useThemeMode();
|
|
12
|
-
const anchorRef = useRef(null);
|
|
13
|
-
const popupRef = useRef(null);
|
|
14
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
15
|
-
"data-disabled": disabled ? "" : void 0,
|
|
16
|
-
ref: anchorRef,
|
|
17
|
-
style,
|
|
18
|
-
className: cx(rootVariants({
|
|
19
|
-
shadow,
|
|
20
|
-
size,
|
|
21
|
-
variant: variant || (isDarkMode ? "filled" : "outlined")
|
|
22
|
-
}), className),
|
|
23
|
-
children: [/* @__PURE__ */ jsxs(PopoverRoot, {
|
|
24
|
-
open,
|
|
25
|
-
onOpenChange: (next) => !disabled && onOpenChange(next),
|
|
26
|
-
children: [/* @__PURE__ */ jsx(PopoverTriggerElement, { children: trigger }), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
|
|
27
|
-
anchor: anchorRef,
|
|
28
|
-
placement: "bottomLeft",
|
|
29
|
-
children: /* @__PURE__ */ jsx(PopoverPopup, {
|
|
30
|
-
className: panelStyles.popup,
|
|
31
|
-
ref: popupRef,
|
|
32
|
-
initialFocus: () => popupRef.current?.querySelector("[data-focus-target]") ?? true,
|
|
33
|
-
children
|
|
34
|
-
})
|
|
35
|
-
}) })]
|
|
36
|
-
}), showClear && !disabled ? /* @__PURE__ */ jsx(ClearButton, { onClear }) : icon]
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
PickerShell.displayName = "PickerShell";
|
|
40
|
-
//#endregion
|
|
41
|
-
export { PickerShell as default };
|
|
42
|
-
|
|
43
|
-
//# sourceMappingURL=PickerShell.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PickerShell.mjs","names":[],"sources":["../../../src/base-ui/DatePicker/PickerShell.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { type CSSProperties, memo, type ReactElement, type ReactNode, useRef } from 'react';\n\nimport ClearButton from '@/base-ui/Input/ClearButton';\nimport { rootVariants } from '@/base-ui/Input/style';\nimport type { InputSize, InputVariant } from '@/base-ui/Input/type';\nimport { panelStyles } from '@/base-ui/panelStyles';\nimport {\n PopoverPopup,\n PopoverPortal,\n PopoverPositioner,\n PopoverRoot,\n PopoverTriggerElement,\n} from '@/base-ui/Popover';\n\nexport interface PickerShellProps {\n children: ReactNode;\n className?: string;\n disabled?: boolean;\n icon: ReactNode;\n onClear: () => void;\n onOpenChange: (open: boolean) => void;\n open: boolean;\n shadow?: boolean;\n showClear: boolean;\n size?: InputSize;\n style?: CSSProperties;\n trigger: ReactElement;\n variant?: InputVariant;\n}\n\nconst PickerShell = memo<PickerShellProps>(\n ({\n children,\n className,\n disabled,\n icon,\n onClear,\n onOpenChange,\n open,\n shadow,\n showClear,\n size = 'middle',\n style,\n trigger,\n variant,\n }) => {\n const { isDarkMode } = useThemeMode();\n const anchorRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n return (\n <div\n data-disabled={disabled ? '' : undefined}\n ref={anchorRef}\n style={style}\n className={cx(\n rootVariants({ shadow, size, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n className,\n )}\n >\n <PopoverRoot open={open} onOpenChange={(next) => !disabled && onOpenChange(next)}>\n <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n <PopoverPortal>\n <PopoverPositioner anchor={anchorRef} placement=\"bottomLeft\">\n <PopoverPopup\n className={panelStyles.popup}\n ref={popupRef}\n initialFocus={() =>\n popupRef.current?.querySelector<HTMLElement>('[data-focus-target]') ?? true\n }\n >\n {children}\n </PopoverPopup>\n </PopoverPositioner>\n </PopoverPortal>\n </PopoverRoot>\n {showClear && !disabled ? <ClearButton onClear={onClear} /> : icon}\n </div>\n );\n },\n);\n\nPickerShell.displayName = 'PickerShell';\n\nexport default PickerShell;\n"],"mappings":";;;;;;;;;AAiCA,MAAM,cAAc,MACjB,EACC,UACA,WACA,UACA,MACA,SACA,cACA,MACA,QACA,WACA,OAAO,UACP,OACA,SACA,cACI;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,WAAW,OAAuB,IAAI;CAE5C,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,KAAK;EACE;EACP,WAAW,GACT,aAAa;GAAE;GAAQ;GAAM,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GACvF,SACF;EAPF,UAAA,CASE,qBAAC,aAAD;GAAmB;GAAM,eAAe,SAAS,CAAC,YAAY,aAAa,IAAI;GAA/E,UAAA,CACE,oBAAC,uBAAD,EAAA,UAAwB,QAA+B,CAAA,GACvD,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD;IAAmB,QAAQ;IAAW,WAAU;IAC9C,UAAA,oBAAC,cAAD;KACE,WAAW,YAAY;KACvB,KAAK;KACL,oBACE,SAAS,SAAS,cAA2B,qBAAqB,KAAK;KAGxE;IACW,CAAA;GACG,CAAA,EACN,CAAA,CACJ;EACZ,CAAA,GAAA,aAAa,CAAC,WAAW,oBAAC,aAAD,EAAsB,QAAU,CAAA,IAAI,IAC3D;;AAET,CACF;AAEA,YAAY,cAAc"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import dayjs from "dayjs";
|
|
2
|
-
//#region src/base-ui/DatePicker/calendar.ts
|
|
3
|
-
const DEFAULT_FORMAT = {
|
|
4
|
-
date: "MMM D, YYYY",
|
|
5
|
-
month: "MMMM YYYY",
|
|
6
|
-
year: "YYYY"
|
|
7
|
-
};
|
|
8
|
-
const getWeekStart = () => {
|
|
9
|
-
return dayjs.Ls[dayjs.locale()]?.weekStart ?? 0;
|
|
10
|
-
};
|
|
11
|
-
const offsetFromWeekStart = (date, weekStart) => (dayjs(date).day() - weekStart + 7) % 7;
|
|
12
|
-
const buildMonthGrid = (month, weekStart = getWeekStart()) => {
|
|
13
|
-
const first = dayjs(month).startOf("month");
|
|
14
|
-
const start = first.subtract(offsetFromWeekStart(first.toDate(), weekStart), "day");
|
|
15
|
-
return Array.from({ length: 42 }, (_, index) => start.add(index, "day").toDate());
|
|
16
|
-
};
|
|
17
|
-
const getWeekdayLabels = (weekStart = getWeekStart()) => Array.from({ length: 7 }, (_, index) => dayjs().day((weekStart + index) % 7).format("dd"));
|
|
18
|
-
const isSameDay = (a, b) => !!a && !!b && dayjs(a).isSame(b, "day");
|
|
19
|
-
const isDayDisabled = (date, { disabledDate, max, min }) => !!min && dayjs(date).isBefore(min, "day") || !!max && dayjs(date).isAfter(max, "day") || !!disabledDate?.(date);
|
|
20
|
-
const isMonthDisabled = (month, { max, min }) => !!min && dayjs(month).isBefore(min, "month") || !!max && dayjs(month).isAfter(max, "month");
|
|
21
|
-
const isYearDisabled = (year, { max, min }) => !!min && dayjs(year).isBefore(min, "year") || !!max && dayjs(year).isAfter(max, "year");
|
|
22
|
-
const moveDayFocus = (date, key, weekStart = getWeekStart()) => {
|
|
23
|
-
const current = dayjs(date);
|
|
24
|
-
const offset = offsetFromWeekStart(date, weekStart);
|
|
25
|
-
switch (key) {
|
|
26
|
-
case "ArrowLeft": return current.subtract(1, "day").toDate();
|
|
27
|
-
case "ArrowRight": return current.add(1, "day").toDate();
|
|
28
|
-
case "ArrowUp": return current.subtract(7, "day").toDate();
|
|
29
|
-
case "ArrowDown": return current.add(7, "day").toDate();
|
|
30
|
-
case "PageUp": return current.subtract(1, "month").toDate();
|
|
31
|
-
case "PageDown": return current.add(1, "month").toDate();
|
|
32
|
-
case "Home": return current.subtract(offset, "day").toDate();
|
|
33
|
-
case "End": return current.add(6 - offset, "day").toDate();
|
|
34
|
-
default: return null;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
const orderRange = (a, b) => dayjs(a).isAfter(b, "day") ? [b, a] : [a, b];
|
|
38
|
-
const clampToBounds = (date, { max, min }) => {
|
|
39
|
-
if (min && dayjs(date).isBefore(min, "day")) return min;
|
|
40
|
-
if (max && dayjs(date).isAfter(max, "day")) return max;
|
|
41
|
-
return date;
|
|
42
|
-
};
|
|
43
|
-
//#endregion
|
|
44
|
-
export { DEFAULT_FORMAT, buildMonthGrid, clampToBounds, getWeekStart, getWeekdayLabels, isDayDisabled, isMonthDisabled, isSameDay, isYearDisabled, moveDayFocus, orderRange };
|
|
45
|
-
|
|
46
|
-
//# sourceMappingURL=calendar.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.mjs","names":[],"sources":["../../../src/base-ui/DatePicker/calendar.ts"],"sourcesContent":["import dayjs from 'dayjs';\n\nexport type CalendarMode = 'date' | 'month' | 'year';\n\nexport interface DateBounds {\n disabledDate?: (date: Date) => boolean;\n max?: Date;\n min?: Date;\n}\n\nexport const DEFAULT_FORMAT: Record<CalendarMode, string> = {\n date: 'MMM D, YYYY',\n month: 'MMMM YYYY',\n year: 'YYYY',\n};\n\nexport const getWeekStart = (): number => {\n const locales = (dayjs as unknown as { Ls: Record<string, { weekStart?: number }> }).Ls;\n return locales[dayjs.locale()]?.weekStart ?? 0;\n};\n\nconst offsetFromWeekStart = (date: Date, weekStart: number) =>\n (dayjs(date).day() - weekStart + 7) % 7;\n\nexport const buildMonthGrid = (month: Date, weekStart = getWeekStart()): Date[] => {\n const first = dayjs(month).startOf('month');\n const start = first.subtract(offsetFromWeekStart(first.toDate(), weekStart), 'day');\n return Array.from({ length: 42 }, (_, index) => start.add(index, 'day').toDate());\n};\n\nexport const getWeekdayLabels = (weekStart = getWeekStart()): string[] =>\n Array.from({ length: 7 }, (_, index) =>\n dayjs()\n .day((weekStart + index) % 7)\n .format('dd'),\n );\n\nexport const isSameDay = (a?: Date | null, b?: Date | null) =>\n !!a && !!b && dayjs(a).isSame(b, 'day');\n\nexport const isDayDisabled = (date: Date, { disabledDate, max, min }: DateBounds) =>\n (!!min && dayjs(date).isBefore(min, 'day')) ||\n (!!max && dayjs(date).isAfter(max, 'day')) ||\n !!disabledDate?.(date);\n\nexport const isMonthDisabled = (month: Date, { max, min }: DateBounds) =>\n (!!min && dayjs(month).isBefore(min, 'month')) || (!!max && dayjs(month).isAfter(max, 'month'));\n\nexport const isYearDisabled = (year: Date, { max, min }: DateBounds) =>\n (!!min && dayjs(year).isBefore(min, 'year')) || (!!max && dayjs(year).isAfter(max, 'year'));\n\nexport const moveDayFocus = (date: Date, key: string, weekStart = getWeekStart()): Date | null => {\n const current = dayjs(date);\n const offset = offsetFromWeekStart(date, weekStart);\n switch (key) {\n case 'ArrowLeft': {\n return current.subtract(1, 'day').toDate();\n }\n case 'ArrowRight': {\n return current.add(1, 'day').toDate();\n }\n case 'ArrowUp': {\n return current.subtract(7, 'day').toDate();\n }\n case 'ArrowDown': {\n return current.add(7, 'day').toDate();\n }\n case 'PageUp': {\n return current.subtract(1, 'month').toDate();\n }\n case 'PageDown': {\n return current.add(1, 'month').toDate();\n }\n case 'Home': {\n return current.subtract(offset, 'day').toDate();\n }\n case 'End': {\n return current.add(6 - offset, 'day').toDate();\n }\n default: {\n return null;\n }\n }\n};\n\nexport const orderRange = (a: Date, b: Date): [Date, Date] =>\n dayjs(a).isAfter(b, 'day') ? [b, a] : [a, b];\n\nexport const clampToBounds = (date: Date, { max, min }: DateBounds): Date => {\n if (min && dayjs(date).isBefore(min, 'day')) return min;\n if (max && dayjs(date).isAfter(max, 'day')) return max;\n return date;\n};\n"],"mappings":"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"}
|