mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

feat(list): list support using the componentSize configuration size from ConfigProvider (#44267)

Browse Source 
* feat(list): list support using the componentSize configuration size from ConfigProvider

* chore: update snapshot
This commit is contained in:
JiaQi 2023-08-17 17:55:46 +08:00 committed by GitHub
parent 030f38594c
commit 2e18b63cec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -17472,7 +17472,7 @@ exports[`ConfigProvider components List configProvider componentDisabled 1`] = `
exports[`ConfigProvider components List configProvider componentSize large 1`] = `
<div
class="config-list config-list-split"
class="config-list config-list-lg config-list-split"
>
<div
class="config-spin-nested-loading"
@ -17576,7 +17576,7 @@ exports[`ConfigProvider components List configProvider componentSize middle 1`]
exports[`ConfigProvider components List configProvider componentSize small 1`] = `
<div
class="config-list config-list-split"
class="config-list config-list-sm config-list-split"
>
<div
class="config-spin-nested-loading"

17
components/list/__tests__/index.test.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import type { ListProps } from '..';
import List from '..';
import ConfigProvider from '../../config-provider';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render } from '../../../tests/utils';
@ -22,4 +23,20 @@ describe('List', () => {
);
expect(container.querySelector('div.ant-list')?.getAttribute('locale')).toBe(null);
});
it('should apply the componentSize of ConfigProvider', () => {
const { container } = render(
<>
<ConfigProvider componentSize="small">
<List />,
</ConfigProvider>
<ConfigProvider componentSize="large">
<List />,
</ConfigProvider>
</>,
);
expect(container.querySelector('.ant-list-sm')).toBeTruthy();
expect(container.querySelector('.ant-list-lg')).toBeTruthy();
});
});

7
components/list/index.tsx
View File

@ -19,6 +19,7 @@ import Item from './Item';
// CSSINJS
import { ListContext } from './context';
import useStyle from './style';
import useSize from '../config-provider/hooks/useSize';
export type { ListItemMetaProps, ListItemProps } from './Item';
export type { ListConsumerProps } from './context';
@ -83,7 +84,7 @@ function List<T>({
loadMore,
grid,
dataSource = [],
size,
size: customizeSize,
header,
footer,
loading = false,
@ -154,10 +155,12 @@ function List<T>({
}
const isLoading = loadingProp && loadingProp.spinning;
const mergedSize = useSize(customizeSize);
// large => lg
// small => sm
let sizeCls = '';
switch (size) {
switch (mergedSize) {
case 'large':
sizeCls = 'lg';
break;