Skip to content

Commit 9b1cd98

Browse files
xiejay97xiejay97
committed
feat(ui): add virtual-scroll component
1 parent bf65139 commit 9b1cd98

25 files changed

Lines changed: 334 additions & 101 deletions

File tree

‎packages/site/src/app/styles/_app.scss‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -327,17 +327,6 @@ h3 {
327327
gap: 20px 0;
328328
}
329329

330-
.app-demo-link {
331-
color: var(--d-color-primary);
332-
text-decoration: none;
333-
cursor: pointer;
334-
transition: color var(--d-animation-duration-base) linear;
335-
336-
&:hover {
337-
color: var(--d-color-primary-lighter);
338-
}
339-
}
340-
341330
.app-demo-slide {
342331
display: flex;
343332
align-items: center;

‎packages/ui/src/components/accordion/Accordion.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export function DAccordion<ID extends DId, T extends DAccordionOption<ID>>(props
140140
[`${dPrefix}accordion__button--arrow-left`]: accordionArrow === 'left',
141141
'is-disabled': accordionDisabled,
142142
})}
143-
tabIndex={!accordionDisabled ? 0 : -1}
143+
tabIndex={accordionDisabled ? -1 : 0}
144144
role="button"
145145
aria-controls={regionId}
146146
aria-expanded={isActive}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { DNestedChildren } from '../../utils/global';
22
import type { DFocusVisibleRenderProps } from '../_focus-visible';
3-
import type { DVirtualScrollRef } from '../_virtual-scroll';
3+
import type { DVirtualScrollRef } from '../virtual-scroll';
44

55
import { isUndefined } from 'lodash';
66
import React, { useState, useId, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
@@ -22,8 +22,8 @@ import { findNested, registerComponentMate, getClassName, getNoTransformSize, ge
2222
import { TTANSITION_DURING_POPUP } from '../../utils/global';
2323
import { DFocusVisible } from '../_focus-visible';
2424
import { DTransition } from '../_transition';
25-
import { DVirtualScroll } from '../_virtual-scroll';
2625
import { DInput } from '../input';
26+
import { DVirtualScroll } from '../virtual-scroll';
2727

2828
export interface DAutoCompleteRef {
2929
updatePosition: () => void;
@@ -385,15 +385,15 @@ function AutoComplete<T extends DAutoCompleteOption>(
385385
</li>
386386
);
387387
}}
388-
dGetSize={(item) => {
388+
dItemSize={(item) => {
389389
if (item.children && item.children.length === 0) {
390390
return 64;
391391
}
392392
return 32;
393393
}}
394-
dGetChildren={(item) => item.children}
394+
dItemNested={(item) => item.children}
395395
dCompareItem={(a, b) => a.value === b.value}
396-
dCanFocus={canSelectOption}
396+
dFocusable={canSelectOption}
397397
dFocusItem={focusOption}
398398
dSize={264}
399399
dPadding={4}

‎packages/ui/src/components/card/demos/1.Basic.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ The simplest usage.
1313
最简单的用法。
1414

1515
```tsx
16-
import { DCard, DCardHeader, DCardContent } from '@react-devui/ui';
16+
import { DCard, DCardHeader, DCardContent, DButton } from '@react-devui/ui';
1717
import { EditOutlined, DeleteOutlined, EllipsisOutlined } from '@react-devui/ui/icons';
1818

1919
export default function Demo() {
@@ -32,7 +32,7 @@ export default function Demo() {
3232
</button>,
3333
]}
3434
>
35-
<DCardHeader dAction={<a className="app-demo-link">More</a>}>Card title</DCardHeader>
35+
<DCardHeader dAction={<DButton dType="link">More</DButton>}>Card title</DCardHeader>
3636
<DCardContent>
3737
<div className="app-demo-container">
3838
<div>Some contents...</div>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { DId } from '../../utils/global';
2-
import type { DVirtualScrollRef } from '../_virtual-scroll';
32
import type { AbstractTreeNode, MultipleTreeNode } from '../tree';
3+
import type { DVirtualScrollRef } from '../virtual-scroll';
44
import type { DCascaderOption } from './Cascader';
55
import type { Subject } from 'rxjs';
66

@@ -10,8 +10,8 @@ import { useEffect, useRef } from 'react';
1010
import { usePrefixConfig, useTranslation, useEventCallback } from '../../hooks';
1111
import { LoadingOutlined, RightOutlined } from '../../icons';
1212
import { getClassName } from '../../utils';
13-
import { DVirtualScroll } from '../_virtual-scroll';
1413
import { DCheckbox } from '../checkbox';
14+
import { DVirtualScroll } from '../virtual-scroll';
1515

1616
export interface DListProps<ID extends DId, T> {
1717
dListId?: string;
@@ -217,9 +217,9 @@ export function DList<ID extends DId, T extends DCascaderOption<ID>>(props: DLis
217217
</li>
218218
);
219219
}}
220-
dGetSize={() => 32}
220+
dItemSize={32}
221221
dCompareItem={(a, b) => a.id === b.id}
222-
dCanFocus={(item) => item.enabled}
222+
dFocusable={(item) => item.enabled}
223223
dFocusItem={inFocusNode}
224224
dSize={264}
225225
dPadding={4}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import type { DId } from '../../utils/global';
2-
import type { DVirtualScrollRef } from '../_virtual-scroll';
32
import type { MultipleTreeNode } from '../tree';
3+
import type { DVirtualScrollRef } from '../virtual-scroll';
44
import type { DCascaderOption, DSearchOption } from './Cascader';
55
import type { Subject } from 'rxjs';
66

77
import React, { useEffect, useRef } from 'react';
88

99
import { useEventCallback, usePrefixConfig, useTranslation } from '../../hooks';
1010
import { getClassName } from '../../utils';
11-
import { DVirtualScroll } from '../_virtual-scroll';
1211
import { DCheckbox } from '../checkbox';
12+
import { DVirtualScroll } from '../virtual-scroll';
1313
import { getText, TREE_NODE_KEY } from './utils';
1414

1515
interface DSearchListProps<ID extends DId, T> {
@@ -166,9 +166,9 @@ export function DSearchList<ID extends DId, T extends DCascaderOption<ID>>(props
166166
</li>
167167
);
168168
}}
169-
dGetSize={() => 32}
169+
dItemSize={32}
170170
dCompareItem={(a, b) => a.value === b.value}
171-
dCanFocus={(item) => item[TREE_NODE_KEY].enabled}
171+
dFocusable={(item) => item[TREE_NODE_KEY].enabled}
172172
dFocusItem={dFocusOption}
173173
dSize={264}
174174
dPadding={4}

‎packages/ui/src/components/date-picker/DatePicker.tsx‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -115,21 +115,34 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDatePicker
115115
})}
116116
>
117117
{dPresetOptions ? (
118-
Object.keys(dPresetOptions).map((name) => (
119-
<DTag
120-
key={name}
121-
className={`${dPrefix}date-picker__footer-button`}
122-
dTheme="primary"
123-
onClick={() => {
124-
const d = dPresetOptions[name]();
125-
changeValue(d);
126-
dDPPRef.current?.updateView(d[pbPosition === 'start' ? 0 : 1]);
127-
dTPPRef.current?.updateView(d[pbPosition === 'start' ? 0 : 1]);
128-
}}
129-
>
130-
{name}
131-
</DTag>
132-
))
118+
Object.keys(dPresetOptions).map((name) => {
119+
const handleClick = () => {
120+
const d = dPresetOptions[name]();
121+
changeValue(d);
122+
dDPPRef.current?.updateView(d[pbPosition === 'start' ? 0 : 1]);
123+
dTPPRef.current?.updateView(d[pbPosition === 'start' ? 0 : 1]);
124+
};
125+
126+
return (
127+
<DTag
128+
key={name}
129+
className={`${dPrefix}date-picker__footer-button`}
130+
tabIndex={0}
131+
role="button"
132+
dTheme="primary"
133+
onKeyDown={(e) => {
134+
if (e.code === 'Enter' || e.code === 'Space') {
135+
e.preventDefault();
136+
137+
handleClick();
138+
}
139+
}}
140+
onClick={handleClick}
141+
>
142+
{name}
143+
</DTag>
144+
);
145+
})
133146
) : (
134147
<DButton
135148
dType="link"

‎packages/ui/src/components/dropdown/Dropdown.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,7 @@ function Dropdown<ID extends DId, T extends DDropdownOption<ID>>(
481481
handleKeyDown?.(e);
482482
} else if (e.code === 'Enter' || e.code === 'Space') {
483483
e.preventDefault();
484+
484485
changeVisible(true);
485486
}
486487
},

‎packages/ui/src/components/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,4 +127,7 @@ export { DTransfer } from './transfer';
127127
export type { DUploadProps, DUploadActionProps } from './upload';
128128
export { DUpload, DUploadAction } from './upload';
129129

130+
export type { DVirtualScrollProps } from './virtual-scroll';
131+
export { DVirtualScroll } from './virtual-scroll';
132+
130133
export { dayjs } from './dayjs';

‎packages/ui/src/components/pagination/Pagination.tsx‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DoubleLeftOutlined, DoubleRightOutlined, EllipsisOutlined, LeftOutlined
66
import { registerComponentMate, getClassName } from '../../utils';
77
import { DInput } from '../input';
88
import { DSelect } from '../select';
9+
import { getButtonRoleAttributes } from './utils';
910

1011
export interface DPaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
1112
dActive?: number;
@@ -98,6 +99,9 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
9899
if (dCompose.includes('pages')) {
99100
prevNode = (
100101
<li
102+
{...getButtonRoleAttributes(() => {
103+
changeActive(active - 1);
104+
}, active === 1)}
101105
className={getClassName(
102106
`${dPrefix}pagination__item`,
103107
`${dPrefix}pagination__item--button`,
@@ -108,28 +112,21 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
108112
}
109113
)}
110114
title={t('Pagination', 'Previous page')}
111-
role="button"
112-
aria-disabled={active === 1}
113-
onClick={() => {
114-
changeActive(active - 1);
115-
}}
116115
>
117116
{dCustomRender && dCustomRender.prev ? dCustomRender.prev : <LeftOutlined />}
118117
</li>
119118
);
120119

121120
nextNode = (
122121
<li
122+
{...getButtonRoleAttributes(() => {
123+
changeActive(active + 1);
124+
}, active === lastPage)}
123125
className={getClassName(`${dPrefix}pagination__item`, `${dPrefix}pagination__item--button`, {
124126
'is-disabled': active === lastPage,
125127
[`${dPrefix}pagination__item--border`]: !(dCustomRender && dCustomRender.next),
126128
})}
127129
title={t('Pagination', 'Next page')}
128-
role="button"
129-
aria-disabled={active === lastPage}
130-
onClick={() => {
131-
changeActive(active + 1);
132-
}}
133130
>
134131
{dCustomRender && dCustomRender.next ? dCustomRender.next : <RightOutlined />}
135132
</li>
@@ -271,17 +268,16 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
271268
if (n === 'prev5') {
272269
return (
273270
<li
271+
{...getButtonRoleAttributes(() => {
272+
changeActive(active - 5);
273+
})}
274274
key="prev5"
275275
className={getClassName(
276276
`${dPrefix}pagination__item`,
277277
`${dPrefix}pagination__item--button`,
278278
`${dPrefix}pagination__item--jump5`
279279
)}
280280
title={t('Pagination', '5 pages forward')}
281-
role="button"
282-
onClick={() => {
283-
changeActive(active - 5);
284-
}}
285281
>
286282
<DoubleLeftOutlined className={`${dPrefix}pagination__jump5-icon`} />
287283
<div className={`${dPrefix}pagination__ellipsis`}>
@@ -292,17 +288,16 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
292288
} else if (n === 'next5') {
293289
return (
294290
<li
291+
{...getButtonRoleAttributes(() => {
292+
changeActive(active + 5);
293+
})}
295294
key="next5"
296295
className={getClassName(
297296
`${dPrefix}pagination__item`,
298297
`${dPrefix}pagination__item--button`,
299298
`${dPrefix}pagination__item--jump5`
300299
)}
301300
title={t('Pagination', '5 pages backward')}
302-
role="button"
303-
onClick={() => {
304-
changeActive(active + 5);
305-
}}
306301
>
307302
<DoubleRightOutlined className={`${dPrefix}pagination__jump5-icon`} />
308303
<div className={`${dPrefix}pagination__ellipsis`}>

0 commit comments

Comments
 (0)