From b24552b029b98ec71c4a277e367e39495450c42c Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Sat, 24 Oct 2020 21:40:39 +0800 Subject: [PATCH] refactor: list to ts --- components/list/{Item.jsx => Item.tsx} | 22 +++++---- .../__snapshots__/empty.test.js.snap | 8 ++-- components/list/{index.jsx => index.tsx} | 48 +++++++++++-------- components/list/style/{index.js => index.ts} | 0 4 files changed, 45 insertions(+), 33 deletions(-) rename components/list/{Item.jsx => Item.tsx} (90%) rename components/list/{index.jsx => index.tsx} (90%) rename components/list/style/{index.js => index.ts} (100%) diff --git a/components/list/Item.jsx b/components/list/Item.tsx similarity index 90% rename from components/list/Item.jsx rename to components/list/Item.tsx index 3f7aed1a4..a446a32c5 100644 --- a/components/list/Item.jsx +++ b/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 +>> = (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', {}); const configProvider = inject('configProvider', defaultConfigProvider); return { listContext, @@ -147,4 +153,4 @@ export default { return mainContent; }, -}; +}); diff --git a/components/list/__tests__/__snapshots__/empty.test.js.snap b/components/list/__tests__/__snapshots__/empty.test.js.snap index 65a462d2b..8c546d877 100644 --- a/components/list/__tests__/__snapshots__/empty.test.js.snap +++ b/components/list/__tests__/__snapshots__/empty.test.js.snap @@ -9,12 +9,12 @@ exports[`List renders empty list 1`] = `
-
+
- - + + - +
diff --git a/components/list/index.jsx b/components/list/index.tsx similarity index 90% rename from components/list/index.jsx rename to components/list/index.tsx index c0ca8122c..350d69067 100644 --- a/components/list/index.jsx +++ b/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) { - pagination.onChange(page, pageSize); + if (pagination && (pagination as any).onChange) { + (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 = + 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 = {
); }, -}; +}); /* 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); diff --git a/components/list/style/index.js b/components/list/style/index.ts similarity index 100% rename from components/list/style/index.js rename to components/list/style/index.ts