Skip to content

Commit 2b7e268

Browse files
xiejay97xiejay97
committed
feat(ui): add dVirtual for all virtual-scroll
1 parent 1c2cdf3 commit 2b7e268

14 files changed

Lines changed: 38 additions & 15 deletions

File tree

‎packages/ui/src/components/auto-complete/AutoComplete.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export interface DAutoCompleteProps<T extends DAutoCompleteItem> extends React.H
3232
dList: T[];
3333
dVisible?: boolean;
3434
dLoading?: boolean;
35+
dVirtual?: boolean;
3536
dCustomItem?: (item: T) => React.ReactNode;
3637
onVisibleChange?: (visible: boolean) => void;
3738
onItemClick?: (value: string, item: T) => void;
@@ -49,6 +50,7 @@ function AutoComplete<T extends DAutoCompleteItem>(
4950
dList,
5051
dVisible,
5152
dLoading = false,
53+
dVirtual = false,
5254
dCustomItem,
5355
onVisibleChange,
5456
onItemClick,
@@ -385,7 +387,7 @@ function AutoComplete<T extends DAutoCompleteItem>(
385387
);
386388
}}
387389
dFocusItem={focusItem}
388-
dSize={264}
390+
dSize={dVirtual ? 264 : Infinity}
389391
dPadding={4}
390392
dEmptyRender={() => (
391393
<li className={`${dPrefix}auto-complete__empty`} style={{ paddingLeft: 12 + 8 }}>

‎packages/ui/src/components/auto-complete/demos/5.BigData.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default function Demo() {
2828
<>
2929
<DAutoComplete
3030
dList={list1}
31+
dVirtual
3132
onItemClick={(val) => {
3233
setValue1(val);
3334
}}
@@ -46,6 +47,7 @@ export default function Demo() {
4647
</DAutoComplete>
4748
<DAutoComplete
4849
dList={list2}
50+
dVirtual
4951
onItemClick={(val) => {
5052
setValue2(val);
5153
}}

‎packages/ui/src/components/cascader/Cascader.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export interface DCascaderProps<V extends DId, T extends DCascaderItem<V>> exten
5858
dDisabled?: boolean;
5959
dMultiple?: boolean;
6060
dOnlyLeafSelectable?: boolean;
61+
dVirtual?: boolean;
6162
dCustomItem?: (item: T) => React.ReactNode;
6263
dCustomSelected?: (select: T) => string;
6364
dCustomSearch?: {
@@ -94,6 +95,7 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
9495
dDisabled = false,
9596
dMultiple = false,
9697
dOnlyLeafSelectable = true,
98+
dVirtual = false,
9799
dCustomItem,
98100
dCustomSelected,
99101
dCustomSearch,
@@ -514,6 +516,7 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
514516
dMultiple={dMultiple}
515517
dOnlyLeafSelectable={dOnlyLeafSelectable}
516518
dFocusVisible={focusVisible}
519+
dVirtual={dVirtual}
517520
onFocusChange={(item) => {
518521
if (!dataRef.current.focusList.has(item.value)) {
519522
dataRef.current.focusList.add(item.value);
@@ -545,6 +548,7 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
545548
dFocusItem={noSearchFocusItem}
546549
dCustomItem={dCustomItem}
547550
dMultiple={dMultiple}
551+
dVirtual={dVirtual}
548552
dFocusVisible={focusVisible}
549553
dRoot
550554
onFocusChange={(node) => {

‎packages/ui/src/components/cascader/List.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export interface DListProps<V extends DId, T extends DCascaderItem<V>> extends O
2121
dFocusItem: AbstractTreeNode<V, T> | undefined;
2222
dCustomItem: ((item: T) => React.ReactNode) | undefined;
2323
dMultiple: boolean;
24+
dVirtual: boolean;
2425
dFocusVisible: boolean;
2526
dRoot: boolean;
2627
onFocusChange: (node: AbstractTreeNode<V, T>) => void;
@@ -37,6 +38,7 @@ function List<V extends DId, T extends DCascaderItem<V>>(
3738
dFocusItem,
3839
dCustomItem,
3940
dMultiple,
41+
dVirtual,
4042
dFocusVisible,
4143
dRoot,
4244
onFocusChange,
@@ -210,7 +212,7 @@ function List<V extends DId, T extends DCascaderItem<V>>(
210212
</li>
211213
)}
212214
dFocusItem={inFocusNode}
213-
dSize={264}
215+
dSize={dVirtual ? 264 : Infinity}
214216
dPadding={4}
215217
>
216218
{({ render, vsList }) =>

‎packages/ui/src/components/cascader/demos/7.BigData.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const list = Array.from({ length: 500 }).map((_, index1) => ({
3131
export default function Demo() {
3232
return (
3333
<>
34-
<DCascader style={{ width: 200 }} dList={list} dPlaceholder="Basic" dSearchable dClearable></DCascader>
35-
<DCascader style={{ width: 400 }} dList={list} dPlaceholder="Multiple" dSearchable dClearable dMultiple></DCascader>
34+
<DCascader style={{ width: 200 }} dList={list} dPlaceholder="Basic" dSearchable dClearable dVirtual></DCascader>
35+
<DCascader style={{ width: 400 }} dList={list} dPlaceholder="Multiple" dSearchable dClearable dMultiple dVirtual></DCascader>
3636
</>
3737
);
3838
}

‎packages/ui/src/components/select/Select.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export interface DSelectProps<V extends DId, T extends DSelectItem<V>> extends O
5151
dClearable?: boolean;
5252
dDisabled?: boolean;
5353
dMultiple?: boolean;
54+
dVirtual?: boolean;
5455
dCustomItem?: (item: T) => React.ReactNode;
5556
dCustomSelected?: (select: T) => string;
5657
dCustomSearch?: {
@@ -88,6 +89,7 @@ function Select<V extends DId, T extends DSelectItem<V>>(
8889
dClearable = false,
8990
dDisabled = false,
9091
dMultiple = false,
92+
dVirtual = false,
9193
dCustomItem,
9294
dCustomSelected,
9395
dCustomSearch,
@@ -643,7 +645,7 @@ function Select<V extends DId, T extends DSelectItem<V>>(
643645
);
644646
}}
645647
dFocusItem={focusItem}
646-
dSize={264}
648+
dSize={dVirtual ? 264 : Infinity}
647649
dPadding={4}
648650
dEmptyRender={() => (
649651
<li className={`${dPrefix}select__empty`} style={{ paddingLeft: 12 + 8 }}>

‎packages/ui/src/components/select/demos/8.BigData.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ const listOfGroup = [
4747
export default function Demo() {
4848
return (
4949
<>
50-
<DSelect style={{ width: 200 }} dList={list} dPlaceholder="Basic" dSearchable dClearable />
51-
<DSelect style={{ width: 200 }} dList={listOfGroup} dPlaceholder="Group" dSearchable dClearable />
52-
<DSelect style={{ width: 400 }} dList={list} dPlaceholder="Multiple" dSearchable dClearable dMultiple />
50+
<DSelect style={{ width: 200 }} dList={list} dPlaceholder="Basic" dSearchable dClearable dVirtual />
51+
<DSelect style={{ width: 200 }} dList={listOfGroup} dPlaceholder="Group" dSearchable dClearable dVirtual />
52+
<DSelect style={{ width: 400 }} dList={list} dPlaceholder="Multiple" dSearchable dClearable dMultiple dVirtual />
5353
</>
5454
);
5555
}

‎packages/ui/src/components/table/TableFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ function TableFilter<V extends DId, T extends DTableFilterItem<V>>(
315315
);
316316
}}
317317
dFocusItem={focusItem}
318-
dSize={200}
318+
dSize={Infinity}
319319
dPadding={4}
320320
onScrollEnd={onScrollBottom}
321321
>

‎packages/ui/src/components/transfer/Panel.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface DPanelProps<V extends DId, T extends DTransferItem<V>> {
2222
dTitle: React.ReactNode;
2323
dLoading: boolean;
2424
dSearchable: boolean;
25+
dVirtual: boolean;
2526
dCustomItem: ((item: T) => React.ReactNode) | undefined;
2627
onSelectedChange: (value: V) => void;
2728
onAllSelected: (selected: boolean) => void;
@@ -37,6 +38,7 @@ export function DPanel<V extends DId, T extends DTransferItem<V>>(props: DPanelP
3738
dTitle,
3839
dLoading,
3940
dSearchable,
41+
dVirtual,
4042
dCustomItem,
4143
onSelectedChange,
4244
onAllSelected,
@@ -125,7 +127,7 @@ export function DPanel<V extends DId, T extends DTransferItem<V>>(props: DPanelP
125127
</li>
126128
);
127129
}}
128-
dSize={192}
130+
dSize={dVirtual ? 192 : Infinity}
129131
onScrollEnd={onScrollBottom}
130132
>
131133
{({ render, vsList }) =>

‎packages/ui/src/components/transfer/Transfer.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface DTransferProps<V extends DId, T extends DTransferItem<V>> exten
3333
dSearchable?: boolean;
3434
dSearchValue?: [string, string];
3535
dDisabled?: boolean;
36+
dVirtual?: boolean;
3637
dCustomItem?: (item: T) => React.ReactNode;
3738
dCustomSearch?: {
3839
filter?: (value: string, item: T) => boolean;
@@ -57,6 +58,7 @@ export function DTransfer<V extends DId, T extends DTransferItem<V>>(props: DTra
5758
dSearchable = false,
5859
dSearchValue,
5960
dDisabled = false,
61+
dVirtual = false,
6062
dCustomItem,
6163
dCustomSearch,
6264
onModelChange,
@@ -251,6 +253,7 @@ export function DTransfer<V extends DId, T extends DTransferItem<V>>(props: DTra
251253
dTitle={dTitle?.[0]}
252254
dLoading={dLoading[0] ?? false}
253255
dSearchable={dSearchable}
256+
dVirtual={dVirtual}
254257
dCustomItem={dCustomItem}
255258
onSelectedChange={handleSelectedChange}
256259
onAllSelected={(selected) => {
@@ -299,6 +302,7 @@ export function DTransfer<V extends DId, T extends DTransferItem<V>>(props: DTra
299302
dTitle={dTitle?.[1]}
300303
dLoading={dLoading[1] ?? false}
301304
dSearchable={dSearchable}
305+
dVirtual={dVirtual}
302306
dCustomItem={dCustomItem}
303307
onSelectedChange={handleSelectedChange}
304308
onAllSelected={(selected) => {

0 commit comments

Comments
 (0)