Skip to content

Commit d59485b

Browse files
author
Andy
committed
feat(list): update to vue3
1 parent b4ff08e commit d59485b

File tree

5 files changed

+97
-88
lines changed

5 files changed

+97
-88
lines changed

‎components/checkbox/Checkbox.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import VcCheckbox from '../vc-checkbox';
55
import hasProp, { getOptionProps, getSlot } from '../_util/props-util';
66
import { ConfigConsumerProps } from '../config-provider';
77
import warning from '../_util/warning';
8+
function noop() {}
89

910
export default {
1011
name: 'ACheckbox',

‎components/list/Item.jsx

+44-45
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
import PropTypes from '../_util/vue-types';
22
import classNames from 'classnames';
3-
import {
4-
getComponentFromProp,
5-
isStringElement,
6-
getListeners,
7-
isEmptyElement,
8-
} from '../_util/props-util';
3+
import { getComponent, isStringElement, isEmptyElement, getSlot } from '../_util/props-util';
94
import { Col } from '../grid';
105
import { ConfigConsumerProps } from '../config-provider';
116
import { ListGridType } from './index';
127
import { cloneElement } from '../_util/vnode';
8+
import { inject } from 'vue';
139

1410
export const ListItemProps = {
1511
prefixCls: PropTypes.string,
@@ -26,34 +22,33 @@ export const ListItemMetaProps = {
2622
};
2723

2824
export const Meta = {
25+
props: ListItemMetaProps,
26+
inheritAttributes: false,
2927
functional: true,
3028
name: 'AListItemMeta',
3129
__ANT_LIST_ITEM_META: true,
32-
inject: {
33-
configProvider: { default: () => ConfigConsumerProps },
34-
},
35-
render(h, context) {
36-
const { props, slots, listeners, injections } = context;
37-
const slotsMap = slots();
38-
const getPrefixCls = injections.configProvider.getPrefixCls;
39-
const { prefixCls: customizePrefixCls } = props;
40-
const prefixCls = getPrefixCls('list', customizePrefixCls);
41-
42-
const avatar = props.avatar || slotsMap.avatar;
43-
const title = props.title || slotsMap.title;
44-
const description = props.description || slotsMap.description;
45-
const content = (
46-
<div class={`${prefixCls}-item-meta-content`}>
47-
{title && <h4 class={`${prefixCls}-item-meta-title`}>{title}</h4>}
48-
{description && <div class={`${prefixCls}-item-meta-description`}>{description}</div>}
49-
</div>
50-
);
51-
return (
52-
<div {...{ on: listeners }} class={`${prefixCls}-item-meta`}>
53-
{avatar && <div class={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
54-
{(title || description) && content}
55-
</div>
56-
);
30+
setup(props, { slots, attrs }) {
31+
const configProvider = inject('configProvider', ConfigConsumerProps);
32+
return () => {
33+
const getPrefixCls = configProvider.getPrefixCls;
34+
const { prefixCls: customizePrefixCls } = props;
35+
const prefixCls = getPrefixCls('list', customizePrefixCls);
36+
const avatar = props.avatar || slots.avatar?.();
37+
const title = props.title || slots.title?.();
38+
const description = props.description || slots.description?.();
39+
const content = (
40+
<div class={`${prefixCls}-item-meta-content`}>
41+
{title && <h4 class={`${prefixCls}-item-meta-title`}>{title}</h4>}
42+
{description && <div class={`${prefixCls}-item-meta-description`}>{description}</div>}
43+
</div>
44+
);
45+
return (
46+
<div {...attrs} class={`${prefixCls}-item-meta`}>
47+
{avatar && <div class={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
48+
{(title || description) && content}
49+
</div>
50+
);
51+
};
5752
},
5853
};
5954

@@ -62,18 +57,22 @@ function getGrid(grid, t) {
6257
}
6358

6459
export default {
60+
inheritAttributes: false,
6561
name: 'AListItem',
6662
Meta,
6763
props: ListItemProps,
68-
inject: {
69-
listContext: { default: () => ({}) },
70-
configProvider: { default: () => ConfigConsumerProps },
64+
setup() {
65+
const listContext = inject('listContext', {});
66+
const configProvider = inject('configProvider', ConfigConsumerProps);
67+
return {
68+
listContext,
69+
configProvider,
70+
};
7171
},
7272
methods: {
7373
isItemContainsTextNodeAndNotSingular() {
74-
const { $slots } = this;
74+
const children = getSlot(this) || [];
7575
let result;
76-
const children = $slots.default || [];
7776
children.forEach(element => {
7877
if (isStringElement(element) && !isEmptyElement(element)) {
7978
result = true;
@@ -83,7 +82,7 @@ export default {
8382
},
8483

8584
isFlexMode() {
86-
const extra = getComponentFromProp(this, 'extra');
85+
const extra = getComponent(this, 'extra');
8786
const { itemLayout } = this.listContext;
8887
if (itemLayout === 'vertical') {
8988
return !!extra;
@@ -93,12 +92,12 @@ export default {
9392
},
9493
render() {
9594
const { grid, itemLayout } = this.listContext;
96-
const { prefixCls: customizePrefixCls, $slots } = this;
97-
const listeners = getListeners(this);
95+
const { prefixCls: customizePrefixCls, $slots, $attrs } = this;
96+
const { class: _className } = $attrs;
9897
const getPrefixCls = this.configProvider.getPrefixCls;
9998
const prefixCls = getPrefixCls('list', customizePrefixCls);
100-
const extra = getComponentFromProp(this, 'extra');
101-
const actions = getComponentFromProp(this, 'actions');
99+
const extra = getComponent(this, 'extra');
100+
const actions = getComponent(this, 'actions');
102101

103102
const actionsContent = actions && actions.length > 0 && (
104103
<ul class={`${prefixCls}-item-action`} key="actions">
@@ -110,12 +109,12 @@ export default {
110109
))}
111110
</ul>
112111
);
113-
112+
const children = $slots.default && $slots.default();
114113
const Tag = grid ? 'div' : 'li';
115114
const itemChildren = (
116115
<Tag
117-
{...{ on: listeners }}
118-
class={classNames(`${prefixCls}-item`, {
116+
{...$attrs}
117+
class={classNames(`${prefixCls}-item `, _className, {
119118
[`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
120119
})}
121120
>
@@ -129,7 +128,7 @@ export default {
129128
{extra}
130129
</div>,
131130
]
132-
: [$slots.default, actionsContent, cloneElement(extra, { key: 'extra' })]}
131+
: [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
133132
</Tag>
134133
);
135134

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

+6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22

33
exports[`List renders empty list 1`] = `
44
<div class="ant-list ant-list-split">
5+
<!---->
6+
<!---->
57
<div class="ant-spin-nested-loading">
8+
<!---->
69
<div class="ant-spin-container">
710
<div class="ant-list-empty-text">
811
<div class="ant-empty ant-empty-normal">
@@ -16,9 +19,12 @@ exports[`List renders empty list 1`] = `
1619
</g>
1720
</svg></div>
1821
<p class="ant-empty-description">No Data</p>
22+
<!---->
1923
</div>
2024
</div>
2125
</div>
2226
</div>
27+
<!---->
28+
<!---->
2329
</div>
2430
`;

‎components/list/index.jsx

+45-42
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,9 @@ import Pagination, { PaginationConfig } from '../pagination';
88
import { Row } from '../grid';
99

1010
import Item from './Item';
11-
import {
12-
initDefaultProps,
13-
getComponentFromProp,
14-
filterEmpty,
15-
getListeners,
16-
} from '../_util/props-util';
11+
import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
1712
import { cloneElement } from '../_util/vnode';
18-
import Base from '../base';
13+
import { provide, inject } from 'vue';
1914

2015
export { ListItemProps, ListItemMetaProps } from './Item';
2116

@@ -56,6 +51,7 @@ export const ListProps = () => ({
5651
});
5752

5853
const List = {
54+
inheritAttributes: false,
5955
Item,
6056
name: 'AList',
6157
props: initDefaultProps(ListProps(), {
@@ -65,14 +61,15 @@ const List = {
6561
loading: false,
6662
pagination: false,
6763
}),
68-
provide() {
64+
created() {
65+
provide('listContext', this);
66+
},
67+
setup() {
6968
return {
70-
listContext: this,
69+
configProvider: inject('configProvider', ConfigConsumerProps),
7170
};
7271
},
73-
inject: {
74-
configProvider: { default: () => ConfigConsumerProps },
75-
},
72+
7673
data() {
7774
this.keys = [];
7875
this.defaultPaginationProps = {
@@ -107,10 +104,13 @@ const List = {
107104
}
108105
};
109106
},
110-
renderItem2(item, index) {
111-
const { $scopedSlots, rowKey } = this;
112-
const renderItem = this.renderItem || $scopedSlots.renderItem;
113-
if (!renderItem) return null;
107+
innerRenderItem(item, index) {
108+
const {
109+
$slots: { renderItem },
110+
rowKey,
111+
} = this;
112+
const renderer = this.renderItem || renderItem;
113+
if (!renderer) return null;
114114
let key;
115115
if (typeof rowKey === 'function') {
116116
key = rowKey(item);
@@ -126,21 +126,21 @@ const List = {
126126

127127
this.keys[index] = key;
128128

129-
return renderItem(item, index);
129+
return renderer(item, index);
130130
},
131131

132132
isSomethingAfterLastItem() {
133133
const { pagination } = this;
134-
const loadMore = getComponentFromProp(this, 'loadMore');
135-
const footer = getComponentFromProp(this, 'footer');
134+
const loadMore = getComponent(this, 'loadMore');
135+
const footer = getComponent(this, 'footer');
136136
return !!(loadMore || pagination || footer);
137137
},
138138

139139
renderEmpty(prefixCls, renderEmpty) {
140140
const { locale } = this;
141141
return (
142142
<div class={`${prefixCls}-empty-text`}>
143-
{(locale && locale.emptyText) || renderEmpty(h, 'List')}
143+
{(locale && locale.emptyText) || renderEmpty('List')}
144144
</div>
145145
);
146146
},
@@ -157,17 +157,17 @@ const List = {
157157
dataSource = [],
158158
size,
159159
loading,
160-
$slots,
161160
paginationCurrent,
162161
paginationSize,
162+
$attrs,
163163
} = this;
164164
const getPrefixCls = this.configProvider.getPrefixCls;
165165
const prefixCls = getPrefixCls('list', customizePrefixCls);
166166

167-
const loadMore = getComponentFromProp(this, 'loadMore');
168-
const footer = getComponentFromProp(this, 'footer');
169-
const header = getComponentFromProp(this, 'header');
170-
const children = filterEmpty($slots.default || []);
167+
const loadMore = getComponent(this, 'loadMore');
168+
const footer = getComponent(this, 'footer');
169+
const header = getComponent(this, 'header');
170+
const children = getSlot(this);
171171
let loadingProp = loading;
172172
if (typeof loadingProp === 'boolean') {
173173
loadingProp = {
@@ -189,15 +189,19 @@ const List = {
189189
default:
190190
break;
191191
}
192-
const classString = classNames(prefixCls, {
193-
[`${prefixCls}-vertical`]: itemLayout === 'vertical',
194-
[`${prefixCls}-${sizeCls}`]: sizeCls,
195-
[`${prefixCls}-split`]: split,
196-
[`${prefixCls}-bordered`]: bordered,
197-
[`${prefixCls}-loading`]: isLoading,
198-
[`${prefixCls}-grid`]: grid,
199-
[`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastItem(),
200-
});
192+
const classString = classNames(
193+
prefixCls,
194+
{
195+
[`${prefixCls}-vertical`]: itemLayout === 'vertical',
196+
[`${prefixCls}-${sizeCls}`]: sizeCls,
197+
[`${prefixCls}-split`]: split,
198+
[`${prefixCls}-bordered`]: bordered,
199+
[`${prefixCls}-loading`]: isLoading,
200+
[`${prefixCls}-grid`]: grid,
201+
[`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastItem(),
202+
},
203+
$attrs.class,
204+
);
201205
const paginationProps = {
202206
...this.defaultPaginationProps,
203207
total: dataSource.length,
@@ -239,7 +243,7 @@ const List = {
239243
let childrenContent;
240244
childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
241245
if (splitDataSource.length > 0) {
242-
const items = splitDataSource.map((item, index) => this.renderItem2(item, index));
246+
const items = splitDataSource.map((item, index) => this.innerRenderItem(item, index));
243247
const childrenList = items.map((child, index) =>
244248
cloneElement(child, {
245249
key: this.keys[index],
@@ -258,10 +262,10 @@ const List = {
258262
const paginationPosition = paginationProps.position || 'bottom';
259263

260264
return (
261-
<div class={classString} {...{ on: getListeners(this) }}>
265+
<div class={classString} {...$attrs}>
262266
{(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
263267
{header && <div class={`${prefixCls}-header`}>{header}</div>}
264-
<Spin {...{ props: loadingProp }}>
268+
<Spin {...loadingProp}>
265269
{childrenContent}
266270
{children}
267271
</Spin>
@@ -274,11 +278,10 @@ const List = {
274278
};
275279

276280
/* istanbul ignore next */
277-
List.install = function(Vue) {
278-
Vue.use(Base);
279-
Vue.component(List.name, List);
280-
Vue.component(List.Item.name, List.Item);
281-
Vue.component(List.Item.Meta.name, List.Item.Meta);
281+
List.install = function(app) {
282+
app.component(List.name, List);
283+
app.component(List.Item.name, List.Item);
284+
app.component(List.Item.Meta.name, List.Item.Meta);
282285
};
283286

284287
export default List;

‎examples/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import 'ant-design-vue/style.js';
2323

2424
const basic = {
2525
render() {
26-
return this.$slots ? .default();
26+
return this.$slots?.default();
2727
},
2828
};
2929
const app = createApp(App);

0 commit comments

Comments
 (0)