chore(list): improve code (ant-design#24280)

* chore(list): improve code * Update index.tsx
waydeechen · May 19, 2020 · baa56b6 · baa56b6
1 parent ce78029
commit baa56b6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 43 deletions.
diff --git a/components/list/Item.tsx b/components/list/Item.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { ListGridType, ListContext } from './index';
 import { Col } from '../grid';
@@ -136,9 +135,4 @@ const Item: ListItemTypeProps = props => {
 
 Item.Meta = Meta;
 
-Item.contextTypes = {
-  grid: PropTypes.any,
-  itemLayout: PropTypes.string,
-};
-
 export default Item;
diff --git a/components/list/index.tsx b/components/list/index.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import omit from 'omit.js';
 import Spin, { SpinProps } from '../spin';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
@@ -67,7 +66,26 @@ export const ListContext = React.createContext<ListConsumerProps>({});
 
 export const ListConsumer = ListContext.Consumer;
 
-function List<T>({ pagination, ...props }: ListProps<T>) {
+function List<T>({
+  pagination = false as ListProps<any>['pagination'],
+  prefixCls: customizePrefixCls,
+  bordered = false,
+  split = true,
+  className,
+  children,
+  itemLayout,
+  loadMore,
+  grid,
+  dataSource = [],
+  size,
+  header,
+  footer,
+  loading = false,
+  rowKey,
+  renderItem,
+  locale,
+  ...rest
+}: ListProps<T>) {
   const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
 
   const [paginationCurrent, setPaginationCurrent] = React.useState(
@@ -98,9 +116,8 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
 
   const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
 
-  const renderItem = (item: any, index: number) => {
-    const { rowKey } = props;
-    if (!props.renderItem) return null;
+  const renderInnerItem = (item: any, index: number) => {
+    if (!renderItem) return null;
 
     let key;
 
@@ -118,41 +135,21 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
 
     keys[index] = key;
 
-    return props.renderItem(item, index);
+    return renderItem(item, index);
   };
 
   const isSomethingAfterLastItem = () => {
-    const { loadMore, footer } = props;
     return !!(loadMore || pagination || footer);
   };
 
   const renderEmptyFunc = (prefixCls: string, renderEmptyHandler: RenderEmptyHandler) => {
-    const { locale } = props;
-
     return (
       <div className={`${prefixCls}-empty-text`}>
         {(locale && locale.emptyText) || renderEmptyHandler('List')}
       </div>
     );
   };
 
-  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') {
@@ -246,7 +243,7 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
 
   let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
   if (splitDataSource.length > 0) {
-    const items = splitDataSource.map((item: any, index: number) => renderItem(item, index));
+    const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
     const childrenList = React.Children.map(items, (child: any, index) =>
       cloneElement(child, {
         key: keys[index],
@@ -265,8 +262,8 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
   const paginationPosition = paginationProps.position || 'bottom';
 
   return (
-    <ListContext.Provider value={{ grid: props.grid, itemLayout: props.itemLayout }}>
-      <div className={classString} {...omit(rest, ['rowKey', 'renderItem', 'locale'])}>
+    <ListContext.Provider value={{ grid, itemLayout }}>
+      <div className={classString} {...rest}>
         {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
         {header && <div className={`${prefixCls}-header`}>{header}</div>}
         <Spin {...loadingProp}>
@@ -281,14 +278,6 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
   );
 }
 
-List.defaultProps = {
-  dataSource: [],
-  bordered: false,
-  split: true,
-  loading: false,
-  pagination: false as ListProps<any>['pagination'],
-};
-
 List.Item = Item;
 
 export default List;