diff --git a/src/assets/css/focus.css b/src/assets/css/focus.css index 5a4feaf00..3e2c07135 100644 --- a/src/assets/css/focus.css +++ b/src/assets/css/focus.css @@ -21,3 +21,7 @@ button:focus { outline: 0; } + +.btn-device:focus { + border: 1px solid $brand-font-color; +} diff --git a/src/components/table/Table.js b/src/components/table/Table.js index 4e1562ec1..5840fa910 100644 --- a/src/components/table/Table.js +++ b/src/components/table/Table.js @@ -16,7 +16,7 @@ import { import Prompt from '../app/Prompt'; import TableFilter from './TableFilter'; -import TableItemWrapper from './TableItemWrapper'; +import TableItem from './TableItem'; import TablePagination from './TablePagination'; import TableHeader from './TableHeader'; import TableContextMenu from './TableContextMenu'; @@ -32,6 +32,7 @@ const shortcutManager = new ShortcutManager(keymap); class Table extends Component { constructor(props) { super(props); + this.state = { selected: [null], listenOnKeys: true, @@ -59,11 +60,18 @@ class Table extends Component { } } - componentDidUpdate() { - const {mainTable, open} = this.props; + componentDidUpdate(prevProps) { + const {mainTable, open, rowData} = this.props; if(mainTable && open){ this.table.focus(); } + + if( + JSON.stringify(prevProps.rowData) != + JSON.stringify(rowData) + ){ + this.getIndentData(); + } } getChildContext = () => { @@ -89,6 +97,10 @@ class Table extends Component { } }) + } else { + this.setState({ + rows: rowData[tabid] + }); } } @@ -119,9 +131,9 @@ class Table extends Component { selectProduct = (id, idFocused, idFocusedDown) => { const {dispatch} = this.props; - this.setState(prevState => { + this.setState(prevState => Object.assign({}, this.state, { selected: prevState.selected.concat([id]) - }, () => { + }), () => { dispatch(selectTableItems(this.state.selected)) this.triggerFocus(idFocused, idFocusedDown); }) @@ -134,11 +146,13 @@ class Table extends Component { } selectAll = () => { - const {rowData, tabid, keyProperty} = this.props; + const {rowData, tabid, keyProperty, indentSupported} = this.props; + const {rows} = this.state; const property = keyProperty ? keyProperty : "rowId"; - const toSelect = rowData[tabid].map((item, index) => item[property]); + const toSelect = rows.map((item, index) => item[property]); this.selectRangeProduct(toSelect); + } selectOneProduct = (id, idFocused, idFocusedDown, cb) => { @@ -188,8 +202,7 @@ class Table extends Component { handleKeyDown = (e) => { const {rowData, tabid, listenOnKeys} = this.props; - const item = rowData[tabid]; - const {selected} = this.state; + const {selected, rows} = this.state; const selectRange = e.shiftKey; const nodeList = Array.prototype.slice.call(document.activeElement.parentElement.children); @@ -204,30 +217,30 @@ class Table extends Component { case "ArrowDown": e.preventDefault(); - const actualId = Object.keys(rowData[tabid]).findIndex(x => x === selected[selected.length-1]) + const actualId = Object.keys(rows).findIndex(x => x === selected[selected.length-1]) - if(actualId < Object.keys(rowData[tabid]).length-1 ){ + if(actualId < Object.keys(rows).length-1 ){ let newId = actualId+1; if(!selectRange) { - this.selectOneProduct(Object.keys(rowData[tabid])[newId], false, idFocused); + this.selectOneProduct(Object.keys(rows)[newId], false, idFocused); } else { - this.selectProduct(Object.keys(rowData[tabid])[newId], false, idFocused); + this.selectProduct(Object.keys(rows)[newId], false, idFocused); } } break; case "ArrowUp": e.preventDefault(); - const actual = Object.keys(rowData[tabid]).findIndex(x => x === selected[selected.length-1]) + const actual = Object.keys(rows).findIndex(x => x === selected[selected.length-1]) if(actual > 0 ){ let newId = actual-1; if(!selectRange) { - this.selectOneProduct(Object.keys(rowData[tabid])[newId], idFocused, false); + this.selectOneProduct(Object.keys(rows)[newId], idFocused, false); } else { - this.selectProduct(Object.keys(rowData[tabid])[newId], idFocused, false); + this.selectProduct(Object.keys(rows)[newId], idFocused, false); } } break; @@ -289,29 +302,22 @@ class Table extends Component { handleKeyDownDocList = (e) => { const {selected, rows} = this.state; + const { - rowData, tabid, listenOnKeys, onDoubleClick, closeOverlays, open, - indentSupported + rowData, tabid, listenOnKeys, onDoubleClick, closeOverlays, open } = this.props; - + const selectRange = e.shiftKey; - let data = ""; - - if(indentSupported){ - data = rows; - } else { - data = rowData[tabid]; - } switch(e.key) { case "ArrowDown": e.preventDefault(); - const array = (data).map((item, id) => { + const array = rows.map((item, id) => { return item.id }); - const actualId = array.findIndex(x => x === selected[selected.length-1]) + const actualId = array.findIndex(x => x === selected[selected.length-1]); if(actualId < array.length-1 ){ let newId = actualId+1; @@ -326,7 +332,7 @@ class Table extends Component { case "ArrowUp": e.preventDefault(); - const arrays = (data).map((item, id) => { + const arrays = rows.map((item, id) => { return item.id }); @@ -541,39 +547,48 @@ class Table extends Component { indentSupported } = this.props; - const {selected} = this.state; + const {selected, rows} = this.state; const keyProp = keyProperty ? keyProperty : "rowId"; - if(!!rowData && rowData[tabid]){ - let keys = Object.keys(rowData[tabid]); - const item = rowData[tabid]; + if(rows){ + let keys = Object.keys(rows); + const item = rows; let ret = []; for(let i=0; i < keys.length; i++) { const key = keys[i]; ret.push( - this.changeListen(true)} - changeListenOnFalse={() => this.changeListen(false)} - newRow={i === keys.length-1 ? newRow : false} - handleSelect={this.selectRangeProduct} - indentSupported={indentSupported} - /> + + onDoubleClick && onDoubleClick(item[key][keyProp])} + onMouseDown={(e) => this.handleClick(e, item[key][keyProp])} + handleRightClick={(e) => this.handleRightClick(e, item[key][keyProp])} + changeListenOnTrue={() => this.changeListen(true)} + changeListenOnFalse={() => this.changeListen(false)} + newRow={i === keys.length-1 ? newRow : false} + isSelected={selected.indexOf(item[key][keyProp]) > -1} + handleSelect={this.selectRangeProduct} + indentSupported={indentSupported} + indent={item[key].indent} + includedDocuments={item[key].includedDocuments} + lastSibling={item[key].lastChild} + contextType={item[key].type} + /> + ); } diff --git a/src/components/table/TableItemWrapper.js b/src/components/table/TableItemWrapper.js deleted file mode 100644 index 00fbb16c7..000000000 --- a/src/components/table/TableItemWrapper.js +++ /dev/null @@ -1,114 +0,0 @@ -import React, { Component, PropTypes } from 'react'; -import TableItem from './TableItem'; -import update from 'react-addons-update'; - -import {flattenLastElem} from '../../actions/MenuActions'; - -class TableItemWrapper extends Component { - constructor(props){ - super(props); - - this.state = { - rows: [] - } - } - - componentDidMount(){ - const {item} = this.props; - - this.setState(Object.assign({}, this.state, { - rows: this.mapIncluded(item) - })) - } - - componentDidUpdate(prevProps, prevState) { - const {item} = this.props; - - if( - JSON.stringify(prevProps.item) != - JSON.stringify(item) - ){ - this.setState(Object.assign({}, this.state, { - rows: this.mapIncluded(item) - })) - } - } - - mapIncluded = (node, indent, isParentLastChild = false) => { - let ind = indent ? indent : []; - let result = []; - - const nodeCopy = Object.assign({}, node, { - indent: ind - }); - - result = result.concat([nodeCopy]); - - if(isParentLastChild){ - ind[ind.length - 2] = false; - } - - if(node.includedDocuments){ - for(let i = 0; i < node.includedDocuments.length; i++){ - let copy = node.includedDocuments[i]; - if(i === node.includedDocuments.length - 1){ - copy = Object.assign({}, copy, { - lastChild: true - }); - } - - result = result.concat( - this.mapIncluded(copy, ind.concat([true]), node.lastChild) - ) - } - } - - return result; - } - - render() { - const { - item, entity, tabId, cols, type, docId, selected, onDoubleClick, - handleClick, handleRightClick, changeListenOnTrue, changeListenOnFalse, - newRow, tabIndex, readonly, mainTable, handleSelect, odd, keyProperty, - indentSupported - } = this.props; - - const {rows} = this.state; - - return ( - - {rows.map((row, index) => - onDoubleClick && onDoubleClick(row[keyProperty])} - onMouseDown={(e) => handleClick && handleClick(e, row[keyProperty])} - handleRightClick={(e) => handleRightClick(e, row[keyProperty])} - changeListenOnTrue={() => changeListenOnTrue && changeListenOnTrue()} - changeListenOnFalse={() => changeListenOnFalse && changeListenOnFalse()} - newRow={newRow} - isSelected={selected.indexOf(row[keyProperty]) > -1} - key={index} - indentSupported={indentSupported} - indent={row.indent} - includedDocuments={row.includedDocuments} - lastSibling={row.lastChild} - handleSelect={handleSelect} - odd={(odd && (rows.length & 1))} - contextType={row.type} - /> - )} - - ); - } -} -export default TableItemWrapper; diff --git a/src/components/widget/Devices/Device.js b/src/components/widget/Devices/Device.js index 88c7e7864..ec668d6a8 100644 --- a/src/components/widget/Devices/Device.js +++ b/src/components/widget/Devices/Device.js @@ -51,14 +51,16 @@ class Device extends Component { render() { const {value, index, isMore} = this.state; + const {tabIndex} = this.props; if(!!value){ return (
this.handleToggleChangeStopper(true)} onFocus={() => this.handleToggleChangeStopper(true)} onMouseLeave={() => this.handleToggleChangeStopper(false)} diff --git a/src/components/widget/Devices/DevicesWidget.js b/src/components/widget/Devices/DevicesWidget.js index 33deff9e3..3e31bdc0c 100644 --- a/src/components/widget/Devices/DevicesWidget.js +++ b/src/components/widget/Devices/DevicesWidget.js @@ -8,7 +8,7 @@ class DevicesWidget extends Component { } render() { - const {devices, handleChange} = this.props; + const {devices, handleChange, tabIndex} = this.props; const isMore = devices.length > 1; return ( @@ -20,6 +20,7 @@ class DevicesWidget extends Component { index={index} handleChange={handleChange} isMore={isMore} + tabIndex={tabIndex} /> )}
diff --git a/src/components/widget/RawWidget.js b/src/components/widget/RawWidget.js index 170bab1cc..d7519f590 100644 --- a/src/components/widget/RawWidget.js +++ b/src/components/widget/RawWidget.js @@ -612,6 +612,7 @@ class RawWidget extends Component { {fields[0].devices && !widgetData[0].readonly && handlePatch && handlePatch(fields[0].field, value) }