test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

Fix list border

Browse Source
This commit is contained in:
afc163 2017-10-26 15:36:48 +08:00
parent c44f9528be
commit 11c3abb3aa
4 changed files with 1056 additions and 973 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -5,6 +5,12 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
class="ant-list ant-list-split"
>
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-list-item"
>
@ -154,6 +160,8 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
</div>
`;
@ -162,6 +170,12 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
class="ant-list ant-list-split ant-list-grid"
>
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
@ -324,6 +338,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
</div>
`;
@ -335,7 +351,15 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
<div
class="ant-list ant-list-split"
>
<div />
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
/>
</div>
</div>
</div>
</div>
</div>
@ -345,13 +369,21 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
<div
class="ant-list ant-list-split"
>
<div />
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
/>
</div>
</div>
</div>
`;
exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
<div
class="ant-list demo-loadmore-list ant-list-split ant-list-loading"
class="ant-list demo-loadmore-list ant-list-split ant-list-loading ant-list-something-after-last-item"
>
<div>
<div
@ -396,6 +428,12 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
class="ant-list ant-list-split ant-list-grid"
>
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
@ -636,6 +674,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
</div>
`;
@ -647,7 +687,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
Default Size
</h3>
<div
class="ant-list ant-list-split ant-list-bordered"
class="ant-list ant-list-split ant-list-bordered ant-list-something-after-last-item"
>
<div
class="ant-list-header"
@ -657,6 +697,12 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
</div>
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-list-item"
>
@ -703,6 +749,8 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
<div
class="ant-list-footer"
>
@ -717,7 +765,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
Small Size
</h3>
<div
class="ant-list ant-list-sm ant-list-split ant-list-bordered"
class="ant-list ant-list-sm ant-list-split ant-list-bordered ant-list-something-after-last-item"
>
<div
class="ant-list-header"
@ -727,6 +775,12 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
</div>
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-list-item"
>
@ -773,6 +827,8 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
<div
class="ant-list-footer"
>
@ -787,7 +843,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
Large Size
</h3>
<div
class="ant-list ant-list-lg ant-list-split ant-list-bordered"
class="ant-list ant-list-lg ant-list-split ant-list-bordered ant-list-something-after-last-item"
>
<div
class="ant-list-header"
@ -797,6 +853,12 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
</div>
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-list-item"
>
@ -843,6 +905,8 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
<div
class="ant-list-footer"
>
@ -856,9 +920,15 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
<div
class="ant-list ant-list-vertical ant-list-lg ant-list-split"
class="ant-list ant-list-vertical ant-list-lg ant-list-split ant-list-something-after-last-item"
>
<div>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-list-item"
>
@ -1339,6 +1409,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
<div
class="ant-list-pagination"
>

5
components/list/demo/infinite-load.md
View File

@ -102,9 +102,10 @@ ReactDOM.render(<InfiniteListExample />, mountNode);
````css
.demo-infinite-container {
border: 1px solid #eee;
border: 1px solid #e8e8e8;
border-radius: 4px;
overflow: auto;
padding: 48px 16px;
padding: 8px 16px;
height: 300px;
}
.demo-loading {

20
components/list/index.tsx
View File

@ -81,6 +81,11 @@ export default class List extends Component<ListProps> {
return renderItem(item, index);
}
isSomethingAfterLastTtem() {
const { loadMore, pagination, footer } = this.props;
return !!(loadMore || pagination || footer);
}
render() {
const {
bordered = false,
@ -122,6 +127,7 @@ export default class List extends Component<ListProps> {
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-grid`]: grid,
[`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastTtem(),
});
const paginationContent = (
@ -140,19 +146,11 @@ export default class List extends Component<ListProps> {
<Row gutter={grid.gutter}>{childrenList}</Row>
) : childrenList;
const content = loading ? (
const content = (
<div>
<Spin>
{childrenContent}
</Spin>
<Spin spinning={loading}>{childrenContent}</Spin>
{loadMore}
{(!loadMore && pagination) && paginationContent}
</div>
) : (
<div>
{childrenContent}
{loadMore}
{(!loadMore && pagination) && paginationContent}
{(!loadMore && pagination) ? paginationContent : null}
</div>
);

26
components/list/style/index.less
View File

@ -105,11 +105,22 @@
flex: 0;
}
}
&-header,
&-footer {
padding-top: 12px;
padding-bottom: 12px;
}
}
.@{list-prefix-cls}-split {
.@{list-prefix-cls}-item {
border-bottom: 1px solid @border-color-split;
&:last-child {
border-bottom: none;
}
}
.@{list-prefix-cls}-header {
border-bottom: 1px solid @border-color-split;
}
}
@ -123,21 +134,22 @@
border-radius: @border-radius-base;
border: 1px solid @border-color-base;
.@{list-prefix-cls}-header {
border-bottom: 1px solid @border-color-split;
padding: 12px 24px;
padding-left: 24px;
padding-right: 24px;
}
.@{list-prefix-cls}-footer {
border-top: 1px solid @border-color-split;
padding: 12px 24px;
padding-left: 24px;
padding-right: 24px;
}
.@{list-prefix-cls}-item {
border-bottom: 1px solid @border-color-split;
padding-left: 24px;
padding-right: 24px;
}
.@{list-prefix-cls}-item:last-child {
border-bottom: none;
}
}
.@{list-prefix-cls}-something-after-last-item .@{list-prefix-cls}-item:last-child {
border-bottom: 1px solid @border-color-split;
}
.@{list-prefix-cls}-bordered.@{list-prefix-cls}-lg {