diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..f307fb19 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "endOfLine": "lf", + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "all", + "printWidth": 100 +} diff --git a/src/List.tsx b/src/List.tsx index 96c5305c..77abcbbe 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -61,7 +61,10 @@ export interface ListProps extends React.HTMLAttributes { fullHeight?: boolean; itemKey: Key | ((item: T) => Key); component?: string | React.FC | React.ComponentClass; + /** 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; @@ -158,7 +161,7 @@ class List extends React.Component, ListState> { 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, }; } @@ -189,7 +192,7 @@ class List extends React.Component, ListState> { */ 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; @@ -214,7 +217,7 @@ class List extends React.Component, ListState> { 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'; @@ -734,6 +737,7 @@ class List extends React.Component, ListState> { itemKey, onSkipRender, disabled, + virtual, ...restProps } = this.props; @@ -745,7 +749,7 @@ class List extends React.Component, ListState> { * 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 ( height; +export function requireVirtual( + height: number, + itemHeight: number, + count: number, + virtual: boolean, +) { + return virtual !== false && typeof height === 'number' && count * itemHeight > height; } diff --git a/tests/list.test.js b/tests/list.test.js index 65f9a746..ef213902 100644 --- a/tests/list.test.js +++ b/tests/list.test.js @@ -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); + }); });