Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 7x 7x 7x 7x 7x 7x 7x 7x 9x 9x 9x 2x 2x 1x 1x 1x 1x 1x 1x 3x 3x 2x 2x 2x 1x 1x 1x 4x 4x 2x 2x 7x 7x 1x 1x 1x 1x 1x 1x 58x 37x 21x | import React, {Component} from 'react';
class EditableTextField extends Component {
constructor(props) {
super(props);
this.state = {
currentValue: this.props.value,
isSaving: false
};
this.onValueSave = this.onValueSave.bind(this);
this.onRowValueSave = this.onRowValueSave.bind(this);
this.onChangeValue = this.onChangeValue.bind(this);
this.onClickEditRow = this.onClickEditRow.bind(this);
this.closeEdit = this.closeEdit.bind(this);
this.onBlur = this.onBlur.bind(this);
}
onChangeValue(event) {
const value = event.target.value;
this.props.onChangeEditRow(value);
this.setState({
currentValue: value
});
}
async onRowValueSave() {
this.setState({
isSaving: true
});
this.props.onUpdateRow()
.then(() => {
this.setState({ isSaving: false, value: this.state.currentValue });
this.props.onFinishEditRow(this.props.rowId, this.props.column.name);
this.props.handleShowMessage('Selected row edited successfully', 'ok');
})
.catch(() => {
this.setState({ isSaving: false, currentValue: this.props.value });
this.props.onFinishEditRow(this.props.rowId, this.props.column.name);
this.props.handleShowMessage('Selected row could not be saved', 'error');
});
}
async onValueSave() {
this.setState({
isSaving: true
});
this.props.onUpdateField(this.props.rowId, this.props.column.value, this.state.currentValue)
.then(() => {
this.setState({ isSaving: false, value: this.state.currentValue });
this.props.onFinishEditRow(this.props.rowId, this.props.column.name);
this.props.handleShowMessage('Selected row edited successfully', 'ok');
})
.catch(() => {
this.setState({ isSaving: false, currentValue: this.props.value });
this.props.onFinishEditRow(this.props.rowId, this.props.column.name);
this.props.handleShowMessage('Selected row could not be saved', 'error');
});
}
closeEdit(event) {
Eif (event.key == 'Escape' || event.key == 'Enter') {
if (this.props.onUpdateRow) {
this.onRowValueSave();
} else {
this.onValueSave();
}
}
}
onClickEditRow() {
this.setState({ currentValue: this.props.value });
this.props.onClickEditRow(this.props.rowId, this.props.column.name)
}
onBlur() {
Eif (!this.props.onUpdateRow) {
return this.onValueSave();
}
}
moveCaretAtEnd(event) {
const input = event.target;
input.focus();
const position = input.value.length;
input.setSelectionRange(position, position);
}
render() {
if (this.props.rowUnderEdit) {
return (
<td key={this.props.column.value}>
{this.state.isSaving && <span>Saving</span>}
<input type='text'
value={this.state.currentValue}
onChange={(this.onChangeValue)}
onKeyDown={this.closeEdit}
className="n-inputfield form-control"
onBlur={this.onBlur}
onFocus={this.moveCaretAtEnd}
autoFocus={this.props.autoFocus}
style={{width: '100%', paddingLeft: '8px', paddingRight: '8px'}}/>
</td>
);
}
return (
<td key={this.props.column.value}
onClick={this.onClickEditRow}>
{this.props.value}
</td>
);
}
}
export default EditableTextField;
|