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>
ant-design · Apr 26, 2020 · 9ff7f31 · afc163 · May 19, 2020 · hengkx
1 parent 75440c4
commit 9ff7f31
Show file tree

Hide file tree

Showing 3 changed files with 258 additions and 285 deletions.
diff --git 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',

diff --git 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,134 +26,122 @@ export interface ListItemMetaProps {
   title?: React.ReactNode;
 }
 
-export const Meta = (props: ListItemMetaProps) => (
-  <ConfigConsumer>
-    {({ getPrefixCls }: ConfigConsumerProps) => {
-      const {
-        prefixCls: customizePrefixCls,
-        className,
-        avatar,
-        title,
-        description,
-        ...others
-      } = props;
-
-      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>
-      );
-
-      return (
-        <div {...others} className={classString}>
-          {avatar && <div className={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
-          {(title || description) && content}
-        </div>
-      );
-    }}
-  </ConfigConsumer>
-);
+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 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>
+  );
+};
 
 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') {
         result = true;
       }
     });
     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;