Skip to content

Commit b70848f

Browse files
committed
Added multiselect to ListView (#32)
1 parent 3e9a51c commit b70848f

File tree

1 file changed

+51
-19
lines changed

1 file changed

+51
-19
lines changed

src/components/ListView.js

+51-19
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,11 @@ const createView = props => {
3939

4040
const cols = (paneIndex) => (row, rowIndex) => {
4141
const col = row.columns[paneIndex] || {};
42-
const selected = props.selectedIndex === rowIndex;
4342
const colIcon = col.icon ? h(Icon, col.icon) : null;
4443
const children = [h('span', {}, [typeof col === 'object' ? col.label : col])];
44+
const selected = props.multiselect
45+
? props.selectedIndex.indexOf(rowIndex) !== -1
46+
: props.selectedIndex === rowIndex;
4547

4648
if (colIcon) {
4749
children.unshift(colIcon);
@@ -51,11 +53,11 @@ const createView = props => {
5153
key: row.key,
5254
'data-has-icon': col.icon ? true : undefined,
5355
class: 'osjs-gui-list-view-cell' + (selected ? ' osjs__active' : ''),
54-
ontouchstart: (ev) => tapper(ev, () => props.onactivate({data: row.data, index: rowIndex, ev})),
55-
ondblclick: (ev) => props.onactivate({data: row.data, index: rowIndex, ev}),
56-
onclick: (ev) => props.onselect({data: row.data, index: rowIndex, ev}),
57-
oncontextmenu: (ev) => props.oncontextmenu({data: row.data, index: rowIndex, ev}),
58-
oncreate: (el) => props.oncreate({data: row.data, index: rowIndex, el})
56+
ontouchstart: (ev) => tapper(ev, () => props.onactivate({index: rowIndex, ev})),
57+
ondblclick: (ev) => props.onactivate({index: rowIndex, ev}),
58+
onclick: (ev) => props.onselect({index: rowIndex, ev}),
59+
oncontextmenu: (ev) => props.oncontextmenu({index: rowIndex, ev}),
60+
oncreate: (el) => props.oncreate({index: rowIndex, el})
5961
}, children);
6062
};
6163

@@ -79,7 +81,11 @@ const createView = props => {
7981
class: 'osjs-gui-list-view-wrapper',
8082
oncreate: el => (el.scrollTop = props.scrollTop),
8183
onupdate: el => {
82-
if (props.selectedIndex < 0) {
84+
const notSelected = props.multiselect
85+
? props.selectedIndex.length === 0
86+
: props.selectedIndex < 0;
87+
88+
if (notSelected) {
8389
el.scrollTop = props.scrollTop;
8490
}
8591
}
@@ -93,32 +99,58 @@ export const ListView = props => h(Element, Object.assign({
9399
export const listView = ({
94100
component: (state, actions) => {
95101
const newProps = Object.assign({
102+
multiselect: false,
96103
zebra: true,
97104
columns: [],
98105
rows: [],
99-
onselect: ({data, index, ev}) => {
100-
actions.select({data, index, ev});
101-
actions.setSelectedIndex(index);
106+
onselect: ({index, ev}) => {
107+
const selected = state.multiselect
108+
? (ev.shiftKey ? [...state.selectedIndex, index] : [index])
109+
: index;
110+
111+
const data = state.multiselect
112+
? selected.map(i => state.rows[i].data)
113+
: state.rows[selected].data;
114+
115+
actions.select({data, index, ev, selected});
116+
actions.setSelectedIndex(selected);
102117
},
103-
onactivate: ({data, index, ev}) => {
104-
actions.activate({data, index, ev});
105-
actions.setSelectedIndex(-1);
118+
onactivate: ({index, ev}) => {
119+
const selected = state.multiselect
120+
? []
121+
: -1;
122+
123+
const data = state.multiselect
124+
? state.selectedIndex.map(i => state.rows[i].data)
125+
: state.rows[index].data;
126+
127+
actions.activate({data, index, ev, selected});
128+
actions.setSelectedIndex(selected);
106129
},
107-
oncontextmenu: ({data, index, ev}) => {
130+
oncontextmenu: ({index, ev}) => {
131+
const selected = state.multiselect
132+
? (ev.shiftKey ? [...state.selectedIndex, index] : [index])
133+
: index;
134+
135+
const data = state.multiselect
136+
? selected.map(i => state.rows[i].data)
137+
: state.rows[selected].data;
138+
108139
actions.select({data, index, ev});
109-
actions.contextmenu({data, index, ev});
110-
actions.setSelectedIndex(index);
140+
actions.contextmenu({data, index, ev, selected});
141+
actions.setSelectedIndex(selected);
111142
},
112-
oncreate: (args) => {
113-
actions.created(args);
143+
oncreate: ({index, el}) => {
144+
const data = state.rows[index].data;
145+
actions.created({index, el, data});
114146
}
115147
}, state);
116148

117149
return (props = {}) => ListView(Object.assign(newProps, props));
118150
},
119151

120152
state: state => Object.assign({
121-
selectedIndex: -1,
153+
selectedIndex: state.multiselect ? [] : -1,
122154
scrollTop: 0
123155
}, state),
124156

0 commit comments

Comments
 (0)