support render pure if all item is visible

Author: zombieJ

examples/animate.tsx

@@ -15,7 +15,7 @@ function genItem() {
 }
 
 const originDataSource: Item[] = [];
-for (let i = 0; i < 19; i += 1) {
+for (let i = 0; i < 9; i += 1) {
   originDataSource.push(genItem());
 }
 

src/Filler.tsx

@@ -4,30 +4,40 @@ interface FillerProps {
   /** Virtual filler height. Should be `count * itemMinHeight` */
   height: number;
   /** Set offset of visible items. Should be the top of start item position */
-  offset: number;
+  offset?: number;
 
   children: React.ReactNode;
 }
 
 /**
  * Fill component to provided the scroll content real height.
  */
-const Filler: React.FC<FillerProps> = ({ height, offset, children }): React.ReactElement => (
-  <div style={{ height, position: 'relative', overflow: 'hidden' }}>
-    <div
-      style={{
-        marginTop: offset,
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 0,
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      {children}
+const Filler: React.FC<FillerProps> = ({ height, offset, children }): React.ReactElement => {
+  let outerStyle: React.CSSProperties = {};
+
+  let innerStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  if (offset !== undefined) {
+    outerStyle = { height, position: 'relative', overflow: 'hidden' };
+
+    innerStyle = {
+      ...innerStyle,
+      marginTop: offset,
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+    };
+  }
+
+  return (
+    <div style={outerStyle}>
+      <div style={innerStyle}>{children}</div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Filler;

src/List.tsx

@@ -150,7 +150,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
    */
   public renderChildren = (list: T[], startIndex: number, renderFunc: RenderFunc<T>) =>
     // We should measure rendered item height
-     list.map((item, index) => {
+    list.map((item, index) => {
       const node = renderFunc(item) as React.ReactElement;
       const eleIndex = startIndex + index;
       const eleKey = this.getItemKey(eleIndex);
@@ -162,8 +162,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
           this.itemElements[eleKey] = ele;
         },
       });
-    })
-  ;
+    });
 
   public render() {
     const {
@@ -177,11 +176,18 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
       ...restProps
     } = this.props;
 
-    // Render pure list if not set height
-    if (height === undefined) {
+    const mergedStyle = {
+      ...style,
+      height,
+      overflowY: 'auto',
+      overflowAnchor: 'none',
+    };
+
+    // Render pure list if not set height or height is enough for all items
+    if (height === undefined || dataSource.length * itemHeight <= height) {
       return (
-        <Component style={style} {...restProps}>
-          {this.renderChildren(dataSource, 0, children)}
+        <Component style={mergedStyle} {...restProps}>
+          <Filler height={height}>{this.renderChildren(dataSource, 0, children)}</Filler>
         </Component>
       );
     }
@@ -190,17 +196,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     const contentHeight = dataSource.length * itemHeight;
 
     return (
-      <Component
-        style={{
-          ...style,
-          height,
-          overflowY: 'auto',
-          overflowAnchor: 'none',
-        }}
-        {...restProps}
-        onScroll={this.onScroll}
-        ref={this.listRef}
-      >
+      <Component style={mergedStyle} {...restProps} onScroll={this.onScroll} ref={this.listRef}>
         <Filler height={contentHeight} offset={status === 'MEASURE_DONE' ? startItemTop : 0}>
           {this.renderChildren(dataSource.slice(startIndex, endIndex + 1), startIndex, children)}
         </Filler>

src/util.ts

@@ -32,6 +32,10 @@ export function getScrollPercentage(element: HTMLElement | null) {
   }
 
   const { scrollTop, scrollHeight, clientHeight } = element;
+  if (scrollHeight <= clientHeight) {
+    return 0;
+  }
+
   const scrollTopPtg = scrollTop / (scrollHeight - clientHeight);
   return scrollTopPtg;
 }