New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: [Table] Pagination on the top in addition to the bottom. fix… #9357

Merged
merged 7 commits into from Mar 2, 2018

Conversation

Projects
None yet
4 participants
@kanweiwei
Contributor

kanweiwei commented Feb 14, 2018

new feature related (#9346)

  • Make sure that you propose PR to right branch: bugfix for master, feature for latest active branch feature-x.x.
  • Make sure that you follow antd's code convention.
  • Run npm run lint and fix those errors before submitting in order to keep consistent code style.
  • Rebase before creating a PR to keep commit history clear.
  • Add some descriptions and refer relative issues for you PR.

Extra checklist:
isNewFeature :

  • Update API docs for the component.
  • Update TypeScript definition for the component.
  • Add unit tests for the feature.
@codecov

This comment has been minimized.

codecov bot commented Feb 14, 2018

Codecov Report

Merging #9357 into feature-3.3.0 will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@                Coverage Diff                @@
##           feature-3.3.0    #9357      +/-   ##
=================================================
+ Coverage          85.91%   85.92%   +<.01%     
=================================================
  Files                195      195              
  Lines               4630     4631       +1     
  Branches            1287     1289       +2     
=================================================
+ Hits                3978     3979       +1     
  Misses               648      648              
  Partials               4        4
Impacted Files Coverage Δ
components/table/Table.tsx 93.21% <100%> (+0.01%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bea95bf...ee95e25. Read the comment docs.

}
}
return table;
};

This comment has been minimized.

@yesmeck

yesmeck Feb 15, 2018

Member

Could you refactor it to less ifs? Like:

{this.renderPagination('top')}
{table}
{this.renderPagination('bottom')}

This comment has been minimized.

@kanweiwei

kanweiwei Feb 15, 2018

Contributor

good idea, thanks

kanweiwei added a commit to kanweiwei/ant-design that referenced this pull request Feb 15, 2018

@kanweiwei

This comment has been minimized.

Contributor

kanweiwei commented Feb 16, 2018

@yesmeck why it failed, could you help me

@@ -27,6 +27,7 @@ A long list can be divided into several pages by `Pagination`, and only one page
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
| pageSize | number of data items per page | number | - |
| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
| position | specify the position of `Pagination` component when using `Table` component | 'top' \| 'bottom' \| 'both' | - |

This comment has been minimized.

@yesmeck

yesmeck Feb 16, 2018

Member

Should add to Table.

This comment has been minimized.

@yesmeck

yesmeck Feb 16, 2018

Member

Like rowSelection does.

@@ -70,7 +70,7 @@ class Demo extends React.Component {
state = {
bordered: false,
loading: false,
pagination: true,
pagination: { position: 'top' },

This comment has been minimized.

@yesmeck

yesmeck Feb 16, 2018

Member

Do not need to change this demo.

@yesmeck

This comment has been minimized.

Member

yesmeck commented Feb 16, 2018

Add a test case, please.

@kanweiwei kanweiwei force-pushed the kanweiwei:myfeature-3.3.0 branch from 67f517a to 47ee461 Feb 16, 2018

@@ -65,7 +65,7 @@ const columns = [{
| indentSize | Indent size in pixels of tree data | number | 15 |
| loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | |
| pagination | Pagination [config](#pagination) or [`Pagination`] (/components/pagination/), hide it by setting it to `false` | object | |

This comment has been minimized.

@yutingzhao1991

yutingzhao1991 Feb 18, 2018

Contributor

I don't agree copy pagination api at here. link to /components/pagination-cn/#API is ok.

This comment has been minimized.

@kanweiwei

kanweiwei Feb 18, 2018

Contributor

but @yesmeck suggest me to add the new feature to Table, I'm confused

This comment has been minimized.

@yutingzhao1991

yutingzhao1991 Feb 28, 2018

Contributor

I guess @yesmeck means add a new props to Table, not add position to pagination. ping @yesmeck .

This comment has been minimized.

@yesmeck

yesmeck Feb 28, 2018

Member

是这样 <Table pagination={{ position: 'both' }} />

| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
| pageSize | number of data items per page | number | - |
| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' |

This comment has been minimized.

@yesmeck

yesmeck Feb 24, 2018

Member

Don't need copy all Pagination props to here. Just leave positon here, and link others to /components/pagination-cn/#API.

This comment has been minimized.

@kanweiwei

kanweiwei Feb 28, 2018

Contributor

i have updated the api doc

@kanweiwei kanweiwei force-pushed the kanweiwei:myfeature-3.3.0 branch 3 times, most recently from 3d23f2d to 2cbadef Feb 25, 2018

kanweiwei added a commit to kanweiwei/ant-design that referenced this pull request Feb 27, 2018

@@ -2503,7 +2503,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
/>
<div
class="ant-slider-track"
style="visibility:visible;left:0%;width:0%"
style="left:0%;width:0%"

This comment has been minimized.

@yesmeck

yesmeck Feb 28, 2018

Member

不相关的 snapshot 不要提交

This comment has been minimized.

@yutingzhao1991

yutingzhao1991 Feb 28, 2018

Contributor

但是这样会导致测试失败,这种情况一般怎么处理?我们来更新 snapshot ?

This comment has been minimized.

@yesmeck

yesmeck Feb 28, 2018

Member

feature-3.3.0 上已经更新了, rebase 一下就可以。

This comment has been minimized.

@kanweiwei

kanweiwei Feb 28, 2018

Contributor

OK

@kanweiwei kanweiwei force-pushed the kanweiwei:myfeature-3.3.0 branch from 2cbadef to f6b4baa Feb 28, 2018

@@ -16,6 +16,7 @@ export interface PaginationProps {
hideOnSinglePage?: boolean;
showSizeChanger?: boolean;
pageSizeOptions?: string[];
position?: 'top' | 'bottom' | 'both';

This comment has been minimized.

@yesmeck

yesmeck Mar 1, 2018

Member

Should move to Table

This comment has been minimized.

@kanweiwei

kanweiwei Mar 1, 2018

Contributor

Table初始化的时候,this.state.pagination 指定为Pagination的prop类型,所以我在Pagination的prop类型声明里加了这个属性
image

This comment has been minimized.

@yesmeck

yesmeck Mar 1, 2018

Member

可以在 Table 里新增一个 TablePaginationConfig 类型,继承 PaginationProps

@kanweiwei kanweiwei force-pushed the kanweiwei:myfeature-3.3.0 branch from df46c7e to ee95e25 Mar 1, 2018

@yesmeck

yesmeck approved these changes Mar 1, 2018

@yesmeck yesmeck merged commit ae2990e into ant-design:feature-3.3.0 Mar 2, 2018

4 checks passed

codecov/patch 100% of diff hit (target 85.91%)
Details
codecov/project 85.92% (+<.01%) compared to bea95bf
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
security/snyk No dependency changes
Details
@MrSaints

This comment has been minimized.

MrSaints commented Mar 5, 2018

Awesome :)

yutingzhao1991 added a commit that referenced this pull request Mar 5, 2018

feature: [Table] Pagination on the top in addition to the bottom. fix… (
#9357)

* feature: [Table] Pagination on the top in addition to the bottom. fix (#9346)

* refactor pagination of table (#9357)

* specify the position of pagination when using table  - add test

* specify the position of pagination when using table - update API docs

* update api docs

* fix error

* add TablePaginationConfig extends PaginationProps

zheeeng added a commit to zheeeng/ant-design that referenced this pull request Apr 12, 2018

feature: [Table] Pagination on the top in addition to the bottom. fix… (
ant-design#9357)

* feature: [Table] Pagination on the top in addition to the bottom. fix (ant-design#9346)

* refactor pagination of table (ant-design#9357)

* specify the position of pagination when using table  - add test

* specify the position of pagination when using table - update API docs

* update api docs

* fix error

* add TablePaginationConfig extends PaginationProps
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment