-
Notifications
You must be signed in to change notification settings - Fork 186
/
multitable.tsx
106 lines (88 loc) · 3.23 KB
/
multitable.tsx
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
import React, {PureComponent, Children, cloneElement, ReactElement} from 'react';
import PropTypes from 'prop-types';
import {TableAttrs} from './table';
import {SelectionItem} from './selection';
export interface MultiTableProps {
children: ReactElement<TableAttrs<SelectionItem>>[]
}
export default class MultiTable extends PureComponent<MultiTableProps> {
static propTypes = {
children: PropTypes.any.isRequired
};
componentDidUpdate(prevProps: MultiTableProps) {
if (prevProps.children) {
const prevSelections = prevProps.children.map(element => element.props.selection);
const prevFocusedIndex = prevSelections.findIndex(selection => selection.getFocused());
const prevFocused = prevSelections[prevFocusedIndex];
const currentSelections = this.props.children.map(element => element.props.selection);
const currentFocused = currentSelections.filter(selection => selection.getFocused());
if (currentFocused.includes(prevFocused)) {
prevProps.children[prevFocusedIndex].props.onSelect?.(prevFocused.resetFocus());
}
}
}
onUpPress = () => {
const {children: tables} = this.props;
const tableIndex = tables.findIndex(({props: {selection}}) => selection.getFocused());
const currentTable = tables[tableIndex].props;
const prevTable = tables[tableIndex - 1] ? tables[tableIndex - 1].props : null;
let newSelection = currentTable.selection.moveUp();
if (newSelection) {
currentTable.onSelect?.(newSelection);
} else if (prevTable) {
currentTable.onSelect?.(currentTable.selection.resetFocus());
newSelection = prevTable.selection.moveUp();
if (newSelection) {
prevTable.onSelect?.(newSelection);
}
}
return false;
};
onDownPress = () => {
const {children: tables} = this.props;
const tableIndex = tables.findIndex(({props: {selection}}) => selection.getFocused());
const currentTable = tables[tableIndex].props;
const nextTable = tables[tableIndex + 1] ? tables[tableIndex + 1].props : null;
let newSelection = currentTable.selection.moveDown();
if (newSelection) {
currentTable.onSelect?.(newSelection);
} else if (nextTable) {
currentTable.onSelect?.(currentTable.selection.resetFocus());
newSelection = nextTable.selection.moveDown();
if (newSelection) {
nextTable.onSelect?.(newSelection);
}
}
return false;
};
onEscPress = () => {
const {children} = this.props;
Children.forEach<ReactElement>(children, ({props: {selection, onSelect}}) => {
onSelect(selection.reset());
});
};
onCmdAPress = () => {
const {children} = this.props;
Children.forEach<ReactElement>(children, ({props: {selection, onSelect}}) => {
onSelect(selection.selectAll());
});
return false;
};
shortcuts = {
up: this.onUpPress,
down: this.onDownPress,
esc: this.onEscPress,
'command+a': this.onCmdAPress,
'ctrl+a': this.onCmdAPress
};
render() {
return (
<div data-test="ring-multitable">{
Children.map<ReactElement, ReactElement>(this.props.children, child => {
const props = {shortcuts: this.shortcuts};
return cloneElement(child, props);
})
}</div>
);
}
}