feat(VirtualList): consider as items of the same height by default

Author: youluna

docs/virtual-list/demo/basic.md

@@ -32,8 +32,6 @@ const generateLi = (index = 'index') => {
 for (let i = 0; i < 1000; i++) {
     dataSource.push(generateLi(i));
 }
-console.log(dataSource)
-const getHeight = index => index % 3 === 0 ? 20 : 30;
 
 const demo = (
     <div className={'virtual-box'}>

docs/virtual-list/demo/initial-index.md

@@ -1,13 +1,13 @@
 # 设置初始位置
 
-- order: 0
+- order: 1
 
 使用 jumpIndex 设置初始位置
 
 :::lang=en-us
 # Basic
 
-- order: 0
+- order: 1
 
 Use jumpIndex to set first item.
 
@@ -21,11 +21,7 @@ import { VirtualList } from '@alifd/next';
 const dataSource = [];
 
 function generateLi(index) {
-    if (index % 3 === 0) {
-        return (<li key={`key-${index}`} style={{lineHeight: '30px', background: '#5f83ff', color: '#fff'}}>key-{index}</li>);
-    } else {
-        return (<li key={`key-${index}`}  style={{lineHeight: '20px'}}>key-{index}</li>);
-    }
+    return (<li key={`key-${index}`}  style={{lineHeight: '20px'}}>key-{index}</li>);
 }
 function generateData(len) {
     for (let i = 0; i < len; i++) {
@@ -35,20 +31,9 @@ function generateData(len) {
 
 class App extends React.Component  {
     state = {
-        initial: 20,
+        initial: 50,
         dataSource: generateData(1000)
     }
-    componentDidMount() {
-        setTimeout(()=> {
-            const instance = this.refs.virtual.getInstance();
-            instance.scrollTo(50);
-        }, 200);
-
-    }
-
-    getHeight(index) {
-        return index % 3 === 0 ? 30 : 20;
-    }
     onClick() {
         this.setState({
             initial: this.state.initial + 20
@@ -61,7 +46,7 @@ class App extends React.Component  {
                 <br/>
                 <br/>
                 <div className={'virtual-box'}>
-                    <VirtualList ref="virtual" jumpIndex={this.state.initial} itemSizeGetter={this.getHeight.bind(this)}>
+                    <VirtualList ref="virtual" jumpIndex={this.state.initial}>
                         {dataSource}
                     </VirtualList>
                 </div>

docs/virtual-list/demo/item-size-getter.md

@@ -0,0 +1,95 @@
+# 不等高的item
+
+- order: 2
+
+使用 jumpIndex 设置初始位置, 并设置 itemSizeGetter
+
+:::lang=en-us
+# Basic
+
+- order: 2
+
+Use jumpIndex and itemSizeGetter to set first item in visual area.
+
+:::
+
+---
+
+````jsx
+import { VirtualList } from '@alifd/next';
+
+const dataSource = [];
+
+function generateLi(index) {
+    if (index % 3 === 0) {
+        return (<li key={`key-${index}`} style={{lineHeight: '30px', background: '#5f83ff', color: '#fff'}}>key-{index}</li>);
+    } else {
+        return (<li key={`key-${index}`}  style={{lineHeight: '20px'}}>key-{index}</li>);
+    }
+}
+function generateData(len) {
+    for (let i = 0; i < len; i++) {
+        dataSource.push(generateLi(i));
+    }
+}
+
+class App extends React.Component  {
+    state = {
+        initial: 20,
+        dataSource: generateData(1000)
+    }
+
+    componentDidMount() {
+        setTimeout(()=> {
+            const instance = this.refs.virtual.getInstance();
+            instance.scrollTo(50);
+        }, 200);
+
+    }
+
+    getHeight(index) {
+        return index % 3 === 0 ? 30 : 20;
+    }
+
+    onClick() {
+        this.setState({
+            initial: this.state.initial + 20
+        })
+    }
+
+    render() {
+        return (
+            <div>
+                <button onClick={this.onClick.bind(this)}>jump to {this.state.initial + 20}</button>
+                <br/>
+                <br/>
+                <div className={'virtual-box'}>
+                    <VirtualList ref="virtual" jumpIndex={this.state.initial} itemSizeGetter={this.getHeight.bind(this)}>
+                        {dataSource}
+                    </VirtualList>
+                </div>
+            </div>
+        );
+    }
+}
+
+ReactDOM.render(<App />, mountNode);
+````
+
+````css
+.virtual-box {
+    height: 200px;
+    width: 200px;
+    border: 1px solid #ddd;
+    overflow: auto;
+}
+.virtual-box ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+.virtual-box li {
+    padding-left: 10px;
+    border-bottom: 1px solid #333;
+}
+````

docs/virtual-list/index.en-us.md

@@ -18,4 +18,4 @@
 | itemsRenderer | items parent dom，by default (items, ref) => <ul ref={ref}>{items}</ul><br><br>**signature**:<br>Function() => void | Function | (items, ref) => &lt;ul ref={ref}>{items}&lt;/ul> |
 | threshold     | height of threshold                                                                                     | Number   | 100                                              |
 | itemSizeGetter | get item's height<br><br>**signature**:<br>Function() => void                                          | Function | -                                                |
-| jumpIndex   | set this to jump to the index you want, works only when you set itemSizeGetter                                                          | Number   | 0                                                |
+| jumpIndex   | the index you want to jump to, set itemSizeGetter if the height of items vary                                                      | Number   | 0                                                |

docs/virtual-list/index.md

@@ -18,4 +18,4 @@
 | itemsRenderer  | 父渲染函数，默认为 (items, ref) => <ul ref={ref}>{items}</ul><br><br>**签名**:<br>Function() => void | Function | (items, ref) => &lt;ul ref={ref}>{items}&lt;/ul> |
 | threshold      | 缓冲区高度                                                                                     | Number   | 100                                              |
 | itemSizeGetter | 获取item高度的函数<br><br>**签名**:<br>Function() => void                                          | Function | -                                                |
-| jumpIndex   | 设置初始位置，需要设置 itemSizeGetter 才能生效                                                           | Number   | 0                                                |
+| jumpIndex      | 设置跳转位置，需要设置 itemSizeGetter 才能生效, 不设置认为元素等高并取第一个元素高度作为默认高                                  | Number   | 0                                                |

src/virtual-list/virtual-list.jsx

@@ -48,7 +48,7 @@ export default class VirtualList extends Component {
          */
         itemSizeGetter: PropTypes.func,
         /**
-         * 设置跳转位置，需要设置 itemSizeGetter 才能生效
+         * 设置跳转位置，需要设置 itemSizeGetter 才能生效, 不设置认为元素等高并取第一个元素高度作为默认高
          */
         jumpIndex: PropTypes.number,
         className: PropTypes.string
@@ -153,7 +153,7 @@ export default class VirtualList extends Component {
         el = el.parentElement;
 
         switch (window.getComputedStyle(el).overflowY) {
-            case 'auto': case 'scroll': case 'overlay': return el;
+            case 'auto': case 'scroll': case 'overlay': case 'visible': return el;
         }
 
         return window;
@@ -338,14 +338,24 @@ export default class VirtualList extends Component {
 
     getSizeOf(index) {
         const { cache } = this;
-        const { itemSizeGetter } = this.props;
+        const { itemSizeGetter, jumpIndex } = this.props;
+
         // Try the cache.
         if (index in cache) {
             return cache[index];
         }
         if (itemSizeGetter) {
             return itemSizeGetter(index);
         }
+
+        const height = Object.values(this.cache).pop();
+        if (!this.defaultItemHeight && jumpIndex > -1 && height) {
+            this.defaultItemHeight = height;
+        }
+
+        if (this.defaultItemHeight) {
+            return this.defaultItemHeight;
+        }
     }
 
     constrain(from, size, {children, minSize}) {