diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 4c88ce8bb4..fe1b62479b 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -6,149 +6,157 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = ` >
- - - -
-
-

- - Ant Design Title 1 - -

- Ant Design, a design language for background applications, is refined by Ant UED Team +
+ + + +
+
+

+ + Ant Design Title 1 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team +
+
-
-
-
-
- - - -
-
-

- - Ant Design Title 2 - -

- Ant Design, a design language for background applications, is refined by Ant UED Team +
+ + + +
+
+

+ + Ant Design Title 2 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team +
+
-
-
-
-
- - - -
-
-

- - Ant Design Title 3 - -

- Ant Design, a design language for background applications, is refined by Ant UED Team +
+ + + +
+
+

+ + Ant Design Title 3 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team +
+
-
-
-
-
- - - -
-
-

- - Ant Design Title 4 - -

- Ant Design, a design language for background applications, is refined by Ant UED Team +
+ + + +
+
+

+ + Ant Design Title 4 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team +
+
@@ -163,158 +171,166 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = ` >
-
+
-
-
- Title 1 -
-
-
-
- Card content +
+
+
+ Title 1 +
+
+
+
+
+ Card content +
+
-
-
-
-
-
+
-
-
- Title 2 -
-
-
-
- Card content +
+
+
+ Title 2 +
+
+
+
+
+ Card content +
+
-
-
-
-
-
+
-
-
- Title 3 -
-
-
-
- Card content +
+
+
+ Title 3 +
+
+
+
+
+ Card content +
+
-
-
-
-
-
+
-
-
- Title 4 -
-
-
-
- Card content +
+
+
+ Title 4 +
+
+
+
+
+ Card content +
+
@@ -335,7 +351,15 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
-
+
+
+
+
+
@@ -345,13 +369,21 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
-
+
+
+
+
+
`; exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
-
+
-
-
- Title 1 -
-
-
-
- Card content +
+
+
+ Title 1 +
+
+
+
+
+ Card content +
+
-
-
-
-
-
+
-
-
- Title 2 -
-
-
-
- Card content +
+
+
+ Title 2 +
+
+
+
+
+ Card content +
+
-
-
-
-
-
+
-
-
- Title 3 -
-
-
-
- Card content +
+
+
+ Title 3 +
+
+
+
+
+ Card content +
+
-
-
-
-
-
+
-
-
- Title 4 -
-
-
-
- Card content +
+
+
+ Title 4 +
+
+
+
+
+ Card content +
+
-
-
-
-
-
+
-
-
- Title 5 -
-
-
-
- Card content +
+
+
+ Title 5 +
+
+
+
+
+ Card content +
+
-
-
-
-
-
+
-
-
- Title 6 -
-
-
-
- Card content +
+
+
+ Title 6 +
+
+
+
+
+ Card content +
+
@@ -647,7 +687,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = ` Default Size
- Racing car sprays burning fuel into crowd. -
-
-
-
- Japanese princess to wed commoner. -
-
-
-
- Australian walks 100km after outback crash. -
-
-
-
- Man charged over missing wedding girl. -
-
-
-
- Los Angeles battles huge wildfires. +
+
+ Racing car sprays burning fuel into crowd. +
+
+
+
+ Japanese princess to wed commoner. +
+
+
+
+ Australian walks 100km after outback crash. +
+
+
+
+ Man charged over missing wedding girl. +
+
+
+
+ Los Angeles battles huge wildfires. +
+
@@ -717,7 +765,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = ` Small Size
- Racing car sprays burning fuel into crowd. -
-
-
-
- Japanese princess to wed commoner. -
-
-
-
- Australian walks 100km after outback crash. -
-
-
-
- Man charged over missing wedding girl. -
-
-
-
- Los Angeles battles huge wildfires. +
+
+ Racing car sprays burning fuel into crowd. +
+
+
+
+ Japanese princess to wed commoner. +
+
+
+
+ Australian walks 100km after outback crash. +
+
+
+
+ Man charged over missing wedding girl. +
+
+
+
+ Los Angeles battles huge wildfires. +
+
@@ -787,7 +843,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = ` Large Size
- Racing car sprays burning fuel into crowd. -
-
-
-
- Japanese princess to wed commoner. -
-
-
-
- Australian walks 100km after outback crash. -
-
-
-
- Man charged over missing wedding girl. -
-
-
-
- Los Angeles battles huge wildfires. +
+
+ Racing car sprays burning fuel into crowd. +
+
+
+
+ Japanese princess to wed commoner. +
+
+
+
+ Australian walks 100km after outback crash. +
+
+
+
+ Man charged over missing wedding girl. +
+
+
+
+ Los Angeles battles huge wildfires. +
+
@@ -856,486 +920,494 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = ` exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
- - - -
-
-

- - ant design part 0 - -

- Ant Design, a design language for background applications, is refined by Ant UED Team. -
-
-
-
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -
-
    -
  • - - - 156 - - -
    • -
  • - - - 156 - - -
    • -
  • - - - 2 - -
    • -
-
-
- logo -
-
-
-
-
-
-
-
- - - -
-
-

- - ant design part 1 - -

-
- Ant Design, a design language for background applications, is refined by Ant UED Team. -
-
-
-
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -
-
    -
  • - - - 156 - - -
    • -
  • - - - 156 - - -
    • -
  • - - - 2 - -
    • -
-
-
- logo -
-
-
-
-
-
-
-
- - - -
-
-

- + + +

+
- ant design part 2 - - -
- Ant Design, a design language for background applications, is refined by Ant UED Team. +

+ + ant design part 0 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. +
+
-
-
-
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -
-
    -
  • - - - 156 - - -
    • -
  • - - - 156 - - -
    • -
  • - - - 2 - -
    • -
-
-
- logo -
-
-
-
-
-
-
-
- - - + We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+
    +
  • + + + 156 + + +
    • +
  • + + + 156 + + +
    • +
  • + + + 2 + +
    • +
-

+

+
+
+
+
+
+
- - ant design part 3 - - -
- Ant Design, a design language for background applications, is refined by Ant UED Team. -
-
-
-
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -
-
    -
  • - - - 156 - - -
    • -
  • - - - 156 - - -
    • -
  • - - - 2 - -
    • -
-
-
- logo -
-
-
-
-
-
-
-
- - - -
-
-

- + + +

+
- ant design part 4 - - -
- Ant Design, a design language for background applications, is refined by Ant UED Team. +

+ + ant design part 1 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. +
+
+
+ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+
    +
  • + + + 156 + + +
    • +
  • + + + 156 + + +
    • +
  • + + + 2 + +
    • +
+
+
+ logo
-
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -
-
    -
  • - - - 156 - - -
    • -
  • - - - 156 - - -
    • -
  • - - - 2 - -
    • -
- logo +
+
+
+
+ + + +
+
+

+ + ant design part 2 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. +
+
+
+
+ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+
    +
  • + + + 156 + + +
    • +
  • + + + 156 + + +
    • +
  • + + + 2 + +
    • +
+
+
+ logo +
+
+
+
+
+
+
+
+ + + +
+
+

+ + ant design part 3 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. +
+
+
+
+ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+
    +
  • + + + 156 + + +
    • +
  • + + + 156 + + +
    • +
  • + + + 2 + +
    • +
+
+
+ logo +
+
+
+
+
+
+
+
+ + + +
+
+

+ + ant design part 4 + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. +
+
+
+
+ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+
    +
  • + + + 156 + + +
    • +
  • + + + 156 + + +
    • +
  • + + + 2 + +
    • +
+
+
+ logo +
+
diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md index f7825128bb..d4c419af2a 100644 --- a/components/list/demo/infinite-load.md +++ b/components/list/demo/infinite-load.md @@ -102,9 +102,10 @@ ReactDOM.render(, 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 { diff --git a/components/list/index.tsx b/components/list/index.tsx index e5905334f1..56349a346b 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -81,6 +81,11 @@ export default class List extends Component { 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 { [`${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 { {childrenList} ) : childrenList; - const content = loading ? ( + const content = (
- - {childrenContent} - + {childrenContent} {loadMore} - {(!loadMore && pagination) && paginationContent} -
- ) : ( -
- {childrenContent} - {loadMore} - {(!loadMore && pagination) && paginationContent} + {(!loadMore && pagination) ? paginationContent : null}
); diff --git a/components/list/style/index.less b/components/list/style/index.less index 869d4a4b0e..6c0b55ac11 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -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 {