rsuite 5.8.0 → 5.8.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 +7 -0
- package/cjs/Cascader/Cascader.d.ts +10 -3
- package/cjs/Cascader/Cascader.js +7 -7
- package/cjs/Cascader/test/Cascader.test.d.ts +1 -0
- package/cjs/Cascader/test/Cascader.test.js +70 -0
- package/cjs/InputNumber/InputNumber.js +27 -34
- package/cjs/Menu/MenuItem.js +1 -0
- package/dist/rsuite.js +3 -3
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.map +1 -1
- package/esm/Cascader/Cascader.d.ts +10 -3
- package/esm/Cascader/Cascader.js +7 -7
- package/esm/Cascader/test/Cascader.test.d.ts +1 -0
- package/esm/Cascader/test/Cascader.test.js +59 -0
- package/esm/InputNumber/InputNumber.js +28 -35
- package/esm/Menu/MenuItem.js +1 -0
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PickerLocale } from '../locales';
|
|
3
|
-
import {
|
|
3
|
+
import { PickerInstance } from '../Picker';
|
|
4
4
|
import { ItemDataType, FormControlPickerProps } from '../@types/common';
|
|
5
5
|
export declare type ValueType = number | string;
|
|
6
|
-
export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType
|
|
6
|
+
export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType<T>> {
|
|
7
7
|
/** Sets the width of the menu */
|
|
8
8
|
menuWidth?: number;
|
|
9
9
|
/** Sets the height of the menu */
|
|
@@ -31,5 +31,12 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T |
|
|
|
31
31
|
/** Asynchronously load the children of the tree node. */
|
|
32
32
|
getChildren?: (node: ItemDataType) => ItemDataType[] | Promise<ItemDataType[]>;
|
|
33
33
|
}
|
|
34
|
-
|
|
34
|
+
export interface CascaderComponent {
|
|
35
|
+
<T>(props: CascaderProps<T> & {
|
|
36
|
+
ref?: React.Ref<PickerInstance>;
|
|
37
|
+
}): JSX.Element | null;
|
|
38
|
+
displayName?: string;
|
|
39
|
+
propTypes?: React.WeakValidationMap<CascaderProps<any>>;
|
|
40
|
+
}
|
|
41
|
+
declare const Cascader: CascaderComponent;
|
|
35
42
|
export default Cascader;
|
package/esm/Cascader/Cascader.js
CHANGED
|
@@ -80,9 +80,9 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
80
80
|
var targetRef = useRef(null);
|
|
81
81
|
var searchInputRef = useRef(null);
|
|
82
82
|
|
|
83
|
-
var
|
|
84
|
-
value =
|
|
85
|
-
setValue =
|
|
83
|
+
var _ref = useControlled(valueProp, defaultValue),
|
|
84
|
+
value = _ref[0],
|
|
85
|
+
setValue = _ref[1];
|
|
86
86
|
|
|
87
87
|
var _usePaths = usePaths({
|
|
88
88
|
data: data,
|
|
@@ -392,10 +392,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
392
392
|
};
|
|
393
393
|
|
|
394
394
|
var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
|
|
395
|
-
var
|
|
396
|
-
left =
|
|
397
|
-
top =
|
|
398
|
-
className =
|
|
395
|
+
var _ref2 = positionProps || {},
|
|
396
|
+
left = _ref2.left,
|
|
397
|
+
top = _ref2.top,
|
|
398
|
+
className = _ref2.className;
|
|
399
399
|
|
|
400
400
|
var styles = _extends({}, menuStyle, {
|
|
401
401
|
left: left,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { expectType } from 'ts-expect';
|
|
3
|
+
import Cascader from '../Cascader'; // Infer value and onChange types from data
|
|
4
|
+
|
|
5
|
+
var numberValuedData = [{
|
|
6
|
+
label: 'One',
|
|
7
|
+
value: 1
|
|
8
|
+
}];
|
|
9
|
+
|
|
10
|
+
/*#__PURE__*/
|
|
11
|
+
React.createElement(Cascader, {
|
|
12
|
+
data: numberValuedData,
|
|
13
|
+
value: 1
|
|
14
|
+
}); // @ts-expect-error should not accept string value
|
|
15
|
+
|
|
16
|
+
/*#__PURE__*/
|
|
17
|
+
React.createElement(Cascader, {
|
|
18
|
+
data: numberValuedData,
|
|
19
|
+
value: "1"
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
/*#__PURE__*/
|
|
23
|
+
React.createElement(Cascader, {
|
|
24
|
+
data: numberValuedData,
|
|
25
|
+
onChange: function onChange(newValue) {
|
|
26
|
+
expectType(newValue);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
var stringValuedData = [{
|
|
30
|
+
label: 'One',
|
|
31
|
+
value: 'One'
|
|
32
|
+
}];
|
|
33
|
+
|
|
34
|
+
/*#__PURE__*/
|
|
35
|
+
React.createElement(Cascader, {
|
|
36
|
+
data: stringValuedData,
|
|
37
|
+
value: "1"
|
|
38
|
+
}); // @ts-expect-error should not accept number value
|
|
39
|
+
|
|
40
|
+
/*#__PURE__*/
|
|
41
|
+
React.createElement(Cascader, {
|
|
42
|
+
data: stringValuedData,
|
|
43
|
+
value: 1
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
/*#__PURE__*/
|
|
47
|
+
React.createElement(Cascader, {
|
|
48
|
+
data: stringValuedData,
|
|
49
|
+
onChange: function onChange(newValue) {
|
|
50
|
+
expectType(newValue);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
var pickerRef = /*#__PURE__*/React.createRef();
|
|
54
|
+
|
|
55
|
+
/*#__PURE__*/
|
|
56
|
+
React.createElement(Cascader, {
|
|
57
|
+
ref: pickerRef,
|
|
58
|
+
data: []
|
|
59
|
+
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
import React, {
|
|
3
|
+
import React, { useCallback, useEffect, useRef } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import isNil from 'lodash/isNil';
|
|
6
6
|
import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
|
|
@@ -53,7 +53,7 @@ function decimals() {
|
|
|
53
53
|
*/
|
|
54
54
|
|
|
55
55
|
|
|
56
|
-
function
|
|
56
|
+
function valueReachesMax(value, max) {
|
|
57
57
|
if (!isNil(value)) {
|
|
58
58
|
return +value >= max;
|
|
59
59
|
}
|
|
@@ -67,7 +67,7 @@ function disableMaxValue(value, max) {
|
|
|
67
67
|
*/
|
|
68
68
|
|
|
69
69
|
|
|
70
|
-
function
|
|
70
|
+
function valueReachesMin(value, min) {
|
|
71
71
|
if (!isNil(value)) {
|
|
72
72
|
return +value <= min;
|
|
73
73
|
}
|
|
@@ -108,18 +108,6 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
108
108
|
value = _useControlled[0],
|
|
109
109
|
setValue = _useControlled[1];
|
|
110
110
|
|
|
111
|
-
var _useState = useState(function () {
|
|
112
|
-
return disableMaxValue(value, max);
|
|
113
|
-
}),
|
|
114
|
-
disabledUpButton = _useState[0],
|
|
115
|
-
setDisabledUpButton = _useState[1];
|
|
116
|
-
|
|
117
|
-
var _useState2 = useState(function () {
|
|
118
|
-
return disableMinValue(value, min);
|
|
119
|
-
}),
|
|
120
|
-
disabledDownButton = _useState2[0],
|
|
121
|
-
setDisabledDownButton = _useState2[1];
|
|
122
|
-
|
|
123
111
|
var _useClassNames = useClassNames(classPrefix),
|
|
124
112
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
125
113
|
merge = _useClassNames.merge,
|
|
@@ -134,14 +122,10 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
134
122
|
var inputRef = useRef();
|
|
135
123
|
var handleChangeValue = useCallback(function (currentValue, event) {
|
|
136
124
|
if (currentValue !== value) {
|
|
137
|
-
// Disable the up button when the value is greater than the maximum value.
|
|
138
|
-
setDisabledUpButton(disableMaxValue(currentValue, max)); // Disable the down button when the value is greater than the minimum value.
|
|
139
|
-
|
|
140
|
-
setDisabledDownButton(disableMinValue(currentValue, min));
|
|
141
125
|
setValue(currentValue);
|
|
142
126
|
onChange === null || onChange === void 0 ? void 0 : onChange(currentValue, event);
|
|
143
127
|
}
|
|
144
|
-
}, [
|
|
128
|
+
}, [onChange, setValue, value]);
|
|
145
129
|
var getSafeValue = useCallback(function (value) {
|
|
146
130
|
if (!Number.isNaN(value)) {
|
|
147
131
|
if (+value > max) {
|
|
@@ -156,27 +140,34 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
156
140
|
}
|
|
157
141
|
|
|
158
142
|
return value.toString();
|
|
159
|
-
}, [max, min]);
|
|
160
|
-
|
|
143
|
+
}, [max, min]); // Increment value by step
|
|
144
|
+
|
|
145
|
+
var handleStepUp = useCallback(function (event) {
|
|
161
146
|
var val = +(value || 0);
|
|
162
147
|
var bit = decimals(val, step);
|
|
163
148
|
handleChangeValue(getSafeValue((val + step).toFixed(bit)), event);
|
|
164
|
-
}, [getSafeValue, handleChangeValue, step, value]);
|
|
165
|
-
|
|
149
|
+
}, [getSafeValue, handleChangeValue, step, value]); // Decrement value by step
|
|
150
|
+
|
|
151
|
+
var handleStepDown = useCallback(function (event) {
|
|
166
152
|
var val = +(value || 0);
|
|
167
153
|
var bit = decimals(val, step);
|
|
168
154
|
handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
|
|
169
|
-
}, [getSafeValue, handleChangeValue, step, value]);
|
|
155
|
+
}, [getSafeValue, handleChangeValue, step, value]); // Disables step up/down button when
|
|
156
|
+
// - InputNumber is disabled/readonly
|
|
157
|
+
// - value reaches max/min limits
|
|
158
|
+
|
|
159
|
+
var stepUpDisabled = disabled || readOnly || valueReachesMax(value, max);
|
|
160
|
+
var stepDownDisabled = disabled || readOnly || valueReachesMin(value, min);
|
|
170
161
|
var handleKeyDown = useCallback(function (event) {
|
|
171
162
|
switch (event.key) {
|
|
172
163
|
case KEY_VALUES.UP:
|
|
173
164
|
event.preventDefault();
|
|
174
|
-
|
|
165
|
+
handleStepUp(event);
|
|
175
166
|
break;
|
|
176
167
|
|
|
177
168
|
case KEY_VALUES.DOWN:
|
|
178
169
|
event.preventDefault();
|
|
179
|
-
|
|
170
|
+
handleStepDown(event);
|
|
180
171
|
break;
|
|
181
172
|
|
|
182
173
|
case KEY_VALUES.HOME:
|
|
@@ -195,23 +186,23 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
195
186
|
|
|
196
187
|
break;
|
|
197
188
|
}
|
|
198
|
-
}, [
|
|
189
|
+
}, [handleStepUp, handleStepDown, minProp, maxProp, handleChangeValue, getSafeValue]);
|
|
199
190
|
var handleWheel = useCallback(function (event) {
|
|
200
191
|
if (!disabled && !readOnly && event.target === document.activeElement) {
|
|
201
192
|
event.preventDefault();
|
|
202
193
|
var delta = event['wheelDelta'] || -event.deltaY || -(event === null || event === void 0 ? void 0 : event.detail);
|
|
203
194
|
|
|
204
195
|
if (delta > 0) {
|
|
205
|
-
|
|
196
|
+
handleStepDown(event);
|
|
206
197
|
}
|
|
207
198
|
|
|
208
199
|
if (delta < 0) {
|
|
209
|
-
|
|
200
|
+
handleStepUp(event);
|
|
210
201
|
}
|
|
211
202
|
}
|
|
212
203
|
|
|
213
204
|
onWheel === null || onWheel === void 0 ? void 0 : onWheel(event);
|
|
214
|
-
}, [disabled,
|
|
205
|
+
}, [disabled, handleStepDown, handleStepUp, onWheel, readOnly]);
|
|
215
206
|
var handleChange = useCallback(function (value, event) {
|
|
216
207
|
if (!/^-?(?:\d+)?(\.)?\d*$/.test(value) && value !== '') {
|
|
217
208
|
return;
|
|
@@ -270,14 +261,16 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
270
261
|
tabIndex: -1,
|
|
271
262
|
appearance: buttonAppearance,
|
|
272
263
|
className: prefix('touchspin-up'),
|
|
273
|
-
onClick:
|
|
274
|
-
disabled:
|
|
264
|
+
onClick: handleStepUp,
|
|
265
|
+
disabled: stepUpDisabled,
|
|
266
|
+
"aria-label": "Increment"
|
|
275
267
|
}, /*#__PURE__*/React.createElement(AngleUpIcon, null)), /*#__PURE__*/React.createElement(Button, {
|
|
276
268
|
tabIndex: -1,
|
|
277
269
|
appearance: buttonAppearance,
|
|
278
270
|
className: prefix('touchspin-down'),
|
|
279
|
-
onClick:
|
|
280
|
-
disabled:
|
|
271
|
+
onClick: handleStepDown,
|
|
272
|
+
disabled: stepDownDisabled,
|
|
273
|
+
"aria-label": "Decrement"
|
|
281
274
|
}, /*#__PURE__*/React.createElement(AngleDownIcon, null))), postfix && /*#__PURE__*/React.createElement(InputGroupAddon, null, postfix));
|
|
282
275
|
});
|
|
283
276
|
InputNumber.displayName = 'InputNumber';
|
package/esm/Menu/MenuItem.js
CHANGED
|
@@ -99,6 +99,7 @@ function MenuItem(props) {
|
|
|
99
99
|
if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menubar') {
|
|
100
100
|
menuitemProps.onMouseDown = handleMouseDown;
|
|
101
101
|
menuitemProps.onMouseOver = handleMouseMove;
|
|
102
|
+
menuitemProps.onMouseLeave = handleMouseLeave;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
105
|
return children(menuitemProps, menuitemRef);
|