feat: support prefixCls

Author: zombieJ

package.json

@@ -42,7 +42,6 @@
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/warning": "^3.0.0",
-    "classnames": "^2.2.6",
     "cross-env": "^5.2.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
@@ -55,6 +54,7 @@
     "typescript": "^3.5.2"
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "rc-util": "^4.8.0"
   }
 }

src/Filler.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface FillerProps {
+  prefixCls?: string;
   /** Virtual filler height. Should be `count * itemMinHeight` */
   height: number;
   /** Set offset of visible items. Should be the top of start item position */
@@ -12,7 +14,12 @@ interface FillerProps {
 /**
  * Fill component to provided the scroll content real height.
  */
-const Filler: React.FC<FillerProps> = ({ height, offset, children }): React.ReactElement => {
+const Filler: React.FC<FillerProps> = ({
+  height,
+  offset,
+  children,
+  prefixCls,
+}): React.ReactElement => {
   let outerStyle: React.CSSProperties = {};
 
   let innerStyle: React.CSSProperties = {
@@ -36,7 +43,14 @@ const Filler: React.FC<FillerProps> = ({ height, offset, children }): React.Reac
 
   return (
     <div style={outerStyle}>
-      <div style={innerStyle}>{children}</div>
+      <div
+        style={innerStyle}
+        className={classNames({
+          [`${prefixCls}-holder-inner`]: prefixCls,
+        })}
+      >
+        {children}
+      </div>
     </div>
   );
 };

src/List.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import Filler from './Filler';
 import {
   getElementScrollPercentage,
@@ -39,6 +40,7 @@ export interface ScrollInfo {
 }
 
 export interface ListProps<T> extends React.HTMLAttributes<any> {
+  prefixCls?: string;
   children: RenderFunc<T>;
   data: T[];
   height?: number;
@@ -548,7 +550,9 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
   public render() {
     const { isVirtual, itemCount } = this.state;
     const {
+      prefixCls,
       style,
+      className,
       component: Component = 'div',
       height,
       itemHeight,
@@ -559,16 +563,21 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
       ...restProps
     } = this.props;
 
+    const mergedClassName = classNames(prefixCls, className);
+
     // Render pure list if not set height or height is enough for all items
     if (!isVirtual) {
       return (
         <Component
           style={height ? { ...style, height, ...ScrollStyle } : style}
+          className={mergedClassName}
           {...restProps}
           onScroll={this.onRawScroll}
           ref={this.listRef}
         >
-          <Filler height={height}>{this.renderChildren(data, 0, children)}</Filler>
+          <Filler prefixCls={prefixCls} height={height}>
+            {this.renderChildren(data, 0, children)}
+          </Filler>
         </Component>
       );
     }
@@ -584,8 +593,18 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
     const contentHeight = itemCount * itemHeight * ITEM_SCALE_RATE;
 
     return (
-      <Component style={mergedStyle} {...restProps} onScroll={this.onScroll} ref={this.listRef}>
-        <Filler height={contentHeight} offset={status === 'MEASURE_DONE' ? startItemTop : 0}>
+      <Component
+        style={mergedStyle}
+        className={mergedClassName}
+        {...restProps}
+        onScroll={this.onScroll}
+        ref={this.listRef}
+      >
+        <Filler
+          prefixCls={prefixCls}
+          height={contentHeight}
+          offset={status === 'MEASURE_DONE' ? startItemTop : 0}
+        >
           {this.renderChildren(data.slice(startIndex, endIndex + 1), startIndex, children)}
         </Filler>
       </Component>

src/mock.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import OriginList from './List';
 import Filler from './Filler';
 
@@ -9,7 +10,9 @@ class List<T> extends OriginList<T> {
 
   render() {
     const {
+      prefixCls,
       style,
+      className,
       component: Component = 'div',
       height,
       itemHeight,
@@ -20,9 +23,13 @@ class List<T> extends OriginList<T> {
       ...restProps
     } = this.props;
 
+    const mergedClassName = classNames(prefixCls, className);
+
     return (
-      <Component style={{ ...style, height }} {...restProps}>
-        <Filler height={height}>{this.renderChildren(data, 0, children)}</Filler>
+      <Component style={{ ...style, height }} className={mergedClassName} {...restProps}>
+        <Filler prefixCls={prefixCls} height={height}>
+          {this.renderChildren(data, 0, children)}
+        </Filler>
       </Component>
     );
   }

tests/props.test.js

@@ -30,4 +30,14 @@ describe('Props', () => {
         .key(),
     ).toBe('1128');
   });
+
+  it('prefixCls', () => {
+    const wrapper = mount(
+      <List data={[0]} itemKey={id => id} prefixCls="prefix">
+        {id => <div>{id}</div>}
+      </List>,
+    );
+
+    expect(wrapper.find('.prefix-holder-inner').length).toBeTruthy();
+  });
 });