rsuite 5.31.0 → 5.32.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 +19 -0
- package/Calendar/styles/index.less +3 -2
- package/Toggle/styles/mixin.less +14 -0
- package/cjs/Calendar/Calendar.d.ts +3 -3
- package/cjs/Calendar/Calendar.js +4 -4
- package/cjs/Calendar/CalendarContainer.d.ts +2 -2
- package/cjs/Calendar/CalendarContainer.js +8 -11
- package/cjs/Calendar/MonthDropdown.js +1 -1
- package/cjs/Cascader/Cascader.d.ts +2 -2
- package/cjs/Cascader/Cascader.js +83 -71
- package/cjs/Cascader/DropdownMenu.d.ts +6 -2
- package/cjs/Cascader/DropdownMenu.js +8 -4
- package/cjs/Cascader/utils.d.ts +52 -17
- package/cjs/Cascader/utils.js +99 -138
- package/cjs/DatePicker/DatePicker.d.ts +3 -1
- package/cjs/DatePicker/DatePicker.js +4 -5
- package/cjs/DateRangePicker/Calendar.d.ts +1 -0
- package/cjs/DateRangePicker/Calendar.js +4 -5
- package/cjs/DateRangePicker/DateRangePicker.d.ts +3 -1
- package/cjs/DateRangePicker/DateRangePicker.js +4 -1
- package/cjs/MultiCascader/DropdownMenu.d.ts +2 -2
- package/cjs/MultiCascader/MultiCascader.d.ts +1 -1
- package/cjs/MultiCascader/MultiCascader.js +12 -7
- package/cjs/MultiCascader/utils.d.ts +2 -2
- package/cjs/MultiCascader/utils.js +3 -3
- package/cjs/Picker/utils.d.ts +4 -3
- package/cjs/Picker/utils.js +8 -4
- package/cjs/locales/ru_RU.js +6 -6
- package/cjs/utils/getDataGroupBy.js +1 -1
- package/cjs/utils/treeUtils.d.ts +5 -1
- package/cjs/utils/treeUtils.js +31 -6
- package/cjs/utils/useMap.d.ts +6 -0
- package/cjs/utils/useMap.js +35 -0
- package/dist/rsuite-no-reset-rtl.css +31 -2
- package/dist/rsuite-no-reset-rtl.min.css +1 -1
- package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
- package/dist/rsuite-no-reset.css +31 -2
- package/dist/rsuite-no-reset.min.css +1 -1
- package/dist/rsuite-no-reset.min.css.map +1 -1
- package/dist/rsuite-rtl.css +31 -2
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +31 -2
- package/dist/rsuite.js +187 -15
- 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 +3 -3
- package/esm/Calendar/Calendar.js +6 -6
- package/esm/Calendar/CalendarContainer.d.ts +2 -2
- package/esm/Calendar/CalendarContainer.js +10 -13
- package/esm/Calendar/MonthDropdown.js +1 -1
- package/esm/Cascader/Cascader.d.ts +2 -2
- package/esm/Cascader/Cascader.js +85 -75
- package/esm/Cascader/DropdownMenu.d.ts +6 -2
- package/esm/Cascader/DropdownMenu.js +8 -4
- package/esm/Cascader/utils.d.ts +52 -17
- package/esm/Cascader/utils.js +100 -135
- package/esm/DatePicker/DatePicker.d.ts +3 -1
- package/esm/DatePicker/DatePicker.js +4 -5
- package/esm/DateRangePicker/Calendar.d.ts +1 -0
- package/esm/DateRangePicker/Calendar.js +5 -6
- package/esm/DateRangePicker/DateRangePicker.d.ts +3 -1
- package/esm/DateRangePicker/DateRangePicker.js +4 -1
- package/esm/MultiCascader/DropdownMenu.d.ts +2 -2
- package/esm/MultiCascader/MultiCascader.d.ts +1 -1
- package/esm/MultiCascader/MultiCascader.js +12 -7
- package/esm/MultiCascader/utils.d.ts +2 -2
- package/esm/MultiCascader/utils.js +4 -4
- package/esm/Picker/utils.d.ts +4 -3
- package/esm/Picker/utils.js +8 -4
- package/esm/locales/ru_RU.js +6 -6
- package/esm/utils/getDataGroupBy.js +2 -2
- package/esm/utils/treeUtils.d.ts +5 -1
- package/esm/utils/treeUtils.js +30 -6
- package/esm/utils/useMap.d.ts +6 -0
- package/esm/utils/useMap.js +29 -0
- package/package.json +2 -1
package/cjs/Cascader/utils.d.ts
CHANGED
|
@@ -1,23 +1,58 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
declare type GetColumnsAndPathsOptions<T> = {
|
|
2
|
+
getParent: (item: T) => T | undefined;
|
|
3
|
+
getChildren: (item: T) => readonly T[] | undefined;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Calculate columns to be displayed:
|
|
7
|
+
*
|
|
8
|
+
* - Every ancestor level of activeItem should be displayed
|
|
9
|
+
* - The level that activeItem is at should be displayed
|
|
10
|
+
* - If activeItem is a parent node, its child level should be displayed
|
|
11
|
+
*
|
|
12
|
+
* @param items
|
|
13
|
+
* @param value
|
|
14
|
+
* @param options
|
|
15
|
+
* @returns
|
|
16
|
+
*/
|
|
17
|
+
export declare function getColumnsAndPaths<T extends Record<string, unknown>>(items: readonly T[], pathTarget: T | undefined, options: GetColumnsAndPathsOptions<T>): {
|
|
18
|
+
columns: (readonly T[])[];
|
|
19
|
+
path: T[];
|
|
5
20
|
};
|
|
6
21
|
declare type UsePathsParams<T> = {
|
|
7
22
|
data: T[];
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
23
|
+
/**
|
|
24
|
+
* The item where the focus is on
|
|
25
|
+
*/
|
|
26
|
+
activeItem: T | undefined;
|
|
27
|
+
/**
|
|
28
|
+
* The item selected by Cascader's value
|
|
29
|
+
*/
|
|
30
|
+
selectedItem: T | undefined;
|
|
31
|
+
getParent: (item: T) => T | undefined;
|
|
32
|
+
getChildren: (item: T) => readonly T[] | undefined;
|
|
11
33
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Caculate following 3 things
|
|
36
|
+
*
|
|
37
|
+
* - The columns of items to be displayed
|
|
38
|
+
* - The path towards the current focused item
|
|
39
|
+
* - The path towards the current selected item (referred to by Cascader's value)
|
|
40
|
+
*
|
|
41
|
+
* @param params
|
|
42
|
+
* @returns
|
|
43
|
+
*/
|
|
44
|
+
export declare function usePaths<T extends Record<string, unknown>>({ data, activeItem, selectedItem, getParent, getChildren }: UsePathsParams<T>): {
|
|
45
|
+
columnsToDisplay: (readonly T[])[];
|
|
46
|
+
pathTowardsSelectedItem: T[];
|
|
47
|
+
pathTowardsActiveItem: T[];
|
|
22
48
|
};
|
|
49
|
+
/**
|
|
50
|
+
* Returns a WeakMap that maps each item in `items` to its parent
|
|
51
|
+
* indicated by `getChildren` function
|
|
52
|
+
*/
|
|
53
|
+
export declare function getParentMap<T extends Record<string, unknown>>(items: readonly T[], getChildren: (item: T) => readonly T[] | undefined): WeakMap<T, T>;
|
|
54
|
+
/**
|
|
55
|
+
* Returns an array indicating the hirearchy path from root towards `target` item
|
|
56
|
+
*/
|
|
57
|
+
export declare function getPathTowardsItem<T>(target: T | undefined, getParent: (item: T) => T | undefined): T[];
|
|
23
58
|
export {};
|
package/cjs/Cascader/utils.js
CHANGED
|
@@ -1,175 +1,136 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
3
|
exports.__esModule = true;
|
|
6
4
|
exports.getColumnsAndPaths = getColumnsAndPaths;
|
|
7
5
|
exports.usePaths = usePaths;
|
|
6
|
+
exports.getParentMap = getParentMap;
|
|
7
|
+
exports.getPathTowardsItem = getPathTowardsItem;
|
|
8
8
|
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
|
|
11
|
-
var
|
|
12
|
-
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
} else if (children) {
|
|
38
|
-
var node = findNode(children);
|
|
39
|
-
|
|
40
|
-
if (node) {
|
|
41
|
-
columns.push(children.map(function (item) {
|
|
42
|
-
return (0, _attachParent.attachParent)(item, items[i]);
|
|
43
|
-
}));
|
|
44
|
-
paths.push(node.active);
|
|
45
|
-
return {
|
|
46
|
-
v: {
|
|
47
|
-
items: items,
|
|
48
|
-
active: items[i]
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
}
|
|
11
|
+
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
+
|
|
13
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
14
|
+
|
|
15
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Calculate columns to be displayed:
|
|
19
|
+
*
|
|
20
|
+
* - Every ancestor level of activeItem should be displayed
|
|
21
|
+
* - The level that activeItem is at should be displayed
|
|
22
|
+
* - If activeItem is a parent node, its child level should be displayed
|
|
23
|
+
*
|
|
24
|
+
* @param items
|
|
25
|
+
* @param value
|
|
26
|
+
* @param options
|
|
27
|
+
* @returns
|
|
28
|
+
*/
|
|
29
|
+
function getColumnsAndPaths(items, pathTarget, options) {
|
|
30
|
+
var getParent = options.getParent,
|
|
31
|
+
getChildren = options.getChildren;
|
|
32
|
+
|
|
33
|
+
if (!pathTarget) {
|
|
34
|
+
return {
|
|
35
|
+
columns: [items],
|
|
36
|
+
path: []
|
|
53
37
|
};
|
|
38
|
+
}
|
|
54
39
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
if (typeof _ret === "object") return _ret.v;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
return null;
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
var selectedNode = findNode(data);
|
|
65
|
-
columns.push(data);
|
|
40
|
+
var columns = [];
|
|
41
|
+
var path = [pathTarget];
|
|
42
|
+
var children = getChildren(pathTarget);
|
|
66
43
|
|
|
67
|
-
if (
|
|
68
|
-
|
|
44
|
+
if (children && children.length > 0) {
|
|
45
|
+
columns.unshift(children);
|
|
69
46
|
}
|
|
70
47
|
|
|
71
|
-
|
|
72
|
-
var
|
|
73
|
-
return item[valueKey] === value;
|
|
74
|
-
});
|
|
48
|
+
for (var parent = getParent(pathTarget); !!parent; parent = getParent(parent)) {
|
|
49
|
+
var _getChildren;
|
|
75
50
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
51
|
+
columns.unshift((_getChildren = getChildren(parent)) !== null && _getChildren !== void 0 ? _getChildren : []);
|
|
52
|
+
path.unshift(parent);
|
|
79
53
|
}
|
|
80
54
|
|
|
81
|
-
columns.
|
|
82
|
-
paths.reverse();
|
|
55
|
+
columns.unshift(items);
|
|
83
56
|
return {
|
|
84
57
|
columns: columns,
|
|
85
|
-
|
|
58
|
+
path: path
|
|
86
59
|
};
|
|
87
60
|
}
|
|
88
61
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Caculate following 3 things
|
|
64
|
+
*
|
|
65
|
+
* - The columns of items to be displayed
|
|
66
|
+
* - The path towards the current focused item
|
|
67
|
+
* - The path towards the current selected item (referred to by Cascader's value)
|
|
68
|
+
*
|
|
69
|
+
* @param params
|
|
70
|
+
* @returns
|
|
71
|
+
*/
|
|
72
|
+
function usePaths(_ref) {
|
|
73
|
+
var data = _ref.data,
|
|
74
|
+
activeItem = _ref.activeItem,
|
|
75
|
+
selectedItem = _ref.selectedItem,
|
|
76
|
+
getParent = _ref.getParent,
|
|
77
|
+
getChildren = _ref.getChildren;
|
|
78
|
+
var pathTowardsSelectedItem = (0, _react.useMemo)(function () {
|
|
79
|
+
return getPathTowardsItem(selectedItem, getParent);
|
|
80
|
+
}, [getParent, selectedItem]);
|
|
94
81
|
|
|
95
82
|
var _useMemo = (0, _react.useMemo)(function () {
|
|
96
|
-
return getColumnsAndPaths(data,
|
|
97
|
-
|
|
98
|
-
|
|
83
|
+
return getColumnsAndPaths(data, activeItem, {
|
|
84
|
+
getParent: getParent,
|
|
85
|
+
getChildren: getChildren
|
|
99
86
|
});
|
|
100
|
-
}, [data,
|
|
101
|
-
|
|
102
|
-
|
|
87
|
+
}, [data, activeItem, getParent, getChildren]),
|
|
88
|
+
columnsToDisplay = _useMemo.columns,
|
|
89
|
+
pathTowardsActiveItem = _useMemo.path;
|
|
103
90
|
|
|
91
|
+
return {
|
|
92
|
+
columnsToDisplay: columnsToDisplay,
|
|
93
|
+
pathTowardsSelectedItem: pathTowardsSelectedItem,
|
|
94
|
+
pathTowardsActiveItem: pathTowardsActiveItem
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Returns a WeakMap that maps each item in `items` to its parent
|
|
99
|
+
* indicated by `getChildren` function
|
|
100
|
+
*/
|
|
104
101
|
|
|
105
|
-
var _useState = (0, _react.useState)(columns),
|
|
106
|
-
columnData = _useState[0],
|
|
107
|
-
setColumnData = _useState[1]; // The path after cascading data selection.
|
|
108
102
|
|
|
103
|
+
function getParentMap(items, getChildren) {
|
|
104
|
+
var map = new WeakMap();
|
|
109
105
|
|
|
110
|
-
var
|
|
111
|
-
|
|
112
|
-
setSelectedPaths = _useState2[1]; // The path corresponding to the selected value.
|
|
106
|
+
for (var queue = [].concat(items); queue.length > 0;) {
|
|
107
|
+
var _item = queue.shift();
|
|
113
108
|
|
|
109
|
+
var children = getChildren(_item);
|
|
114
110
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
111
|
+
if (children) {
|
|
112
|
+
for (var _iterator = _createForOfIteratorHelperLoose(children), _step; !(_step = _iterator()).done;) {
|
|
113
|
+
var child = _step.value;
|
|
114
|
+
map.set(child, _item);
|
|
115
|
+
queue.push(child);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
123
119
|
|
|
120
|
+
return map;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Returns an array indicating the hirearchy path from root towards `target` item
|
|
124
|
+
*/
|
|
124
125
|
|
|
125
|
-
function addColumn(column, index) {
|
|
126
|
-
setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));
|
|
127
|
-
}
|
|
128
|
-
/**
|
|
129
|
-
* Remove subsequent columns of the specified column
|
|
130
|
-
* @param index
|
|
131
|
-
*/
|
|
132
126
|
|
|
127
|
+
function getPathTowardsItem(target, getParent) {
|
|
128
|
+
if (!target) return [];
|
|
129
|
+
var path = [target];
|
|
133
130
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
/**
|
|
138
|
-
* Enforce update of columns and paths.
|
|
139
|
-
* @param nextValue Selected value
|
|
140
|
-
* @param isAttachChildren Whether to attach the children of the selected node.
|
|
141
|
-
*/
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
function enforceUpdate(nextValue, isAttachChildren) {
|
|
145
|
-
var _getColumnsAndPaths = getColumnsAndPaths(data, nextValue, {
|
|
146
|
-
valueKey: valueKey,
|
|
147
|
-
childrenKey: childrenKey,
|
|
148
|
-
isAttachChildren: isAttachChildren
|
|
149
|
-
}),
|
|
150
|
-
columns = _getColumnsAndPaths.columns,
|
|
151
|
-
paths = _getColumnsAndPaths.paths;
|
|
152
|
-
|
|
153
|
-
setColumnData(columns);
|
|
154
|
-
setSelectedPaths(paths);
|
|
131
|
+
for (var parent = getParent(target); !!parent; parent = getParent(parent)) {
|
|
132
|
+
path.unshift(parent);
|
|
155
133
|
}
|
|
156
134
|
|
|
157
|
-
|
|
158
|
-
// Update paths when value is updated, then update valueToPaths.
|
|
159
|
-
setValueToPaths(paths);
|
|
160
|
-
}, [paths]);
|
|
161
|
-
(0, _utils.useUpdateEffect)(function () {
|
|
162
|
-
enforceUpdate(value);
|
|
163
|
-
}, [data]);
|
|
164
|
-
return {
|
|
165
|
-
enforceUpdate: enforceUpdate,
|
|
166
|
-
columnData: columnData,
|
|
167
|
-
valueToPaths: valueToPaths,
|
|
168
|
-
selectedPaths: selectedPaths,
|
|
169
|
-
setValueToPaths: setValueToPaths,
|
|
170
|
-
setColumnData: setColumnData,
|
|
171
|
-
setSelectedPaths: setSelectedPaths,
|
|
172
|
-
addColumn: addColumn,
|
|
173
|
-
removeColumnByIndex: removeColumnByIndex
|
|
174
|
-
};
|
|
135
|
+
return path;
|
|
175
136
|
}
|
|
@@ -21,8 +21,10 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
|
|
|
21
21
|
inline?: boolean;
|
|
22
22
|
/** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
|
|
23
23
|
isoWeek?: boolean;
|
|
24
|
-
/** Set the
|
|
24
|
+
/** Set the upper limit of the available year relative to the current selection date */
|
|
25
25
|
limitEndYear?: number;
|
|
26
|
+
/** Set the lower limit of the available year relative to the current selection date */
|
|
27
|
+
limitStartYear?: number;
|
|
26
28
|
/** Whether to show week numbers */
|
|
27
29
|
showWeekNumbers?: boolean;
|
|
28
30
|
/** Meridian format */
|
|
@@ -63,6 +63,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
63
63
|
isoWeek = props.isoWeek,
|
|
64
64
|
_props$limitEndYear = props.limitEndYear,
|
|
65
65
|
limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
|
|
66
|
+
limitStartYear = props.limitStartYear,
|
|
66
67
|
overrideLocale = props.locale,
|
|
67
68
|
menuClassName = props.menuClassName,
|
|
68
69
|
_props$appearance = props.appearance,
|
|
@@ -101,7 +102,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
101
102
|
onSelect = props.onSelect,
|
|
102
103
|
onToggleMonthDropdown = props.onToggleMonthDropdown,
|
|
103
104
|
onToggleTimeDropdown = props.onToggleTimeDropdown,
|
|
104
|
-
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
|
|
105
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
|
|
105
106
|
|
|
106
107
|
var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
|
|
107
108
|
locale = _useCustom.locale,
|
|
@@ -376,9 +377,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
376
377
|
};
|
|
377
378
|
});
|
|
378
379
|
}, [props]);
|
|
379
|
-
var inSameMonth = (0, _react.useCallback)(function (date) {
|
|
380
|
-
return _utils.DateUtils.isSameMonth(date, calendarDate);
|
|
381
|
-
}, [calendarDate]);
|
|
382
380
|
|
|
383
381
|
var calendar = /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
|
|
384
382
|
locale: locale,
|
|
@@ -389,9 +387,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
389
387
|
disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
|
|
390
388
|
disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,
|
|
391
389
|
limitEndYear: limitEndYear,
|
|
390
|
+
limitStartYear: limitStartYear,
|
|
392
391
|
format: formatStr,
|
|
393
392
|
isoWeek: isoWeek,
|
|
394
|
-
inSameMonth: inSameMonth,
|
|
395
393
|
calendarDate: calendarDate,
|
|
396
394
|
onMoveForward: handleMoveForward,
|
|
397
395
|
onMoveBackward: handleMoveBackward,
|
|
@@ -535,6 +533,7 @@ DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
|
|
|
535
533
|
hideSeconds: _propTypes.default.func,
|
|
536
534
|
isoWeek: _propTypes.default.bool,
|
|
537
535
|
limitEndYear: _propTypes.default.number,
|
|
536
|
+
limitStartYear: _propTypes.default.number,
|
|
538
537
|
onChange: _propTypes.default.func,
|
|
539
538
|
onChangeCalendarDate: _propTypes.default.func,
|
|
540
539
|
onNextMonth: _propTypes.default.func,
|
|
@@ -13,6 +13,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
|
|
|
13
13
|
index: number;
|
|
14
14
|
isoWeek?: boolean;
|
|
15
15
|
limitEndYear?: number;
|
|
16
|
+
limitStartYear?: number;
|
|
16
17
|
locale?: DatePickerLocale;
|
|
17
18
|
onChangeCalendarMonth?: (index: number, date: Date) => void;
|
|
18
19
|
onChangeCalendarTime?: (index: number, date: Date) => void;
|
|
@@ -32,13 +32,14 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
32
32
|
_props$index = props.index,
|
|
33
33
|
index = _props$index === void 0 ? 0 : _props$index,
|
|
34
34
|
limitEndYear = props.limitEndYear,
|
|
35
|
+
limitStartYear = props.limitStartYear,
|
|
35
36
|
onChangeCalendarMonth = props.onChangeCalendarMonth,
|
|
36
37
|
onChangeCalendarTime = props.onChangeCalendarTime,
|
|
37
38
|
onToggleMeridian = props.onToggleMeridian,
|
|
38
39
|
onSelect = props.onSelect,
|
|
39
40
|
_props$value = props.value,
|
|
40
41
|
value = _props$value === void 0 ? [] : _props$value,
|
|
41
|
-
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
|
|
42
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
|
|
42
43
|
var onMoveForward = (0, _react.useCallback)(function (nextPageDate) {
|
|
43
44
|
onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
|
|
44
45
|
}, [index, onChangeCalendarMonth]);
|
|
@@ -57,9 +58,6 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
57
58
|
var handleToggleMeridian = (0, _react.useCallback)(function (event) {
|
|
58
59
|
onToggleMeridian(index, event);
|
|
59
60
|
}, [index, onToggleMeridian]);
|
|
60
|
-
var inSameMonth = (0, _react.useCallback)(function (date) {
|
|
61
|
-
return (0, _dateUtils.isSameMonth)(date, calendarDate[index]);
|
|
62
|
-
}, [calendarDate, index]);
|
|
63
61
|
var getCalendarDate = (0, _react.useCallback)(function () {
|
|
64
62
|
return calendarDate[index];
|
|
65
63
|
}, [calendarDate, index]);
|
|
@@ -76,9 +74,9 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
76
74
|
format: format,
|
|
77
75
|
dateRange: value,
|
|
78
76
|
disabledDate: disabledMonth,
|
|
79
|
-
inSameMonth: inSameMonth,
|
|
80
77
|
index: index,
|
|
81
78
|
limitEndYear: limitEndYear,
|
|
79
|
+
limitStartYear: limitStartYear,
|
|
82
80
|
onChangeMonth: handleChangeMonth,
|
|
83
81
|
onChangeTime: handleChangeTime,
|
|
84
82
|
onMoveBackward: handleMoveBackward,
|
|
@@ -99,6 +97,7 @@ Calendar.propTypes = {
|
|
|
99
97
|
format: _propTypes.default.string,
|
|
100
98
|
isoWeek: _propTypes.default.bool,
|
|
101
99
|
limitEndYear: _propTypes.default.number,
|
|
100
|
+
limitStartYear: _propTypes.default.number,
|
|
102
101
|
classPrefix: _propTypes.default.string,
|
|
103
102
|
disabledDate: _propTypes.default.func,
|
|
104
103
|
onSelect: _propTypes.default.func,
|
|
@@ -15,8 +15,10 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
|
|
|
15
15
|
oneTap?: boolean;
|
|
16
16
|
/** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
|
|
17
17
|
isoWeek?: boolean;
|
|
18
|
-
/** Set the
|
|
18
|
+
/** Set the upper limit of the available year relative to the current selection date */
|
|
19
19
|
limitEndYear?: number;
|
|
20
|
+
/** Set the lower limit of the available year relative to the current selection date */
|
|
21
|
+
limitStartYear?: number;
|
|
20
22
|
/** Whether to show week numbers */
|
|
21
23
|
showWeekNumbers?: boolean;
|
|
22
24
|
/** Show only one calendar select */
|
|
@@ -77,6 +77,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
77
77
|
isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
|
|
78
78
|
_props$limitEndYear = props.limitEndYear,
|
|
79
79
|
limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
|
|
80
|
+
limitStartYear = props.limitStartYear,
|
|
80
81
|
overrideLocale = props.locale,
|
|
81
82
|
menuClassName = props.menuClassName,
|
|
82
83
|
menuStyle = props.menuStyle,
|
|
@@ -105,7 +106,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
105
106
|
onOpen = props.onOpen,
|
|
106
107
|
onSelect = props.onSelect,
|
|
107
108
|
renderTitle = props.renderTitle,
|
|
108
|
-
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
|
|
109
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
|
|
109
110
|
|
|
110
111
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
111
112
|
merge = _useClassNames.merge,
|
|
@@ -649,6 +650,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
649
650
|
hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
|
|
650
651
|
isoWeek: isoWeek,
|
|
651
652
|
limitEndYear: limitEndYear,
|
|
653
|
+
limitStartYear: limitStartYear,
|
|
652
654
|
locale: locale,
|
|
653
655
|
showWeekNumbers: showWeekNumbers,
|
|
654
656
|
value: selectedDates,
|
|
@@ -776,6 +778,7 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
|
|
|
776
778
|
isoWeek: _propTypes.default.bool,
|
|
777
779
|
oneTap: _propTypes.default.bool,
|
|
778
780
|
limitEndYear: _propTypes.default.number,
|
|
781
|
+
limitStartYear: _propTypes.default.number,
|
|
779
782
|
onChange: _propTypes.default.func,
|
|
780
783
|
onOk: _propTypes.default.func,
|
|
781
784
|
disabledDate: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),
|
|
@@ -10,11 +10,11 @@ export interface DropdownMenuProps extends WithAsProps {
|
|
|
10
10
|
menuWidth?: number;
|
|
11
11
|
menuHeight?: number | string;
|
|
12
12
|
cascade?: boolean;
|
|
13
|
-
cascadeData: ItemDataType[][];
|
|
13
|
+
cascadeData: (readonly ItemDataType[])[];
|
|
14
14
|
cascadePaths?: ItemDataType[];
|
|
15
15
|
uncheckableItemValues: ValueType;
|
|
16
16
|
renderMenuItem?: (itemLabel: React.MouseEventHandler, item: ItemDataType) => React.ReactNode;
|
|
17
|
-
renderMenu?: (children: ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
|
|
17
|
+
renderMenu?: (children: readonly ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
|
|
18
18
|
onCheck?: (node: ItemDataType, event: React.SyntheticEvent, checked: boolean) => void;
|
|
19
19
|
onSelect?: (node: ItemDataType, cascadePaths: ItemDataType[], event: React.SyntheticEvent) => void;
|
|
20
20
|
}
|
|
@@ -18,7 +18,7 @@ export interface MultiCascaderProps<T = ValueType> extends FormControlPickerProp
|
|
|
18
18
|
/** The menu is displayed directly when the component is initialized */
|
|
19
19
|
inline?: boolean;
|
|
20
20
|
/** Custom render menu */
|
|
21
|
-
renderMenu?: (items: ItemDataType[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
|
|
21
|
+
renderMenu?: (items: readonly ItemDataType[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
|
|
22
22
|
/** Custom render menu items */
|
|
23
23
|
renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
|
|
24
24
|
/** Custom render selected items */
|
|
@@ -167,17 +167,22 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
167
167
|
return overlayRef.current;
|
|
168
168
|
},
|
|
169
169
|
callback: (0, _react.useCallback)(function (value) {
|
|
170
|
-
var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data,
|
|
171
|
-
valueKey
|
|
172
|
-
|
|
173
|
-
|
|
170
|
+
var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {
|
|
171
|
+
return item[valueKey] === value;
|
|
172
|
+
}), {
|
|
173
|
+
getParent: function getParent() {
|
|
174
|
+
return undefined;
|
|
175
|
+
},
|
|
176
|
+
getChildren: function getChildren(item) {
|
|
177
|
+
return item[childrenKey];
|
|
178
|
+
}
|
|
174
179
|
}),
|
|
175
180
|
columns = _getColumnsAndPaths.columns,
|
|
176
|
-
|
|
181
|
+
path = _getColumnsAndPaths.path;
|
|
177
182
|
|
|
178
183
|
setColumnData(columns);
|
|
179
|
-
setSelectedPaths(
|
|
180
|
-
}, [childrenKey, data, setColumnData, valueKey])
|
|
184
|
+
setSelectedPaths(path);
|
|
185
|
+
}, [childrenKey, data, flattenData, setColumnData, valueKey])
|
|
181
186
|
}),
|
|
182
187
|
focusItemValue = _useFocusItemValue.focusItemValue,
|
|
183
188
|
setLayer = _useFocusItemValue.setLayer,
|
|
@@ -49,10 +49,10 @@ export declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
|
|
|
49
49
|
* @param flattenData
|
|
50
50
|
*/
|
|
51
51
|
export declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
|
|
52
|
-
columnData: T[][];
|
|
52
|
+
columnData: (readonly T[])[];
|
|
53
53
|
addColumn: (column: T[], index: number) => void;
|
|
54
54
|
removeColumnByIndex: (index: number) => void;
|
|
55
|
-
setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
|
|
55
|
+
setColumnData: import("react").Dispatch<import("react").SetStateAction<(readonly T[])[]>>;
|
|
56
56
|
enforceUpdateColumnData: (nextData: T[]) => void;
|
|
57
57
|
};
|
|
58
58
|
/**
|
|
@@ -192,7 +192,7 @@ exports.removeAllChildrenValue = removeAllChildrenValue;
|
|
|
192
192
|
function useFlattenData(data, itemKeys) {
|
|
193
193
|
var childrenKey = itemKeys.childrenKey;
|
|
194
194
|
|
|
195
|
-
var _useState = (0, _react.useState)((0, _treeUtils.
|
|
195
|
+
var _useState = (0, _react.useState)((0, _treeUtils.UNSAFE_flattenTree)(data, itemKeys.childrenKey)),
|
|
196
196
|
flattenData = _useState[0],
|
|
197
197
|
setFlattenData = _useState[1];
|
|
198
198
|
|
|
@@ -204,7 +204,7 @@ function useFlattenData(data, itemKeys) {
|
|
|
204
204
|
setFlattenData([].concat(flattenData, nodes));
|
|
205
205
|
}, [childrenKey, flattenData]);
|
|
206
206
|
(0, _react.useEffect)(function () {
|
|
207
|
-
setFlattenData((0, _treeUtils.
|
|
207
|
+
setFlattenData((0, _treeUtils.UNSAFE_flattenTree)(data, itemKeys.childrenKey));
|
|
208
208
|
}, [data, itemKeys.childrenKey]);
|
|
209
209
|
return {
|
|
210
210
|
addFlattenData: addFlattenData,
|
|
@@ -245,7 +245,7 @@ function useColumnData(flattenData) {
|
|
|
245
245
|
}
|
|
246
246
|
|
|
247
247
|
function enforceUpdateColumnData(nextData) {
|
|
248
|
-
var nextFlattenData = (0, _treeUtils.
|
|
248
|
+
var nextFlattenData = (0, _treeUtils.UNSAFE_flattenTree)(nextData);
|
|
249
249
|
setColumnData([nextFlattenData.filter(function (item) {
|
|
250
250
|
return !item.parent;
|
|
251
251
|
})]);
|
package/cjs/Picker/utils.d.ts
CHANGED
|
@@ -42,21 +42,22 @@ export interface EventsProps {
|
|
|
42
42
|
* @param events Event callback functions
|
|
43
43
|
*/
|
|
44
44
|
export declare function onMenuKeyDown(event: React.KeyboardEvent, events: EventsProps): void;
|
|
45
|
-
export interface FocusItemValueProps {
|
|
45
|
+
export interface FocusItemValueProps<T = unknown> {
|
|
46
46
|
target: HTMLElement | null | (() => HTMLElement | null);
|
|
47
|
-
data?:
|
|
47
|
+
data?: T[];
|
|
48
48
|
valueKey?: string;
|
|
49
49
|
focusableQueryKey?: string;
|
|
50
50
|
defaultLayer?: number;
|
|
51
51
|
rtl?: boolean;
|
|
52
52
|
callback?: (value: any, event: React.KeyboardEvent) => void;
|
|
53
|
+
getParent?: (node: T) => T | undefined;
|
|
53
54
|
}
|
|
54
55
|
/**
|
|
55
56
|
* A hook that manages the focus state of the option.
|
|
56
57
|
* @param defaultFocusItemValue
|
|
57
58
|
* @param props
|
|
58
59
|
*/
|
|
59
|
-
export declare const useFocusItemValue: <T>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps) => {
|
|
60
|
+
export declare const useFocusItemValue: <T, D>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps<D>) => {
|
|
60
61
|
focusItemValue: T | null | undefined;
|
|
61
62
|
setFocusItemValue: React.Dispatch<React.SetStateAction<T | null | undefined>>;
|
|
62
63
|
layer: number;
|