refactor: list to ts
parent
f6953dc9a7
commit
b24552b029
|
@ -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;
|
||||
},
|
||||
};
|
||||
});
|
|
@ -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>
|
||||
<g fill-rule="nonzero" stroke="#D9D9D9">
|
||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<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>
|
||||
|
|
|
@ -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<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);
|
Loading…
Reference in New Issue