GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: Table demo dynamic settings pagination (#23679) 

* fix: Table demo dynamic settings pagination

* fix test
pull/23682/head
Tom Xu 5 years ago
committed by GitHub
parent
a823400b79
commit
5f1d5a17de
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 139 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 123
      components/table/__tests__/__snapshots__/demo.test.js.snap
  2. 37
      components/table/demo/dynamic-settings.md

123
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2146,9 +2146,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
<label
class=""
title="Pagination"
title="Pagination Top"
>
Pagination
Pagination Top
</label>
</div>
<div
@ -2172,14 +2172,52 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="top"
value="topLeft"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Top
TopLeft
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="topCenter"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
TopCenter
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="topRight"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
TopRight
</span>
</label>
<label
@ -2192,14 +2230,63 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
checked=""
class="ant-radio-button-input"
type="radio"
value="bottom"
value="none"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Bottom
None
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="Pagination Bottom"
>
Pagination Bottom
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="bottomLeft"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
BottomLeft
</span>
</label>
<label
@ -2211,14 +2298,34 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<input
class="ant-radio-button-input"
type="radio"
value="both"
value="bottomCenter"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
BottomCenter
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="bottomRight"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Both
BottomRight
</span>
</label>
<label

37
components/table/demo/dynamic-settings.md
View File

@ -90,6 +90,8 @@ class Demo extends React.Component {
scroll: undefined,
hasData: true,
tableLayout: undefined,
top: 'none',
bottom: 'bottomRight',
};
handleToggle = prop => enable => {
@ -140,13 +142,6 @@ class Demo extends React.Component {
this.setState({ hasData });
};
handlePaginationChange = e => {
const { value } = e.target;
this.setState({
pagination: value === 'none' ? false : { position: value },
});
};
render() {
const { xScroll, yScroll, ...state } = this.state;
@ -221,20 +216,36 @@ class Demo extends React.Component {
<Radio.Button value="fixed">Fixed</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination">
<Form.Item label="Pagination Top">
<Radio.Group
value={this.state.top}
onChange={e => {
this.setState({ top: e.target.value });
}}
>
<Radio.Button value="topLeft">TopLeft</Radio.Button>
<Radio.Button value="topCenter">TopCenter</Radio.Button>
<Radio.Button value="topRight">TopRight</Radio.Button>
<Radio.Button value="none">None</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Bottom">
<Radio.Group
value={state.pagination ? state.pagination.position : 'none'}
onChange={this.handlePaginationChange}
value={this.state.bottom}
onChange={e => {
this.setState({ bottom: e.target.value });
}}
>
<Radio.Button value="top">Top</Radio.Button>
<Radio.Button value="bottom">Bottom</Radio.Button>
<Radio.Button value="both">Both</Radio.Button>
<Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
<Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
<Radio.Button value="bottomRight">BottomRight</Radio.Button>
<Radio.Button value="none">None</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
<Table
{...this.state}
pagination={{ position: [this.state.top, this.state.bottom] }}
columns={tableColumns}
dataSource={state.hasData ? data : null}
scroll={scroll}

Write Preview
Loading…
Cancel
Save