From cc1f21845a61ec4a12a2652a1a6b88868b56b5e9 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 15 Jul 2020 22:39:16 +0800
Subject: [PATCH] feat: update list

---
 components/list/Item.jsx  | 16 +++++++---------
 components/list/index.jsx | 14 ++++++--------
 examples/App.vue          |  2 +-
 examples/index.js         |  6 ++++++
 package.json              |  2 +-
 5 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/components/list/Item.jsx b/components/list/Item.jsx
index e252d442a..aa9c1b7f6 100644
--- a/components/list/Item.jsx
+++ b/components/list/Item.jsx
@@ -21,9 +21,8 @@ export const ListItemMetaProps = {
   title: PropTypes.any,
 };
 
-export const Meta = (props, { slots, attrs }) => {
+export const AListItemMeta = (props, { slots }) => {
   const configProvider = inject('configProvider', ConfigConsumerProps);
-  const { style, class: _cls } = attrs;
   const getPrefixCls = configProvider.getPrefixCls;
   const { prefixCls: customizePrefixCls } = props;
   const prefixCls = getPrefixCls('list', customizePrefixCls);
@@ -37,16 +36,15 @@ export const Meta = (props, { slots, attrs }) => {
     </div>
   );
   return (
-    <div class={`${prefixCls}-item-meta`} style={style} class={_cls}>
+    <div class={`${prefixCls}-item-meta`}>
       {avatar && <div class={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
       {(title || description) && content}
     </div>
   );
 };
 
-Object.assign(Meta, {
+Object.assign(AListItemMeta, {
   props: ListItemMetaProps,
-  inheritAttrs: false,
   __ANT_LIST_ITEM_META: true,
 });
 
@@ -57,7 +55,7 @@ function getGrid(grid, t) {
 export default {
   name: 'AListItem',
   inheritAttrs: false,
-  Meta,
+  Meta: AListItemMeta,
   props: ListItemProps,
   setup() {
     const listContext = inject('listContext', {});
@@ -91,7 +89,7 @@ export default {
   render() {
     const { grid, itemLayout } = this.listContext;
     const { prefixCls: customizePrefixCls, $slots, $attrs } = this;
-    const { class: _className } = $attrs;
+    const { class: _className, ...restAttrs } = $attrs;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('list', customizePrefixCls);
     const extra = getComponent(this, 'extra');
@@ -107,11 +105,11 @@ export default {
         ))}
       </ul>
     );
-    const children = $slots.default && $slots.default();
+    const children = getSlot(this);
     const Tag = grid ? 'div' : 'li';
     const itemChildren = (
       <Tag
-        {...$attrs}
+        {...restAttrs}
         class={classNames(`${prefixCls}-item `, _className, {
           [`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
         })}
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 9a8060c0a..0b7e5ceb9 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -126,7 +126,7 @@ const List = {
 
       this.keys[index] = key;
 
-      return renderer(item, index);
+      return renderer({ item, index });
     },
 
     isSomethingAfterLastItem() {
@@ -163,7 +163,7 @@ const List = {
     } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('list', customizePrefixCls);
-    const { class: _cls, ...restAttrs } = $attrs;
+    const { class: className, ...restAttrs } = $attrs;
     const loadMore = getComponent(this, 'loadMore');
     const footer = getComponent(this, 'footer');
     const header = getComponent(this, 'header');
@@ -200,7 +200,7 @@ const List = {
         [`${prefixCls}-grid`]: grid,
         [`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastItem(),
       },
-      $attrs.class,
+      className,
     );
     const paginationProps = {
       ...this.defaultPaginationProps,
@@ -219,13 +219,11 @@ const List = {
       <div class={`${prefixCls}-pagination`}>
         <Pagination
           {...{
-            props: omit(restProps, ['onChange']),
+            ...omit(restProps, ['onChange']),
             class: cls,
             style,
-            on: {
-              change: this.onPaginationChange,
-              showSizeChange: this.onPaginationShowSizeChange,
-            },
+            onChange: this.onPaginationChange,
+            onShowSizeChange: this.onPaginationShowSizeChange,
           }}
         />
       </div>
diff --git a/examples/App.vue b/examples/App.vue
index f079069e9..7043977a5 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/pagination/demo/custom-changer';
+import demo from '../antdv-demo/docs/list/demo/basic';
 
 export default {
   components: {
diff --git a/examples/index.js b/examples/index.js
index 653275b98..3eee6292c 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -23,6 +23,9 @@ import {
   Checkbox,
   Cascader,
   Pagination,
+  List,
+  Collapse,
+  Avatar,
   notification,
   message,
 } from 'ant-design-vue';
@@ -66,4 +69,7 @@ app
   .use(AutoComplete)
   .use(FormModel)
   .use(Cascader)
+  .use(List)
+  .use(Collapse)
+  .use(Avatar)
   .mount('#app');
diff --git a/package.json b/package.json
index 99983b5a1..c3d00eb54 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "vue-template-compiler": ">=2.6.0"
   },
   "devDependencies": {
-    "@ant-design-vue/babel-plugin-jsx": "1.0.0-alpha.6",
+    "@ant-design-vue/babel-plugin-jsx": "^1.0.0-beta.3",
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-class-properties": "^7.8.3",