@douyinfe/semi-ui 2.42.4 → 2.43.0-alpha.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/dist/umd/semi-ui.js +26933 -26879
- package/dist/umd/semi-ui.js.map +1 -1
- package/dist/umd/semi-ui.min.js +1 -1
- package/dist/umd/semi-ui.min.js.map +1 -1
- package/lib/cjs/cascader/index.js +4 -2
- package/lib/cjs/cascader/item.d.ts +5 -1
- package/lib/cjs/cascader/item.js +92 -55
- package/lib/cjs/cascader/virtualRow.d.ts +8 -0
- package/lib/cjs/cascader/virtualRow.js +21 -0
- package/lib/cjs/form/baseForm.d.ts +1 -1
- package/lib/cjs/form/field.d.ts +1 -1
- package/lib/cjs/modal/confirm.d.ts +3 -3
- package/lib/cjs/tree/interface.d.ts +1 -1
- package/lib/cjs/treeSelect/index.d.ts +1 -1
- package/lib/es/cascader/index.js +4 -2
- package/lib/es/cascader/item.d.ts +5 -1
- package/lib/es/cascader/item.js +92 -55
- package/lib/es/cascader/virtualRow.d.ts +8 -0
- package/lib/es/cascader/virtualRow.js +14 -0
- package/lib/es/form/baseForm.d.ts +1 -1
- package/lib/es/form/field.d.ts +1 -1
- package/lib/es/modal/confirm.d.ts +3 -3
- package/lib/es/tree/interface.d.ts +1 -1
- package/lib/es/treeSelect/index.d.ts +1 -1
- package/package.json +8 -8
|
@@ -125,7 +125,8 @@ class Cascader extends _baseComponent.default {
|
|
|
125
125
|
bottomSlot,
|
|
126
126
|
showNext,
|
|
127
127
|
multiple,
|
|
128
|
-
filterRender
|
|
128
|
+
filterRender,
|
|
129
|
+
virtualizeInSearch
|
|
129
130
|
} = this.props;
|
|
130
131
|
const searchable = Boolean(filterTreeNode) && isSearching;
|
|
131
132
|
const popoverCls = (0, _classnames.default)(dropdownClassName, `${prefixcls}-popover`);
|
|
@@ -153,7 +154,8 @@ class Cascader extends _baseComponent.default {
|
|
|
153
154
|
multiple: multiple,
|
|
154
155
|
checkedKeys: checkedKeys,
|
|
155
156
|
halfCheckedKeys: halfCheckedKeys,
|
|
156
|
-
filterRender: filterRender
|
|
157
|
+
filterRender: filterRender,
|
|
158
|
+
virtualize: virtualizeInSearch
|
|
157
159
|
}), bottomSlot);
|
|
158
160
|
return content;
|
|
159
161
|
};
|
|
@@ -2,7 +2,7 @@ import React, { PureComponent, ReactNode } from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { ContextValue } from '../configProvider/context';
|
|
4
4
|
import { CheckboxEvent } from '../checkbox';
|
|
5
|
-
import { BasicCascaderData, BasicEntity, ShowNextType, BasicData } from '@douyinfe/semi-foundation/lib/cjs/cascader/foundation';
|
|
5
|
+
import { BasicCascaderData, BasicEntity, ShowNextType, BasicData, Virtualize } from '@douyinfe/semi-foundation/lib/cjs/cascader/foundation';
|
|
6
6
|
export interface CascaderData extends BasicCascaderData {
|
|
7
7
|
label: React.ReactNode;
|
|
8
8
|
}
|
|
@@ -52,6 +52,7 @@ export interface CascaderItemProps {
|
|
|
52
52
|
checkedKeys: Set<string>;
|
|
53
53
|
halfCheckedKeys: Set<string>;
|
|
54
54
|
filterRender?: (props: FilterRenderProps) => ReactNode;
|
|
55
|
+
virtualize?: Virtualize;
|
|
55
56
|
}
|
|
56
57
|
export default class Item extends PureComponent<CascaderItemProps> {
|
|
57
58
|
static contextType: React.Context<ContextValue>;
|
|
@@ -68,6 +69,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
|
|
|
68
69
|
onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
69
70
|
separator: PropTypes.Requireable<string>;
|
|
70
71
|
keyword: PropTypes.Requireable<string>;
|
|
72
|
+
virtualize: PropTypes.Requireable<object>;
|
|
71
73
|
};
|
|
72
74
|
static defaultProps: {
|
|
73
75
|
empty: boolean;
|
|
@@ -87,7 +89,9 @@ export default class Item extends PureComponent<CascaderItemProps> {
|
|
|
87
89
|
};
|
|
88
90
|
renderIcon: (type: string, haveMarginLeft?: boolean) => JSX.Element;
|
|
89
91
|
highlight: (searchText: React.ReactNode[]) => React.ReactNode[];
|
|
92
|
+
renderFlattenOptionItem: (data: Data, index?: number, style?: any) => JSX.Element;
|
|
90
93
|
renderFlattenOption: (data: Data[]) => JSX.Element;
|
|
94
|
+
renderVirtualizeList: (visibleOptions: any) => JSX.Element;
|
|
91
95
|
renderItem(renderData: Array<Entity>, content?: Array<React.ReactNode>): React.ReactNode[];
|
|
92
96
|
renderEmpty(): JSX.Element;
|
|
93
97
|
render(): JSX.Element;
|
package/lib/cjs/cascader/item.js
CHANGED
|
@@ -15,6 +15,8 @@ var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer")
|
|
|
15
15
|
var _semiIcons = require("@douyinfe/semi-icons");
|
|
16
16
|
var _spin = _interopRequireDefault(require("../spin"));
|
|
17
17
|
var _checkbox = _interopRequireDefault(require("../checkbox"));
|
|
18
|
+
var _reactWindow = require("react-window");
|
|
19
|
+
var _virtualRow = _interopRequireDefault(require("./virtualRow"));
|
|
18
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
21
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
20
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -138,72 +140,106 @@ class Item extends _react.PureComponent {
|
|
|
138
140
|
});
|
|
139
141
|
return content;
|
|
140
142
|
};
|
|
141
|
-
this.
|
|
143
|
+
this.renderFlattenOptionItem = (data, index, style) => {
|
|
144
|
+
var _a;
|
|
142
145
|
const {
|
|
143
146
|
multiple,
|
|
144
147
|
selectedKeys,
|
|
145
148
|
checkedKeys,
|
|
146
149
|
halfCheckedKeys,
|
|
147
150
|
keyword,
|
|
148
|
-
filterRender
|
|
151
|
+
filterRender,
|
|
152
|
+
virtualize
|
|
153
|
+
} = this.props;
|
|
154
|
+
const {
|
|
155
|
+
searchText,
|
|
156
|
+
key,
|
|
157
|
+
disabled,
|
|
158
|
+
pathData
|
|
159
|
+
} = data;
|
|
160
|
+
const selected = selectedKeys.has(key);
|
|
161
|
+
const className = (0, _classnames.default)(prefixcls, {
|
|
162
|
+
[`${prefixcls}-flatten`]: true && !filterRender,
|
|
163
|
+
[`${prefixcls}-disabled`]: disabled,
|
|
164
|
+
[`${prefixcls}-select`]: selected && !multiple
|
|
165
|
+
});
|
|
166
|
+
const onClick = e => {
|
|
167
|
+
this.onClick(e, data);
|
|
168
|
+
};
|
|
169
|
+
const onKeyPress = e => this.handleItemEnterPress(e, data);
|
|
170
|
+
const onCheck = e => this.onCheckboxChange(e, data);
|
|
171
|
+
if (filterRender) {
|
|
172
|
+
const props = {
|
|
173
|
+
className,
|
|
174
|
+
inputValue: keyword,
|
|
175
|
+
disabled,
|
|
176
|
+
data: pathData,
|
|
177
|
+
checkStatus: {
|
|
178
|
+
checked: checkedKeys.has(data.key),
|
|
179
|
+
halfChecked: halfCheckedKeys.has(data.key)
|
|
180
|
+
},
|
|
181
|
+
selected,
|
|
182
|
+
onClick,
|
|
183
|
+
onCheck
|
|
184
|
+
};
|
|
185
|
+
const item = filterRender(props);
|
|
186
|
+
const otherProps = virtualize ? {
|
|
187
|
+
key,
|
|
188
|
+
style: Object.assign(Object.assign({}, (_a = item.props.style) !== null && _a !== void 0 ? _a : {}), style)
|
|
189
|
+
} : {
|
|
190
|
+
key
|
|
191
|
+
};
|
|
192
|
+
return /*#__PURE__*/_react.default.cloneElement(item, otherProps);
|
|
193
|
+
}
|
|
194
|
+
return /*#__PURE__*/_react.default.createElement("li", {
|
|
195
|
+
role: 'menuitem',
|
|
196
|
+
className: className,
|
|
197
|
+
style: style,
|
|
198
|
+
key: key,
|
|
199
|
+
onClick: onClick,
|
|
200
|
+
onKeyPress: onKeyPress
|
|
201
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
202
|
+
className: `${prefixcls}-label`
|
|
203
|
+
}, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
|
|
204
|
+
onChange: onCheck,
|
|
205
|
+
disabled: disabled,
|
|
206
|
+
indeterminate: halfCheckedKeys.has(data.key),
|
|
207
|
+
checked: checkedKeys.has(data.key),
|
|
208
|
+
className: `${prefixcls}-label-checkbox`
|
|
209
|
+
}), this.highlight(searchText)));
|
|
210
|
+
};
|
|
211
|
+
this.renderFlattenOption = data => {
|
|
212
|
+
const {
|
|
213
|
+
virtualize
|
|
149
214
|
} = this.props;
|
|
150
215
|
const content = /*#__PURE__*/_react.default.createElement("ul", {
|
|
151
216
|
className: `${prefixcls}-list`,
|
|
152
217
|
key: 'flatten-list'
|
|
153
|
-
}, data.map(item =>
|
|
154
|
-
const {
|
|
155
|
-
searchText,
|
|
156
|
-
key,
|
|
157
|
-
disabled,
|
|
158
|
-
pathData
|
|
159
|
-
} = item;
|
|
160
|
-
const selected = selectedKeys.has(key);
|
|
161
|
-
const className = (0, _classnames.default)(prefixcls, {
|
|
162
|
-
[`${prefixcls}-flatten`]: true && !filterRender,
|
|
163
|
-
[`${prefixcls}-disabled`]: disabled,
|
|
164
|
-
[`${prefixcls}-select`]: selected && !multiple
|
|
165
|
-
});
|
|
166
|
-
const onClick = e => {
|
|
167
|
-
this.onClick(e, item);
|
|
168
|
-
};
|
|
169
|
-
const onKeyPress = e => this.handleItemEnterPress(e, item);
|
|
170
|
-
const onCheck = e => this.onCheckboxChange(e, item);
|
|
171
|
-
if (filterRender) {
|
|
172
|
-
const props = {
|
|
173
|
-
className,
|
|
174
|
-
inputValue: keyword,
|
|
175
|
-
disabled,
|
|
176
|
-
data: pathData,
|
|
177
|
-
checkStatus: {
|
|
178
|
-
checked: checkedKeys.has(item.key),
|
|
179
|
-
halfChecked: halfCheckedKeys.has(item.key)
|
|
180
|
-
},
|
|
181
|
-
selected,
|
|
182
|
-
onClick,
|
|
183
|
-
onCheck
|
|
184
|
-
};
|
|
185
|
-
return /*#__PURE__*/_react.default.cloneElement(filterRender(props), {
|
|
186
|
-
key
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
return /*#__PURE__*/_react.default.createElement("li", {
|
|
190
|
-
role: 'menuitem',
|
|
191
|
-
className: className,
|
|
192
|
-
key: key,
|
|
193
|
-
onClick: onClick,
|
|
194
|
-
onKeyPress: onKeyPress
|
|
195
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
196
|
-
className: `${prefixcls}-label`
|
|
197
|
-
}, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
|
|
198
|
-
onChange: onCheck,
|
|
199
|
-
disabled: disabled,
|
|
200
|
-
indeterminate: halfCheckedKeys.has(item.key),
|
|
201
|
-
checked: checkedKeys.has(item.key),
|
|
202
|
-
className: `${prefixcls}-label-checkbox`
|
|
203
|
-
}), this.highlight(searchText)));
|
|
204
|
-
}));
|
|
218
|
+
}, virtualize ? this.renderVirtualizeList(data) : data.map(item => this.renderFlattenOptionItem(item)));
|
|
205
219
|
return content;
|
|
206
220
|
};
|
|
221
|
+
this.renderVirtualizeList = visibleOptions => {
|
|
222
|
+
var _a;
|
|
223
|
+
const {
|
|
224
|
+
direction
|
|
225
|
+
} = this.context;
|
|
226
|
+
const {
|
|
227
|
+
virtualize
|
|
228
|
+
} = this.props;
|
|
229
|
+
return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
|
|
230
|
+
height: virtualize.height,
|
|
231
|
+
itemCount: visibleOptions.length,
|
|
232
|
+
itemSize: virtualize.itemSize,
|
|
233
|
+
itemData: {
|
|
234
|
+
visibleOptions,
|
|
235
|
+
renderOption: this.renderFlattenOptionItem
|
|
236
|
+
},
|
|
237
|
+
width: (_a = virtualize.width) !== null && _a !== void 0 ? _a : '100%',
|
|
238
|
+
style: {
|
|
239
|
+
direction
|
|
240
|
+
}
|
|
241
|
+
}, _virtualRow.default);
|
|
242
|
+
};
|
|
207
243
|
}
|
|
208
244
|
renderItem(renderData) {
|
|
209
245
|
let content = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
@@ -333,7 +369,8 @@ Item.propTypes = {
|
|
|
333
369
|
halfCheckedKeys: _propTypes.default.object,
|
|
334
370
|
onItemCheckboxClick: _propTypes.default.func,
|
|
335
371
|
separator: _propTypes.default.string,
|
|
336
|
-
keyword: _propTypes.default.string
|
|
372
|
+
keyword: _propTypes.default.string,
|
|
373
|
+
virtualize: _propTypes.default.object
|
|
337
374
|
};
|
|
338
375
|
Item.defaultProps = {
|
|
339
376
|
empty: false
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
const VirtualRow = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
index,
|
|
10
|
+
data,
|
|
11
|
+
style
|
|
12
|
+
} = _ref;
|
|
13
|
+
const {
|
|
14
|
+
visibleOptions,
|
|
15
|
+
renderOption
|
|
16
|
+
} = data;
|
|
17
|
+
const option = visibleOptions[index];
|
|
18
|
+
return renderOption(option, index, style);
|
|
19
|
+
};
|
|
20
|
+
var _default = VirtualRow;
|
|
21
|
+
exports.default = _default;
|
|
@@ -140,7 +140,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
|
|
|
140
140
|
preventScroll?: boolean;
|
|
141
141
|
showRestTagsPopover?: boolean;
|
|
142
142
|
restTagsPopoverProps?: import("../popover").PopoverProps;
|
|
143
|
-
} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "
|
|
143
|
+
} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
|
|
144
144
|
static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
|
|
145
145
|
static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
|
|
146
146
|
static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;
|
package/lib/cjs/form/field.d.ts
CHANGED
|
@@ -86,7 +86,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
|
|
|
86
86
|
preventScroll?: boolean;
|
|
87
87
|
showRestTagsPopover?: boolean;
|
|
88
88
|
restTagsPopoverProps?: import("../popover").PopoverProps;
|
|
89
|
-
} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "
|
|
89
|
+
} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
|
|
90
90
|
declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
|
|
91
91
|
declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
|
|
92
92
|
declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
|
|
@@ -145,11 +145,11 @@ export declare function withError(props: ModalReactProps): {
|
|
|
145
145
|
size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
|
|
146
146
|
style?: React.CSSProperties;
|
|
147
147
|
className?: string;
|
|
148
|
-
motion?: boolean;
|
|
149
148
|
getPopupContainer?: () => HTMLElement;
|
|
150
149
|
footer?: React.ReactNode;
|
|
151
150
|
header?: React.ReactNode;
|
|
152
151
|
direction?: any;
|
|
152
|
+
motion?: boolean;
|
|
153
153
|
mask?: boolean;
|
|
154
154
|
visible?: boolean;
|
|
155
155
|
zIndex?: number;
|
|
@@ -204,10 +204,10 @@ export declare function withError(props: ModalReactProps): {
|
|
|
204
204
|
title?: string;
|
|
205
205
|
name?: string;
|
|
206
206
|
value?: string | number | readonly string[];
|
|
207
|
-
onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
|
|
208
|
-
onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
|
|
209
207
|
form?: string;
|
|
210
208
|
slot?: string;
|
|
209
|
+
onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
|
|
210
|
+
onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
|
|
211
211
|
prefix?: string;
|
|
212
212
|
dangerouslySetInnerHTML?: {
|
|
213
213
|
__html: string | TrustedHTML;
|
|
@@ -61,7 +61,7 @@ export interface TreeProps extends BasicTreeProps {
|
|
|
61
61
|
onExpand?: (expandedKeys: string[], expandedOtherProps: ExpandedOtherProps) => void;
|
|
62
62
|
onLoad?: (loadedKeys?: Set<string>, treeNode?: TreeNodeData) => void;
|
|
63
63
|
onContextMenu?: (e: MouseEvent, node: TreeNodeData) => void;
|
|
64
|
-
onSelect?: (
|
|
64
|
+
onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
|
|
65
65
|
renderDraggingNode?: (nodeInstance: HTMLElement, node: TreeNodeData) => HTMLElement;
|
|
66
66
|
renderFullLabel?: (renderFullLabelProps: RenderFullLabelProps) => ReactNode;
|
|
67
67
|
renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData) => ReactNode;
|
|
@@ -74,7 +74,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
|
|
|
74
74
|
stopPropagation?: boolean | string;
|
|
75
75
|
restTagsPopoverProps?: PopoverProps;
|
|
76
76
|
searchRender?: boolean | ((inputProps: InputProps) => React.ReactNode);
|
|
77
|
-
onSelect?: (
|
|
77
|
+
onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
|
|
78
78
|
renderSelectedItem?: RenderSelectedItem;
|
|
79
79
|
getPopupContainer?: () => HTMLElement;
|
|
80
80
|
triggerRender?: (props?: TriggerRenderProps) => React.ReactNode;
|
package/lib/es/cascader/index.js
CHANGED
|
@@ -116,7 +116,8 @@ class Cascader extends BaseComponent {
|
|
|
116
116
|
bottomSlot,
|
|
117
117
|
showNext,
|
|
118
118
|
multiple,
|
|
119
|
-
filterRender
|
|
119
|
+
filterRender,
|
|
120
|
+
virtualizeInSearch
|
|
120
121
|
} = this.props;
|
|
121
122
|
const searchable = Boolean(filterTreeNode) && isSearching;
|
|
122
123
|
const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
|
|
@@ -144,7 +145,8 @@ class Cascader extends BaseComponent {
|
|
|
144
145
|
multiple: multiple,
|
|
145
146
|
checkedKeys: checkedKeys,
|
|
146
147
|
halfCheckedKeys: halfCheckedKeys,
|
|
147
|
-
filterRender: filterRender
|
|
148
|
+
filterRender: filterRender,
|
|
149
|
+
virtualize: virtualizeInSearch
|
|
148
150
|
}), bottomSlot);
|
|
149
151
|
return content;
|
|
150
152
|
};
|
|
@@ -2,7 +2,7 @@ import React, { PureComponent, ReactNode } from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { ContextValue } from '../configProvider/context';
|
|
4
4
|
import { CheckboxEvent } from '../checkbox';
|
|
5
|
-
import { BasicCascaderData, BasicEntity, ShowNextType, BasicData } from '@douyinfe/semi-foundation/lib/es/cascader/foundation';
|
|
5
|
+
import { BasicCascaderData, BasicEntity, ShowNextType, BasicData, Virtualize } from '@douyinfe/semi-foundation/lib/es/cascader/foundation';
|
|
6
6
|
export interface CascaderData extends BasicCascaderData {
|
|
7
7
|
label: React.ReactNode;
|
|
8
8
|
}
|
|
@@ -52,6 +52,7 @@ export interface CascaderItemProps {
|
|
|
52
52
|
checkedKeys: Set<string>;
|
|
53
53
|
halfCheckedKeys: Set<string>;
|
|
54
54
|
filterRender?: (props: FilterRenderProps) => ReactNode;
|
|
55
|
+
virtualize?: Virtualize;
|
|
55
56
|
}
|
|
56
57
|
export default class Item extends PureComponent<CascaderItemProps> {
|
|
57
58
|
static contextType: React.Context<ContextValue>;
|
|
@@ -68,6 +69,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
|
|
|
68
69
|
onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
69
70
|
separator: PropTypes.Requireable<string>;
|
|
70
71
|
keyword: PropTypes.Requireable<string>;
|
|
72
|
+
virtualize: PropTypes.Requireable<object>;
|
|
71
73
|
};
|
|
72
74
|
static defaultProps: {
|
|
73
75
|
empty: boolean;
|
|
@@ -87,7 +89,9 @@ export default class Item extends PureComponent<CascaderItemProps> {
|
|
|
87
89
|
};
|
|
88
90
|
renderIcon: (type: string, haveMarginLeft?: boolean) => JSX.Element;
|
|
89
91
|
highlight: (searchText: React.ReactNode[]) => React.ReactNode[];
|
|
92
|
+
renderFlattenOptionItem: (data: Data, index?: number, style?: any) => JSX.Element;
|
|
90
93
|
renderFlattenOption: (data: Data[]) => JSX.Element;
|
|
94
|
+
renderVirtualizeList: (visibleOptions: any) => JSX.Element;
|
|
91
95
|
renderItem(renderData: Array<Entity>, content?: Array<React.ReactNode>): React.ReactNode[];
|
|
92
96
|
renderEmpty(): JSX.Element;
|
|
93
97
|
render(): JSX.Element;
|
package/lib/es/cascader/item.js
CHANGED
|
@@ -9,6 +9,8 @@ import LocaleConsumer from '../locale/localeConsumer';
|
|
|
9
9
|
import { IconChevronRight, IconTick } from '@douyinfe/semi-icons';
|
|
10
10
|
import Spin from '../spin';
|
|
11
11
|
import Checkbox from '../checkbox';
|
|
12
|
+
import { FixedSizeList as List } from 'react-window';
|
|
13
|
+
import VirtualRow from './virtualRow';
|
|
12
14
|
const prefixcls = cssClasses.PREFIX_OPTION;
|
|
13
15
|
export default class Item extends PureComponent {
|
|
14
16
|
constructor() {
|
|
@@ -129,72 +131,106 @@ export default class Item extends PureComponent {
|
|
|
129
131
|
});
|
|
130
132
|
return content;
|
|
131
133
|
};
|
|
132
|
-
this.
|
|
134
|
+
this.renderFlattenOptionItem = (data, index, style) => {
|
|
135
|
+
var _a;
|
|
133
136
|
const {
|
|
134
137
|
multiple,
|
|
135
138
|
selectedKeys,
|
|
136
139
|
checkedKeys,
|
|
137
140
|
halfCheckedKeys,
|
|
138
141
|
keyword,
|
|
139
|
-
filterRender
|
|
142
|
+
filterRender,
|
|
143
|
+
virtualize
|
|
144
|
+
} = this.props;
|
|
145
|
+
const {
|
|
146
|
+
searchText,
|
|
147
|
+
key,
|
|
148
|
+
disabled,
|
|
149
|
+
pathData
|
|
150
|
+
} = data;
|
|
151
|
+
const selected = selectedKeys.has(key);
|
|
152
|
+
const className = cls(prefixcls, {
|
|
153
|
+
[`${prefixcls}-flatten`]: true && !filterRender,
|
|
154
|
+
[`${prefixcls}-disabled`]: disabled,
|
|
155
|
+
[`${prefixcls}-select`]: selected && !multiple
|
|
156
|
+
});
|
|
157
|
+
const onClick = e => {
|
|
158
|
+
this.onClick(e, data);
|
|
159
|
+
};
|
|
160
|
+
const onKeyPress = e => this.handleItemEnterPress(e, data);
|
|
161
|
+
const onCheck = e => this.onCheckboxChange(e, data);
|
|
162
|
+
if (filterRender) {
|
|
163
|
+
const props = {
|
|
164
|
+
className,
|
|
165
|
+
inputValue: keyword,
|
|
166
|
+
disabled,
|
|
167
|
+
data: pathData,
|
|
168
|
+
checkStatus: {
|
|
169
|
+
checked: checkedKeys.has(data.key),
|
|
170
|
+
halfChecked: halfCheckedKeys.has(data.key)
|
|
171
|
+
},
|
|
172
|
+
selected,
|
|
173
|
+
onClick,
|
|
174
|
+
onCheck
|
|
175
|
+
};
|
|
176
|
+
const item = filterRender(props);
|
|
177
|
+
const otherProps = virtualize ? {
|
|
178
|
+
key,
|
|
179
|
+
style: Object.assign(Object.assign({}, (_a = item.props.style) !== null && _a !== void 0 ? _a : {}), style)
|
|
180
|
+
} : {
|
|
181
|
+
key
|
|
182
|
+
};
|
|
183
|
+
return /*#__PURE__*/React.cloneElement(item, otherProps);
|
|
184
|
+
}
|
|
185
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
186
|
+
role: 'menuitem',
|
|
187
|
+
className: className,
|
|
188
|
+
style: style,
|
|
189
|
+
key: key,
|
|
190
|
+
onClick: onClick,
|
|
191
|
+
onKeyPress: onKeyPress
|
|
192
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
193
|
+
className: `${prefixcls}-label`
|
|
194
|
+
}, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
|
|
195
|
+
onChange: onCheck,
|
|
196
|
+
disabled: disabled,
|
|
197
|
+
indeterminate: halfCheckedKeys.has(data.key),
|
|
198
|
+
checked: checkedKeys.has(data.key),
|
|
199
|
+
className: `${prefixcls}-label-checkbox`
|
|
200
|
+
}), this.highlight(searchText)));
|
|
201
|
+
};
|
|
202
|
+
this.renderFlattenOption = data => {
|
|
203
|
+
const {
|
|
204
|
+
virtualize
|
|
140
205
|
} = this.props;
|
|
141
206
|
const content = /*#__PURE__*/React.createElement("ul", {
|
|
142
207
|
className: `${prefixcls}-list`,
|
|
143
208
|
key: 'flatten-list'
|
|
144
|
-
}, data.map(item =>
|
|
145
|
-
const {
|
|
146
|
-
searchText,
|
|
147
|
-
key,
|
|
148
|
-
disabled,
|
|
149
|
-
pathData
|
|
150
|
-
} = item;
|
|
151
|
-
const selected = selectedKeys.has(key);
|
|
152
|
-
const className = cls(prefixcls, {
|
|
153
|
-
[`${prefixcls}-flatten`]: true && !filterRender,
|
|
154
|
-
[`${prefixcls}-disabled`]: disabled,
|
|
155
|
-
[`${prefixcls}-select`]: selected && !multiple
|
|
156
|
-
});
|
|
157
|
-
const onClick = e => {
|
|
158
|
-
this.onClick(e, item);
|
|
159
|
-
};
|
|
160
|
-
const onKeyPress = e => this.handleItemEnterPress(e, item);
|
|
161
|
-
const onCheck = e => this.onCheckboxChange(e, item);
|
|
162
|
-
if (filterRender) {
|
|
163
|
-
const props = {
|
|
164
|
-
className,
|
|
165
|
-
inputValue: keyword,
|
|
166
|
-
disabled,
|
|
167
|
-
data: pathData,
|
|
168
|
-
checkStatus: {
|
|
169
|
-
checked: checkedKeys.has(item.key),
|
|
170
|
-
halfChecked: halfCheckedKeys.has(item.key)
|
|
171
|
-
},
|
|
172
|
-
selected,
|
|
173
|
-
onClick,
|
|
174
|
-
onCheck
|
|
175
|
-
};
|
|
176
|
-
return /*#__PURE__*/React.cloneElement(filterRender(props), {
|
|
177
|
-
key
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
return /*#__PURE__*/React.createElement("li", {
|
|
181
|
-
role: 'menuitem',
|
|
182
|
-
className: className,
|
|
183
|
-
key: key,
|
|
184
|
-
onClick: onClick,
|
|
185
|
-
onKeyPress: onKeyPress
|
|
186
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
187
|
-
className: `${prefixcls}-label`
|
|
188
|
-
}, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
|
|
189
|
-
onChange: onCheck,
|
|
190
|
-
disabled: disabled,
|
|
191
|
-
indeterminate: halfCheckedKeys.has(item.key),
|
|
192
|
-
checked: checkedKeys.has(item.key),
|
|
193
|
-
className: `${prefixcls}-label-checkbox`
|
|
194
|
-
}), this.highlight(searchText)));
|
|
195
|
-
}));
|
|
209
|
+
}, virtualize ? this.renderVirtualizeList(data) : data.map(item => this.renderFlattenOptionItem(item)));
|
|
196
210
|
return content;
|
|
197
211
|
};
|
|
212
|
+
this.renderVirtualizeList = visibleOptions => {
|
|
213
|
+
var _a;
|
|
214
|
+
const {
|
|
215
|
+
direction
|
|
216
|
+
} = this.context;
|
|
217
|
+
const {
|
|
218
|
+
virtualize
|
|
219
|
+
} = this.props;
|
|
220
|
+
return /*#__PURE__*/React.createElement(List, {
|
|
221
|
+
height: virtualize.height,
|
|
222
|
+
itemCount: visibleOptions.length,
|
|
223
|
+
itemSize: virtualize.itemSize,
|
|
224
|
+
itemData: {
|
|
225
|
+
visibleOptions,
|
|
226
|
+
renderOption: this.renderFlattenOptionItem
|
|
227
|
+
},
|
|
228
|
+
width: (_a = virtualize.width) !== null && _a !== void 0 ? _a : '100%',
|
|
229
|
+
style: {
|
|
230
|
+
direction
|
|
231
|
+
}
|
|
232
|
+
}, VirtualRow);
|
|
233
|
+
};
|
|
198
234
|
}
|
|
199
235
|
renderItem(renderData) {
|
|
200
236
|
let content = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
@@ -323,7 +359,8 @@ Item.propTypes = {
|
|
|
323
359
|
halfCheckedKeys: PropTypes.object,
|
|
324
360
|
onItemCheckboxClick: PropTypes.func,
|
|
325
361
|
separator: PropTypes.string,
|
|
326
|
-
keyword: PropTypes.string
|
|
362
|
+
keyword: PropTypes.string,
|
|
363
|
+
virtualize: PropTypes.object
|
|
327
364
|
};
|
|
328
365
|
Item.defaultProps = {
|
|
329
366
|
empty: false
|
|
@@ -140,7 +140,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
|
|
|
140
140
|
preventScroll?: boolean;
|
|
141
141
|
showRestTagsPopover?: boolean;
|
|
142
142
|
restTagsPopoverProps?: import("../popover").PopoverProps;
|
|
143
|
-
} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "
|
|
143
|
+
} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
|
|
144
144
|
static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
|
|
145
145
|
static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
|
|
146
146
|
static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;
|
package/lib/es/form/field.d.ts
CHANGED
|
@@ -86,7 +86,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
|
|
|
86
86
|
preventScroll?: boolean;
|
|
87
87
|
showRestTagsPopover?: boolean;
|
|
88
88
|
restTagsPopoverProps?: import("../popover").PopoverProps;
|
|
89
|
-
} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "
|
|
89
|
+
} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
|
|
90
90
|
declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
|
|
91
91
|
declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
|
|
92
92
|
declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
|
|
@@ -145,11 +145,11 @@ export declare function withError(props: ModalReactProps): {
|
|
|
145
145
|
size?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").Size;
|
|
146
146
|
style?: React.CSSProperties;
|
|
147
147
|
className?: string;
|
|
148
|
-
motion?: boolean;
|
|
149
148
|
getPopupContainer?: () => HTMLElement;
|
|
150
149
|
footer?: React.ReactNode;
|
|
151
150
|
header?: React.ReactNode;
|
|
152
151
|
direction?: any;
|
|
152
|
+
motion?: boolean;
|
|
153
153
|
mask?: boolean;
|
|
154
154
|
visible?: boolean;
|
|
155
155
|
zIndex?: number;
|
|
@@ -204,10 +204,10 @@ export declare function withError(props: ModalReactProps): {
|
|
|
204
204
|
title?: string;
|
|
205
205
|
name?: string;
|
|
206
206
|
value?: string | number | readonly string[];
|
|
207
|
-
onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
|
|
208
|
-
onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
|
|
209
207
|
form?: string;
|
|
210
208
|
slot?: string;
|
|
209
|
+
onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
|
|
210
|
+
onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
|
|
211
211
|
prefix?: string;
|
|
212
212
|
dangerouslySetInnerHTML?: {
|
|
213
213
|
__html: string | TrustedHTML;
|
|
@@ -61,7 +61,7 @@ export interface TreeProps extends BasicTreeProps {
|
|
|
61
61
|
onExpand?: (expandedKeys: string[], expandedOtherProps: ExpandedOtherProps) => void;
|
|
62
62
|
onLoad?: (loadedKeys?: Set<string>, treeNode?: TreeNodeData) => void;
|
|
63
63
|
onContextMenu?: (e: MouseEvent, node: TreeNodeData) => void;
|
|
64
|
-
onSelect?: (
|
|
64
|
+
onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
|
|
65
65
|
renderDraggingNode?: (nodeInstance: HTMLElement, node: TreeNodeData) => HTMLElement;
|
|
66
66
|
renderFullLabel?: (renderFullLabelProps: RenderFullLabelProps) => ReactNode;
|
|
67
67
|
renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData) => ReactNode;
|