refactor: list to ts

components/list/Item.tsx

@@ -3,15 +3,14 @@ import classNames from '../_util/classNames';
 import { getComponent, isStringElement, isEmptyElement, getSlot } from '../_util/props-util';
 import { Col } from '../grid';
 import { defaultConfigProvider } from '../config-provider';
-import { ListGridType } from './index';
 import { cloneElement } from '../_util/vnode';
-import { inject } from 'vue';
+import { defineComponent, ExtractPropTypes, FunctionalComponent, inject } from 'vue';
 
 export const ListItemProps = {
   prefixCls: PropTypes.string,
   extra: PropTypes.any,
   actions: PropTypes.array,
-  grid: ListGridType,
+  grid: PropTypes.any,
 };
 
 export const ListItemMetaProps = {
@@ -21,9 +20,11 @@ export const ListItemMetaProps = {
   title: PropTypes.any,
 };
 
-export const ListItemMeta = (props, { slots }) => {
+export const ListItemMeta: FunctionalComponent<Partial<
+  ExtractPropTypes<typeof ListItemMetaProps>
+>> = (props, { slots }) => {
   const configProvider = inject('configProvider', defaultConfigProvider);
-  const getPrefixCls = configProvider.getPrefixCls;
+  const { getPrefixCls } = configProvider;
   const { prefixCls: customizePrefixCls } = props;
   const prefixCls = getPrefixCls('list', customizePrefixCls);
   const avatar = props.avatar || slots.avatar?.();
@@ -53,13 +54,18 @@ function getGrid(grid, t) {
   return grid[t] && Math.floor(24 / grid[t]);
 }
 
-export default {
+export interface ListContext {
+  grid?: any;
+  itemLayout?: string;
+}
+
+export default defineComponent({
   name: 'AListItem',
   inheritAttrs: false,
   Meta: ListItemMeta,
   props: ListItemProps,
   setup() {
-    const listContext = inject('listContext', {});
+    const listContext = inject<ListContext>('listContext', {});
     const configProvider = inject('configProvider', defaultConfigProvider);
     return {
       listContext,
@@ -147,4 +153,4 @@ export default {
 
     return mainContent;
   },
-};
+});

components/list/__tests__/__snapshots__/empty.test.js.snap

@@ -9,12 +9,12 @@ exports[`List renders empty list 1`] = `
     <div class="ant-spin-container">
       <div class="ant-list-empty-text">
         <div class="ant-empty ant-empty-normal">
-          <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+          <div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
               <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-                <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                <ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-                <g fill-rule="nonzero" stroke="#D9D9D9">
+                <g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
                   <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-                  <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                  <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
                 </g>
               </g>
             </svg></div>

components/list/index.tsx

@@ -8,9 +8,11 @@ import Pagination, { PaginationConfig } from '../pagination';
 import { Row } from '../grid';
 
 import Item from './Item';
-import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
+import { getComponent, getSlot } from '../_util/props-util';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 import { cloneElement } from '../_util/vnode';
-import { provide, inject } from 'vue';
+import { provide, inject, defineComponent, App } from 'vue';
+import { tuple } from '../_util/type';
 
 export { ListItemProps, ListItemMetaProps } from './Item';
 
@@ -29,7 +31,7 @@ export const ListGridType = {
   xxl: PropTypes.oneOf(ColumnCount),
 };
 
-export const ListSize = ['small', 'default', 'large'];
+export const ListSize = tuple('small', 'default', 'large');
 
 export const ListProps = () => ({
   bordered: PropTypes.looseBool,
@@ -52,7 +54,7 @@ export const ListProps = () => ({
   locale: PropTypes.object,
 });
 
-const List = {
+const List = defineComponent({
   inheritAttrs: false,
   Item,
   name: 'AList',
@@ -65,31 +67,35 @@ const List = {
   }),
   created() {
     provide('listContext', this);
-  },
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-
-  data() {
-    this.keys = [];
     this.defaultPaginationProps = {
       current: 1,
       pageSize: 10,
-      onChange: (page, pageSize) => {
+      onChange: (page: number, pageSize: number) => {
         const { pagination } = this;
         this.paginationCurrent = page;
-        if (pagination && pagination.onChange) {
+        if (pagination && (pagination as any).onChange) {
-          pagination.onChange(page, pageSize);
+          (pagination as any).onChange(page, pageSize);
         }
       },
       total: 0,
     };
     this.onPaginationChange = this.triggerPaginationEvent('onChange');
     this.onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
+  },
+  setup() {
+    return {
+      keys: [],
+      defaultPaginationProps: {},
+      onPaginationChange: null,
+      onPaginationShowSizeChange: null,
+      configProvider: inject('configProvider', defaultConfigProvider),
+    };
+  },
+
+  data() {
     const { pagination } = this.$props;
-    const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
+    const paginationObj: Partial<typeof pagination> =
+      pagination && typeof pagination === 'object' ? pagination : {};
     return {
       paginationCurrent: paginationObj.defaultCurrent || 1,
       paginationSize: paginationObj.defaultPageSize || 10,
@@ -163,7 +169,7 @@ const List = {
       paginationSize,
       $attrs,
     } = this;
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('list', customizePrefixCls);
     const { class: className, ...restAttrs } = $attrs;
     const loadMore = getComponent(this, 'loadMore');
@@ -209,7 +215,7 @@ const List = {
       total: dataSource.length,
       current: paginationCurrent,
       pageSize: paginationSize,
-      ...(pagination || {}),
+      ...((pagination as any) || {}),
     };
     classString;
     const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
@@ -276,10 +282,10 @@ const List = {
       </div>
     );
   },
-};
+});
 
 /* istanbul ignore next */
-List.install = function(app) {
+List.install = function(app: App) {
   app.component(List.name, List);
   app.component(List.Item.name, List.Item);
   app.component(List.Item.Meta.displayName, List.Item.Meta);