From bceb15c4e67b120068c43fcf95273d16fdcb1b0a Mon Sep 17 00:00:00 2001 From: niko <644506165@qq.com> Date: Wed, 6 Sep 2017 15:53:25 +0800 Subject: [PATCH] List:add infinite & detail optimize (#7445) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * List:add infinite & detail optimize * React.children.map -> context * update snapshots & demo order * remove Item.Action _id * update List demo * List:add infinite & detail optimize * React.children.map -> context * 更新 snap * update snapshots --- components/list/Item.tsx | 14 +- .../__tests__/__snapshots__/demo.test.js.snap | 3100 ++++++++++------- components/list/__tests__/demo.test.js | 1 - components/list/demo/basic.md | 2 +- components/list/demo/grid.md | 2 +- components/list/demo/infinite-load.md | 83 + components/list/demo/meta.md | 53 + components/list/demo/resposive.md | 2 +- components/list/demo/simple.md | 30 + components/list/demo/vertical.md | 2 +- components/list/index.en-US.md | 8 + components/list/index.tsx | 176 +- components/list/index.zh-CN.md | 8 + components/list/style/index.less | 3 + 14 files changed, 2121 insertions(+), 1363 deletions(-) create mode 100644 components/list/demo/infinite-load.md create mode 100644 components/list/demo/meta.md create mode 100644 components/list/demo/simple.md diff --git a/components/list/Item.tsx b/components/list/Item.tsx index 696bc45f86..6553efb2b1 100644 --- a/components/list/Item.tsx +++ b/components/list/Item.tsx @@ -70,10 +70,13 @@ export default class Item extends React.Component { xl: PropTypes.oneOf(GridColumns), }; - _id: number = new Date().getTime(); + static contextTypes = { + grid: PropTypes.any, + }; render() { - const { prefixCls = 'ant-list', children, actions, extra, className, grid, ...others } = this.props; + const { grid } = this.context; + const { prefixCls = 'ant-list', children, actions, extra, className, ...others } = this.props; const classString = classNames(`${prefixCls}-item`, className); const metaContent: React.ReactElement[] = []; @@ -87,8 +90,11 @@ export default class Item extends React.Component { } }); + const contentClassString = classNames(`${prefixCls}-item-content`, { + [`${prefixCls}-item-content-single`]: (metaContent.length < 1), + }); const content = ( -
+
{otherContent}
); @@ -96,7 +102,7 @@ export default class Item extends React.Component { let actionsContent; if (actions && actions.length > 0) { const actionsContentItem = (action, i) => ( -
  • +
  • {action} {i !== (actions.length - 1) && }
    • diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 664c7827bb..4d5da6756d 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -4,269 +4,271 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
    -
    +
    - - - -
    -
    -

    - - Ant design - -

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

    + + Ant design + +

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

    - - Ant design - -

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

    - - Ant design +
  • + + 编辑 -

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

    + + Ant design + +

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

    - - Ant design - -

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

    + + Ant design + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    + Content +
    +
    +
    - -
    -
    -
    +
    +
    + Content +
    +
    + +
    +
    - - 加载更多... - - + +
    `; @@ -275,38 +277,215 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
    -
    +
    -
    -
    +
    +
    - Card title +
    + Card title +
    +
    +
    +
    + Card content +
    -
    -
    - Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    @@ -314,34 +493,188 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
    +
    +
    +`; + +exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = ` +
    +
    -
    -
    +
    +
    - Card title +
    + List Item Title 1 +
    +
    +
    +
    + List Item Content 1 +
    -
    -
    - Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + List Item Title 2 +
    +
    +
    +
    + List Item Content 2 +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + List Item Title 3 +
    +
    +
    +
    + List Item Content 3 +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + List Item Title 4 +
    +
    +
    +
    + List Item Content 4 +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + List Item Title 5 +
    +
    +
    +
    + List Item Content 5 +
    @@ -349,145 +682,174 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
    +
    +
    +`; + +exports[`renders ./components/list/demo/meta.md correctly 1`] = ` +
    +
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - Card content -
    -
    -
    + + +
    +
    +

    + + Ant design + +

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

    + + Ant design + +

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

    + + Ant design + +

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

    + + Ant design + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team
    +
    @@ -497,38 +859,215 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
    -
    +
    -
    -
    +
    +
    - Card title +
    + Card title +
    +
    +
    +
    + Card content +
    -
    -
    - Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Card title +
    +
    +
    +
    + Card content +
    @@ -536,179 +1075,58 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
    +
    +
    +`; + +exports[`renders ./components/list/demo/simple.md correctly 1`] = ` +
    +
    -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - Card content -
    -
    -
    -
    -
    + Racing car sprays burning fuel into crowd.
    -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - Card content -
    -
    -
    -
    -
    + Japanese princess to wed commoner.
    -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - Card content -
    -
    -
    -
    -
    + Australian walks 100km after outback crash.
    -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - Card content -
    -
    -
    -
    -
    + Man charged over missing wedding girl.
    -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - Card content -
    -
    -
    -
    -
    + Los Angeles battles huge wildfires.
    @@ -719,1003 +1137,1005 @@ 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. + + + +
    +
    +

    + + 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 156 - - -
      • -
    • - - - 156 - - -
      • -
    • - - - 2 - -
      • -
    -
    -
    - logo
    -
    -
    - - - -
    -
    -

    - - ant design part 1 - -

    - 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 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 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 156 - - -
      • -
    • - - - 156 - - -
      • -
    • - - - 2 - -
      • -
    -
    -
    - logo
    -
    -
    - - - -
    -
    -

    - - ant design part 3 - -

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

    + + 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 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 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 156 - - -
      • -
    • - - - 156 - - -
      • -
    • - - - 2 - -
      • -
    -
    -
    - logo
    -
    -
    - - - -
    -
    -

    - - ant design part 5 - -

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

    + + ant design part 5 + +

    +
    + 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 156 - - -
      • -
    • - - - 156 - - -
      • -
    • - - - 2 - -
      • -
    -
    -
    - logo
    -
    -
    - - - -
    -
    -

    - - ant design part 6 - -

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

    + + ant design part 6 + +

    +
    + 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 156 - - -
      • -
    • - - - 156 - - -
      • -
    • - - - 2 - -
      • -
    -
    -
    - logo
    -
    -
    - - - -
    -
    -

    - - ant design part 7 - -

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

    + + ant design part 7 + +

    +
    + 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 156 - - -
      • -
    • - - - 156 - - -
      • -
    • - - - 2 - -
      • -
    -
    -
    - logo
    -
    -
    - - - -
    -
    -

    - - ant design part 8 - -

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

    + + ant design part 8 + +

    +
    + 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 156 - - -
      • -
    • - - - 156 - - -
      • -
    • - - - 2 - -
      • -
    -
    -
    - logo
    -
    -
    - - - -
    -
    -

    - - ant design part 9 - -

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

    + + ant design part 9 + +

    +
    + 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 + +
      • +
    - 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. + logo
    -
      -
    • - - - 156 - - -
      • -
    • - - - 156 - - -
      • -
    • - - - 2 - -
      • -
    -
    -
    - logo
    -
    -
    - +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • + +
    `; diff --git a/components/list/__tests__/demo.test.js b/components/list/__tests__/demo.test.js index c74dd7bb6a..188bfe8c13 100644 --- a/components/list/__tests__/demo.test.js +++ b/components/list/__tests__/demo.test.js @@ -1,4 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; demoTest('list'); - diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md index 2a807249f6..7a7713dc33 100644 --- a/components/list/demo/basic.md +++ b/components/list/demo/basic.md @@ -1,5 +1,5 @@ --- -order: 0 +order: 2 title: zh-CN: 基础列表 en-US: Basic diff --git a/components/list/demo/grid.md b/components/list/demo/grid.md index 0f2ec774a8..b42907a6ae 100644 --- a/components/list/demo/grid.md +++ b/components/list/demo/grid.md @@ -1,5 +1,5 @@ --- -order: 0 +order: 4 title: zh-CN: 栅格列表 en-US: Grid diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md new file mode 100644 index 0000000000..35f6c7c11a --- /dev/null +++ b/components/list/demo/infinite-load.md @@ -0,0 +1,83 @@ +--- +order: 6 +title: + zh-CN: 无限加载 + en-US: infinite load +--- + +## zh-CN + +无限加载样例。 + +## en-US + +The example of infinite load. + +````jsx +import { List, Card, message } from 'antd'; + +let countId = 1; + +function mockData() { + const data = []; + for (let i = 0; i < 5; i++) { + const id = countId; + data.push({ + id: `id-${id}`, + title: `List Item Title ${id}`, + content: `List Item Content ${id}`, + }); + countId++; + } + return data; +} + +class InfiniteList extends React.Component { + state = { + data: mockData(), + loading: false, + } + handleInfiniteOnLoad = (done) => { + let data = this.state.data; + if (data.length > 15) { + message.warning('Loaded All'); + return; + } + this.setState({ + loading: true, + }); + setTimeout(() => { + data = data.concat(mockData()); + this.setState({ + data, + loading: false, + }); + // reset the infinite onLoad callback flag + // so can trigger onLoad callback again + done(); + }, 1000); + } + render() { + return ( + + { + this.state.data.map(item => ( + + {item.content} + + )) + } + + ); + } +} + +ReactDOM.render(, mountNode); +```` diff --git a/components/list/demo/meta.md b/components/list/demo/meta.md new file mode 100644 index 0000000000..ae6070bd7f --- /dev/null +++ b/components/list/demo/meta.md @@ -0,0 +1,53 @@ +--- +order: 1 +title: + zh-CN: 带有头像和描述的列表 + en-US: List with avatar and description. +--- + +## zh-CN + +带有头像和描述的列表。 + +## en-US + +List with avatar and description. + +````jsx +import { List, Avatar } from 'antd'; + +ReactDOM.render( + + + } + title={Ant design} + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> + + + } + title={Ant design} + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> + + + } + title={Ant design} + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> + + + } + title={Ant design} + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> + + +, mountNode); +```` diff --git a/components/list/demo/resposive.md b/components/list/demo/resposive.md index fcd4598ab6..5f831bd346 100644 --- a/components/list/demo/resposive.md +++ b/components/list/demo/resposive.md @@ -1,5 +1,5 @@ --- -order: 0 +order: 5 title: zh-CN: 响应式的栅格列表 en-US: Grid diff --git a/components/list/demo/simple.md b/components/list/demo/simple.md new file mode 100644 index 0000000000..fe088c52df --- /dev/null +++ b/components/list/demo/simple.md @@ -0,0 +1,30 @@ +--- +order: 0 +title: + zh-CN: 简单列表 + en-US: Simple +--- + +## zh-CN + +最简单的列表。 + +## en-US + +Simple List. + +````jsx +import { List } from 'antd'; + +ReactDOM.render( + + 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. + +, mountNode); +```` diff --git a/components/list/demo/vertical.md b/components/list/demo/vertical.md index 0e58aa1920..42eeb2a825 100644 --- a/components/list/demo/vertical.md +++ b/components/list/demo/vertical.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 3 title: zh-CN: 竖排列表样式 en-US: Layout Vertical diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index 934659b724..d40440483a 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -25,6 +25,7 @@ A list can be used to display content related to a single subject. The content c | onMoreClick | -| function | - | | pagination | - | boolean \| object | false | | grid | - | object | - | +| infinite | - | object | - | ### List grid props | Property | Description | Type | Default | @@ -37,6 +38,13 @@ A list can be used to display content related to a single subject. The content c | lg | `≥1200px` - | number | - | | xl | `≥1600px` - | number | - | +### List infinite props +| Property | Description | Type | Default | +---------|-------------|------|--------- +| onLoad | - | function | - | +| offset | - | number | 0 | +| loading | - | boolean | - | + ### List.Item | Property | Description | Type | Default | diff --git a/components/list/index.tsx b/components/list/index.tsx index cbc7e11634..2a9c878298 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -1,11 +1,14 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; +import addEventListener from 'rc-util/lib/Dom/addEventListener'; import Spin from '../spin'; import Icon from '../icon'; import Pagination from '../pagination'; import Button from '../button'; import { Row } from '../grid'; +import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame'; import Item from './Item'; @@ -19,6 +22,12 @@ export interface ListGridType { xl?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; } +export interface InfinitePropType { + onLoad?: any; + loading?: boolean; + offset?: number; +} + export interface ListProps { bordered?: boolean; className?: string; @@ -33,11 +42,144 @@ export interface ListProps { pagination?: any; prefixCls?: string; grid?: ListGridType; + infinite?: InfinitePropType; +} + +function getDefaultTarget() { + return typeof window !== 'undefined' ? + window : null; +} + +function getOffsetTop(element?: HTMLElement): number { + if (!element) { + return 0; + } + + if (!element.getClientRects().length) { + return 0; + } + + const rect = element.getBoundingClientRect(); + + if (rect.width || rect.height) { + const doc = element.ownerDocument; + const docElem = doc.documentElement; + return rect.top - docElem.clientTop; + } + + return rect.top; +} + +function getViewportHeight() { + const win = getDefaultTarget(); + if (!win) { + return 0; + } + return Math.max(win.document.documentElement.clientHeight, win.innerHeight || 0); } export default class List extends Component { static Item: typeof Item = Item; + static childContextTypes = { + grid: PropTypes.any, + }; + + scrollEvent: any; + resizeEvent: any; + timeout: any; + node: any; + + events = [ + 'resize', + 'scroll', + 'touchstart', + 'touchmove', + 'touchend', + 'pageshow', + 'load', + ]; + infiniteLoaded = false; + eventHandlers = {}; + + getChildContext() { + return { + grid: this.props.grid, + }; + } + + componentDidMount() { + if (!this.isInfinite()) { + return; + } + const target = getDefaultTarget; + + // Wait for parent component ref has its value + this.timeout = setTimeout(() => { + this.setTargetEventListeners(target); + }); + } + + componentWillUnmount() { + if (!this.isInfinite()) { + return; + } + this.clearEventListeners(); + clearTimeout(this.timeout); + (this.infiniteLoad as any).cancel(); + } + + getNode = (n) => { + this.node = n; + } + + isInfinite() { + const { infinite } = this.props; + return infinite && (typeof infinite.onLoad === 'function'); + } + + setTargetEventListeners(getTarget) { + const target = getTarget(); + if (!target) { + return; + } + this.clearEventListeners(); + + this.events.forEach(eventName => { + this.eventHandlers[eventName] = addEventListener(target, eventName, this.infiniteLoad); + }); + } + + clearEventListeners() { + this.events.forEach(eventName => { + const handler = this.eventHandlers[eventName]; + if (handler && handler.remove) { + handler.remove(); + } + }); + } + + @throttleByAnimationFrameDecorator() + infiniteLoad() { + const { infinite = {} } = this.props; + const targetElement = this.node; + + if (this.infiniteLoaded || !targetElement) { + return; + } + + const viewportHeight = getViewportHeight(); + const eleOffsetTop = getOffsetTop(targetElement); + const bottomPositionY = eleOffsetTop + targetElement.offsetHeight - viewportHeight + (infinite.offset || 0); + + if (bottomPositionY < 0) { + this.infiniteLoaded = true; + infinite.onLoad(() => { + this.infiniteLoaded = false; + }); + } + } + render() { const { bordered = true, @@ -52,6 +194,7 @@ export default class List extends Component { pagination = false, prefixCls = 'ant-list', grid, + infinite = {}, ...rest, } = this.props; @@ -60,6 +203,7 @@ export default class List extends Component { [`${prefixCls}-bordered`]: bordered, [`${prefixCls}-loading`]: loading, [`${prefixCls}-grid`]: grid, + [`${prefixCls}-infinite`]: infinite.onLoad, }); const moreButton = ( @@ -81,24 +225,28 @@ export default class List extends Component {
    ); - const loadingContent = ( -
    - + const childrenContent = grid ? ( + {children} + ) : children; + + const content = loading ? ( + + {childrenContent} + {showLoadMore && moreContent} + {(!showLoadMore && pagination) && paginationContent} + + ) : ( +
    + {childrenContent} + {showLoadMore && moreContent} + {(!showLoadMore && pagination) && paginationContent} + {infinite.loading && (
    )}
    ); - const childrenContent = grid ? ( - - {React.Children.map(children, (element: React.ReactElement) => React.cloneElement(element, { grid }))} - - ) : children; - return ( -
    - {loading && loadingContent} - {!loading && childrenContent} - {!loading && showLoadMore && moreContent} - {(!showLoadMore && pagination) && paginationContent} +
    + {content}
    ); } diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index a5b52fadd2..8e214530ca 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -26,6 +26,7 @@ cols: 1 | onMoreClick | 点击 more 按钮的回调 | function | - | | pagination | 对应的 pagination 配置, 设置 false 不显示 | boolean \| object | false | | grid | 列表栅格 | object | - | +| infinite | 无限加载配置 | object | - | ### List grid props | 参数 | 说明 | 类型 | 默认值 | @@ -38,6 +39,13 @@ cols: 1 | lg | `≥1200px` 展示的列数 | number | - | | xl | `≥1600px` 展示的列数 | number | - | +### List infinite props +| 参数 | 说明 | 类型 | 默认值 | +---------|-------------|------|--------- +| onLoad | 无限加载的回调函数 | function | - | +| offset | 触发加载位置的偏移量 | number | 0 | +| loading | 显示无限加载时的 loading | boolean | - | + ### List.Item | 参数 | 说明 | 类型 | 默认值 | diff --git a/components/list/style/index.less b/components/list/style/index.less index 5fa3ca4061..c5076eda97 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -57,6 +57,9 @@ flex: 1; justify-content: flex-end; } + &-content-single { + justify-content: flex-start; + } &-action { font-size: 0; flex: 0 0 auto;