@tidbcloud/uikit 2.7.6 → 2.8.0
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/CHANGELOG.md +18 -0
- package/dist/biz/DateTimePicker/helpers.cjs +7 -0
- package/dist/biz/DateTimePicker/helpers.d.cts +2 -3
- package/dist/biz/DateTimePicker/helpers.d.mts +2 -3
- package/dist/biz/DateTimePicker/helpers.mjs +7 -0
- package/dist/biz/DateTimePicker/index.cjs +51 -5
- package/dist/biz/DateTimePicker/index.d.cts +1 -1
- package/dist/biz/DateTimePicker/index.d.mts +1 -1
- package/dist/biz/DateTimePicker/index.mjs +51 -5
- package/dist/biz/DateTimePicker/types.d.cts +12 -0
- package/dist/biz/DateTimePicker/types.d.mts +12 -0
- package/dist/theme/theme.cjs +1 -3
- package/dist/theme/theme.mjs +1 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @tidbcloud/uikit
|
|
2
2
|
|
|
3
|
+
## 2.8.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- fix(uikit): make DateTimePicker future mode opt-in ([#647](https://github.com/tidbcloud/tidbcloud-uikit/pull/647))
|
|
8
|
+
- feat(uikit): update DateTimePicker date states ([#645](https://github.com/tidbcloud/tidbcloud-uikit/pull/645))
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- fix(uikit): make DateTimePicker future mode opt-in ([#647](https://github.com/tidbcloud/tidbcloud-uikit/pull/647))
|
|
13
|
+
- feat(uikit): update DateTimePicker date states ([#645](https://github.com/tidbcloud/tidbcloud-uikit/pull/645))
|
|
14
|
+
|
|
15
|
+
## 2.7.7
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- fix(uikit): simplify hover styles in theme ([#641](https://github.com/tidbcloud/tidbcloud-uikit/pull/641))
|
|
20
|
+
|
|
3
21
|
## 2.7.6
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -6,6 +6,8 @@ const dayjs = require("../../utils/dayjs.cjs");
|
|
|
6
6
|
const useDateTimePicker = ({
|
|
7
7
|
value,
|
|
8
8
|
onChange,
|
|
9
|
+
today = /* @__PURE__ */ new Date(),
|
|
10
|
+
futureOnly = false,
|
|
9
11
|
startDate = dayjs.dayjs().subtract(10, "year").toDate(),
|
|
10
12
|
endDate = dayjs.dayjs().add(10, "year").toDate(),
|
|
11
13
|
utcOffset = dayjs.dayjs().utcOffset(),
|
|
@@ -28,6 +30,9 @@ const useDateTimePicker = ({
|
|
|
28
30
|
const displayStartDate = React.useMemo(() => {
|
|
29
31
|
return convertToLocal(startDate);
|
|
30
32
|
}, [startDate, convertToLocal]);
|
|
33
|
+
const displayToday = React.useMemo(() => {
|
|
34
|
+
return convertToLocal(today);
|
|
35
|
+
}, [today, convertToLocal]);
|
|
31
36
|
const displayEndDate = React.useMemo(() => {
|
|
32
37
|
return convertToLocal(endDate);
|
|
33
38
|
}, [endDate, convertToLocal]);
|
|
@@ -38,6 +43,8 @@ const useDateTimePicker = ({
|
|
|
38
43
|
return {
|
|
39
44
|
value: displayValue,
|
|
40
45
|
onChange: handleChange,
|
|
46
|
+
today: displayToday,
|
|
47
|
+
futureOnly,
|
|
41
48
|
startDate: displayStartDate,
|
|
42
49
|
endDate: displayEndDate,
|
|
43
50
|
formatter: (val) => {
|
|
@@ -29,7 +29,7 @@ declare module '@mantine/core' {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
import { DateTimePickerProps } from './types.cjs';
|
|
32
|
-
export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
|
|
32
|
+
export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'today' | 'futureOnly' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
|
|
33
33
|
/**
|
|
34
34
|
* the UTC offset in minutes.
|
|
35
35
|
* User selected time will be treated as time in that timezone
|
|
@@ -54,7 +54,6 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
|
|
|
54
54
|
* const dateTimePickerProps = useDateTimePicker({
|
|
55
55
|
* value,
|
|
56
56
|
* onChange: setValue,
|
|
57
|
-
* startDate: dayjs().subtract(1, 'day').toDate(),
|
|
58
57
|
* endDate: dayjs().add(1, 'day').toDate(),
|
|
59
58
|
* utcOffset
|
|
60
59
|
* })
|
|
@@ -64,4 +63,4 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
|
|
|
64
63
|
* }
|
|
65
64
|
* ```
|
|
66
65
|
*/
|
|
67
|
-
export declare const useDateTimePicker: ({ value, onChange, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "startDate" | "endDate" | "formatter">;
|
|
66
|
+
export declare const useDateTimePicker: ({ value, onChange, today, futureOnly, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "today" | "futureOnly" | "startDate" | "endDate" | "formatter">;
|
|
@@ -29,7 +29,7 @@ declare module '@mantine/core' {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
import { DateTimePickerProps } from './types.mjs';
|
|
32
|
-
export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
|
|
32
|
+
export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'today' | 'futureOnly' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
|
|
33
33
|
/**
|
|
34
34
|
* the UTC offset in minutes.
|
|
35
35
|
* User selected time will be treated as time in that timezone
|
|
@@ -54,7 +54,6 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
|
|
|
54
54
|
* const dateTimePickerProps = useDateTimePicker({
|
|
55
55
|
* value,
|
|
56
56
|
* onChange: setValue,
|
|
57
|
-
* startDate: dayjs().subtract(1, 'day').toDate(),
|
|
58
57
|
* endDate: dayjs().add(1, 'day').toDate(),
|
|
59
58
|
* utcOffset
|
|
60
59
|
* })
|
|
@@ -64,4 +63,4 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
|
|
|
64
63
|
* }
|
|
65
64
|
* ```
|
|
66
65
|
*/
|
|
67
|
-
export declare const useDateTimePicker: ({ value, onChange, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "startDate" | "endDate" | "formatter">;
|
|
66
|
+
export declare const useDateTimePicker: ({ value, onChange, today, futureOnly, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "today" | "futureOnly" | "startDate" | "endDate" | "formatter">;
|
|
@@ -4,6 +4,8 @@ import { dayjs } from "../../utils/dayjs.mjs";
|
|
|
4
4
|
const useDateTimePicker = ({
|
|
5
5
|
value,
|
|
6
6
|
onChange,
|
|
7
|
+
today = /* @__PURE__ */ new Date(),
|
|
8
|
+
futureOnly = false,
|
|
7
9
|
startDate = dayjs().subtract(10, "year").toDate(),
|
|
8
10
|
endDate = dayjs().add(10, "year").toDate(),
|
|
9
11
|
utcOffset = dayjs().utcOffset(),
|
|
@@ -26,6 +28,9 @@ const useDateTimePicker = ({
|
|
|
26
28
|
const displayStartDate = useMemo(() => {
|
|
27
29
|
return convertToLocal(startDate);
|
|
28
30
|
}, [startDate, convertToLocal]);
|
|
31
|
+
const displayToday = useMemo(() => {
|
|
32
|
+
return convertToLocal(today);
|
|
33
|
+
}, [today, convertToLocal]);
|
|
29
34
|
const displayEndDate = useMemo(() => {
|
|
30
35
|
return convertToLocal(endDate);
|
|
31
36
|
}, [endDate, convertToLocal]);
|
|
@@ -36,6 +41,8 @@ const useDateTimePicker = ({
|
|
|
36
41
|
return {
|
|
37
42
|
value: displayValue,
|
|
38
43
|
onChange: handleChange,
|
|
44
|
+
today: displayToday,
|
|
45
|
+
futureOnly,
|
|
39
46
|
startDate: displayStartDate,
|
|
40
47
|
endDate: displayEndDate,
|
|
41
48
|
formatter: (val) => {
|
|
@@ -24,12 +24,15 @@ const DatePicker = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mant
|
|
|
24
24
|
const Divider = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
|
|
25
25
|
const TimeInput = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
|
|
26
26
|
const Flex = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.cjs");
|
|
27
|
+
const getInitialCalendarDate = (currentDay) => currentDay.date() === currentDay.daysInMonth() ? currentDay.add(1, "month") : currentDay;
|
|
27
28
|
const DateTimePicker = ({
|
|
28
29
|
placeholder = "Select time",
|
|
29
30
|
format = helpers$1.DEFAULT_TIME_FORMAT,
|
|
30
31
|
formatter,
|
|
31
32
|
defaultValue,
|
|
32
33
|
value,
|
|
34
|
+
today = /* @__PURE__ */ new Date(),
|
|
35
|
+
futureOnly = false,
|
|
33
36
|
startDate = dayjs.dayjs().subtract(10, "year").toDate(),
|
|
34
37
|
endDate = dayjs.dayjs().add(10, "year").toDate(),
|
|
35
38
|
onChange,
|
|
@@ -41,6 +44,10 @@ const DateTimePicker = ({
|
|
|
41
44
|
footer
|
|
42
45
|
}) => {
|
|
43
46
|
const [opened, { close, open }] = useDisclosure.useDisclosure(false);
|
|
47
|
+
const currentDay = dayjs.dayjs(today).startOf("day");
|
|
48
|
+
const minimumDate = futureOnly ? dayjs.dayjs.max(dayjs.dayjs(startDate), dayjs.dayjs(today)) : dayjs.dayjs(startDate);
|
|
49
|
+
const initialCalendarDate = getInitialCalendarDate(currentDay);
|
|
50
|
+
const [calendarDate, setCalendarDate] = React.useState(initialCalendarDate.toDate());
|
|
44
51
|
const [currentValue, setCurrentValue] = useUncontrolled.useUncontrolled({
|
|
45
52
|
value: value ? dayjs.dayjs(value) : void 0,
|
|
46
53
|
defaultValue: defaultValue ? dayjs.dayjs(defaultValue) : dayjs.dayjs(),
|
|
@@ -57,8 +64,8 @@ const DateTimePicker = ({
|
|
|
57
64
|
if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
|
|
58
65
|
return;
|
|
59
66
|
}
|
|
60
|
-
if (
|
|
61
|
-
next =
|
|
67
|
+
if (next.isBefore(minimumDate)) {
|
|
68
|
+
next = minimumDate;
|
|
62
69
|
} else if (endDate && next.isAfter(endDate)) {
|
|
63
70
|
next = dayjs.dayjs(endDate);
|
|
64
71
|
}
|
|
@@ -78,6 +85,9 @@ const DateTimePicker = ({
|
|
|
78
85
|
const calendarChange = ahooks.useMemoizedFn((v) => {
|
|
79
86
|
let next = currentValue;
|
|
80
87
|
next = next.year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
|
|
88
|
+
if (futureOnly) {
|
|
89
|
+
setCalendarDate(v);
|
|
90
|
+
}
|
|
81
91
|
updateCurrentValue(next, "calendar");
|
|
82
92
|
});
|
|
83
93
|
const timeInputChange = ahooks.useMemoizedFn((e) => {
|
|
@@ -103,6 +113,9 @@ const DateTimePicker = ({
|
|
|
103
113
|
closeOnClickOutside: true,
|
|
104
114
|
onChange: (opened2) => {
|
|
105
115
|
if (opened2) {
|
|
116
|
+
if (futureOnly) {
|
|
117
|
+
setCalendarDate(getInitialCalendarDate(currentDay).toDate());
|
|
118
|
+
}
|
|
106
119
|
open();
|
|
107
120
|
} else {
|
|
108
121
|
close();
|
|
@@ -127,12 +140,45 @@ const DateTimePicker = ({
|
|
|
127
140
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
128
141
|
DatePicker.DatePicker,
|
|
129
142
|
{
|
|
130
|
-
|
|
143
|
+
date: futureOnly ? calendarDate : void 0,
|
|
144
|
+
onDateChange: futureOnly ? setCalendarDate : void 0,
|
|
145
|
+
minDate: futureOnly ? minimumDate.startOf("day").toDate() : startDate,
|
|
131
146
|
maxDate: endDate,
|
|
147
|
+
getDayProps: futureOnly ? (date) => {
|
|
148
|
+
const day = dayjs.dayjs(date);
|
|
149
|
+
const isCurrentDay = day.isSame(currentDay, "day");
|
|
150
|
+
const isSelected = day.isSame(currentValue, "day");
|
|
151
|
+
return {
|
|
152
|
+
style: isCurrentDay && !isSelected ? {
|
|
153
|
+
border: "1px solid var(--mantine-color-carbon-8)",
|
|
154
|
+
color: "var(--mantine-color-carbon-8)",
|
|
155
|
+
opacity: 1
|
|
156
|
+
} : void 0
|
|
157
|
+
};
|
|
158
|
+
} : void 0,
|
|
132
159
|
value: currentValue.toDate(),
|
|
133
160
|
onChange: calendarChange,
|
|
134
161
|
withCellSpacing: false,
|
|
135
|
-
size: "sm"
|
|
162
|
+
size: "sm",
|
|
163
|
+
styles: futureOnly ? (theme) => ({
|
|
164
|
+
day: {
|
|
165
|
+
"&[data-disabled]": {
|
|
166
|
+
color: `${theme.colors.carbon[4]} !important`,
|
|
167
|
+
opacity: 1
|
|
168
|
+
},
|
|
169
|
+
"&[data-outside]": {
|
|
170
|
+
color: theme.colors.carbon[6],
|
|
171
|
+
opacity: 1
|
|
172
|
+
},
|
|
173
|
+
"&[data-today]:not([data-selected])": {
|
|
174
|
+
border: 0
|
|
175
|
+
},
|
|
176
|
+
"&[data-selected]": {
|
|
177
|
+
backgroundColor: theme.colors.carbon[8],
|
|
178
|
+
color: theme.white
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}) : void 0
|
|
136
182
|
}
|
|
137
183
|
),
|
|
138
184
|
/* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
|
|
@@ -212,7 +258,7 @@ const DateTimePicker = ({
|
|
|
212
258
|
currentValue,
|
|
213
259
|
currentValueChangedBy,
|
|
214
260
|
onChange: timeScrollPickerChange,
|
|
215
|
-
start:
|
|
261
|
+
start: minimumDate.toDate(),
|
|
216
262
|
end: endDate
|
|
217
263
|
}
|
|
218
264
|
)
|
|
@@ -32,7 +32,7 @@ import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index
|
|
|
32
32
|
import { DateTimePickerProps } from './types.cjs';
|
|
33
33
|
export type { DateTimePickerProps } from './types.cjs';
|
|
34
34
|
export { useDateTimePicker } from './helpers.cjs';
|
|
35
|
-
export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
35
|
+
export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, futureOnly, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
36
36
|
export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
|
|
37
37
|
defaultValue?: string;
|
|
38
38
|
/**
|
|
@@ -32,7 +32,7 @@ import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index
|
|
|
32
32
|
import { DateTimePickerProps } from './types.mjs';
|
|
33
33
|
export type { DateTimePickerProps } from './types.mjs';
|
|
34
34
|
export { useDateTimePicker } from './helpers.mjs';
|
|
35
|
-
export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
35
|
+
export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, futureOnly, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
36
36
|
export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
|
|
37
37
|
defaultValue?: string;
|
|
38
38
|
/**
|
|
@@ -22,12 +22,15 @@ import { DatePicker } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mant
|
|
|
22
22
|
import { Divider } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Divider/Divider.mjs";
|
|
23
23
|
import { TimeInput } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.mjs";
|
|
24
24
|
import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.mjs";
|
|
25
|
+
const getInitialCalendarDate = (currentDay) => currentDay.date() === currentDay.daysInMonth() ? currentDay.add(1, "month") : currentDay;
|
|
25
26
|
const DateTimePicker = ({
|
|
26
27
|
placeholder = "Select time",
|
|
27
28
|
format = DEFAULT_TIME_FORMAT,
|
|
28
29
|
formatter,
|
|
29
30
|
defaultValue,
|
|
30
31
|
value,
|
|
32
|
+
today = /* @__PURE__ */ new Date(),
|
|
33
|
+
futureOnly = false,
|
|
31
34
|
startDate = dayjs().subtract(10, "year").toDate(),
|
|
32
35
|
endDate = dayjs().add(10, "year").toDate(),
|
|
33
36
|
onChange,
|
|
@@ -39,6 +42,10 @@ const DateTimePicker = ({
|
|
|
39
42
|
footer
|
|
40
43
|
}) => {
|
|
41
44
|
const [opened, { close, open }] = useDisclosure(false);
|
|
45
|
+
const currentDay = dayjs(today).startOf("day");
|
|
46
|
+
const minimumDate = futureOnly ? dayjs.max(dayjs(startDate), dayjs(today)) : dayjs(startDate);
|
|
47
|
+
const initialCalendarDate = getInitialCalendarDate(currentDay);
|
|
48
|
+
const [calendarDate, setCalendarDate] = useState(initialCalendarDate.toDate());
|
|
42
49
|
const [currentValue, setCurrentValue] = useUncontrolled({
|
|
43
50
|
value: value ? dayjs(value) : void 0,
|
|
44
51
|
defaultValue: defaultValue ? dayjs(defaultValue) : dayjs(),
|
|
@@ -55,8 +62,8 @@ const DateTimePicker = ({
|
|
|
55
62
|
if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
|
|
56
63
|
return;
|
|
57
64
|
}
|
|
58
|
-
if (
|
|
59
|
-
next =
|
|
65
|
+
if (next.isBefore(minimumDate)) {
|
|
66
|
+
next = minimumDate;
|
|
60
67
|
} else if (endDate && next.isAfter(endDate)) {
|
|
61
68
|
next = dayjs(endDate);
|
|
62
69
|
}
|
|
@@ -76,6 +83,9 @@ const DateTimePicker = ({
|
|
|
76
83
|
const calendarChange = useMemoizedFn((v) => {
|
|
77
84
|
let next = currentValue;
|
|
78
85
|
next = next.year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
|
|
86
|
+
if (futureOnly) {
|
|
87
|
+
setCalendarDate(v);
|
|
88
|
+
}
|
|
79
89
|
updateCurrentValue(next, "calendar");
|
|
80
90
|
});
|
|
81
91
|
const timeInputChange = useMemoizedFn((e) => {
|
|
@@ -101,6 +111,9 @@ const DateTimePicker = ({
|
|
|
101
111
|
closeOnClickOutside: true,
|
|
102
112
|
onChange: (opened2) => {
|
|
103
113
|
if (opened2) {
|
|
114
|
+
if (futureOnly) {
|
|
115
|
+
setCalendarDate(getInitialCalendarDate(currentDay).toDate());
|
|
116
|
+
}
|
|
104
117
|
open();
|
|
105
118
|
} else {
|
|
106
119
|
close();
|
|
@@ -125,12 +138,45 @@ const DateTimePicker = ({
|
|
|
125
138
|
/* @__PURE__ */ jsx(
|
|
126
139
|
DatePicker,
|
|
127
140
|
{
|
|
128
|
-
|
|
141
|
+
date: futureOnly ? calendarDate : void 0,
|
|
142
|
+
onDateChange: futureOnly ? setCalendarDate : void 0,
|
|
143
|
+
minDate: futureOnly ? minimumDate.startOf("day").toDate() : startDate,
|
|
129
144
|
maxDate: endDate,
|
|
145
|
+
getDayProps: futureOnly ? (date) => {
|
|
146
|
+
const day = dayjs(date);
|
|
147
|
+
const isCurrentDay = day.isSame(currentDay, "day");
|
|
148
|
+
const isSelected = day.isSame(currentValue, "day");
|
|
149
|
+
return {
|
|
150
|
+
style: isCurrentDay && !isSelected ? {
|
|
151
|
+
border: "1px solid var(--mantine-color-carbon-8)",
|
|
152
|
+
color: "var(--mantine-color-carbon-8)",
|
|
153
|
+
opacity: 1
|
|
154
|
+
} : void 0
|
|
155
|
+
};
|
|
156
|
+
} : void 0,
|
|
130
157
|
value: currentValue.toDate(),
|
|
131
158
|
onChange: calendarChange,
|
|
132
159
|
withCellSpacing: false,
|
|
133
|
-
size: "sm"
|
|
160
|
+
size: "sm",
|
|
161
|
+
styles: futureOnly ? (theme) => ({
|
|
162
|
+
day: {
|
|
163
|
+
"&[data-disabled]": {
|
|
164
|
+
color: `${theme.colors.carbon[4]} !important`,
|
|
165
|
+
opacity: 1
|
|
166
|
+
},
|
|
167
|
+
"&[data-outside]": {
|
|
168
|
+
color: theme.colors.carbon[6],
|
|
169
|
+
opacity: 1
|
|
170
|
+
},
|
|
171
|
+
"&[data-today]:not([data-selected])": {
|
|
172
|
+
border: 0
|
|
173
|
+
},
|
|
174
|
+
"&[data-selected]": {
|
|
175
|
+
backgroundColor: theme.colors.carbon[8],
|
|
176
|
+
color: theme.white
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}) : void 0
|
|
134
180
|
}
|
|
135
181
|
),
|
|
136
182
|
/* @__PURE__ */ jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),
|
|
@@ -210,7 +256,7 @@ const DateTimePicker = ({
|
|
|
210
256
|
currentValue,
|
|
211
257
|
currentValueChangedBy,
|
|
212
258
|
onChange: timeScrollPickerChange,
|
|
213
|
-
start:
|
|
259
|
+
start: minimumDate.toDate(),
|
|
214
260
|
end: endDate
|
|
215
261
|
}
|
|
216
262
|
)
|
|
@@ -52,6 +52,18 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
|
|
|
52
52
|
utcOffset?: number;
|
|
53
53
|
defaultValue?: Date;
|
|
54
54
|
value?: Date;
|
|
55
|
+
/**
|
|
56
|
+
* The current date and time used by `futureOnly` mode.
|
|
57
|
+
* Pass the organization time when the picker is displayed in an organization timezone.
|
|
58
|
+
* @default new Date()
|
|
59
|
+
*/
|
|
60
|
+
today?: Date;
|
|
61
|
+
/**
|
|
62
|
+
* Enables future-date selection behavior without changing existing DateTimePicker usages.
|
|
63
|
+
* Past values are disabled and the calendar opens from today (or next month on month-end).
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
66
|
+
futureOnly?: boolean;
|
|
55
67
|
startDate?: Date;
|
|
56
68
|
endDate?: Date;
|
|
57
69
|
onChange?: (val: Date) => void;
|
|
@@ -52,6 +52,18 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
|
|
|
52
52
|
utcOffset?: number;
|
|
53
53
|
defaultValue?: Date;
|
|
54
54
|
value?: Date;
|
|
55
|
+
/**
|
|
56
|
+
* The current date and time used by `futureOnly` mode.
|
|
57
|
+
* Pass the organization time when the picker is displayed in an organization timezone.
|
|
58
|
+
* @default new Date()
|
|
59
|
+
*/
|
|
60
|
+
today?: Date;
|
|
61
|
+
/**
|
|
62
|
+
* Enables future-date selection behavior without changing existing DateTimePicker usages.
|
|
63
|
+
* Past values are disabled and the calendar opens from today (or next month on month-end).
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
66
|
+
futureOnly?: boolean;
|
|
55
67
|
startDate?: Date;
|
|
56
68
|
endDate?: Date;
|
|
57
69
|
onChange?: (val: Date) => void;
|
package/dist/theme/theme.cjs
CHANGED
|
@@ -1308,9 +1308,7 @@ const theme = createTheme.createTheme({
|
|
|
1308
1308
|
color: themeColor(theme2, "carbon", 8)
|
|
1309
1309
|
},
|
|
1310
1310
|
"&:hover": {
|
|
1311
|
-
|
|
1312
|
-
backgroundColor: themeColor(theme2, "carbon", 2)
|
|
1313
|
-
}
|
|
1311
|
+
backgroundColor: themeColor(theme2, "carbon", 2)
|
|
1314
1312
|
},
|
|
1315
1313
|
"&[data-active]": {
|
|
1316
1314
|
color: themeColor(theme2, "carbon", 9),
|
package/dist/theme/theme.mjs
CHANGED
|
@@ -1306,9 +1306,7 @@ const theme = createTheme({
|
|
|
1306
1306
|
color: themeColor(theme2, "carbon", 8)
|
|
1307
1307
|
},
|
|
1308
1308
|
"&:hover": {
|
|
1309
|
-
|
|
1310
|
-
backgroundColor: themeColor(theme2, "carbon", 2)
|
|
1311
|
-
}
|
|
1309
|
+
backgroundColor: themeColor(theme2, "carbon", 2)
|
|
1312
1310
|
},
|
|
1313
1311
|
"&[data-active]": {
|
|
1314
1312
|
color: themeColor(theme2, "carbon", 9),
|