Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Issue #56: tab jump in tables

Browse source
This commit is contained in:
Ricardo Hernandez-Montoya 2017-05-02 11:38:48 +02:00
parent 5d70a73773
commit 56f49da1bb
1 changed files with 53 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/components/table.js
View file

@ -29,6 +29,7 @@ class CustomTable extends Component {
constructor(props) {
super(props);
this.activeInput = null;
this.state = {
rows: [],
editCell: [ -1, -1 ]
@ -125,6 +126,23 @@ class CustomTable extends Component {
this.setState({ rows: rows });
}
componentDidUpdate() {
// A cell will not be selected at initial render, hence no need to call this in 'componentDidMount'
if (this.activeInput) {
this.activeInput.focus();
}
}
onCellFocus(index) {
// When a cell focus is detected, update the current state in order to uncover the input element
this.setState({ editCell: [ index.cell, index.row ]});
}
cellLostFocus() {
// Reset cell selection state
this.setState({ editCell: [ -1, -1 ] });
}
render() {
// get children
var children = this.props.children;
@ -140,23 +158,41 @@ class CustomTable extends Component {
</tr>
</thead>
<tbody>
{this.state.rows.map((row, rowIndex) => (
<tr key={rowIndex}>
{row.map((cell, cellIndex) => (
<td key={cellIndex} onClick={children[cellIndex].props.inlineEditable === true ? (event) => this.onClick(event, rowIndex, cellIndex) : () => {}}>
{(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex ) ? (
<FormControl type="text" value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} />
) : (
<span>
{cell.map((element, elementIndex) => (
<span key={elementIndex}>{element}</span>
))}
</span>
)}
</td>
))}
</tr>
))}
{
this.state.rows.map((row, rowIndex) => (
<tr key={rowIndex}>
{
row.map((cell, cellIndex) => {
let isCellInlineEditable = children[cellIndex].props.inlineEditable === true;
let tabIndex = isCellInlineEditable? 0 : -1;
let evtHdls = isCellInlineEditable ? {
onCellClick: (event) => this.onClick(event, rowIndex, cellIndex),
onCellFocus: () => this.onCellFocus({cell: cellIndex, row: rowIndex}),
onCellBlur: () => this.cellLostFocus()
} : {
onCellClick: () => {},
onCellFocus: () => {},
onCellBlur: () => {}
};
return (<td key={cellIndex} tabIndex={tabIndex} onClick={ evtHdls.onCellClick } onFocus={ evtHdls.onCellFocus } onBlur={ evtHdls.onCellBlur }>
{(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex ) ? (
<FormControl type="text" value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} inputRef={ref => { this.activeInput = ref; }} />
) : (
<span>
{cell.map((element, elementIndex) => (
<span key={elementIndex}>{element}</span>
))}
</span>
)}
</td>)
})
}
</tr>))
}
</tbody>
</Table>
);