innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

merge

This commit is contained in:
yangchch6 2019-04-30 10:03:55 +08:00
parent 527b2f20d6 992d9415d5
commit df7cc148e2
9 changed files with 398 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
demo/demolist/Demo0501.js
View File

@ -5,82 +5,96 @@
* @description 可以对行进行编辑的表格
* demo0501
*/
import React, { Component, PureComponent } from "react";
import React, { Component } from "react";
import Table from "../../src";
import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
const Option = Select.Option;
import { RefTreeWithInput } from "ref-tree";
function handleFormValueChange(WarpCompProps, field, allFields) {
const { onChange, throwError } = WarpCompProps;
if (field.value === "") return throwError && throwError(true);
throwError && throwError(false);
onChange && onChange(field.value);
}
class StringEditCell extends Component {
constructor(props, context) {
super(props);
this.state = {
value: props.value
};
}
const StringEditCell = Form.createForm({
onValuesChange: handleFormValueChange
})(PureStringEditCell);
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
}
function PureStringEditCell(props) {
const { getFieldProps, getFieldError } = props.form;
const { value, editable, required } = props;
let cls = "editable-cell-input-wrapper";
if (required) cls += " required";
if (getFieldError("value")) cls += " verify-cell";
return editable ? (
<div className="editable-cell">
<div className={cls}>
<FormControl
{...getFieldProps("value", {
initialValue: value,
validateTrigger: "onBlur",
rules: [
{
required: true,
message: (
<Tooltip
inverse
className="u-editable-table-tp"
placement="bottom"
overlay={
<div className="tp-content">
{"请输入" + props.colName}
</div>
}
>
<Icon className="uf-exc-t required-icon" />
</Tooltip>
)
}
]
})}
/>
<span className="error">{getFieldError("value")}</span>
handleChange = value => {
const { onChange, throwError } = this.props;
if (value === "") {
throwError && throwError(true);
} else {
throwError && throwError(false);
}
this.setState({ value });
onChange && onChange(value);
};
render() {
const { editable, required, colName } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper";
if (required) cls += " required";
if (value === "") cls += " verify-cell";
return editable ? (
<div className="editable-cell">
<div className={cls}>
<FormControl value={value} onChange={this.handleChange} />
<span className="error">
{value === "" ? (
<Tooltip
inverse
className="u-editable-table-tp"
placement="bottom"
overlay={<div className="tp-content">{"请输入" + colName}</div>}
>
<Icon className="uf-exc-t required-icon" />
</Tooltip>
) : null}
</span>
</div>
</div>
</div>
) : (
value || " "
);
) : (
value || " "
);
}
}
const SELECT_SOURCE = ["男", "女"];
class SelectEditCell extends PureComponent {
class SelectEditCell extends Component {
constructor(props, context) {
super(props);
this.state = {
value: props.value
};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
}
handleSelect = value => {
this.setState({ value });
this.props.onChange && this.props.onChange(value);
};
render() {
const { value, editable } = this.props;
const { editable } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper";
return editable ? (
<div className="editable-cell">
<div className="editable-cell-input-wrapper">
<Select value={this.props.value} onSelect={this.handleSelect}>
<div className={cls}>
<Select value={value} onSelect={this.handleSelect}>
{SELECT_SOURCE.map((item, index) => (
<Option key={index} value={item}>
{item}
@ -252,18 +266,29 @@ const option = {
};
const RefEditCell = Form.createForm()(
class RefComponentWarpper extends PureComponent {
class RefComponentWarpper extends Component {
constructor(props, context) {
super(props);
this.state = {
value: props.value
};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
}
handleSelect = values => {
this.setState({ value: values[0] });
this.props.onChange && this.props.onChange(values[0]);
};
render() {
const { getFieldProps, getFieldError } = this.props.form;
const { value, editable, required } = this.props;
const { editable, required } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper";
if (required) cls += " required";
if (getFieldError("refValue")) cls += " verify-cell";
@ -428,7 +453,14 @@ class Demo0501 extends Component {
}
];
this.originData = {};
this.state = {
dataSource: dataSource,
editingRowsMap: {},
currentIndex: null,
errorEditFlag: false
};
this.dataBuffer = {};
}
edit = index => () => {
@ -436,17 +468,15 @@ class Demo0501 extends Component {
let editingRowsMap = { ...this.state.editingRowsMap };
editingRowsMap[index] = index.toString();
// 最好使用深复制
this.originData[index] = { ...this.state.dataSource[index] };
this.dataBuffer[index] = { ...this.state.dataSource[index] };
this.setState({ editingRowsMap });
};
abortEdit = index => () => {
let editingRowsMap = { ...this.state.editingRowsMap };
let dataSource = [...this.state.dataSource];
dataSource[index] = this.originData[index];
delete editingRowsMap[index];
delete this.originData[index];
this.setState({ editingRowsMap, dataSource });
delete this.dataBuffer[index];
this.setState({ editingRowsMap });
};
delete = index => () => {
@ -462,13 +492,13 @@ class Demo0501 extends Component {
if (this.state.errorEditFlag) return;
let editingRowsMap = { ...this.state.editingRowsMap };
delete editingRowsMap[index];
this.setState({ editingRowsMap });
let dataSource = [...this.state.dataSource];
dataSource[index] = { ...this.dataBuffer[index] };
this.setState({ editingRowsMap, dataSource });
};
onCellChange = (index, key) => value => {
let dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
this.dataBuffer[index][key] = value;
};
throwError = isError => {
@ -501,9 +531,6 @@ class Demo0501 extends Component {
<Button colors="dark" onClick={this.edit(currentIndex)}>
编辑
</Button>
<Button colors="dark" onClick={this.delete(currentIndex)}>
删除
</Button>
</div>
);
};

10
demo/demolist/Demo0503.js
View File

@ -362,18 +362,18 @@ class EditModal extends Component {
<Modal
show={show}
onHide={onHide}
style={{ width: 700 }}
style={{ width: 800 }}
className="demo0503-m-b"
>
<Modal.Header closeButton>
<Modal.Title>编辑行</Modal.Title>
</Modal.Header>
<Modal.Body >
<Row style={{ width: 660, margin: "0 auto" }}>
<Modal.Body>
<Row style={{ width: 770, margin: "0 auto" }}>
{
columns.map((item, index) => {
return (
<Col sm={6} md={6} lg={6} style={{ padding: 0 }} key={index}>
<Col sm={6} md={6} lg={6} style={{ padding: "0 0 0 10px" }} key={index}>
<FormGroup>
<Label>{item.title}</Label>
{this.renderElm[item.key] &&
@ -396,7 +396,7 @@ class EditModal extends Component {
}
</Row>
</Modal.Body>
<Modal.Footer style={{textAlign: "center"}}>
<Modal.Footer style={{textAlign: "right"}}>
<Button
colors="dark"
className="btn-abort"

16
demo/demolist/Demo0503.scss
View File

@ -9,6 +9,10 @@
}
}
.u-modal .u-modal-body {
padding: 16px 0;
}
.u-form-group {
overflow: hidden;
}
@ -17,17 +21,17 @@
font-size: 12px;
}
.u-modal-title {
text-align: center;
}
.editable-cell {
display: block;
float: left;
width: 220px;
width: 265px;
padding-right: 25px;
}
.ref-input-wrap {
width: 240px !important;
}
.u-label {
display: block;
float: left;
@ -47,7 +51,7 @@
top: 9px;
left: -9px;
color: red;
font-size: 18px;
font-size: 14px;
}
}

84
demo/demolist/Demo0505.js
View File

@ -5,15 +5,24 @@
* @description 以行内编辑形式对全表数据进行编辑
* demo0505
*/
import React, { Component, PureComponent } from "react";
import React, { Component } from "react";
import Table from "../../src";
import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
const Option = Select.Option;
import { RefTreeWithInput } from "ref-tree";
class StringEditCell extends PureComponent {
class StringEditCell extends Component {
constructor(props, context) {
super(props);
this.state = {
value: props.value
};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
}
handleChange = value => {
@ -23,11 +32,13 @@ class StringEditCell extends PureComponent {
} else {
throwError && throwError(false);
}
this.setState({ value });
onChange && onChange(value);
};
render() {
const { value, editable, required, colName, isEdited } = this.props;
const { editable, required, colName, isEdited } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper";
if (required) cls += " required";
if (value === "") cls += " verify-cell";
@ -58,23 +69,34 @@ class StringEditCell extends PureComponent {
const SELECT_SOURCE = ["男", "女"];
class SelectEditCell extends PureComponent {
class SelectEditCell extends Component {
constructor(props, context) {
super(props);
this.state = {
value: props.value
};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
}
handleSelect = value => {
this.setState({ value });
this.props.onChange && this.props.onChange(value);
};
render() {
const { value, editable, isEdited } = this.props;
const { editable, isEdited } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper";
if (isEdited) cls += " edited";
return editable ? (
<div className="editable-cell">
<div className={cls}>
<Select value={this.props.value} onSelect={this.handleSelect}>
<Select value={value} onSelect={this.handleSelect}>
{SELECT_SOURCE.map((item, index) => (
<Option key={index} value={item}>
{item}
@ -246,18 +268,29 @@ const option = {
};
const RefEditCell = Form.createForm()(
class RefComponentWarpper extends PureComponent {
class RefComponentWarpper extends Component {
constructor(props, context) {
super(props);
this.state = {
value: props.value
};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.editable) {
this.setState({ value: nextProps.value });
}
}
handleSelect = values => {
this.setState({ value: values[0] });
this.props.onChange && this.props.onChange(values[0]);
};
render() {
const { getFieldProps, getFieldError } = this.props.form;
const { value, editable, required, isEdited } = this.props;
const { editable, required, isEdited } = this.props;
const { value } = this.state;
let cls = "editable-cell-input-wrapper";
if (required) cls += " required";
if (getFieldError("refValue")) cls += " verify-cell";
@ -420,7 +453,7 @@ class Demo0505 extends Component {
];
// 用于记录数据是否被修改
dataSource.forEach(item => item.isEdited = {});
dataSource.forEach(item => (item.isEdited = {}));
this.state = {
dataSource: dataSource,
isEditingAll: false,
@ -429,36 +462,38 @@ class Demo0505 extends Component {
};
// 用于记录编辑前数据
this.originData = [];
this.dataBuffer = [];
}
edit = () => {
this.originData = [];
this.dataBuffer = [];
// 最好使用深复制
this.state.dataSource.forEach(item => this.originData.push({ ...item }));
this.state.dataSource.forEach((item, index) => {
this.dataBuffer.push({ ...item });
});
this.setState({ isEditingAll: true });
};
abortEdit = () => {
this.originData.forEach(item => item.isEdited = {});
let originData = [...this.state.dataSource];
originData.forEach(item => (item.isEdited = {}));
this.setState({
isEditingAll: false,
dataSource: [...this.originData]
dataSource: originData
});
};
commitChange = () => {
if (this.state.errorEditFlag) return;
let dataSource = [...this.state.dataSource];
dataSource.forEach(item => item.isEdited = {});
this.setState({ isEditingAll: false });
const newData = this.dataBuffer.map(item => {
return Object.assign({}, item, { isEdited: {} });
});
this.setState({ isEditingAll: false, dataSource: newData });
};
onCellChange = (index, key) => value => {
let dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
dataSource[index].isEdited[key] = true;
this.setState({ dataSource }, () => console.table(this.originData));
this.dataBuffer[index][key] = value;
this.dataBuffer[index].isEdited[key] = true;
};
throwError = isError => {
@ -466,11 +501,6 @@ class Demo0505 extends Component {
this.setState({ errorEditFlag: isError });
};
setEditedRowClass = (record, index, indent) => {
if (Object.keys(record.isEdited).length > 0) return "u-row-select";
return "";
}
render() {
const { dataSource, isEditingAll } = this.state;
const columns = this.columns;
@ -496,7 +526,7 @@ class Demo0505 extends Component {
</Button>
)}
</div>
<Table data={dataSource} columns={columns} height={40} rowClassName={this.setEditedRowClass} />
<Table data={dataSource} columns={columns} height={40} />
</div>
);
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

13
dist/demo.css vendored
View File

@ -925,21 +925,24 @@
.demo0503-m-b button.btn-abort:hover {
background-color: #eff0f3 !important; }
.demo0503-m-b .u-modal .u-modal-body {
padding: 16px 0; }
.demo0503-m-b .u-form-group {
overflow: hidden; }
.demo0503-m-b .u-form-control {
font-size: 12px; }
.demo0503-m-b .u-modal-title {
text-align: center; }
.demo0503-m-b .editable-cell {
display: block;
float: left;
width: 220px;
width: 265px;
padding-right: 25px; }
.demo0503-m-b .ref-input-wrap {
width: 240px !important; }
.demo0503-m-b .u-label {
display: block;
float: left;
@ -957,7 +960,7 @@
top: 9px;
left: -9px;
color: red;
font-size: 18px; }
font-size: 14px; }
.demo0503-m-b .required-icon {
position: absolute;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

384
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long