refactor(list): rewrite with hook (#23542)

* refactor(list): rewrite with hook

* fix lint

* fix lint

* fix lint

* fix Empty style dep

Co-authored-by: afc163 <afc163@gmail.com>

.depslintrc.js

@@ -10,6 +10,10 @@ module.exports = {
     '**/*.json',
   ],
   modulePattern: [
+    {
+      pattern: /ConfigContext.*renderEmpty/ms,
+      module: '../empty',
+    },
     {
       pattern: /ConfigConsumer.*renderEmpty/ms,
       module: '../empty',

components/list/Item.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { ListGridType, ColumnType } from './index';
+import { ListGridType, ColumnType, ListContext } from './index';
 import { Col } from '../grid';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import { cloneElement } from '../_util/reactNode';
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -26,54 +26,48 @@ export interface ListItemMetaProps {
   title?: React.ReactNode;
 }
 
-export const Meta = (props: ListItemMetaProps) => (
-  <ConfigConsumer>
-    {({ getPrefixCls }: ConfigConsumerProps) => {
-      const {
-        prefixCls: customizePrefixCls,
-        className,
-        avatar,
-        title,
-        description,
-        ...others
-      } = props;
+export const Meta: React.FC<ListItemMetaProps> = ({
+  prefixCls: customizePrefixCls,
+  className,
+  avatar,
+  title,
+  description,
+  ...others
+}) => {
+  const { getPrefixCls } = React.useContext(ConfigContext);
 
-      const prefixCls = getPrefixCls('list', customizePrefixCls);
-      const classString = classNames(`${prefixCls}-item-meta`, className);
+  const prefixCls = getPrefixCls('list', customizePrefixCls);
+  const classString = classNames(`${prefixCls}-item-meta`, className);
 
-      const content = (
-        <div className={`${prefixCls}-item-meta-content`}>
-          {title && <h4 className={`${prefixCls}-item-meta-title`}>{title}</h4>}
-          {description && <div className={`${prefixCls}-item-meta-description`}>{description}</div>}
-        </div>
-      );
+  const content = (
+    <div className={`${prefixCls}-item-meta-content`}>
+      {title && <h4 className={`${prefixCls}-item-meta-title`}>{title}</h4>}
+      {description && <div className={`${prefixCls}-item-meta-description`}>{description}</div>}
+    </div>
+  );
 
-      return (
-        <div {...others} className={classString}>
-          {avatar && <div className={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
-          {(title || description) && content}
-        </div>
-      );
-    }}
-  </ConfigConsumer>
-);
+  return (
+    <div {...others} className={classString}>
+      {avatar && <div className={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
+      {(title || description) && content}
+    </div>
+  );
+};
 
 function getGrid(grid: ListGridType, t: ColumnType) {
   return grid[t] && Math.floor(24 / grid[t]!);
 }
 
-export default class Item extends React.Component<ListItemProps, any> {
-  static Meta: typeof Meta = Meta;
+export interface ListItemTypeProps extends React.FC<ListItemProps> {
+  Meta: typeof Meta;
+}
 
-  static contextTypes = {
-    grid: PropTypes.any,
-    itemLayout: PropTypes.string,
-  };
+const Item: ListItemTypeProps = props => {
+  const { grid, itemLayout } = React.useContext(ListContext);
+  const { getPrefixCls } = React.useContext(ConfigContext);
 
-  context: any;
-
-  isItemContainsTextNodeAndNotSingular() {
-    const { children } = this.props;
+  const isItemContainsTextNodeAndNotSingular = () => {
+    const { children } = props;
     let result;
     React.Children.forEach(children, (element: React.ReactElement<any>) => {
       if (typeof element === 'string') {
@@ -81,79 +75,73 @@ export default class Item extends React.Component<ListItemProps, any> {
       }
     });
     return result && React.Children.count(children) > 1;
-  }
+  };
 
-  isFlexMode() {
-    const { extra } = this.props;
-    const { itemLayout } = this.context;
+  const isFlexMode = () => {
+    const { extra } = props;
     if (itemLayout === 'vertical') {
       return !!extra;
     }
-    return !this.isItemContainsTextNodeAndNotSingular();
-  }
-
-  renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { grid, itemLayout } = this.context;
-    const {
-      prefixCls: customizePrefixCls,
-      children,
-      actions,
-      extra,
-      className,
-      ...others
-    } = this.props;
-    const prefixCls = getPrefixCls('list', customizePrefixCls);
-    const actionsContent = actions && actions.length > 0 && (
-      <ul className={`${prefixCls}-item-action`} key="actions">
-        {actions.map((action: React.ReactNode, i: number) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <li key={`${prefixCls}-item-action-${i}`}>
-            {action}
-            {i !== actions.length - 1 && <em className={`${prefixCls}-item-action-split`} />}
-          </li>
-        ))}
-      </ul>
-    );
-    const Tag = grid ? 'div' : 'li';
-    const itemChildren = (
-      <Tag
-        {...(others as any)} // `li` element `onCopy` prop args is not same as `div`
-        className={classNames(`${prefixCls}-item`, className, {
-          [`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
-        })}
-      >
-        {itemLayout === 'vertical' && extra
-          ? [
-              <div className={`${prefixCls}-item-main`} key="content">
-                {children}
-                {actionsContent}
-              </div>,
-              <div className={`${prefixCls}-item-extra`} key="extra">
-                {extra}
-              </div>,
-            ]
-          : [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
-      </Tag>
-    );
-
-    return grid ? (
-      <Col
-        span={getGrid(grid, 'column')}
-        xs={getGrid(grid, 'xs')}
-        sm={getGrid(grid, 'sm')}
-        md={getGrid(grid, 'md')}
-        lg={getGrid(grid, 'lg')}
-        xl={getGrid(grid, 'xl')}
-        xxl={getGrid(grid, 'xxl')}
-      >
-        {itemChildren}
-      </Col>
-    ) : (
-      itemChildren
-    );
+    return !isItemContainsTextNodeAndNotSingular();
   };
 
-  render() {
-    return <ConfigConsumer>{this.renderItem}</ConfigConsumer>;
-  }
-}
+  const { prefixCls: customizePrefixCls, children, actions, extra, className, ...others } = props;
+  const prefixCls = getPrefixCls('list', customizePrefixCls);
+  const actionsContent = actions && actions.length > 0 && (
+    <ul className={`${prefixCls}-item-action`} key="actions">
+      {actions.map((action: React.ReactNode, i: number) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <li key={`${prefixCls}-item-action-${i}`}>
+          {action}
+          {i !== actions.length - 1 && <em className={`${prefixCls}-item-action-split`} />}
+        </li>
+      ))}
+    </ul>
+  );
+  const Tag = grid ? 'div' : 'li';
+  const itemChildren = (
+    <Tag
+      {...(others as any)} // `li` element `onCopy` prop args is not same as `div`
+      className={classNames(`${prefixCls}-item`, className, {
+        [`${prefixCls}-item-no-flex`]: !isFlexMode(),
+      })}
+    >
+      {itemLayout === 'vertical' && extra
+        ? [
+            <div className={`${prefixCls}-item-main`} key="content">
+              {children}
+              {actionsContent}
+            </div>,
+            <div className={`${prefixCls}-item-extra`} key="extra">
+              {extra}
+            </div>,
+          ]
+        : [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
+    </Tag>
+  );
+
+  return grid ? (
+    <Col
+      span={getGrid(grid, 'column')}
+      xs={getGrid(grid, 'xs')}
+      sm={getGrid(grid, 'sm')}
+      md={getGrid(grid, 'md')}
+      lg={getGrid(grid, 'lg')}
+      xl={getGrid(grid, 'xl')}
+      xxl={getGrid(grid, 'xxl')}
+    >
+      {itemChildren}
+    </Col>
+  ) : (
+    itemChildren
+  );
+};
+
+Item.Meta = Meta;
+
+Item.contextTypes = {
+  grid: PropTypes.any,
+  itemLayout: PropTypes.string,
+};
+
+export default Item;

components/list/index.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import Spin, { SpinProps } from '../spin';
-import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
+import { RenderEmptyHandler, ConfigContext } from '../config-provider';
 
 import Pagination, { PaginationConfig } from '../pagination';
 import { Row } from '../grid';
@@ -58,73 +57,49 @@ export interface ListLocale {
   emptyText: React.ReactNode | (() => React.ReactNode);
 }
 
-interface ListState {
-  paginationCurrent: number;
-  paginationSize: number;
+export interface ListConsumerProps {
+  grid?: any;
+  itemLayout?: string;
 }
 
-export default class List<T> extends React.Component<ListProps<T>, ListState> {
-  static Item: typeof Item = Item;
+export const ListContext = React.createContext<ListConsumerProps>({});
 
-  static childContextTypes = {
-    grid: PropTypes.any,
-    itemLayout: PropTypes.string,
-  };
+export const ListConsumer = ListContext.Consumer;
 
-  static defaultProps = {
-    dataSource: [],
-    bordered: false,
-    split: true,
-    loading: false,
-    pagination: false as ListProps<any>['pagination'],
-  };
+function List<T>({ pagination, ...props }: ListProps<T>) {
+  const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
 
-  defaultPaginationProps = {
+  const [paginationCurrent, setPaginationCurrent] = React.useState(
+    paginationObj.defaultCurrent || 1,
+  );
+  const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize || 10);
+
+  const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
+
+  const defaultPaginationProps = {
     current: 1,
     total: 0,
   };
 
-  private keys: { [key: string]: string } = {};
+  const keys: { [key: string]: string } = {};
 
-  private onPaginationChange = this.triggerPaginationEvent('onChange');
-
-  private onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
-
-  constructor(props: ListProps<T>) {
-    super(props);
-
-    const { pagination } = props;
-    const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
-
-    this.state = {
-      paginationCurrent: paginationObj.defaultCurrent || 1,
-      paginationSize: paginationObj.defaultPageSize || 10,
-    };
-  }
-
-  getChildContext() {
-    return {
-      grid: this.props.grid,
-      itemLayout: this.props.itemLayout,
-    };
-  }
-
-  triggerPaginationEvent(eventName: string) {
+  const triggerPaginationEvent = (eventName: string) => {
     return (page: number, pageSize: number) => {
-      const { pagination } = this.props;
-      this.setState({
-        paginationCurrent: page,
-        paginationSize: pageSize,
-      });
+      setPaginationCurrent(page);
+      setPaginationSize(pageSize);
       if (pagination && (pagination as any)[eventName]) {
         (pagination as any)[eventName](page, pageSize);
       }
     };
-  }
+  };
 
-  renderItem = (item: any, index: number) => {
-    const { renderItem, rowKey } = this.props;
-    if (!renderItem) return null;
+  const onPaginationChange = triggerPaginationEvent('onChange');
+
+  const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
+
+  const renderItem = (item: any, index: number) => {
+    const { rowKey } = props;
+    if (!props.renderItem) return null;
 
     let key;
 
@@ -140,138 +115,136 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
       key = `list-item-${index}`;
     }
 
-    this.keys[index] = key;
+    keys[index] = key;
 
-    return renderItem(item, index);
+    return props.renderItem(item, index);
   };
 
-  isSomethingAfterLastItem() {
-    const { loadMore, pagination, footer } = this.props;
+  const isSomethingAfterLastItem = () => {
+    const { loadMore, footer } = props;
     return !!(loadMore || pagination || footer);
-  }
+  };
 
-  renderEmpty = (prefixCls: string, renderEmpty: RenderEmptyHandler) => {
-    const { locale } = this.props;
+  const renderEmptyFunc = (prefixCls: string, renderEmptyHandler: RenderEmptyHandler) => {
+    const { locale } = props;
 
     return (
       <div className={`${prefixCls}-empty-text`}>
-        {(locale && locale.emptyText) || renderEmpty('List')}
+        {(locale && locale.emptyText) || renderEmptyHandler('List')}
       </div>
     );
   };
 
-  renderList = ({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => {
-    const { paginationCurrent, paginationSize } = this.state;
-    const {
-      prefixCls: customizePrefixCls,
-      bordered,
-      split,
-      className,
-      children,
-      itemLayout,
-      loadMore,
-      pagination,
-      grid,
-      dataSource = [],
-      size,
-      header,
-      footer,
-      loading,
-      ...rest
-    } = this.props;
+  const {
+    prefixCls: customizePrefixCls,
+    bordered,
+    split,
+    className,
+    children,
+    itemLayout,
+    loadMore,
+    grid,
+    dataSource = [],
+    size,
+    header,
+    footer,
+    loading,
+    ...rest
+  } = props;
 
-    const prefixCls = getPrefixCls('list', customizePrefixCls);
-    let loadingProp = loading;
-    if (typeof loadingProp === 'boolean') {
-      loadingProp = {
-        spinning: loadingProp,
-      };
+  const prefixCls = getPrefixCls('list', customizePrefixCls);
+  let loadingProp = loading;
+  if (typeof loadingProp === 'boolean') {
+    loadingProp = {
+      spinning: loadingProp,
+    };
+  }
+  const isLoading = loadingProp && loadingProp.spinning;
+
+  // large => lg
+  // small => sm
+  let sizeCls = '';
+  switch (size) {
+    case 'large':
+      sizeCls = 'lg';
+      break;
+    case 'small':
+      sizeCls = 'sm';
+      break;
+    default:
+      break;
+  }
+
+  const classString = classNames(prefixCls, className, {
+    [`${prefixCls}-vertical`]: itemLayout === 'vertical',
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
+    [`${prefixCls}-split`]: split,
+    [`${prefixCls}-bordered`]: bordered,
+    [`${prefixCls}-loading`]: isLoading,
+    [`${prefixCls}-grid`]: grid,
+    [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem(),
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+  });
+
+  const paginationProps = {
+    ...defaultPaginationProps,
+    total: dataSource.length,
+    current: paginationCurrent,
+    pageSize: paginationSize,
+    ...(pagination || {}),
+  };
+
+  const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
+  if (paginationProps.current > largestPage) {
+    paginationProps.current = largestPage;
+  }
+  const paginationContent = pagination ? (
+    <div className={`${prefixCls}-pagination`}>
+      <Pagination
+        {...paginationProps}
+        onChange={onPaginationChange}
+        onShowSizeChange={onPaginationShowSizeChange}
+      />
+    </div>
+  ) : null;
+
+  let splitDataSource = [...dataSource];
+  if (pagination) {
+    if (dataSource.length > (paginationProps.current - 1) * paginationProps.pageSize) {
+      splitDataSource = [...dataSource].splice(
+        (paginationProps.current - 1) * paginationProps.pageSize,
+        paginationProps.pageSize,
+      );
     }
-    const isLoading = loadingProp && loadingProp.spinning;
+  }
 
-    // large => lg
-    // small => sm
-    let sizeCls = '';
-    switch (size) {
-      case 'large':
-        sizeCls = 'lg';
-        break;
-      case 'small':
-        sizeCls = 'sm';
-        break;
-      default:
-        break;
-    }
+  let childrenContent;
+  childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
+  if (splitDataSource.length > 0) {
+    const items = splitDataSource.map((item: any, index: number) => renderItem(item, index));
 
-    const classString = classNames(prefixCls, className, {
-      [`${prefixCls}-vertical`]: itemLayout === 'vertical',
-      [`${prefixCls}-${sizeCls}`]: sizeCls,
-      [`${prefixCls}-split`]: split,
-      [`${prefixCls}-bordered`]: bordered,
-      [`${prefixCls}-loading`]: isLoading,
-      [`${prefixCls}-grid`]: grid,
-      [`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastItem(),
-      [`${prefixCls}-rtl`]: direction === 'rtl',
+    const childrenList: Array<React.ReactNode> = [];
+    React.Children.forEach(items, (child: any, index) => {
+      childrenList.push(
+        React.cloneElement(child, {
+          key: keys[index],
+        }),
+      );
     });
 
-    const paginationProps = {
-      ...this.defaultPaginationProps,
-      total: dataSource.length,
-      current: paginationCurrent,
-      pageSize: paginationSize,
-      ...(pagination || {}),
-    };
+    childrenContent = grid ? (
+      <Row gutter={grid.gutter}>{childrenList}</Row>
+    ) : (
+      <ul className={`${prefixCls}-items`}>{childrenList}</ul>
+    );
+  } else if (!children && !isLoading) {
+    childrenContent = renderEmptyFunc(prefixCls, renderEmpty);
+  }
 
-    const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
-    if (paginationProps.current > largestPage) {
-      paginationProps.current = largestPage;
-    }
-    const paginationContent = pagination ? (
-      <div className={`${prefixCls}-pagination`}>
-        <Pagination
-          {...paginationProps}
-          onChange={this.onPaginationChange}
-          onShowSizeChange={this.onPaginationShowSizeChange}
-        />
-      </div>
-    ) : null;
+  const paginationPosition = paginationProps.position || 'bottom';
 
-    let splitDataSource = [...dataSource];
-    if (pagination) {
-      if (dataSource.length > (paginationProps.current - 1) * paginationProps.pageSize) {
-        splitDataSource = [...dataSource].splice(
-          (paginationProps.current - 1) * paginationProps.pageSize,
-          paginationProps.pageSize,
-        );
-      }
-    }
-
-    let childrenContent;
-    childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
-    if (splitDataSource.length > 0) {
-      const items = splitDataSource.map((item: any, index: number) => this.renderItem(item, index));
-
-      const childrenList: Array<React.ReactNode> = [];
-      React.Children.forEach(items, (child: any, index) => {
-        childrenList.push(
-          React.cloneElement(child, {
-            key: this.keys[index],
-          }),
-        );
-      });
-
-      childrenContent = grid ? (
-        <Row gutter={grid.gutter}>{childrenList}</Row>
-      ) : (
-        <ul className={`${prefixCls}-items`}>{childrenList}</ul>
-      );
-    } else if (!children && !isLoading) {
-      childrenContent = this.renderEmpty(prefixCls, renderEmpty);
-    }
-
-    const paginationPosition = paginationProps.position || 'bottom';
-
-    return (
+  return (
+    <ListContext.Provider value={{ grid: props.grid, itemLayout: props.itemLayout }}>
       <div className={classString} {...omit(rest, ['rowKey', 'renderItem', 'locale'])}>
         {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
         {header && <div className={`${prefixCls}-header`}>{header}</div>}
@@ -283,10 +256,18 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
         {loadMore ||
           ((paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent)}
       </div>
-    );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderList}</ConfigConsumer>;
-  }
+    </ListContext.Provider>
+  );
 }
+
+List.defaultProps = {
+  dataSource: [],
+  bordered: false,
+  split: true,
+  loading: false,
+  pagination: false as ListProps<any>['pagination'],
+};
+
+List.Item = Item;
+
+export default List;