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>
5 years ago · 9ff7f31dfe
3 changed files with 258 additions and 285 deletions
--- a/.depslintrc.js
+++ b/.depslintrc.js
@ -10,6 +10,10 @@ module.exports = {
    '**/*.json',
  ],
  modulePattern: [
+    {
+      pattern: /ConfigContext.*renderEmpty/ms,
+      module: '../empty',
+    },
    {
      pattern: /ConfigConsumer.*renderEmpty/ms,
      module: '../empty',
--- a/components/list/Item.tsx
+++ b/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) => (
-  <ConfigConsumer>
-    {({ getPrefixCls }: ConfigConsumerProps) => {
-      const {
+export const Meta: React.FC<ListItemMetaProps> = ({
  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> {
-  static Meta: typeof Meta = Meta;
-
-  static contextTypes = {
-    grid: PropTypes.any,
-    itemLayout: PropTypes.string,
-  };
+export interface ListItemTypeProps extends React.FC<ListItemProps> {
+  Meta: typeof Meta;
+}

-  context: any;
+const Item: ListItemTypeProps = props => {
+  const { grid, itemLayout } = React.useContext(ListContext);
+  const { getPrefixCls } = React.useContext(ConfigContext);

-  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,27 +75,17 @@ 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();
-  }
+    return !isItemContainsTextNodeAndNotSingular();
+  };

-  renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { grid, itemLayout } = this.context;
-    const {
-      prefixCls: customizePrefixCls,
-      children,
-      actions,
-      extra,
-      className,
-      ...others
-    } = this.props;
+  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">
@ -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() {
-    return <ConfigConsumer>{this.renderItem}</ConfigConsumer>;
-  }
-}
+Item.Meta = Meta;
+
+Item.contextTypes = {
+  grid: PropTypes.any,
+  itemLayout: PropTypes.string,
+};
+
+export default Item;
--- a/components/list/index.tsx
+++ b/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,
-  };
-
-  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 } = {};
+export const ListConsumer = ListContext.Consumer;

-  private onPaginationChange = this.triggerPaginationEvent('onChange');
-
-  private onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
+function List<T>({ pagination, ...props }: ListProps<T>) {
+  const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};

-  constructor(props: ListProps<T>) {
-    super(props);
+  const [paginationCurrent, setPaginationCurrent] = React.useState(
+    paginationObj.defaultCurrent || 1,
+  );
+  const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize || 10);

-    const { pagination } = props;
-    const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
+  const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);

-    this.state = {
-      paginationCurrent: paginationObj.defaultCurrent || 1,
-      paginationSize: paginationObj.defaultPageSize || 10,
+  const defaultPaginationProps = {
+    current: 1,
+    total: 0,
  };
-  }

-  getChildContext() {
-    return {
-      grid: this.props.grid,
-      itemLayout: this.props.itemLayout,
-    };
-  }
+  const keys: { [key: string]: string } = {};

-  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,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 { 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,
@ -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}
-          onShowSizeChange={this.onPaginationShowSizeChange}
+        onChange={onPaginationChange}
+        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;