rsuite 5.18.0 → 5.18.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/CHANGELOG.md +12 -0
- package/Calendar/styles/index.less +30 -11
- package/DateRangePicker/styles/index.less +1 -1
- package/Nav/styles/index.less +1 -0
- package/cjs/Calendar/Calendar.d.ts +20 -55
- package/cjs/Calendar/Calendar.js +84 -163
- package/cjs/Calendar/CalendarBody.d.ts +4 -0
- package/cjs/Calendar/{View.js → CalendarBody.js} +5 -5
- package/cjs/Calendar/CalendarContainer.d.ts +61 -0
- package/cjs/Calendar/CalendarContainer.js +233 -0
- package/cjs/Calendar/{Header.d.ts → CalendarHeader.d.ts} +9 -7
- package/cjs/Calendar/{Header.js → CalendarHeader.js} +4 -4
- package/cjs/Calendar/Table.js +1 -1
- package/cjs/Calendar/TableHeaderRow.js +1 -1
- package/cjs/Calendar/TableRow.js +1 -1
- package/cjs/Calendar/index.d.ts +6 -5
- package/cjs/Calendar/index.js +8 -7
- package/cjs/Calendar/useCalendarState.d.ts +11 -0
- package/cjs/Calendar/useCalendarState.js +39 -0
- package/cjs/DatePicker/DatePicker.js +10 -47
- package/cjs/DatePicker/utils.d.ts +1 -8
- package/cjs/DatePicker/utils.js +24 -64
- package/cjs/DateRangePicker/Calendar.d.ts +1 -1
- package/cjs/DateRangePicker/Calendar.js +2 -17
- package/cjs/DateRangePicker/DateRangePicker.js +3 -3
- package/cjs/DateRangePicker/utils.d.ts +1 -3
- package/cjs/DateRangePicker/utils.js +14 -42
- package/cjs/List/ListItem.d.ts +1 -0
- package/cjs/List/ListItem.js +5 -2
- package/cjs/Stack/Stack.js +1 -1
- package/cjs/index.d.ts +1 -1
- package/cjs/utils/BrowserDetection.d.ts +7 -0
- package/cjs/utils/BrowserDetection.js +52 -2
- package/cjs/utils/dateUtils.d.ts +4 -4
- package/cjs/utils/dateUtils.js +9 -9
- package/dist/rsuite-rtl.css +43 -20
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +43 -20
- package/dist/rsuite.js +51 -40
- package/dist/rsuite.js.map +1 -1
- package/dist/rsuite.min.css +1 -1
- package/dist/rsuite.min.css.map +1 -1
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.map +1 -1
- package/esm/Calendar/Calendar.d.ts +20 -55
- package/esm/Calendar/Calendar.js +82 -154
- package/esm/Calendar/CalendarBody.d.ts +4 -0
- package/esm/Calendar/{View.js → CalendarBody.js} +5 -5
- package/esm/Calendar/CalendarContainer.d.ts +61 -0
- package/esm/Calendar/CalendarContainer.js +208 -0
- package/esm/Calendar/{Header.d.ts → CalendarHeader.d.ts} +9 -7
- package/esm/Calendar/{Header.js → CalendarHeader.js} +4 -4
- package/esm/Calendar/Table.js +1 -1
- package/esm/Calendar/TableHeaderRow.js +1 -1
- package/esm/Calendar/TableRow.js +1 -1
- package/esm/Calendar/index.d.ts +6 -5
- package/esm/Calendar/index.js +5 -4
- package/esm/Calendar/useCalendarState.d.ts +11 -0
- package/esm/Calendar/useCalendarState.js +31 -0
- package/esm/DatePicker/DatePicker.js +10 -46
- package/esm/DatePicker/utils.d.ts +1 -8
- package/esm/DatePicker/utils.js +23 -57
- package/esm/DateRangePicker/Calendar.d.ts +1 -1
- package/esm/DateRangePicker/Calendar.js +2 -16
- package/esm/DateRangePicker/DateRangePicker.js +5 -5
- package/esm/DateRangePicker/utils.d.ts +1 -3
- package/esm/DateRangePicker/utils.js +13 -33
- package/esm/List/ListItem.d.ts +1 -0
- package/esm/List/ListItem.js +5 -2
- package/esm/Stack/Stack.js +2 -2
- package/esm/index.d.ts +1 -1
- package/esm/utils/BrowserDetection.d.ts +7 -0
- package/esm/utils/BrowserDetection.js +41 -0
- package/esm/utils/dateUtils.d.ts +4 -4
- package/esm/utils/dateUtils.js +4 -4
- package/package.json +1 -1
- package/cjs/Calendar/CalendarPanel.d.ts +0 -26
- package/cjs/Calendar/CalendarPanel.js +0 -139
- package/cjs/Calendar/View.d.ts +0 -4
- package/esm/Calendar/CalendarPanel.d.ts +0 -26
- package/esm/Calendar/CalendarPanel.js +0 -119
- package/esm/Calendar/View.d.ts +0 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
## [5.18.1](https://github.com/rsuite/rsuite/compare/v5.18.0...v5.18.1) (2022-09-15)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- **Nav:** fix incorrect height of <Nav.Menu>, fix [#2678](https://github.com/rsuite/rsuite/issues/2678) ([#2716](https://github.com/rsuite/rsuite/issues/2716)) ([8cefc64](https://github.com/rsuite/rsuite/commit/8cefc64ecfc6614bff4842b193f515064f0b5e3b))
|
|
6
|
+
- **Stack:** fix spacing compat for chrome under 84 ([#2718](https://github.com/rsuite/rsuite/issues/2718)) ([a75b6a6](https://github.com/rsuite/rsuite/commit/a75b6a6b8cf0e2aa11abfde6205ddba57f458414))
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **Calendar:** add a button to collapse the month and time view ([#2722](https://github.com/rsuite/rsuite/issues/2722)) ([b49bfaf](https://github.com/rsuite/rsuite/commit/b49bfaf5b553d1d13c17ba07951306147091ee44))
|
|
11
|
+
- **List:** add size prop to ListItem ([#2714](https://github.com/rsuite/rsuite/issues/2714)) ([ed3b023](https://github.com/rsuite/rsuite/commit/ed3b02305ef603d2d1b60bedd849f6c946ef7127))
|
|
12
|
+
|
|
1
13
|
# [5.18.0](https://github.com/rsuite/rsuite/compare/v5.17.1...v5.18.0) (2022-09-08)
|
|
2
14
|
|
|
3
15
|
### Bug Fixes
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
float: none !important;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
&-panel&-
|
|
46
|
-
&-panel&-
|
|
45
|
+
&-panel&-month-view &-header-forward,
|
|
46
|
+
&-panel&-month-view &-header-backward {
|
|
47
47
|
display: inline-block;
|
|
48
48
|
visibility: hidden;
|
|
49
49
|
pointer-events: none;
|
|
@@ -53,12 +53,12 @@
|
|
|
53
53
|
width: auto !important;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
&-panel&-
|
|
56
|
+
&-panel&-month-view &-header-month-toolbar {
|
|
57
57
|
padding-left: 0;
|
|
58
58
|
padding-right: 0;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
&-panel &-
|
|
61
|
+
&-panel &-month-view {
|
|
62
62
|
padding-left: 0;
|
|
63
63
|
padding-right: 0;
|
|
64
64
|
}
|
|
@@ -141,13 +141,32 @@
|
|
|
141
141
|
&-panel&-compact &-table-row:not(&-table-header-row) &-table-cell-content {
|
|
142
142
|
height: @calendar-panel-compact-cell-height;
|
|
143
143
|
}
|
|
144
|
+
|
|
145
|
+
&-btn-close {
|
|
146
|
+
position: absolute;
|
|
147
|
+
bottom: 0;
|
|
148
|
+
left: 0;
|
|
149
|
+
right: 0;
|
|
150
|
+
height: 14px;
|
|
151
|
+
padding: 0;
|
|
152
|
+
border: 0;
|
|
153
|
+
display: flex;
|
|
154
|
+
justify-content: center;
|
|
155
|
+
background: var(--rs-bg-overlay);
|
|
156
|
+
z-index: 1;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&-panel &-btn-close {
|
|
160
|
+
bottom: 11px;
|
|
161
|
+
margin: 0 20px;
|
|
162
|
+
}
|
|
144
163
|
}
|
|
145
164
|
|
|
146
165
|
// DatePicker
|
|
147
166
|
// ----------------------
|
|
148
167
|
|
|
149
168
|
// Show month dropdown
|
|
150
|
-
.rs-calendar-
|
|
169
|
+
.rs-calendar-month-view {
|
|
151
170
|
.rs-calendar-header-month-toolbar {
|
|
152
171
|
padding-left: 24px;
|
|
153
172
|
padding-right: 24px;
|
|
@@ -173,7 +192,7 @@
|
|
|
173
192
|
}
|
|
174
193
|
|
|
175
194
|
// Show time dropdown
|
|
176
|
-
.rs-calendar-
|
|
195
|
+
.rs-calendar-time-view {
|
|
177
196
|
.rs-calendar-header-title-time {
|
|
178
197
|
.picker-calendar-title-show();
|
|
179
198
|
|
|
@@ -322,7 +341,7 @@
|
|
|
322
341
|
|
|
323
342
|
/* rtl:end:ignore */
|
|
324
343
|
|
|
325
|
-
.rs-calendar-
|
|
344
|
+
.rs-calendar-body {
|
|
326
345
|
padding: @calendar-picker-view-padding-top @calendar-picker-padding @calendar-picker-padding;
|
|
327
346
|
}
|
|
328
347
|
|
|
@@ -440,11 +459,11 @@
|
|
|
440
459
|
overflow: hidden;
|
|
441
460
|
z-index: @zindex-date-range-picker-table-cell-content;
|
|
442
461
|
|
|
443
|
-
.rs-calendar-
|
|
462
|
+
.rs-calendar-month-view & {
|
|
444
463
|
display: block;
|
|
445
464
|
}
|
|
446
465
|
|
|
447
|
-
.rs-calendar-
|
|
466
|
+
.rs-calendar-month-view &-content {
|
|
448
467
|
animation: 0.3s linear slideDown;
|
|
449
468
|
}
|
|
450
469
|
|
|
@@ -527,11 +546,11 @@
|
|
|
527
546
|
overflow: hidden;
|
|
528
547
|
z-index: @zindex-date-range-picker-table-cell-content;
|
|
529
548
|
|
|
530
|
-
.rs-calendar-
|
|
549
|
+
.rs-calendar-time-view & {
|
|
531
550
|
display: block;
|
|
532
551
|
}
|
|
533
552
|
|
|
534
|
-
.rs-calendar-
|
|
553
|
+
.rs-calendar-time-view &-content {
|
|
535
554
|
animation: 0.3s linear slideDown;
|
|
536
555
|
}
|
|
537
556
|
|
package/Nav/styles/index.less
CHANGED
|
@@ -1,61 +1,26 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import
|
|
3
|
-
import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Calendar from './CalendarContainer';
|
|
4
3
|
import { CalendarLocale } from '../locales';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
/** The panel render based on date range */
|
|
13
|
-
dateRange?: Date[];
|
|
14
|
-
/** Disabled date */
|
|
15
|
-
disabledDate?: (date: Date) => boolean;
|
|
16
|
-
/** Disabled hours */
|
|
17
|
-
disabledHours?: (hour: number, date: Date) => boolean;
|
|
18
|
-
/** Disabled minutes */
|
|
19
|
-
disabledMinutes?: (minute: number, date: Date) => boolean;
|
|
20
|
-
/** Hidden seconds */
|
|
21
|
-
disabledSeconds?: (second: number, date: Date) => boolean;
|
|
22
|
-
/** Format str */
|
|
23
|
-
format: string;
|
|
24
|
-
/** Hidden hours */
|
|
25
|
-
hideHours?: (hour: number, date: Date) => boolean;
|
|
26
|
-
/** Hidden minutes */
|
|
27
|
-
hideMinutes?: (minute: number, date: Date) => boolean;
|
|
28
|
-
/** Hidden seconds */
|
|
29
|
-
hideSeconds?: (second: number, date: Date) => boolean;
|
|
30
|
-
/** The value that mouse hover on in range selection */
|
|
31
|
-
hoverRangeValue?: [Date, Date];
|
|
32
|
-
/** Is it in the same month as today */
|
|
33
|
-
inSameMonth?: (date: Date) => boolean;
|
|
34
|
-
/** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
|
|
4
|
+
import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
|
|
5
|
+
export interface CalendarProps extends WithAsProps {
|
|
6
|
+
/** Controlled value */
|
|
7
|
+
value?: Date;
|
|
8
|
+
/** Default value */
|
|
9
|
+
defaultValue?: Date;
|
|
10
|
+
/** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
|
|
35
11
|
isoWeek?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
|
|
12
|
+
/** Display a compact calendar */
|
|
13
|
+
compact?: boolean;
|
|
14
|
+
/** Show border */
|
|
15
|
+
bordered?: boolean;
|
|
38
16
|
/** Custom locale */
|
|
39
|
-
locale
|
|
40
|
-
/**
|
|
41
|
-
|
|
42
|
-
/** Callback after the time has changed */
|
|
43
|
-
onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
|
|
44
|
-
/** Callback after mouse enter other date cell */
|
|
45
|
-
onMouseMove?: (date: Date) => void;
|
|
46
|
-
/** Switch to the callback triggered after the previous month. */
|
|
47
|
-
onMoveBackward?: (nextPageDate: Date) => void;
|
|
48
|
-
/** Switch to the callback triggered after the next month. */
|
|
49
|
-
onMoveForward?: (nextPageDate: Date) => void;
|
|
17
|
+
locale?: CalendarLocale;
|
|
18
|
+
/** Callback fired before the value changed */
|
|
19
|
+
onChange?: (date: Date) => void;
|
|
50
20
|
/** Callback fired before the date selected */
|
|
51
|
-
onSelect?: (date: Date
|
|
52
|
-
/**
|
|
53
|
-
calendarDate: Date;
|
|
54
|
-
/** Custom rendering cell*/
|
|
21
|
+
onSelect?: (date: Date) => void;
|
|
22
|
+
/** Custom render calendar cells */
|
|
55
23
|
renderCell?: (date: Date) => React.ReactNode;
|
|
56
|
-
/** Whether to show week numbers */
|
|
57
|
-
showWeekNumbers?: boolean;
|
|
58
|
-
inline?: boolean;
|
|
59
24
|
}
|
|
60
|
-
declare const
|
|
61
|
-
export default
|
|
25
|
+
declare const CalendarPanel: RsRefForwardingComponent<typeof Calendar, CalendarProps>;
|
|
26
|
+
export default CalendarPanel;
|
package/cjs/Calendar/Calendar.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
|
|
|
5
5
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
6
|
|
|
7
7
|
exports.__esModule = true;
|
|
8
|
-
exports.default =
|
|
8
|
+
exports.default = void 0;
|
|
9
9
|
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
11
|
|
|
@@ -15,188 +15,109 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
15
15
|
|
|
16
16
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _Button = _interopRequireDefault(require("../Button"));
|
|
21
21
|
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
var _View = _interopRequireDefault(require("./View"));
|
|
25
|
-
|
|
26
|
-
var _Header = _interopRequireDefault(require("./Header"));
|
|
22
|
+
var _CustomProvider = require("../CustomProvider");
|
|
27
23
|
|
|
28
24
|
var _utils = require("../utils");
|
|
29
25
|
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
var CalendarState;
|
|
33
|
-
exports.CalendarState = CalendarState;
|
|
26
|
+
var _useCalendarDate2 = _interopRequireDefault(require("./useCalendarDate"));
|
|
34
27
|
|
|
35
|
-
(function (
|
|
36
|
-
CalendarState["DROP_TIME"] = "DROP_TIME";
|
|
37
|
-
CalendarState["DROP_MONTH"] = "DROP_MONTH";
|
|
38
|
-
})(CalendarState || (exports.CalendarState = CalendarState = {}));
|
|
39
|
-
|
|
40
|
-
var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
28
|
+
var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
41
29
|
var _props$as = props.as,
|
|
42
|
-
Component = _props$as === void 0 ?
|
|
30
|
+
Component = _props$as === void 0 ? _CalendarContainer.default : _props$as,
|
|
31
|
+
bordered = props.bordered,
|
|
43
32
|
className = props.className,
|
|
44
33
|
_props$classPrefix = props.classPrefix,
|
|
45
34
|
classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
hoverRangeValue = props.hoverRangeValue,
|
|
53
|
-
inSameMonth = props.inSameMonth,
|
|
54
|
-
_props$isoWeek = props.isoWeek,
|
|
55
|
-
isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
|
|
56
|
-
limitEndYear = props.limitEndYear,
|
|
57
|
-
locale = props.locale,
|
|
58
|
-
onChangePageDate = props.onChangePageDate,
|
|
59
|
-
onChangePageTime = props.onChangePageTime,
|
|
60
|
-
onMouseMove = props.onMouseMove,
|
|
61
|
-
onMoveBackward = props.onMoveBackward,
|
|
62
|
-
onMoveForward = props.onMoveForward,
|
|
35
|
+
compact = props.compact,
|
|
36
|
+
_props$defaultValue = props.defaultValue,
|
|
37
|
+
defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
|
|
38
|
+
isoWeek = props.isoWeek,
|
|
39
|
+
overrideLocale = props.locale,
|
|
40
|
+
onChange = props.onChange,
|
|
63
41
|
onSelect = props.onSelect,
|
|
64
|
-
onToggleMeridian = props.onToggleMeridian,
|
|
65
|
-
onToggleMonthDropdown = props.onToggleMonthDropdown,
|
|
66
|
-
onToggleTimeDropdown = props.onToggleTimeDropdown,
|
|
67
|
-
calendarDate = props.calendarDate,
|
|
68
42
|
renderCell = props.renderCell,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
43
|
+
value = props.value,
|
|
44
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onSelect", "renderCell", "value"]);
|
|
45
|
+
|
|
46
|
+
var _useCalendarDate = (0, _useCalendarDate2.default)(value, defaultValue),
|
|
47
|
+
calendarDate = _useCalendarDate.calendarDate,
|
|
48
|
+
setCalendarDate = _useCalendarDate.setCalendarDate;
|
|
49
|
+
|
|
50
|
+
var _useCustom = (0, _utils.useCustom)('Calendar', overrideLocale),
|
|
51
|
+
locale = _useCustom.locale;
|
|
52
|
+
|
|
53
|
+
var handleChange = (0, _react.useCallback)(function (nextValue) {
|
|
54
|
+
setCalendarDate(nextValue);
|
|
55
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
|
|
56
|
+
}, [setCalendarDate, onChange]);
|
|
57
|
+
var handleClickToday = (0, _react.useCallback)(function () {
|
|
58
|
+
handleChange(new Date());
|
|
59
|
+
}, [handleChange]);
|
|
60
|
+
var handleSelect = (0, _react.useCallback)(function (nextValue) {
|
|
61
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
|
|
62
|
+
handleChange(nextValue);
|
|
63
|
+
}, [handleChange, onSelect]);
|
|
75
64
|
|
|
76
65
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
77
|
-
|
|
78
|
-
merge = _useClassNames.merge
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(_utils.DateUtils.addMonths(calendarDate, -1));
|
|
95
|
-
}, [onMoveBackward, calendarDate]);
|
|
96
|
-
|
|
97
|
-
var showDate = _utils.DateUtils.shouldDate(format);
|
|
98
|
-
|
|
99
|
-
var showTime = _utils.DateUtils.shouldTime(format);
|
|
100
|
-
|
|
101
|
-
var showMonth = _utils.DateUtils.shouldMonth(format);
|
|
102
|
-
|
|
103
|
-
var onlyShowTime = showTime && !showDate && !showMonth;
|
|
104
|
-
var onlyShowMonth = showMonth && !showDate && !showTime;
|
|
105
|
-
var dropTime = calendarState === CalendarState.DROP_TIME || onlyShowTime;
|
|
106
|
-
var dropMonth = calendarState === CalendarState.DROP_MONTH || onlyShowMonth;
|
|
107
|
-
var inSameThisMonthDate = (0, _react.useCallback)(function (date) {
|
|
108
|
-
return (0, _utils.composeFunctions)(function (d) {
|
|
109
|
-
return _utils.DateUtils.setDate(d, 1);
|
|
110
|
-
}, function (d) {
|
|
111
|
-
return _utils.DateUtils.isSameMonth(d, date);
|
|
112
|
-
})(date);
|
|
113
|
-
}, []);
|
|
114
|
-
var calendarClasses = merge(className, withClassPrefix({
|
|
115
|
-
'show-time-dropdown': dropTime,
|
|
116
|
-
'show-month-dropdown': dropMonth,
|
|
117
|
-
'show-week-numbers': showWeekNumbers
|
|
66
|
+
prefix = _useClassNames.prefix,
|
|
67
|
+
merge = _useClassNames.merge,
|
|
68
|
+
withClassPrefix = _useClassNames.withClassPrefix;
|
|
69
|
+
|
|
70
|
+
var renderToolbar = (0, _react.useCallback)(function () {
|
|
71
|
+
return /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
72
|
+
className: prefix('btn-today'),
|
|
73
|
+
size: "sm",
|
|
74
|
+
onClick: handleClickToday
|
|
75
|
+
}, locale.today || 'Today');
|
|
76
|
+
}, [handleClickToday, locale.today, prefix]);
|
|
77
|
+
var customRenderCell = (0, _react.useCallback)(function (date) {
|
|
78
|
+
return renderCell === null || renderCell === void 0 ? void 0 : renderCell(date);
|
|
79
|
+
}, [renderCell]);
|
|
80
|
+
var classes = merge(className, withClassPrefix('panel', {
|
|
81
|
+
bordered: bordered,
|
|
82
|
+
compact: compact
|
|
118
83
|
}));
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
renderCell: renderCell,
|
|
135
|
-
showWeekNumbers: showWeekNumbers,
|
|
136
|
-
inline: inline
|
|
137
|
-
};
|
|
138
|
-
}, [calendarDate, dateRange, format, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageDate, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
|
|
139
|
-
return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
|
|
140
|
-
value: contextValue
|
|
141
|
-
}, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, _utils.DateUtils.omitHideDisabledProps(rest), {
|
|
142
|
-
className: calendarClasses,
|
|
143
|
-
ref: ref
|
|
144
|
-
}), /*#__PURE__*/_react.default.createElement(_Header.default, {
|
|
145
|
-
showMonth: showMonth,
|
|
146
|
-
showDate: showDate,
|
|
147
|
-
showTime: showTime,
|
|
148
|
-
showMeridian: showMeridian,
|
|
149
|
-
disabledTime: isTimeDisabled,
|
|
150
|
-
onMoveForward: handleMoveForward,
|
|
151
|
-
onMoveBackward: handleMoveBackward,
|
|
152
|
-
onToggleMonthDropdown: onToggleMonthDropdown,
|
|
153
|
-
onToggleTimeDropdown: onToggleTimeDropdown,
|
|
154
|
-
onToggleMeridian: onToggleMeridian,
|
|
155
|
-
renderTitle: renderTitle,
|
|
84
|
+
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
|
|
85
|
+
inline: true,
|
|
86
|
+
className: classes,
|
|
87
|
+
ref: ref,
|
|
88
|
+
isoWeek: isoWeek,
|
|
89
|
+
format: "yyyy-MM-dd",
|
|
90
|
+
calendarDate: calendarDate,
|
|
91
|
+
limitEndYear: 1000,
|
|
92
|
+
locale: locale,
|
|
93
|
+
renderTitle: function renderTitle(date) {
|
|
94
|
+
return /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
|
|
95
|
+
date: date,
|
|
96
|
+
formatStr: locale.formattedMonthPattern || 'MMMM yyyy'
|
|
97
|
+
});
|
|
98
|
+
},
|
|
156
99
|
renderToolbar: renderToolbar,
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}), showTime && /*#__PURE__*/_react.default.createElement(_TimeDropdown.default, (0, _extends2.default)({}, timeDropdownProps, {
|
|
164
|
-
show: dropTime,
|
|
165
|
-
showMeridian: showMeridian
|
|
166
|
-
}))));
|
|
100
|
+
renderCell: customRenderCell,
|
|
101
|
+
onMoveForward: handleChange,
|
|
102
|
+
onMoveBackward: handleChange,
|
|
103
|
+
onChangePageDate: handleChange,
|
|
104
|
+
onSelect: handleSelect
|
|
105
|
+
}));
|
|
167
106
|
});
|
|
168
107
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
classPrefix: _propTypes.default.string,
|
|
174
|
-
disabledDate: _propTypes.default.func,
|
|
175
|
-
disabledHours: _propTypes.default.func,
|
|
176
|
-
disabledMinutes: _propTypes.default.func,
|
|
177
|
-
disabledSeconds: _propTypes.default.func,
|
|
178
|
-
format: _propTypes.default.string,
|
|
179
|
-
hideHours: _propTypes.default.func,
|
|
180
|
-
hideMinutes: _propTypes.default.func,
|
|
181
|
-
hideSeconds: _propTypes.default.func,
|
|
182
|
-
inSameMonth: _propTypes.default.func,
|
|
108
|
+
CalendarPanel.displayName = 'CalendarPanel';
|
|
109
|
+
CalendarPanel.propTypes = {
|
|
110
|
+
value: _propTypes.default.instanceOf(Date),
|
|
111
|
+
defaultValue: _propTypes.default.instanceOf(Date),
|
|
183
112
|
isoWeek: _propTypes.default.bool,
|
|
184
|
-
|
|
113
|
+
compact: _propTypes.default.bool,
|
|
114
|
+
bordered: _propTypes.default.bool,
|
|
185
115
|
locale: _propTypes.default.object,
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
onMoveForward: _propTypes.default.func,
|
|
116
|
+
className: _propTypes.default.string,
|
|
117
|
+
classPrefix: _propTypes.default.string,
|
|
118
|
+
onChange: _propTypes.default.func,
|
|
190
119
|
onSelect: _propTypes.default.func,
|
|
191
|
-
|
|
192
|
-
onToggleMonthDropdown: _propTypes.default.func,
|
|
193
|
-
onToggleTimeDropdown: _propTypes.default.func,
|
|
194
|
-
calendarDate: _propTypes.default.instanceOf(Date),
|
|
195
|
-
renderCell: _propTypes.default.func,
|
|
196
|
-
renderTitle: _propTypes.default.func,
|
|
197
|
-
renderToolbar: _propTypes.default.func,
|
|
198
|
-
showMeridian: _propTypes.default.bool,
|
|
199
|
-
showWeekNumbers: _propTypes.default.bool
|
|
120
|
+
renderCell: _propTypes.default.func
|
|
200
121
|
};
|
|
201
|
-
var _default =
|
|
122
|
+
var _default = CalendarPanel;
|
|
202
123
|
exports.default = _default;
|
|
@@ -19,12 +19,12 @@ var _Table = _interopRequireDefault(require("./Table"));
|
|
|
19
19
|
|
|
20
20
|
var _CalendarContext = require("./CalendarContext");
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var CalendarBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
23
23
|
var _props$as = props.as,
|
|
24
24
|
Component = _props$as === void 0 ? 'div' : _props$as,
|
|
25
25
|
className = props.className,
|
|
26
26
|
_props$classPrefix = props.classPrefix,
|
|
27
|
-
classPrefix = _props$classPrefix === void 0 ? 'calendar-
|
|
27
|
+
classPrefix = _props$classPrefix === void 0 ? 'calendar-body' : _props$classPrefix,
|
|
28
28
|
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix"]);
|
|
29
29
|
|
|
30
30
|
var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
|
|
@@ -53,11 +53,11 @@ var View = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
53
53
|
}));
|
|
54
54
|
});
|
|
55
55
|
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
CalendarBody.displayName = 'CalendarBody';
|
|
57
|
+
CalendarBody.propTypes = {
|
|
58
58
|
as: _propTypes.default.elementType,
|
|
59
59
|
className: _propTypes.default.string,
|
|
60
60
|
classPrefix: _propTypes.default.string
|
|
61
61
|
};
|
|
62
|
-
var _default =
|
|
62
|
+
var _default = CalendarBody;
|
|
63
63
|
exports.default = _default;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import { CalendarHeaderProps } from './CalendarHeader';
|
|
3
|
+
import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
|
|
4
|
+
import { CalendarLocale } from '../locales';
|
|
5
|
+
import { CalendarState } from './useCalendarState';
|
|
6
|
+
export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, CalendarHeaderProps {
|
|
7
|
+
/** The panel render based on date range */
|
|
8
|
+
dateRange?: Date[];
|
|
9
|
+
/** Date displayed on the current page */
|
|
10
|
+
calendarDate: Date;
|
|
11
|
+
/** Whether to show week numbers */
|
|
12
|
+
showWeekNumbers?: boolean;
|
|
13
|
+
inline?: boolean;
|
|
14
|
+
defaultState?: CalendarState;
|
|
15
|
+
/** Disabled date */
|
|
16
|
+
disabledDate?: (date: Date) => boolean;
|
|
17
|
+
/** Disabled hours */
|
|
18
|
+
disabledHours?: (hour: number, date: Date) => boolean;
|
|
19
|
+
/** Disabled minutes */
|
|
20
|
+
disabledMinutes?: (minute: number, date: Date) => boolean;
|
|
21
|
+
/** Hidden seconds */
|
|
22
|
+
disabledSeconds?: (second: number, date: Date) => boolean;
|
|
23
|
+
/** Format str */
|
|
24
|
+
format: string;
|
|
25
|
+
/** Hidden hours */
|
|
26
|
+
hideHours?: (hour: number, date: Date) => boolean;
|
|
27
|
+
/** Hidden minutes */
|
|
28
|
+
hideMinutes?: (minute: number, date: Date) => boolean;
|
|
29
|
+
/** Hidden seconds */
|
|
30
|
+
hideSeconds?: (second: number, date: Date) => boolean;
|
|
31
|
+
/** The value that mouse hover on in range selection */
|
|
32
|
+
hoverRangeValue?: [Date, Date];
|
|
33
|
+
/** Is it in the same month as today */
|
|
34
|
+
inSameMonth?: (date: Date) => boolean;
|
|
35
|
+
/** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
|
|
36
|
+
isoWeek?: boolean;
|
|
37
|
+
/** Limit showing how many years in the future */
|
|
38
|
+
limitEndYear?: number;
|
|
39
|
+
/** Custom locale */
|
|
40
|
+
locale: CalendarLocale;
|
|
41
|
+
/** Callback after the date has changed */
|
|
42
|
+
onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
|
|
43
|
+
/** Callback after the time has changed */
|
|
44
|
+
onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
|
|
45
|
+
/** Callback after mouse enter other date cell */
|
|
46
|
+
onMouseMove?: (date: Date) => void;
|
|
47
|
+
/** Switch to the callback triggered after the previous month. */
|
|
48
|
+
onMoveBackward?: (nextPageDate: Date) => void;
|
|
49
|
+
/** Switch to the callback triggered after the next month. */
|
|
50
|
+
onMoveForward?: (nextPageDate: Date) => void;
|
|
51
|
+
/** Callback fired before the date selected */
|
|
52
|
+
onSelect?: (date: Date, event: React.MouseEvent) => void;
|
|
53
|
+
/** Custom rendering cell*/
|
|
54
|
+
renderCell?: (date: Date) => React.ReactNode;
|
|
55
|
+
/** Called when opening the month view */
|
|
56
|
+
onToggleMonthDropdown?: (toggle: boolean) => void;
|
|
57
|
+
/** Called when opening the time view */
|
|
58
|
+
onToggleTimeDropdown?: (toggle: boolean) => void;
|
|
59
|
+
}
|
|
60
|
+
declare const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps>;
|
|
61
|
+
export default CalendarContainer;
|