Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"endOfLine": "lf",
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100
}
12 changes: 8 additions & 4 deletions src/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,10 @@ export interface ListProps<T> extends React.HTMLAttributes<any> {
fullHeight?: boolean;
itemKey: Key | ((item: T) => Key);
component?: string | React.FC<any> | React.ComponentClass<any>;
/** Disable scroll check. Usually used on animation control */
disabled?: boolean;
/** Set `false` will always use real scroll instead of virtual one */
virtual?: boolean;

/** When `disabled`, trigger if changed item not render. */
onSkipRender?: () => void;
Expand Down Expand Up @@ -158,7 +161,7 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
startIndex: 0,
endIndex: 0,
startItemTop: 0,
isVirtual: requireVirtual(props.height, props.itemHeight, props.data.length),
isVirtual: requireVirtual(props.height, props.itemHeight, props.data.length, props.virtual),
itemCount: props.data.length,
};
}
Expand Down Expand Up @@ -189,7 +192,7 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
*/
public componentDidUpdate() {
const { status } = this.state;
const { data, height, itemHeight, disabled, onSkipRender } = this.props;
const { data, height, itemHeight, disabled, onSkipRender, virtual } = this.props;
const prevData: T[] = this.cachedProps.data || [];

let changedItemIndex: number = null;
Expand All @@ -214,7 +217,7 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
return;
}

const isVirtual = requireVirtual(height, itemHeight, data.length);
const isVirtual = requireVirtual(height, itemHeight, data.length, virtual);
let nextStatus = status;
if (this.state.isVirtual !== isVirtual) {
nextStatus = isVirtual ? 'SWITCH_TO_VIRTUAL' : 'SWITCH_TO_RAW';
Expand Down Expand Up @@ -734,6 +737,7 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
itemKey,
onSkipRender,
disabled,
virtual,
...restProps
} = this.props;

Expand All @@ -745,7 +749,7 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
* Virtual list switch is works on component updated.
* We should double check here if need cut the content.
*/
const shouldVirtual = requireVirtual(height, itemHeight, data.length);
const shouldVirtual = requireVirtual(height, itemHeight, data.length, virtual);

return (
<Component
Expand Down
9 changes: 7 additions & 2 deletions src/utils/itemUtil.ts
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,11 @@ export function getCompareItemRelativeTop({
return originCompareItemTop;
}

export function requireVirtual(height: number, itemHeight: number, count: number) {
return typeof height === 'number' && count * itemHeight > height;
export function requireVirtual(
height: number,
itemHeight: number,
count: number,
virtual: boolean,
) {
return virtual !== false && typeof height === 'number' && count * itemHeight > height;
}
5 changes: 5 additions & 0 deletions tests/list.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -186,4 +186,9 @@ describe('List', () => {
setTimeout(done, 50);
});
});

it('`virtual` is false', () => {
const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), virtual: false });
expect(wrapper.find('li')).toHaveLength(100);
});
});