feat: support fullHeight prop

react-component · Sep 3, 2019 · ed864b0 · ed864b0
1 parent 0579ebf
commit ed864b0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/List.tsx b/src/List.tsx
@@ -45,6 +45,8 @@ export interface ListProps<T> extends React.HTMLAttributes<any> {
   data: T[];
   height?: number;
   itemHeight?: number;
+  /** If not match virtual scroll condition, Set List still use height of container. */
+  fullHeight?: boolean;
   itemKey: string | ((item: T) => string);
   component?: string | React.FC<any> | React.ComponentClass<any>;
   disabled?: boolean;
@@ -706,6 +708,7 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
       component: Component = 'div',
       height,
       itemHeight,
+      fullHeight = true,
       data,
       children,
       itemKey,
@@ -726,7 +729,11 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
 
       return (
         <Component
-          style={height ? { ...style, height, ...ScrollStyle } : style}
+          style={
+            height
+              ? { ...style, [fullHeight ? 'height' : 'maxHeight']: height, ...ScrollStyle }
+              : style
+          }
           className={mergedClassName}
           {...restProps}
           onScroll={this.onRawScroll}

diff --git a/tests/list.test.js b/tests/list.test.js
@@ -29,10 +29,25 @@ describe('List', () => {
       expect(wrapper.find(Filler).props().offset).toBeFalsy();
     });
 
-    it('height over itemHeight', () => {
-      const wrapper = genList({ data: genData(1), itemHeight: 1, height: 999 });
+    describe('height over itemHeight', () => {
+      it('full height', () => {
+        const wrapper = genList({ data: genData(1), itemHeight: 1, height: 999 });
+        expect(wrapper.find(Filler).props().offset).toBeFalsy();
+        expect(wrapper.find('ul').props().style).toEqual(expect.objectContaining({ height: 999 }));
+      });
 
-      expect(wrapper.find(Filler).props().offset).toBeFalsy();
+      it('without full height', () => {
+        const wrapper = genList({
+          data: genData(1),
+          itemHeight: 1,
+          height: 999,
+          fullHeight: false,
+        });
+        expect(wrapper.find(Filler).props().offset).toBeFalsy();
+        expect(wrapper.find('ul').props().style).toEqual(
+          expect.objectContaining({ maxHeight: 999 }),
+        );
+      });
     });
   });