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,17 +26,15 @@ export interface ListItemMetaProps {
   title?: React.ReactNode;
 }
 
-export const Meta = (props: ListItemMetaProps) => (
+export const Meta: React.FC<ListItemMetaProps> = ({
-  <ConfigConsumer>
-    {({ getPrefixCls }: ConfigConsumerProps) => {
-      const {
   prefixCls: customizePrefixCls,
   className,
   avatar,
   title,
   description,
   ...others
-      } = props;
+}) => {
+  const { getPrefixCls } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('list', customizePrefixCls);
   const classString = classNames(`${prefixCls}-item-meta`, className);
@@ -54,26 +52,22 @@ export const Meta = (props: ListItemMetaProps) => (
       {(title || description) && content}
     </div>
   );
-    }}
+};
-  </ConfigConsumer>
-);
 
 function getGrid(grid: ListGridType, t: ColumnType) {
   return grid[t] && Math.floor(24 / grid[t]!);
 }
 
-export default class Item extends React.Component<ListItemProps, any> {
+export interface ListItemTypeProps extends React.FC<ListItemProps> {
-  static Meta: typeof Meta = Meta;
+  Meta: typeof Meta;
-
+}
-  static contextTypes = {
-    grid: PropTypes.any,
-    itemLayout: PropTypes.string,
-  };
 
-  context: any;
+const Item: ListItemTypeProps = props => {
+  const { grid, itemLayout } = React.useContext(ListContext);
+  const { getPrefixCls } = React.useContext(ConfigContext);
 
-  isItemContainsTextNodeAndNotSingular() {
+  const isItemContainsTextNodeAndNotSingular = () => {
-    const { children } = this.props;
+    const { children } = props;
     let result;
     React.Children.forEach(children, (element: React.ReactElement<any>) => {
       if (typeof element === 'string') {
@@ -81,27 +75,17 @@ export default class Item extends React.Component<ListItemProps, any> {
       }
     });
     return result && React.Children.count(children) > 1;
-  }
+  };
 
-  isFlexMode() {
+  const isFlexMode = () => {
-    const { extra } = this.props;
+    const { extra } = props;
-    const { itemLayout } = this.context;
     if (itemLayout === 'vertical') {
       return !!extra;
     }
-    return !this.isItemContainsTextNodeAndNotSingular();
+    return !isItemContainsTextNodeAndNotSingular();
-  }
+  };
 
-  renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {
+  const { prefixCls: customizePrefixCls, children, actions, extra, className, ...others } = props;
-    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">
@@ -119,7 +103,7 @@ export default class Item extends React.Component<ListItemProps, any> {
     <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(),
+        [`${prefixCls}-item-no-flex`]: !isFlexMode(),
       })}
     >
       {itemLayout === 'vertical' && extra
@@ -151,9 +135,13 @@ export default class Item extends React.Component<ListItemProps, any> {
   ) : (
     itemChildren
   );
-  };
+};
 
-  render() {
+Item.Meta = Meta;
-    return <ConfigConsumer>{this.renderItem}</ConfigConsumer>;
+
-  }
+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 {
+export interface ListConsumerProps {
-  paginationCurrent: number;
+  grid?: any;
-  paginationSize: number;
+  itemLayout?: string;
 }
 
-export default class List<T> extends React.Component<ListProps<T>, ListState> {
+export const ListContext = React.createContext<ListConsumerProps>({});
-  static Item: typeof Item = Item;
 
-  static childContextTypes = {
+export const ListConsumer = ListContext.Consumer;
-    grid: PropTypes.any,
-    itemLayout: PropTypes.string,
-  };
-
-  static defaultProps = {
-    dataSource: [],
-    bordered: false,
-    split: true,
-    loading: false,
-    pagination: false as ListProps<any>['pagination'],
-  };
-
-  defaultPaginationProps = {
-    current: 1,
-    total: 0,
-  };
-
-  private keys: { [key: string]: string } = {};
 
-  private onPaginationChange = this.triggerPaginationEvent('onChange');
+function List<T>({ pagination, ...props }: ListProps<T>) {
-
+  const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
-  private onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
 
-  constructor(props: ListProps<T>) {
+  const [paginationCurrent, setPaginationCurrent] = React.useState(
-    super(props);
+    paginationObj.defaultCurrent || 1,
+  );
+  const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize || 10);
 
-    const { pagination } = props;
+  const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
-    const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
 
-    this.state = {
+  const defaultPaginationProps = {
-      paginationCurrent: paginationObj.defaultCurrent || 1,
+    current: 1,
-      paginationSize: paginationObj.defaultPageSize || 10,
+    total: 0,
   };
-  }
 
-  getChildContext() {
+  const keys: { [key: string]: string } = {};
-    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;
+      setPaginationCurrent(page);
-      this.setState({
+      setPaginationSize(pageSize);
-        paginationCurrent: page,
-        paginationSize: pageSize,
-      });
       if (pagination && (pagination as any)[eventName]) {
         (pagination as any)[eventName](page, pageSize);
       }
     };
-  }
+  };
 
-  renderItem = (item: any, index: number) => {
+  const onPaginationChange = triggerPaginationEvent('onChange');
-    const { renderItem, rowKey } = this.props;
+
-    if (!renderItem) return null;
+  const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
+
+  const renderItem = (item: any, index: number) => {
+    const { rowKey } = props;
+    if (!props.renderItem) return null;
 
     let key;
 
@@ -140,28 +115,26 @@ 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 isSomethingAfterLastItem = () => {
-    const { loadMore, pagination, footer } = this.props;
+    const { loadMore, footer } = props;
     return !!(loadMore || pagination || footer);
-  }
+  };
 
-  renderEmpty = (prefixCls: string, renderEmpty: RenderEmptyHandler) => {
+  const renderEmptyFunc = (prefixCls: string, renderEmptyHandler: RenderEmptyHandler) => {
-    const { locale } = this.props;
+    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,
@@ -170,7 +143,6 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
     children,
     itemLayout,
     loadMore,
-      pagination,
     grid,
     dataSource = [],
     size,
@@ -178,7 +150,7 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
     footer,
     loading,
     ...rest
-    } = this.props;
+  } = props;
 
   const prefixCls = getPrefixCls('list', customizePrefixCls);
   let loadingProp = loading;
@@ -210,12 +182,12 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
     [`${prefixCls}-bordered`]: bordered,
     [`${prefixCls}-loading`]: isLoading,
     [`${prefixCls}-grid`]: grid,
-      [`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastItem(),
+    [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem(),
     [`${prefixCls}-rtl`]: direction === 'rtl',
   });
 
   const paginationProps = {
-      ...this.defaultPaginationProps,
+    ...defaultPaginationProps,
     total: dataSource.length,
     current: paginationCurrent,
     pageSize: paginationSize,
@@ -230,8 +202,8 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
     <div className={`${prefixCls}-pagination`}>
       <Pagination
         {...paginationProps}
-          onChange={this.onPaginationChange}
+        onChange={onPaginationChange}
-          onShowSizeChange={this.onPaginationShowSizeChange}
+        onShowSizeChange={onPaginationShowSizeChange}
       />
     </div>
   ) : null;
@@ -249,13 +221,13 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
   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 items = splitDataSource.map((item: any, index: number) => renderItem(item, index));
 
     const childrenList: Array<React.ReactNode> = [];
     React.Children.forEach(items, (child: any, index) => {
       childrenList.push(
         React.cloneElement(child, {
-            key: this.keys[index],
+          key: keys[index],
         }),
       );
     });
@@ -266,12 +238,13 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
       <ul className={`${prefixCls}-items`}>{childrenList}</ul>
     );
   } else if (!children && !isLoading) {
-      childrenContent = this.renderEmpty(prefixCls, renderEmpty);
+    childrenContent = renderEmptyFunc(prefixCls, renderEmpty);
   }
 
   const paginationPosition = paginationProps.position || 'bottom';
 
   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>
+    </ListContext.Provider>
   );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderList}</ConfigConsumer>;
-  }
 }
+
+List.defaultProps = {
+  dataSource: [],
+  bordered: false,
+  split: true,
+  loading: false,
+  pagination: false as ListProps<any>['pagination'],
+};
+
+List.Item = Item;
+
+export default List;