rsuite 5.24.0 → 5.25.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/Breadcrumb/styles/index.less +4 -0
- package/Button/styles/index.less +14 -10
- package/CHANGELOG.md +31 -0
- package/Calendar/styles/index.less +15 -16
- package/DatePicker/styles/index.less +9 -0
- package/DatePicker/styles/mixin.less +8 -0
- package/Picker/styles/index.less +5 -9
- package/Picker/styles/mixin.less +4 -40
- package/TreePicker/styles/index.less +13 -0
- package/cjs/@types/global.d.ts +6 -0
- package/cjs/Breadcrumb/BreadcrumbItem.js +1 -1
- package/cjs/Calendar/MonthDropdown.js +2 -4
- package/cjs/Calendar/TableHeaderRow.js +3 -3
- package/cjs/Cascader/Cascader.js +2 -2
- package/cjs/Cascader/utils.d.ts +1 -1
- package/cjs/Cascader/utils.js +2 -2
- package/cjs/Content/Content.d.ts +1 -1
- package/cjs/CustomProvider/CustomProvider.d.ts +2 -0
- package/cjs/CustomProvider/CustomProvider.js +5 -3
- package/cjs/Footer/Footer.d.ts +1 -1
- package/cjs/Header/Header.d.ts +1 -1
- package/cjs/MultiCascader/MultiCascader.js +4 -4
- package/cjs/MultiCascader/utils.d.ts +1 -1
- package/cjs/MultiCascader/utils.js +2 -2
- package/cjs/Navbar/NavbarBrand.d.ts +1 -1
- package/cjs/Overlay/OverlayTrigger.js +4 -0
- package/cjs/Picker/PickerToggle.js +1 -1
- package/cjs/Picker/PickerToggleTrigger.js +6 -7
- package/cjs/Ripple/Ripple.js +8 -0
- package/cjs/TreePicker/TreeNode.d.ts +3 -3
- package/cjs/TreePicker/TreeNode.js +1 -11
- package/cjs/TreePicker/TreePicker.js +8 -1
- package/cjs/utils/createComponent.d.ts +3 -3
- package/cjs/utils/treeUtils.d.ts +12 -0
- package/cjs/utils/treeUtils.js +42 -0
- package/cjs/utils/useCustom.js +3 -1
- package/dist/rsuite-rtl.css +299 -263
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +299 -263
- package/dist/rsuite.js +19 -19
- 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/@types/global.d.ts +6 -0
- package/esm/Breadcrumb/BreadcrumbItem.js +1 -1
- package/esm/Calendar/MonthDropdown.js +2 -4
- package/esm/Calendar/TableHeaderRow.js +3 -3
- package/esm/Cascader/Cascader.js +2 -2
- package/esm/Cascader/utils.d.ts +1 -1
- package/esm/Cascader/utils.js +2 -2
- package/esm/Content/Content.d.ts +1 -1
- package/esm/CustomProvider/CustomProvider.d.ts +2 -0
- package/esm/CustomProvider/CustomProvider.js +5 -3
- package/esm/Footer/Footer.d.ts +1 -1
- package/esm/Header/Header.d.ts +1 -1
- package/esm/MultiCascader/MultiCascader.js +4 -4
- package/esm/MultiCascader/utils.d.ts +1 -1
- package/esm/MultiCascader/utils.js +2 -2
- package/esm/Navbar/NavbarBrand.d.ts +1 -1
- package/esm/Overlay/OverlayTrigger.js +4 -0
- package/esm/Picker/PickerToggle.js +1 -1
- package/esm/Picker/PickerToggleTrigger.js +7 -5
- package/esm/Ripple/Ripple.js +9 -1
- package/esm/TreePicker/TreeNode.d.ts +3 -3
- package/esm/TreePicker/TreeNode.js +2 -11
- package/esm/TreePicker/TreePicker.js +9 -2
- package/esm/utils/createComponent.d.ts +3 -3
- package/esm/utils/treeUtils.d.ts +12 -0
- package/esm/utils/treeUtils.js +36 -0
- package/esm/utils/useCustom.js +3 -1
- package/package.json +2 -2
- package/styles/color-modes/dark.less +6 -2
- package/styles/color-modes/high-contrast.less +4 -0
- package/styles/color-modes/light.less +5 -1
- package/styles/variables.less +7 -8
package/esm/@types/global.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import SafeAnchor from '../SafeAnchor';
|
|
|
6
6
|
import { useClassNames } from '../utils';
|
|
7
7
|
var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
8
8
|
var _props$as = props.as,
|
|
9
|
-
Component = _props$as === void 0 ? SafeAnchor : _props$as,
|
|
9
|
+
Component = _props$as === void 0 ? props.href ? SafeAnchor : 'span' : _props$as,
|
|
10
10
|
href = props.href,
|
|
11
11
|
_props$classPrefix = props.classPrefix,
|
|
12
12
|
classPrefix = _props$classPrefix === void 0 ? 'breadcrumb-item' : _props$classPrefix,
|
|
@@ -57,8 +57,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
57
57
|
|
|
58
58
|
return false;
|
|
59
59
|
}, [disabledMonth]);
|
|
60
|
-
|
|
61
|
-
var rowRenderer = function rowRenderer(_ref) {
|
|
60
|
+
var rowRenderer = useCallback(function (_ref) {
|
|
62
61
|
var index = _ref.index,
|
|
63
62
|
style = _ref.style;
|
|
64
63
|
var selectedMonth = DateUtils.getMonth(date);
|
|
@@ -91,8 +90,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
91
90
|
year: year
|
|
92
91
|
});
|
|
93
92
|
})));
|
|
94
|
-
};
|
|
95
|
-
|
|
93
|
+
}, [date, isMonthDisabled, merge, prefix, rowCount, startYear]);
|
|
96
94
|
var classes = merge(className, withClassPrefix(), {
|
|
97
95
|
show: show
|
|
98
96
|
});
|
|
@@ -38,15 +38,15 @@ var TableHeaderRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
38
38
|
ref: ref,
|
|
39
39
|
className: classes
|
|
40
40
|
}), showWeekNumbers && /*#__PURE__*/React.createElement("div", {
|
|
41
|
-
className: prefix('cell'),
|
|
41
|
+
className: prefix('header-cell'),
|
|
42
42
|
role: "columnheader"
|
|
43
43
|
}), items.map(function (key) {
|
|
44
44
|
return /*#__PURE__*/React.createElement("div", {
|
|
45
45
|
key: key,
|
|
46
|
-
className: prefix('cell'),
|
|
46
|
+
className: prefix('header-cell'),
|
|
47
47
|
role: "columnheader"
|
|
48
48
|
}, /*#__PURE__*/React.createElement("span", {
|
|
49
|
-
className: prefix('cell-content')
|
|
49
|
+
className: prefix('header-cell-content')
|
|
50
50
|
}, locale === null || locale === void 0 ? void 0 : locale[key]));
|
|
51
51
|
}));
|
|
52
52
|
});
|
package/esm/Cascader/Cascader.js
CHANGED
|
@@ -94,7 +94,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
94
94
|
valueToPaths = _usePaths.valueToPaths,
|
|
95
95
|
columnData = _usePaths.columnData,
|
|
96
96
|
addColumn = _usePaths.addColumn,
|
|
97
|
-
|
|
97
|
+
removeColumnByIndex = _usePaths.removeColumnByIndex,
|
|
98
98
|
setValueToPaths = _usePaths.setValueToPaths,
|
|
99
99
|
setColumnData = _usePaths.setColumnData,
|
|
100
100
|
setSelectedPaths = _usePaths.setSelectedPaths,
|
|
@@ -285,7 +285,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
285
285
|
addColumn(node[childrenKey], columnIndex);
|
|
286
286
|
} else {
|
|
287
287
|
// Removes subsequent columns of the current column when the clicked node is a leaf node.
|
|
288
|
-
|
|
288
|
+
removeColumnByIndex(columnIndex);
|
|
289
289
|
}
|
|
290
290
|
|
|
291
291
|
if (isLeafNode) {
|
package/esm/Cascader/utils.d.ts
CHANGED
|
@@ -18,6 +18,6 @@ export declare function usePaths<T extends Record<string, unknown>>(params: UseP
|
|
|
18
18
|
setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
|
|
19
19
|
setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
|
|
20
20
|
addColumn: (column: T[], index: number) => void;
|
|
21
|
-
|
|
21
|
+
removeColumnByIndex: (index: number) => void;
|
|
22
22
|
};
|
|
23
23
|
export {};
|
package/esm/Cascader/utils.js
CHANGED
|
@@ -117,7 +117,7 @@ export function usePaths(params) {
|
|
|
117
117
|
*/
|
|
118
118
|
|
|
119
119
|
|
|
120
|
-
function
|
|
120
|
+
function removeColumnByIndex(index) {
|
|
121
121
|
setColumnData([].concat(slice(columnData, 0, index)));
|
|
122
122
|
}
|
|
123
123
|
/**
|
|
@@ -156,6 +156,6 @@ export function usePaths(params) {
|
|
|
156
156
|
setColumnData: setColumnData,
|
|
157
157
|
setSelectedPaths: setSelectedPaths,
|
|
158
158
|
addColumn: addColumn,
|
|
159
|
-
|
|
159
|
+
removeColumnByIndex: removeColumnByIndex
|
|
160
160
|
};
|
|
161
161
|
}
|
package/esm/Content/Content.d.ts
CHANGED
|
@@ -4,5 +4,5 @@ export declare type ContentProps = ComponentProps;
|
|
|
4
4
|
* For Internet Explorer 11 and lower, it's suggested that an ARIA role of "main"
|
|
5
5
|
* be added to the <main> element to ensure it is accessible
|
|
6
6
|
*/
|
|
7
|
-
declare const Content: import("../@types/common").RsRefForwardingComponent<"
|
|
7
|
+
declare const Content: import("../@types/common").RsRefForwardingComponent<"main", ComponentProps>;
|
|
8
8
|
export default Content;
|
|
@@ -38,6 +38,8 @@ export interface CustomValue<T = Locale> {
|
|
|
38
38
|
* A Map of toast containers
|
|
39
39
|
*/
|
|
40
40
|
toasters?: React.MutableRefObject<Map<string, ToastContainerInstance>>;
|
|
41
|
+
/** If true, the ripple effect is disabled. Affected components include: Button, Nav.Item, Pagination. */
|
|
42
|
+
disableRipple?: boolean;
|
|
41
43
|
}
|
|
42
44
|
export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
|
|
43
45
|
/** Supported themes */
|
|
@@ -14,7 +14,8 @@ var CustomProvider = function CustomProvider(props) {
|
|
|
14
14
|
classPrefix = _props$classPrefix === void 0 ? getClassNamePrefix() : _props$classPrefix,
|
|
15
15
|
theme = props.theme,
|
|
16
16
|
container = props.toastContainer,
|
|
17
|
-
|
|
17
|
+
disableRipple = props.disableRipple,
|
|
18
|
+
rest = _objectWithoutPropertiesLoose(props, ["children", "classPrefix", "theme", "toastContainer", "disableRipple"]);
|
|
18
19
|
|
|
19
20
|
var toasters = React.useRef(new Map());
|
|
20
21
|
|
|
@@ -28,9 +29,10 @@ var CustomProvider = function CustomProvider(props) {
|
|
|
28
29
|
return _extends({
|
|
29
30
|
classPrefix: classPrefix,
|
|
30
31
|
theme: theme,
|
|
31
|
-
toasters: toasters
|
|
32
|
+
toasters: toasters,
|
|
33
|
+
disableRipple: disableRipple
|
|
32
34
|
}, rest);
|
|
33
|
-
}, [classPrefix, theme, rest]);
|
|
35
|
+
}, [classPrefix, theme, disableRipple, rest]);
|
|
34
36
|
useEffect(function () {
|
|
35
37
|
if (canUseDOM && theme) {
|
|
36
38
|
addClass(document.body, prefix(classPrefix, "theme-" + theme)); // Remove the className that will cause style conflicts
|
package/esm/Footer/Footer.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ComponentProps } from '../utils/createComponent';
|
|
2
2
|
export declare type FooterProps = ComponentProps;
|
|
3
|
-
declare const Footer: import("../@types/common").RsRefForwardingComponent<"
|
|
3
|
+
declare const Footer: import("../@types/common").RsRefForwardingComponent<"footer", ComponentProps>;
|
|
4
4
|
export default Footer;
|
package/esm/Header/Header.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ComponentProps } from '../utils/createComponent';
|
|
2
2
|
export declare type HeaderProps = ComponentProps;
|
|
3
|
-
declare const Header: import("../@types/common").RsRefForwardingComponent<"
|
|
3
|
+
declare const Header: import("../@types/common").RsRefForwardingComponent<"header", ComponentProps>;
|
|
4
4
|
export default Header;
|
|
@@ -103,7 +103,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
103
103
|
columnData = _useColumnData.columnData,
|
|
104
104
|
setColumnData = _useColumnData.setColumnData,
|
|
105
105
|
addColumn = _useColumnData.addColumn,
|
|
106
|
-
|
|
106
|
+
removeColumnByIndex = _useColumnData.removeColumnByIndex,
|
|
107
107
|
enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;
|
|
108
108
|
|
|
109
109
|
useUpdateEffect(function () {
|
|
@@ -199,7 +199,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
199
199
|
node.loading = false;
|
|
200
200
|
node[childrenKey] = data;
|
|
201
201
|
|
|
202
|
-
if (targetRef.current) {
|
|
202
|
+
if (targetRef.current || inline) {
|
|
203
203
|
addFlattenData(data, node);
|
|
204
204
|
addColumn(data, columnIndex);
|
|
205
205
|
}
|
|
@@ -214,11 +214,11 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
214
214
|
addColumn(node[childrenKey], columnIndex);
|
|
215
215
|
} else {
|
|
216
216
|
// Removes subsequent columns of the current column when the clicked node is a leaf node.
|
|
217
|
-
|
|
217
|
+
removeColumnByIndex(columnIndex);
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
(_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);
|
|
221
|
-
}, [onSelect, getChildren, childrenKey, addFlattenData, addColumn,
|
|
221
|
+
}, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);
|
|
222
222
|
var handleCheck = useCallback(function (node, event, checked) {
|
|
223
223
|
var nodeValue = node[valueKey];
|
|
224
224
|
var nextValue = [];
|
|
@@ -51,7 +51,7 @@ export declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
|
|
|
51
51
|
export declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
|
|
52
52
|
columnData: T[][];
|
|
53
53
|
addColumn: (column: T[], index: number) => void;
|
|
54
|
-
|
|
54
|
+
removeColumnByIndex: (index: number) => void;
|
|
55
55
|
setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
|
|
56
56
|
enforceUpdateColumnData: (nextData: T[]) => void;
|
|
57
57
|
};
|
|
@@ -209,7 +209,7 @@ export function useColumnData(flattenData) {
|
|
|
209
209
|
*/
|
|
210
210
|
|
|
211
211
|
|
|
212
|
-
function
|
|
212
|
+
function removeColumnByIndex(index) {
|
|
213
213
|
setColumnData([].concat(slice(columnData, 0, index)));
|
|
214
214
|
}
|
|
215
215
|
|
|
@@ -223,7 +223,7 @@ export function useColumnData(flattenData) {
|
|
|
223
223
|
return {
|
|
224
224
|
columnData: columnData,
|
|
225
225
|
addColumn: addColumn,
|
|
226
|
-
|
|
226
|
+
removeColumnByIndex: removeColumnByIndex,
|
|
227
227
|
setColumnData: setColumnData,
|
|
228
228
|
enforceUpdateColumnData: enforceUpdateColumnData
|
|
229
229
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ComponentProps } from '../utils/createComponent';
|
|
2
2
|
export declare type NavbarBrandProps = ComponentProps;
|
|
3
|
-
declare const NavbarBrand: import("../@types/common").RsRefForwardingComponent<"
|
|
3
|
+
declare const NavbarBrand: import("../@types/common").RsRefForwardingComponent<"a", ComponentProps>;
|
|
4
4
|
export default NavbarBrand;
|
|
@@ -372,6 +372,10 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
372
372
|
} : speaker);
|
|
373
373
|
};
|
|
374
374
|
|
|
375
|
+
if (typeof children === 'object' && children.type === React.Fragment || typeof children === 'string') {
|
|
376
|
+
console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');
|
|
377
|
+
}
|
|
378
|
+
|
|
375
379
|
return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/React.cloneElement(children, _extends({
|
|
376
380
|
ref: triggerRef,
|
|
377
381
|
'aria-describedby': controlId
|
|
@@ -224,7 +224,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
224
224
|
closeLabel: 'Clear'
|
|
225
225
|
},
|
|
226
226
|
onClick: handleClean
|
|
227
|
-
}), caret && /*#__PURE__*/React.createElement(Caret, {
|
|
227
|
+
}), caret && !showCleanButton && /*#__PURE__*/React.createElement(Caret, {
|
|
228
228
|
className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["caret"])))
|
|
229
229
|
})));
|
|
230
230
|
});
|
|
@@ -1,10 +1,9 @@
|
|
|
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 from 'react';
|
|
4
4
|
import pick from 'lodash/pick';
|
|
5
5
|
import OverlayTrigger from '../Overlay/OverlayTrigger';
|
|
6
|
-
import { placementPolyfill } from '../utils';
|
|
7
|
-
import { CustomContext } from '../CustomProvider';
|
|
6
|
+
import { placementPolyfill, useCustom } from '../utils';
|
|
8
7
|
export var omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'defaultOpen', 'onHide', 'container', 'containerPadding', 'preventOverflow'];
|
|
9
8
|
export var pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading']);
|
|
10
9
|
var PickerToggleTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -16,12 +15,15 @@ var PickerToggleTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
16
15
|
rest = _objectWithoutPropertiesLoose(props, ["pickerProps", "speaker", "placement", "trigger"]);
|
|
17
16
|
|
|
18
17
|
var pickerTriggerProps = pick(pickerProps, pickTriggerPropKeys);
|
|
19
|
-
|
|
18
|
+
|
|
19
|
+
var _useCustom = useCustom(),
|
|
20
|
+
rtl = _useCustom.rtl;
|
|
21
|
+
|
|
20
22
|
return /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, rest, pickerTriggerProps, {
|
|
21
23
|
disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
|
|
22
24
|
ref: ref,
|
|
23
25
|
trigger: trigger,
|
|
24
|
-
placement: placementPolyfill(placement,
|
|
26
|
+
placement: placementPolyfill(placement, rtl),
|
|
25
27
|
speaker: speaker
|
|
26
28
|
}));
|
|
27
29
|
});
|
package/esm/Ripple/Ripple.js
CHANGED
|
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import getOffset from 'dom-lib/getOffset';
|
|
6
6
|
import on from 'dom-lib/on';
|
|
7
7
|
import Transition from '../Animation/Transition';
|
|
8
|
-
import { mergeRefs, useClassNames } from '../utils';
|
|
8
|
+
import { mergeRefs, useClassNames, useCustom } from '../utils';
|
|
9
9
|
|
|
10
10
|
var getPosition = function getPosition(target, event) {
|
|
11
11
|
var offset = getOffset(target);
|
|
@@ -23,6 +23,9 @@ var getPosition = function getPosition(target, event) {
|
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
var Ripple = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
26
|
+
var _useCustom = useCustom(),
|
|
27
|
+
disableRipple = _useCustom.disableRipple;
|
|
28
|
+
|
|
26
29
|
var _props$as = props.as,
|
|
27
30
|
Component = _props$as === void 0 ? 'span' : _props$as,
|
|
28
31
|
className = props.className,
|
|
@@ -72,6 +75,11 @@ var Ripple = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
72
75
|
};
|
|
73
76
|
}
|
|
74
77
|
}, [handleMouseDown]);
|
|
78
|
+
|
|
79
|
+
if (disableRipple) {
|
|
80
|
+
return null;
|
|
81
|
+
}
|
|
82
|
+
|
|
75
83
|
return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
76
84
|
className: classes,
|
|
77
85
|
ref: mergeRefs(triggerRef, ref)
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
|
|
2
|
+
import { WithAsProps, RsRefForwardingComponent, ItemDataType } from '../@types/common';
|
|
3
3
|
export interface TreeNodeProps extends WithAsProps {
|
|
4
4
|
rtl?: boolean;
|
|
5
5
|
layer: number;
|
|
6
|
-
value?:
|
|
7
|
-
label?:
|
|
6
|
+
value?: ItemDataType['value'];
|
|
7
|
+
label?: ItemDataType['label'];
|
|
8
8
|
focus?: boolean;
|
|
9
9
|
loading?: boolean;
|
|
10
10
|
expand?: boolean;
|
|
@@ -5,9 +5,8 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import hasClass from 'dom-lib/hasClass';
|
|
6
6
|
import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
|
|
7
7
|
import Spinner from '@rsuite/icons/legacy/Spinner';
|
|
8
|
-
import reactToString from '../utils/reactToString';
|
|
9
8
|
import { useClassNames } from '../utils';
|
|
10
|
-
import { getTreeNodeIndent } from '../utils/treeUtils';
|
|
9
|
+
import { getTreeNodeIndent, stringifyTreeNodeLabel } from '../utils/treeUtils';
|
|
11
10
|
var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
12
11
|
var _ref$as = _ref.as,
|
|
13
12
|
Component = _ref$as === void 0 ? 'div' : _ref$as,
|
|
@@ -49,14 +48,6 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
49
48
|
merge = _useClassNames.merge,
|
|
50
49
|
withClassPrefix = _useClassNames.withClassPrefix;
|
|
51
50
|
|
|
52
|
-
var getTitle = useCallback(function () {
|
|
53
|
-
if (typeof label === 'string') {
|
|
54
|
-
return label;
|
|
55
|
-
} else if ( /*#__PURE__*/React.isValidElement(label)) {
|
|
56
|
-
var nodes = reactToString(label);
|
|
57
|
-
return nodes.join('');
|
|
58
|
-
}
|
|
59
|
-
}, [label]);
|
|
60
51
|
var handleExpand = useCallback(function (event) {
|
|
61
52
|
var _event$nativeEvent, _event$nativeEvent$st;
|
|
62
53
|
|
|
@@ -145,7 +136,7 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
145
136
|
});
|
|
146
137
|
return /*#__PURE__*/React.createElement("span", {
|
|
147
138
|
className: prefix('label'),
|
|
148
|
-
title:
|
|
139
|
+
title: stringifyTreeNodeLabel(label),
|
|
149
140
|
"data-layer": layer,
|
|
150
141
|
"data-key": (nodeData === null || nodeData === void 0 ? void 0 : nodeData.refKey) || '',
|
|
151
142
|
role: "button",
|
|
@@ -9,7 +9,7 @@ import React, { useState, useRef, useEffect, useCallback, useContext } from 'rea
|
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
10
|
import { List, AutoSizer } from '../Windowing';
|
|
11
11
|
import TreeNode from './TreeNode';
|
|
12
|
-
import { getTreeNodeIndent } from '../utils/treeUtils';
|
|
12
|
+
import { createDragPreview, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
|
|
13
13
|
import { createChainedFunction, useClassNames, useCustom, useControlled, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
|
|
14
14
|
import { getExpandWhenSearching, hasVisibleChildren, getDragNodeKeys, calDropNodePosition, createUpdateTreeDataFunction, useTreeDrag, useFlattenTreeData, getTreeActiveNode, getDefaultExpandItemValues, useTreeNodeRefs, useTreeSearch, focusPreviousItem, getFocusableItems, focusNextItem, getActiveItem, toggleExpand, useGetTreeNodeChildren, focusToActiveTreeNode, leftArrowHandler, focusTreeNode, rightArrowHandler, isSearching } from '../utils/treeUtils';
|
|
15
15
|
import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, onMenuKeyDown as _onMenuKeyDown, usePublicMethods, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
|
|
@@ -331,11 +331,15 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
331
331
|
}, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);
|
|
332
332
|
var handleDragStart = useCallback(function (nodeData, event) {
|
|
333
333
|
if (draggable) {
|
|
334
|
+
var _event$dataTransfer;
|
|
335
|
+
|
|
336
|
+
var dragMoverNode = createDragPreview(stringifyTreeNodeLabel(nodeData[labelKey]), treePrefix('drag-preview'));
|
|
337
|
+
(_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
|
|
334
338
|
setDragNodeKeys(getDragNodeKeys(nodeData, childrenKey, valueKey));
|
|
335
339
|
setDragNode(flattenNodes[nodeData.refKey]);
|
|
336
340
|
onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
|
|
337
341
|
}
|
|
338
|
-
}, [draggable,
|
|
342
|
+
}, [draggable, labelKey, treePrefix, setDragNodeKeys, childrenKey, valueKey, setDragNode, flattenNodes, onDragStart]);
|
|
339
343
|
var handleDragEnter = useCallback(function (nodeData, event) {
|
|
340
344
|
if (dragNodeKeys.some(function (d) {
|
|
341
345
|
return shallowEqual(d, nodeData[valueKey]);
|
|
@@ -354,6 +358,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
354
358
|
if (dragNodeKeys.some(function (d) {
|
|
355
359
|
return shallowEqual(d, nodeData[valueKey]);
|
|
356
360
|
})) {
|
|
361
|
+
event.dataTransfer.dropEffect = 'none';
|
|
357
362
|
return;
|
|
358
363
|
}
|
|
359
364
|
|
|
@@ -369,6 +374,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
369
374
|
onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
|
|
370
375
|
}, [onDragLeave]);
|
|
371
376
|
var handleDragEnd = useCallback(function (nodeData, event) {
|
|
377
|
+
removeDragPreview();
|
|
372
378
|
setDragNode(null);
|
|
373
379
|
setDragNodeKeys([]);
|
|
374
380
|
setDragOverNodeKey(null);
|
|
@@ -384,6 +390,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
384
390
|
onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);
|
|
385
391
|
}
|
|
386
392
|
|
|
393
|
+
removeDragPreview();
|
|
387
394
|
setDragNode(null);
|
|
388
395
|
setDragNodeKeys([]);
|
|
389
396
|
setDragOverNodeKey(null);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
|
|
3
3
|
export declare type ComponentProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
|
|
4
|
-
interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
interface Props<TElement extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
5
|
name: string;
|
|
6
|
-
componentAs?:
|
|
6
|
+
componentAs?: TElement;
|
|
7
7
|
componentClassPrefix?: string;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
10
|
* Create a component with `classPrefix` and `as` attributes.
|
|
11
11
|
*/
|
|
12
|
-
declare function createComponent({ name, componentAs, componentClassPrefix, ...defaultProps }: Props): RsRefForwardingComponent<
|
|
12
|
+
declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps>;
|
|
13
13
|
export default createComponent;
|
package/esm/utils/treeUtils.d.ts
CHANGED
|
@@ -262,3 +262,15 @@ export declare function getTreeNodeIndent(rtl: any, layer: any, absolute?: boole
|
|
|
262
262
|
* @returns
|
|
263
263
|
*/
|
|
264
264
|
export declare function getNodeFormattedRefKey(value: string | number): string;
|
|
265
|
+
/**
|
|
266
|
+
* create drag preview when tree node start drag
|
|
267
|
+
* @param name
|
|
268
|
+
* @param className
|
|
269
|
+
* @returns
|
|
270
|
+
*/
|
|
271
|
+
export declare function createDragPreview(name: string, className: string): HTMLDivElement;
|
|
272
|
+
/**
|
|
273
|
+
* remove drag preview when tree node drop
|
|
274
|
+
*/
|
|
275
|
+
export declare function removeDragPreview(): void;
|
|
276
|
+
export declare function stringifyTreeNodeLabel(label: string | React.ReactNode): string;
|
package/esm/utils/treeUtils.js
CHANGED
|
@@ -1031,4 +1031,40 @@ export function getTreeNodeIndent(rtl, layer, absolute) {
|
|
|
1031
1031
|
|
|
1032
1032
|
export function getNodeFormattedRefKey(value) {
|
|
1033
1033
|
return "" + (typeof value === 'number' ? 'Number_' : 'String_') + value;
|
|
1034
|
+
}
|
|
1035
|
+
/**
|
|
1036
|
+
* create drag preview when tree node start drag
|
|
1037
|
+
* @param name
|
|
1038
|
+
* @param className
|
|
1039
|
+
* @returns
|
|
1040
|
+
*/
|
|
1041
|
+
|
|
1042
|
+
export function createDragPreview(name, className) {
|
|
1043
|
+
var dragPreview = document.createElement('div');
|
|
1044
|
+
dragPreview.id = 'rs-tree-drag-preview';
|
|
1045
|
+
dragPreview.innerHTML = name;
|
|
1046
|
+
dragPreview.classList.add(className);
|
|
1047
|
+
document.body.appendChild(dragPreview);
|
|
1048
|
+
return dragPreview;
|
|
1049
|
+
}
|
|
1050
|
+
/**
|
|
1051
|
+
* remove drag preview when tree node drop
|
|
1052
|
+
*/
|
|
1053
|
+
|
|
1054
|
+
export function removeDragPreview() {
|
|
1055
|
+
var _dragPreview$parentNo, _dragPreview$parentNo2;
|
|
1056
|
+
|
|
1057
|
+
var dragPreview = document.getElementById('rs-tree-drag-preview');
|
|
1058
|
+
dragPreview === null || dragPreview === void 0 ? void 0 : (_dragPreview$parentNo = dragPreview.parentNode) === null || _dragPreview$parentNo === void 0 ? void 0 : (_dragPreview$parentNo2 = _dragPreview$parentNo.removeChild) === null || _dragPreview$parentNo2 === void 0 ? void 0 : _dragPreview$parentNo2.call(_dragPreview$parentNo, dragPreview);
|
|
1059
|
+
}
|
|
1060
|
+
export function stringifyTreeNodeLabel(label) {
|
|
1061
|
+
if (typeof label === 'string') {
|
|
1062
|
+
return label;
|
|
1063
|
+
} else if ( /*#__PURE__*/React.isValidElement(label)) {
|
|
1064
|
+
var _nodes2 = reactToString(label);
|
|
1065
|
+
|
|
1066
|
+
return _nodes2.join('');
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
return '';
|
|
1034
1070
|
}
|
package/esm/utils/useCustom.js
CHANGED
|
@@ -30,7 +30,8 @@ function useCustom(keys, overrideLocale) {
|
|
|
30
30
|
rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
|
|
31
31
|
formatDate = _useContext.formatDate,
|
|
32
32
|
parseDate = _useContext.parseDate,
|
|
33
|
-
toasters = _useContext.toasters
|
|
33
|
+
toasters = _useContext.toasters,
|
|
34
|
+
disableRipple = _useContext.disableRipple;
|
|
34
35
|
|
|
35
36
|
var componentLocale = _extends({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : typeof keys === 'object' ? mergeObject(keys.map(function (key) {
|
|
36
37
|
return locale === null || locale === void 0 ? void 0 : locale[key];
|
|
@@ -59,6 +60,7 @@ function useCustom(keys, overrideLocale) {
|
|
|
59
60
|
locale: componentLocale,
|
|
60
61
|
rtl: rtl,
|
|
61
62
|
toasters: toasters,
|
|
63
|
+
disableRipple: disableRipple,
|
|
62
64
|
formatDate: formatDate || defaultFormatDate,
|
|
63
65
|
parseDate: parseDate || defaultParseDate
|
|
64
66
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rsuite",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.25.0",
|
|
4
4
|
"description": "A suite of react components",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"lodash": "^4.17.11",
|
|
38
38
|
"prop-types": "^15.8.1",
|
|
39
39
|
"react-window": "^1.8.8",
|
|
40
|
-
"rsuite-table": "^5.8.
|
|
40
|
+
"rsuite-table": "^5.8.2",
|
|
41
41
|
"schema-typed": "^2.0.3"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -78,13 +78,13 @@
|
|
|
78
78
|
--rs-btn-default-active-bg: @B300-dark;
|
|
79
79
|
--rs-btn-default-active-text: @B000-dark;
|
|
80
80
|
--rs-btn-default-disabled-bg: @B600-dark;
|
|
81
|
-
--rs-btn-default-disabled-text: @
|
|
81
|
+
--rs-btn-default-disabled-text: @B400-dark;
|
|
82
82
|
--rs-btn-primary-bg: @H700-dark;
|
|
83
83
|
--rs-btn-primary-text: @B000-dark;
|
|
84
84
|
--rs-btn-primary-hover-bg: @H600-dark;
|
|
85
85
|
--rs-btn-primary-active-bg: @H400-dark;
|
|
86
86
|
--rs-btn-subtle-text: @B200-dark;
|
|
87
|
-
--rs-btn-subtle-hover-bg: @
|
|
87
|
+
--rs-btn-subtle-hover-bg: @B500-dark;
|
|
88
88
|
--rs-btn-subtle-hover-text: @B050-dark;
|
|
89
89
|
--rs-btn-subtle-active-bg: @B400-dark;
|
|
90
90
|
--rs-btn-subtle-active-text: @B000-dark;
|
|
@@ -150,6 +150,9 @@
|
|
|
150
150
|
--rs-placeholder: @B600-dark;
|
|
151
151
|
--rs-placeholder-active: lighten(@B600-dark, 5%);
|
|
152
152
|
|
|
153
|
+
// Breadcrumb
|
|
154
|
+
--rs-breadcrumb-item-active-text: #fff;
|
|
155
|
+
|
|
153
156
|
// Dropdown
|
|
154
157
|
--rs-dropdown-divider: @B600-dark;
|
|
155
158
|
--rs-dropdown-item-bg-hover: @B600-dark;
|
|
@@ -339,6 +342,7 @@
|
|
|
339
342
|
--rs-calendar-range-bg: fade(@H900-dark, 50%);
|
|
340
343
|
--rs-calendar-time-unit-bg: @B600-dark;
|
|
341
344
|
--rs-calendar-date-selected-text: #fff;
|
|
345
|
+
--rs-calendar-cell-selected-hover-bg: @H700;
|
|
342
346
|
|
|
343
347
|
// Popover
|
|
344
348
|
--rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
@@ -157,6 +157,9 @@
|
|
|
157
157
|
--rs-placeholder: @B600-high-contrast;
|
|
158
158
|
--rs-placeholder-active: lighten(@B600-high-contrast, 5%);
|
|
159
159
|
|
|
160
|
+
// Breadcrumb
|
|
161
|
+
--rs-breadcrumb-item-active-text: #fff;
|
|
162
|
+
|
|
160
163
|
// Dropdown
|
|
161
164
|
--rs-dropdown-divider: @B600-high-contrast;
|
|
162
165
|
--rs-dropdown-item-bg-hover: @B600-high-contrast;
|
|
@@ -355,6 +358,7 @@
|
|
|
355
358
|
--rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
|
|
356
359
|
--rs-calendar-time-unit-bg: @B900-high-contrast;
|
|
357
360
|
--rs-calendar-date-selected-text: @B900-high-contrast;
|
|
361
|
+
--rs-calendar-cell-selected-hover-bg: @B050-high-contrast;
|
|
358
362
|
|
|
359
363
|
// Popover
|
|
360
364
|
--rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
--rs-btn-primary-hover-bg: @H600;
|
|
92
92
|
--rs-btn-primary-active-bg: @H700;
|
|
93
93
|
--rs-btn-subtle-text: @B600;
|
|
94
|
-
--rs-btn-subtle-hover-bg: @
|
|
94
|
+
--rs-btn-subtle-hover-bg: @B200;
|
|
95
95
|
--rs-btn-subtle-hover-text: @B800;
|
|
96
96
|
--rs-btn-subtle-active-bg: @B200;
|
|
97
97
|
--rs-btn-subtle-active-text: @B900;
|
|
@@ -157,6 +157,9 @@
|
|
|
157
157
|
--rs-placeholder: @B100;
|
|
158
158
|
--rs-placeholder-active: @B200;
|
|
159
159
|
|
|
160
|
+
// Breadcrumb
|
|
161
|
+
--rs-breadcrumb-item-active-text: @B900;
|
|
162
|
+
|
|
160
163
|
// Dropdown
|
|
161
164
|
--rs-dropdown-divider: @B200;
|
|
162
165
|
--rs-dropdown-item-bg-hover: fade(@H100, 50%);
|
|
@@ -348,6 +351,7 @@
|
|
|
348
351
|
--rs-calendar-range-bg: fade(@H100, 50%);
|
|
349
352
|
--rs-calendar-time-unit-bg: @B050;
|
|
350
353
|
--rs-calendar-date-selected-text: #fff;
|
|
354
|
+
--rs-calendar-cell-selected-hover-bg: @H700;
|
|
351
355
|
|
|
352
356
|
// Popover
|
|
353
357
|
--rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
|