rsuite 5.16.1 → 5.16.4
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 +27 -0
- package/Picker/styles/index.less +3 -1
- package/Slider/styles/index.less +2 -1
- package/TreePicker/styles/index.less +0 -3
- package/cjs/Cascader/utils.js +3 -5
- package/cjs/CheckPicker/CheckPicker.d.ts +1 -1
- package/cjs/CheckPicker/test/CheckPicker.test.js +8 -0
- package/cjs/CheckTreePicker/CheckTreePicker.d.ts +2 -2
- package/cjs/CheckTreePicker/CheckTreePicker.js +5 -0
- package/cjs/CheckTreePicker/test/CheckTreePicker.test.d.ts +1 -0
- package/cjs/CheckTreePicker/test/CheckTreePicker.test.js +15 -0
- package/cjs/CheckTreePicker/utils.js +3 -1
- package/cjs/CustomProvider/CustomProvider.js +6 -3
- package/cjs/DatePicker/DatePicker.d.ts +1 -1
- package/cjs/DatePicker/DatePicker.js +1 -1
- package/cjs/DatePicker/Toolbar.js +1 -1
- package/cjs/DateRangePicker/Calendar.d.ts +0 -1
- package/cjs/DateRangePicker/Calendar.js +1 -39
- package/cjs/DateRangePicker/DateRangePicker.d.ts +1 -1
- package/cjs/DateRangePicker/DateRangePicker.js +23 -23
- package/cjs/DateRangePicker/utils.d.ts +2 -1
- package/cjs/DateRangePicker/utils.js +12 -3
- package/cjs/InputPicker/InputPicker.d.ts +2 -2
- package/cjs/InputPicker/test/InputPicker.test.d.ts +1 -0
- package/cjs/InputPicker/test/InputPicker.test.js +15 -0
- package/cjs/MultiCascader/utils.js +3 -2
- package/cjs/Overlay/OverlayTrigger.js +43 -34
- package/cjs/Panel/Panel.js +8 -7
- package/cjs/Picker/DropdownMenu.d.ts +1 -1
- package/cjs/Picker/PickerToggle.d.ts +1 -1
- package/cjs/Picker/PickerToggle.js +52 -27
- package/cjs/SelectPicker/SelectPicker.d.ts +9 -3
- package/cjs/SelectPicker/test/SelectPicker.test.js +33 -0
- package/cjs/Tree/Tree.d.ts +2 -2
- package/cjs/Tree/test/Tree.test.d.ts +1 -0
- package/cjs/Tree/test/Tree.test.js +18 -0
- package/cjs/TreePicker/TreePicker.d.ts +2 -2
- package/cjs/TreePicker/test/TreePicker.test.d.ts +1 -0
- package/cjs/TreePicker/test/TreePicker.test.js +15 -0
- package/cjs/utils/attachParent.d.ts +1 -0
- package/cjs/utils/attachParent.js +15 -0
- package/cjs/utils/treeUtils.js +3 -2
- package/cjs/utils/usePortal.d.ts +4 -2
- package/cjs/utils/usePortal.js +40 -14
- package/dist/rsuite-rtl.css +9 -10
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +9 -10
- package/dist/rsuite.js +29 -18
- 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/Cascader/utils.js +2 -4
- package/esm/CheckPicker/CheckPicker.d.ts +1 -1
- package/esm/CheckPicker/test/CheckPicker.test.js +8 -0
- package/esm/CheckTreePicker/CheckTreePicker.d.ts +2 -2
- package/esm/CheckTreePicker/CheckTreePicker.js +5 -0
- package/esm/CheckTreePicker/test/CheckTreePicker.test.d.ts +1 -0
- package/esm/CheckTreePicker/test/CheckTreePicker.test.js +10 -0
- package/esm/CheckTreePicker/utils.js +2 -1
- package/esm/CustomProvider/CustomProvider.js +6 -3
- package/esm/DatePicker/DatePicker.d.ts +1 -1
- package/esm/DatePicker/DatePicker.js +1 -1
- package/esm/DatePicker/Toolbar.js +1 -1
- package/esm/DateRangePicker/Calendar.d.ts +0 -1
- package/esm/DateRangePicker/Calendar.js +2 -41
- package/esm/DateRangePicker/DateRangePicker.d.ts +1 -1
- package/esm/DateRangePicker/DateRangePicker.js +23 -23
- package/esm/DateRangePicker/utils.d.ts +2 -1
- package/esm/DateRangePicker/utils.js +12 -3
- package/esm/InputPicker/InputPicker.d.ts +2 -2
- package/esm/InputPicker/test/InputPicker.test.d.ts +1 -0
- package/esm/InputPicker/test/InputPicker.test.js +10 -0
- package/esm/MultiCascader/utils.js +2 -2
- package/esm/Overlay/OverlayTrigger.js +44 -35
- package/esm/Panel/Panel.js +8 -7
- package/esm/Picker/DropdownMenu.d.ts +1 -1
- package/esm/Picker/PickerToggle.d.ts +1 -1
- package/esm/Picker/PickerToggle.js +52 -27
- package/esm/SelectPicker/SelectPicker.d.ts +9 -3
- package/esm/SelectPicker/test/SelectPicker.test.js +32 -0
- package/esm/Tree/Tree.d.ts +2 -2
- package/esm/Tree/test/Tree.test.d.ts +1 -0
- package/esm/Tree/test/Tree.test.js +11 -0
- package/esm/TreePicker/TreePicker.d.ts +2 -2
- package/esm/TreePicker/test/TreePicker.test.d.ts +1 -0
- package/esm/TreePicker/test/TreePicker.test.js +10 -0
- package/esm/utils/attachParent.d.ts +1 -0
- package/esm/utils/attachParent.js +10 -0
- package/esm/utils/treeUtils.js +2 -2
- package/esm/utils/usePortal.d.ts +4 -2
- package/esm/utils/usePortal.js +36 -14
- package/package.json +1 -1
package/esm/Cascader/utils.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
1
|
import { useState, useMemo } from 'react';
|
|
3
2
|
import slice from 'lodash/slice';
|
|
4
3
|
import { shallowEqual, useUpdateEffect } from '../utils';
|
|
5
4
|
import { findNodeOfTree } from '../utils/treeUtils';
|
|
5
|
+
import { attachParent } from '../utils/attachParent';
|
|
6
6
|
export function getColumnsAndPaths(data, value, options) {
|
|
7
7
|
var childrenKey = options.childrenKey,
|
|
8
8
|
valueKey = options.valueKey,
|
|
@@ -26,9 +26,7 @@ export function getColumnsAndPaths(data, value, options) {
|
|
|
26
26
|
|
|
27
27
|
if (node) {
|
|
28
28
|
columns.push(children.map(function (item) {
|
|
29
|
-
return
|
|
30
|
-
parent: items[i]
|
|
31
|
-
});
|
|
29
|
+
return attachParent(item, items[i]);
|
|
32
30
|
}));
|
|
33
31
|
paths.push(node.active);
|
|
34
32
|
return {
|
|
@@ -4,7 +4,7 @@ import { PickerInstance, PickerToggleProps } from '../Picker';
|
|
|
4
4
|
import { ItemDataType, FormControlPickerProps } from '../@types/common';
|
|
5
5
|
import type { MultipleSelectProps } from '../SelectPicker';
|
|
6
6
|
export declare type ValueType = (number | string)[];
|
|
7
|
-
export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label'> {
|
|
7
|
+
export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label' | 'caretAs'> {
|
|
8
8
|
/** Top the selected option in the options */
|
|
9
9
|
sticky?: boolean;
|
|
10
10
|
/** A picker that can be counted */
|
|
@@ -74,4 +74,12 @@ React.createElement(CheckPicker, {
|
|
|
74
74
|
React.createElement(CheckPicker, {
|
|
75
75
|
label: "User",
|
|
76
76
|
data: []
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
/*#__PURE__*/
|
|
80
|
+
React.createElement(CheckPicker, {
|
|
81
|
+
caretAs: function caretAs() {
|
|
82
|
+
return /*#__PURE__*/React.createElement("div", null);
|
|
83
|
+
},
|
|
84
|
+
data: []
|
|
77
85
|
});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PickerLocale } from '../locales';
|
|
3
|
-
import { PickerComponent } from '../Picker';
|
|
3
|
+
import { PickerComponent, PickerToggleProps } from '../Picker';
|
|
4
4
|
import { TreeBaseProps } from '../Tree/Tree';
|
|
5
5
|
import { FormControlPickerProps, ItemDataType } from '../@types/common';
|
|
6
6
|
export declare type ValueType = (string | number)[];
|
|
7
|
-
export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, ItemDataType>, FormControlPickerProps<T, PickerLocale, ItemDataType> {
|
|
7
|
+
export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, ItemDataType>, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
|
|
8
8
|
/** Tree node cascade */
|
|
9
9
|
cascade?: boolean;
|
|
10
10
|
/** A picker that can be counted */
|
|
@@ -566,6 +566,11 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
566
566
|
var visibleChildren = _isUndefined(searchKeywordState) || searchKeywordState.length === 0 ? !!children : hasVisibleChildren(node, childrenKey);
|
|
567
567
|
|
|
568
568
|
var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
|
|
569
|
+
/**
|
|
570
|
+
* spread operator dont copy unenumerable properties
|
|
571
|
+
* so we need to copy them manually
|
|
572
|
+
*/
|
|
573
|
+
parent: node.parent,
|
|
569
574
|
expand: expand
|
|
570
575
|
}), layer), {
|
|
571
576
|
hasChildren: visibleChildren
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -3,6 +3,7 @@ import _isUndefined from "lodash/isUndefined";
|
|
|
3
3
|
import _isNil from "lodash/isNil";
|
|
4
4
|
import { shallowEqual, CHECK_STATE } from '../utils';
|
|
5
5
|
import { getChildrenByFlattenNodes } from '../utils/treeUtils';
|
|
6
|
+
import { attachParent } from '../utils/attachParent';
|
|
6
7
|
export function isEveryChildChecked(nodes, parent) {
|
|
7
8
|
if (_isNil(parent.refKey) || _isNil(nodes[parent.refKey])) {
|
|
8
9
|
return false;
|
|
@@ -120,7 +121,7 @@ export function getFormattedTree(data, nodes, props) {
|
|
|
120
121
|
formatted.check = curNode.check;
|
|
121
122
|
formatted.expand = curNode.expand;
|
|
122
123
|
formatted.uncheckable = curNode.uncheckable;
|
|
123
|
-
formatted
|
|
124
|
+
attachParent(formatted, curNode.parent);
|
|
124
125
|
formatted.checkState = checkState;
|
|
125
126
|
|
|
126
127
|
if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {
|
|
@@ -21,7 +21,8 @@ var CustomProvider = function CustomProvider(props) {
|
|
|
21
21
|
var toasters = React.useRef(new Map());
|
|
22
22
|
|
|
23
23
|
var _usePortal = usePortal({
|
|
24
|
-
container: container
|
|
24
|
+
container: container,
|
|
25
|
+
waitMount: true
|
|
25
26
|
}),
|
|
26
27
|
Portal = _usePortal.Portal;
|
|
27
28
|
|
|
@@ -45,7 +46,9 @@ var CustomProvider = function CustomProvider(props) {
|
|
|
45
46
|
}, [classPrefix, theme]);
|
|
46
47
|
return /*#__PURE__*/React.createElement(Provider, {
|
|
47
48
|
value: value
|
|
48
|
-
}, children, /*#__PURE__*/React.createElement(Portal, null,
|
|
49
|
+
}, children, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
className: "rs-toast-provider"
|
|
51
|
+
}, toastPlacements.map(function (placement) {
|
|
49
52
|
return /*#__PURE__*/React.createElement(ToastContainer, {
|
|
50
53
|
key: placement,
|
|
51
54
|
placement: placement,
|
|
@@ -53,7 +56,7 @@ var CustomProvider = function CustomProvider(props) {
|
|
|
53
56
|
toasters.current.set(placement, _ref);
|
|
54
57
|
}
|
|
55
58
|
});
|
|
56
|
-
})));
|
|
59
|
+
}))));
|
|
57
60
|
};
|
|
58
61
|
|
|
59
62
|
export { CustomContext, Consumer as CustomConsumer };
|
|
@@ -5,7 +5,7 @@ import { PickerToggleProps } from '../Picker';
|
|
|
5
5
|
import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
|
|
6
6
|
export type { RangeType } from './Toolbar';
|
|
7
7
|
export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
|
|
8
|
-
/**
|
|
8
|
+
/** Predefined date Ranges */
|
|
9
9
|
ranges?: RangeType<Date>[];
|
|
10
10
|
/** Calendar panel default presentation date and time */
|
|
11
11
|
calendarDefaultDate?: Date;
|
|
@@ -437,7 +437,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
437
437
|
as: toggleAs,
|
|
438
438
|
ref: targetRef,
|
|
439
439
|
appearance: appearance,
|
|
440
|
-
|
|
440
|
+
editable: true,
|
|
441
441
|
inputValue: value ? formatDate(value, formatStr) : '',
|
|
442
442
|
inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
|
|
443
443
|
inputMask: DateUtils.getDateMask(formatStr),
|
|
@@ -80,7 +80,7 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
80
80
|
return;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !==
|
|
83
|
+
onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
|
|
84
84
|
};
|
|
85
85
|
|
|
86
86
|
return /*#__PURE__*/React.createElement(Button, {
|
|
@@ -19,7 +19,6 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
|
|
|
19
19
|
onToggleMeridian: (index: number, event: React.MouseEvent) => void;
|
|
20
20
|
onMouseMove?: (date: Date) => void;
|
|
21
21
|
onSelect?: (date: Date, event: React.SyntheticEvent) => void;
|
|
22
|
-
showOneCalendar?: boolean;
|
|
23
22
|
showWeekNumbers?: boolean;
|
|
24
23
|
value?: [] | [Date] | [Date, Date];
|
|
25
24
|
}
|
|
@@ -2,18 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React, { useCallback, useState } from 'react';
|
|
5
|
-
import { addMonths,
|
|
5
|
+
import { addMonths, isSameMonth } from '../utils/dateUtils';
|
|
6
6
|
import CalendarCore, { CalendarState } from '../Calendar/Calendar';
|
|
7
7
|
import { DATERANGE_DISABLED_TARGET } from '../utils';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Omit the time in the date, which is used to compare and judge the date.
|
|
11
|
-
* eg: isAfter/isBefore
|
|
12
|
-
*/
|
|
13
|
-
function omitTime(date) {
|
|
14
|
-
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
15
|
-
}
|
|
16
|
-
|
|
17
8
|
var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
18
9
|
var _props$as = props.as,
|
|
19
10
|
Component = _props$as === void 0 ? CalendarCore : _props$as,
|
|
@@ -28,10 +19,9 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
28
19
|
onChangeCalendarDate = props.onChangeCalendarDate,
|
|
29
20
|
onChangeCalendarTime = props.onChangeCalendarTime,
|
|
30
21
|
onToggleMeridian = props.onToggleMeridian,
|
|
31
|
-
showOneCalendar = props.showOneCalendar,
|
|
32
22
|
_props$value = props.value,
|
|
33
23
|
value = _props$value === void 0 ? [] : _props$value,
|
|
34
|
-
rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "
|
|
24
|
+
rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "value"]);
|
|
35
25
|
|
|
36
26
|
var _useState = useState(),
|
|
37
27
|
calendarState = _useState[0],
|
|
@@ -71,33 +61,6 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
71
61
|
var handleMoveBackward = useCallback(function () {
|
|
72
62
|
onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(getCalendarDate(), -1));
|
|
73
63
|
}, [getCalendarDate, onMoveBackward]);
|
|
74
|
-
var disabledBackward = useCallback(function () {
|
|
75
|
-
// Do not disable the Backward button on the first calendar.
|
|
76
|
-
if (index === 0) {
|
|
77
|
-
return false;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
var startDate = setDate(addMonths(calendarDate[0], 1), 1);
|
|
81
|
-
var endDate = setDate(omitTime(calendarDate[1]), 1);
|
|
82
|
-
var after = isAfter(endDate, startDate);
|
|
83
|
-
return !after;
|
|
84
|
-
}, [calendarDate, index]);
|
|
85
|
-
var disabledForward = useCallback(function () {
|
|
86
|
-
// If only one calendar is displayed, do not disable
|
|
87
|
-
if (showOneCalendar) {
|
|
88
|
-
return false;
|
|
89
|
-
} // Do not disable the Forward button on the second calendar.
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
if (index === 1) {
|
|
93
|
-
return false;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
var startDate = setDate(addMonths(omitTime(calendarDate[0]), 1), 1);
|
|
97
|
-
var endDate = setDate(omitTime(calendarDate[1]), 1);
|
|
98
|
-
var after = isAfter(endDate, startDate);
|
|
99
|
-
return !after;
|
|
100
|
-
}, [calendarDate, index, showOneCalendar]);
|
|
101
64
|
var disabledMonth = useCallback(function (date) {
|
|
102
65
|
return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, DATERANGE_DISABLED_TARGET.CALENDAR);
|
|
103
66
|
}, [disabledDate, value]);
|
|
@@ -105,9 +68,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
105
68
|
format: format,
|
|
106
69
|
calendarState: calendarState,
|
|
107
70
|
dateRange: value,
|
|
108
|
-
disabledBackward: disabledBackward(),
|
|
109
71
|
disabledDate: disabledMonth,
|
|
110
|
-
disabledForward: disabledForward(),
|
|
111
72
|
inSameMonth: inSameMonth,
|
|
112
73
|
index: index,
|
|
113
74
|
limitEndYear: limitEndYear,
|
|
@@ -3,7 +3,7 @@ import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
|
|
|
3
3
|
import { PickerComponent, PickerToggleProps } from '../Picker';
|
|
4
4
|
import { DisabledDateFunction, RangeType, DateRange } from './types';
|
|
5
5
|
export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
|
|
6
|
-
/**
|
|
6
|
+
/** Predefined date ranges */
|
|
7
7
|
ranges?: RangeType[];
|
|
8
8
|
/** Format date */
|
|
9
9
|
format?: string;
|
|
@@ -134,9 +134,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
134
134
|
* If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].
|
|
135
135
|
*/
|
|
136
136
|
|
|
137
|
-
var
|
|
137
|
+
var updateCalendarDateRange = useCallback(function (value, calendarKey) {
|
|
138
138
|
setCalendarDate(getCalendarDate({
|
|
139
|
-
value: value
|
|
139
|
+
value: value,
|
|
140
|
+
calendarKey: calendarKey
|
|
140
141
|
}));
|
|
141
142
|
}, []); // if valueProp changed then update selectValue/hoverValue
|
|
142
143
|
|
|
@@ -311,10 +312,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
311
312
|
|
|
312
313
|
setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
|
|
313
314
|
setSelectedDates(nextSelectDates);
|
|
314
|
-
|
|
315
|
+
updateCalendarDateRange(nextSelectDates);
|
|
315
316
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
|
|
316
317
|
hasDoneSelect.current = !hasDoneSelect.current;
|
|
317
|
-
}, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates,
|
|
318
|
+
}, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
|
|
318
319
|
/**
|
|
319
320
|
* If `selectValue` changed, there will be the following effects.
|
|
320
321
|
* 1. Check if the selection is completed.
|
|
@@ -326,12 +327,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
326
327
|
var doneSelected = selectValueLength === 0 || selectValueLength === 2;
|
|
327
328
|
doneSelected && setHoverDateRange(null);
|
|
328
329
|
}, [selectedDates]);
|
|
329
|
-
var
|
|
330
|
+
var updateSingleCalendarDate = useCallback(function (index, date) {
|
|
330
331
|
var nextCalendarDate = Array.from(calendarDate);
|
|
331
332
|
nextCalendarDate[index] = date;
|
|
332
|
-
|
|
333
|
-
}, [calendarDate,
|
|
334
|
-
var
|
|
333
|
+
updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');
|
|
334
|
+
}, [calendarDate, updateCalendarDateRange]);
|
|
335
|
+
var updateSingleCalendarTime = useCallback(function (index, date) {
|
|
335
336
|
setSelectedDates(function (prev) {
|
|
336
337
|
var next = [].concat(prev);
|
|
337
338
|
var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day
|
|
@@ -343,8 +344,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
343
344
|
next[index] = clonedDate;
|
|
344
345
|
return next;
|
|
345
346
|
});
|
|
346
|
-
|
|
347
|
-
}, [
|
|
347
|
+
updateSingleCalendarDate(index, date);
|
|
348
|
+
}, [updateSingleCalendarDate]);
|
|
348
349
|
/**
|
|
349
350
|
* The callback triggered when PM/AM is switched.
|
|
350
351
|
*/
|
|
@@ -379,9 +380,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
379
380
|
onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
|
|
380
381
|
}, [handleValueUpdate, onOk, selectedDates]);
|
|
381
382
|
var handleClean = useCallback(function (event) {
|
|
382
|
-
|
|
383
|
+
updateCalendarDateRange(null);
|
|
383
384
|
handleValueUpdate(event, null);
|
|
384
|
-
}, [handleValueUpdate,
|
|
385
|
+
}, [handleValueUpdate, updateCalendarDateRange]);
|
|
385
386
|
/**
|
|
386
387
|
* Callback after the input box value is changed.
|
|
387
388
|
*/
|
|
@@ -416,9 +417,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
416
417
|
|
|
417
418
|
setHoverDateRange(selectValue);
|
|
418
419
|
setSelectedDates(selectValue);
|
|
419
|
-
|
|
420
|
+
updateCalendarDateRange(selectValue);
|
|
420
421
|
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
421
|
-
[character, rangeFormatStr,
|
|
422
|
+
[character, rangeFormatStr, updateCalendarDateRange]);
|
|
422
423
|
/**
|
|
423
424
|
* The callback after the enter key is triggered on the input
|
|
424
425
|
*/
|
|
@@ -444,8 +445,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
444
445
|
}
|
|
445
446
|
|
|
446
447
|
setSelectedDates(value !== null && value !== void 0 ? value : []);
|
|
447
|
-
|
|
448
|
-
}, [defaultCalendarValue,
|
|
448
|
+
updateCalendarDateRange(nextCalendarDate);
|
|
449
|
+
}, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);
|
|
449
450
|
var handleEntered = useCallback(function () {
|
|
450
451
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
451
452
|
setPickerToggleActive(true);
|
|
@@ -522,7 +523,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
522
523
|
top: top
|
|
523
524
|
});
|
|
524
525
|
|
|
525
|
-
var
|
|
526
|
+
var calendarProps = {
|
|
526
527
|
calendarDate: calendarDate,
|
|
527
528
|
disabledDate: handleDisabledDate,
|
|
528
529
|
format: formatStr,
|
|
@@ -530,12 +531,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
530
531
|
isoWeek: isoWeek,
|
|
531
532
|
limitEndYear: limitEndYear,
|
|
532
533
|
locale: locale,
|
|
533
|
-
showOneCalendar: showOneCalendar,
|
|
534
534
|
showWeekNumbers: showWeekNumbers,
|
|
535
535
|
value: selectedDates,
|
|
536
536
|
showMeridian: showMeridian,
|
|
537
|
-
onChangeCalendarDate:
|
|
538
|
-
onChangeCalendarTime:
|
|
537
|
+
onChangeCalendarDate: updateSingleCalendarDate,
|
|
538
|
+
onChangeCalendarTime: updateSingleCalendarTime,
|
|
539
539
|
onMouseMove: handleMouseMove,
|
|
540
540
|
onSelect: handleSelectDate,
|
|
541
541
|
onToggleMeridian: handleToggleMeridian,
|
|
@@ -556,9 +556,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
556
556
|
className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
|
|
557
557
|
}, /*#__PURE__*/React.createElement(Calendar, _extends({
|
|
558
558
|
index: 0
|
|
559
|
-
},
|
|
559
|
+
}, calendarProps)), !showOneCalendar && /*#__PURE__*/React.createElement(Calendar, _extends({
|
|
560
560
|
index: 1
|
|
561
|
-
},
|
|
561
|
+
}, calendarProps)))), /*#__PURE__*/React.createElement(Toolbar, {
|
|
562
562
|
locale: locale,
|
|
563
563
|
calendarDate: selectedDates,
|
|
564
564
|
disabledOkBtn: disabledOkButton,
|
|
@@ -598,7 +598,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
598
598
|
as: toggleAs,
|
|
599
599
|
ref: targetRef,
|
|
600
600
|
appearance: appearance,
|
|
601
|
-
|
|
601
|
+
editable: true,
|
|
602
602
|
inputMask: DateUtils.getDateMask(rangeFormatStr),
|
|
603
603
|
inputValue: value ? getDisplayString(value, true) : '',
|
|
604
604
|
inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { DateRange, RangeType } from './types';
|
|
2
2
|
export declare const setTimingMargin: (date: any, way?: string) => Date;
|
|
3
|
-
export declare function getCalendarDate({ value }: {
|
|
3
|
+
export declare function getCalendarDate({ value, calendarKey }: {
|
|
4
4
|
value: [] | [Date] | [Date, Date] | null;
|
|
5
|
+
calendarKey?: 'start' | 'end';
|
|
5
6
|
}): DateRange;
|
|
6
7
|
export declare const getDefaultRanges: () => RangeType[];
|
|
7
8
|
export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
|
|
@@ -9,13 +9,22 @@ export var setTimingMargin = function setTimingMargin(date, way) {
|
|
|
9
9
|
export function getCalendarDate(_ref) {
|
|
10
10
|
var _value;
|
|
11
11
|
|
|
12
|
-
var value = _ref.value
|
|
12
|
+
var value = _ref.value,
|
|
13
|
+
_ref$calendarKey = _ref.calendarKey,
|
|
14
|
+
calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey;
|
|
13
15
|
// Update calendarDate if the value is not null
|
|
14
16
|
value = (_value = value) !== null && _value !== void 0 ? _value : [];
|
|
15
17
|
|
|
16
18
|
if (value[0] && value[1]) {
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
+
var startMonth = DateUtils.getMonth(value[0]);
|
|
20
|
+
var endMonth = DateUtils.getMonth(value[1]);
|
|
21
|
+
|
|
22
|
+
if (calendarKey === 'start') {
|
|
23
|
+
return [value[0], startMonth >= endMonth ? DateUtils.addMonths(value[0], 1) : value[1]];
|
|
24
|
+
} else if (calendarKey === 'end') {
|
|
25
|
+
return [startMonth >= endMonth ? DateUtils.addMonths(value[1], -1) : value[0], value[1]];
|
|
26
|
+
} // If only the start date
|
|
27
|
+
|
|
19
28
|
} else if (value[0]) {
|
|
20
29
|
return [value[0], DateUtils.addMonths(value[0], 1)];
|
|
21
30
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InputPickerLocale } from '../locales';
|
|
3
|
-
import { PickerComponent } from '../Picker';
|
|
3
|
+
import { PickerComponent, PickerToggleProps } from '../Picker';
|
|
4
4
|
import { TagProps } from '../Tag';
|
|
5
5
|
import { ItemDataType, FormControlPickerProps } from '../@types/common';
|
|
6
6
|
import { SelectProps } from '../SelectPicker';
|
|
@@ -24,7 +24,7 @@ interface InputItemDataType extends ItemDataType {
|
|
|
24
24
|
create?: boolean;
|
|
25
25
|
}
|
|
26
26
|
export declare type ValueType = any;
|
|
27
|
-
export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T> {
|
|
27
|
+
export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs'> {
|
|
28
28
|
tabIndex?: number;
|
|
29
29
|
/** Settings can create new options */
|
|
30
30
|
creatable?: boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -3,6 +3,7 @@ import uniq from 'lodash/uniq';
|
|
|
3
3
|
import remove from 'lodash/remove';
|
|
4
4
|
import slice from 'lodash/slice';
|
|
5
5
|
import { flattenTree } from '../utils/treeUtils';
|
|
6
|
+
import { attachParent } from '../utils/attachParent';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Get all parents of a node
|
|
@@ -167,8 +168,7 @@ export function useFlattenData(data, itemKeys) {
|
|
|
167
168
|
|
|
168
169
|
var addFlattenData = useCallback(function (children, parent) {
|
|
169
170
|
var nodes = children.map(function (child) {
|
|
170
|
-
child
|
|
171
|
-
return child;
|
|
171
|
+
return attachParent(child, parent);
|
|
172
172
|
});
|
|
173
173
|
parent[childrenKey] = nodes;
|
|
174
174
|
setFlattenData([].concat(flattenData, nodes));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
import _isUndefined from "lodash/isUndefined";
|
|
4
|
-
import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext, useState } from 'react';
|
|
4
|
+
import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext, useState, useMemo } from 'react';
|
|
5
5
|
import get from 'lodash/get';
|
|
6
6
|
import isNil from 'lodash/isNil';
|
|
7
7
|
import contains from 'dom-lib/contains';
|
|
@@ -258,56 +258,65 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
258
258
|
var preventDefault = useCallback(function (event) {
|
|
259
259
|
event.preventDefault();
|
|
260
260
|
}, []);
|
|
261
|
-
var triggerEvents = {
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
261
|
+
var triggerEvents = useMemo(function () {
|
|
262
|
+
// Pass events by props
|
|
263
|
+
var events = {
|
|
264
|
+
onClick: onClick,
|
|
265
|
+
onContextMenu: onContextMenu,
|
|
266
|
+
onMouseOver: onMouseOver,
|
|
267
|
+
onMouseOut: onMouseOut,
|
|
268
|
+
onFocus: onFocus,
|
|
269
|
+
onBlur: onBlur,
|
|
270
|
+
onMouseMove: onMouseMove
|
|
271
|
+
}; // When trigger is disabled, no predefined event listeners are added.
|
|
272
|
+
|
|
273
|
+
if (disabled || readOnly || plaintext || trigger === 'none') {
|
|
274
|
+
return events;
|
|
275
|
+
} // Get the cursor position through onMouseMove.
|
|
276
|
+
// https://rsuitejs.com/components/tooltip/#follow-cursor
|
|
277
|
+
|
|
278
|
+
|
|
279
|
+
if (followCursor) {
|
|
280
|
+
events.onMouseMove = createChainedFunction(handledMoveOverlay, onMouseMove);
|
|
281
|
+
} // The `click` event is usually used in `toggle` scenarios.
|
|
282
|
+
// The first click will open and the second click will close.
|
|
283
|
+
|
|
270
284
|
|
|
271
|
-
if (!disabled && !readOnly && !plaintext) {
|
|
272
285
|
if (isOneOf('click', trigger)) {
|
|
273
|
-
|
|
274
|
-
|
|
286
|
+
events.onClick = createChainedFunction(handleOpenState, events.onClick);
|
|
287
|
+
return events;
|
|
288
|
+
} // The difference between it and the click event is that it does not trigger the close.
|
|
275
289
|
|
|
276
|
-
if (isOneOf('contextMenu', trigger)) {
|
|
277
|
-
triggerEvents.onContextMenu = createChainedFunction(preventDefault, handleOpenState, triggerEvents.onContextMenu);
|
|
278
|
-
}
|
|
279
290
|
|
|
280
291
|
if (isOneOf('active', trigger)) {
|
|
281
|
-
|
|
292
|
+
events.onClick = createChainedFunction(handleDelayedOpen, events.onClick);
|
|
293
|
+
return events;
|
|
282
294
|
}
|
|
283
295
|
|
|
284
296
|
if (isOneOf('hover', trigger)) {
|
|
285
|
-
var onMouseOverListener =
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
if (trigger !== 'none') {
|
|
289
|
-
onMouseOverListener = function onMouseOverListener(e) {
|
|
290
|
-
return onMouseEventHandler(handleDelayedOpen, e);
|
|
291
|
-
};
|
|
297
|
+
var onMouseOverListener = function onMouseOverListener(e) {
|
|
298
|
+
return onMouseEventHandler(handleDelayedOpen, e);
|
|
299
|
+
};
|
|
292
300
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
}
|
|
301
|
+
var onMouseOutListener = function onMouseOutListener(e) {
|
|
302
|
+
return onMouseEventHandler(handleDelayedClose, e);
|
|
303
|
+
};
|
|
297
304
|
|
|
298
|
-
|
|
299
|
-
|
|
305
|
+
events.onMouseOver = createChainedFunction(onMouseOverListener, events.onMouseOver);
|
|
306
|
+
events.onMouseOut = createChainedFunction(onMouseOutListener, events.onMouseOut);
|
|
300
307
|
}
|
|
301
308
|
|
|
302
309
|
if (isOneOf('focus', trigger)) {
|
|
303
|
-
|
|
304
|
-
|
|
310
|
+
events.onFocus = createChainedFunction(handleDelayedOpen, events.onFocus);
|
|
311
|
+
events.onBlur = createChainedFunction(handleDelayedClose, events.onBlur);
|
|
305
312
|
}
|
|
306
313
|
|
|
307
|
-
if (
|
|
308
|
-
|
|
314
|
+
if (isOneOf('contextMenu', trigger)) {
|
|
315
|
+
events.onContextMenu = createChainedFunction(preventDefault, handleOpenState, events.onContextMenu);
|
|
309
316
|
}
|
|
310
|
-
|
|
317
|
+
|
|
318
|
+
return events;
|
|
319
|
+
}, [disabled, followCursor, handleDelayedClose, handleDelayedOpen, handleOpenState, handledMoveOverlay, onBlur, onClick, onContextMenu, onFocus, onMouseMove, onMouseOut, onMouseOver, plaintext, preventDefault, readOnly, trigger]);
|
|
311
320
|
|
|
312
321
|
var renderOverlay = function renderOverlay() {
|
|
313
322
|
var overlayProps = _extends({}, rest, {
|
package/esm/Panel/Panel.js
CHANGED
|
@@ -104,21 +104,19 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
104
104
|
return null;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
var
|
|
107
|
+
var panelTitleElement;
|
|
108
108
|
|
|
109
109
|
if (! /*#__PURE__*/React.isValidElement(header) || Array.isArray(header)) {
|
|
110
|
-
|
|
111
|
-
rotate: expanded ? 180 : 0
|
|
112
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
110
|
+
panelTitleElement = /*#__PURE__*/React.createElement("span", {
|
|
113
111
|
className: prefix('title'),
|
|
114
112
|
role: "presentation"
|
|
115
113
|
}, /*#__PURE__*/React.createElement("span", {
|
|
116
114
|
className: expanded ? undefined : 'collapsed'
|
|
117
|
-
}, header))
|
|
115
|
+
}, header));
|
|
118
116
|
} else {
|
|
119
117
|
var _className = merge(prefix('title'), get(header, 'props.className'));
|
|
120
118
|
|
|
121
|
-
|
|
119
|
+
panelTitleElement = /*#__PURE__*/React.cloneElement(header, {
|
|
122
120
|
className: _className
|
|
123
121
|
});
|
|
124
122
|
}
|
|
@@ -130,7 +128,10 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
130
128
|
className: prefix('header'),
|
|
131
129
|
onClick: collapsible ? handleSelect : undefined,
|
|
132
130
|
tabIndex: -1
|
|
133
|
-
},
|
|
131
|
+
}, panelTitleElement, collapsible && /*#__PURE__*/React.createElement(AngleDownIcon, {
|
|
132
|
+
rotate: expanded ? 180 : 0,
|
|
133
|
+
"data-testid": "caret icon"
|
|
134
|
+
}));
|
|
134
135
|
};
|
|
135
136
|
|
|
136
137
|
var classes = merge(className, withClassPrefix({
|
|
@@ -19,7 +19,7 @@ export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit
|
|
|
19
19
|
rowHeight?: number;
|
|
20
20
|
rowGroupHeight?: number;
|
|
21
21
|
virtualized?: boolean;
|
|
22
|
-
listProps?: ListProps
|
|
22
|
+
listProps?: Partial<ListProps>;
|
|
23
23
|
/** Custom selected option */
|
|
24
24
|
renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
|
|
25
25
|
renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
|