Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
Merge branch 'dev-252' into 'master'
Browse files Browse the repository at this point in the history 
Dev 252 #252

See merge request !96
  • Loading branch information
@damianprzygodzki
damianprzygodzki committed Feb 14, 2017
2 parents e16b7d7 + 8347793 commit 211ebfc
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 172 deletions.
4 changes: 4 additions & 0 deletions src/assets/css/focus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,7 @@
button:focus {
outline: 0;
}

.btn-device:focus {
border: 1px solid $brand-font-color;
}
127 changes: 71 additions & 56 deletions src/components/table/Table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -32,6 +32,7 @@ const shortcutManager = new ShortcutManager(keymap);
class Table extends Component {
constructor(props) {
super(props);

this.state = {
selected: [null],
listenOnKeys: true,
Expand Down Expand Up @@ -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 = () => {
Expand All @@ -89,6 +97,10 @@ class Table extends Component {
}

})
} else {
this.setState({
rows: rowData[tabid]
});
}
}

Expand Down Expand Up @@ -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);
})
Expand All @@ -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) => {
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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
});

Expand Down Expand Up @@ -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(
<TableItemWrapper
key={i}
odd={i & 1}
item={item[key]}
entity={entity}
tabId={tabid}
cols={cols}
type={type}
docId={docId}
tabIndex={tabIndex}
readonly={readonly}
mainTable={mainTable}
selected={selected}
keyProperty={keyProp}
onDoubleClick={onDoubleClick}
handleClick={this.handleClick}
handleRightClick={this.handleRightClick}
changeListenOnTrue={() => this.changeListen(true)}
changeListenOnFalse={() => this.changeListen(false)}
newRow={i === keys.length-1 ? newRow : false}
handleSelect={this.selectRangeProduct}
indentSupported={indentSupported}
/>
<tbody key={i}>
<TableItem
key={i}
odd={i & 1}
item={item[key]}
entity={entity}
fields={item[key].fields}
rowId={item[key][keyProp]}
tabId={tabid}
cols={cols}
type={type}
docId={docId}
tabIndex={tabIndex}
readonly={readonly}
mainTable={mainTable}
selected={selected}
keyProperty={keyProp}
onDoubleClick={() => 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}
/>
</tbody>
);
}

Expand Down
114 changes: 0 additions & 114 deletions src/components/table/TableItemWrapper.js
View file

This file was deleted.

4 changes: 3 additions & 1 deletion src/components/widget/Devices/Device.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,16 @@ class Device extends Component {

render() {
const {value, index, isMore} = this.state;
const {tabIndex} = this.props;

if(!!value){
return (
<div
className={"btn btn-meta-outline-secondary btn-sm btn-inline pointer btn-distance-rev " +
className={"btn btn-device btn-meta-outline-secondary btn-sm btn-inline pointer btn-distance-rev " +
(isMore ? "btn-flagged ": "")
}
onClick={this.handleClick}
tabIndex={tabIndex ? tabIndex : ""}
onMouseEnter={() => this.handleToggleChangeStopper(true)}
onFocus={() => this.handleToggleChangeStopper(true)}
onMouseLeave={() => this.handleToggleChangeStopper(false)}
Expand Down
Loading

0 comments on commit 211ebfc

Please sign in to comment.