mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

demo: improve editable row demo

Browse Source
This commit is contained in:
afc163 2018-05-23 11:32:23 +08:00
parent acb56281f8
commit 247d78990e
2 changed files with 35 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2945,7 +2945,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -2969,9 +2969,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -2979,7 +2977,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3003,9 +3001,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -3013,7 +3009,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3037,9 +3033,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -3047,7 +3041,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3071,9 +3065,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -3081,7 +3073,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3105,9 +3097,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -3115,7 +3105,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3139,9 +3129,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -3149,7 +3137,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3173,9 +3161,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -3183,7 +3169,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3207,9 +3193,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -3217,7 +3201,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3241,9 +3225,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>
@ -3251,7 +3233,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
class="ant-table-row editable-row ant-table-row-level-0"
>
<td
class=""
@ -3275,9 +3257,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<td
class=""
>
<div
class="editable-row-operations"
>
<div>
<a>
Edit
</a>

30
components/table/demo/edit-row.md
View File

@ -39,9 +39,9 @@ const EditableFormRow = Form.create()(EditableRow);
class EditableCell extends React.Component {
getInput = () => {
if (this.props.inputType === 'number') {
return <InputNumber size="small" />;
return <InputNumber />;
}
return <Input size="small" />;
return <Input />;
};
render() {
const {
@ -60,20 +60,16 @@ class EditableCell extends React.Component {
return (
<td {...restProps}>
{editing ? (
<FormItem>
<FormItem style={{ margin: 0 }}>
{getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `Please Input ${title}!`,
},
],
rules: [{
required: true,
message: `Please Input ${title}!`,
}],
initialValue: record[dataIndex],
})(this.getInput())}
</FormItem>
) : (
restProps.children
)}
) : restProps.children}
</td>
);
}}
@ -111,7 +107,7 @@ class EditableTable extends React.Component {
render: (text, record) => {
const editable = this.isEditing(record);
return (
<div className="editable-row-operations">
<div>
{editable ? (
<span>
<EditableContext.Consumer>
@ -119,6 +115,7 @@ class EditableTable extends React.Component {
<a
href="javascript:;"
onClick={() => this.save(form, record.key)}
style={{ marginRight: 8 }}
>
Save
</a>
@ -199,6 +196,7 @@ class EditableTable extends React.Component {
bordered
dataSource={this.state.data}
columns={columns}
rowClassName="editable-row"
/>
);
}
@ -208,7 +206,9 @@ ReactDOM.render(<EditableTable />, mountNode);
```
```css
.editable-row-operations a {
margin-right: 8px;
.editable-row .ant-form-explain {
position: absolute;
font-size: 12px;
margin-top: -4px;
}
```