@@ -39,9 +39,11 @@ const createView = props => {
39
39
40
40
const cols = ( paneIndex ) => ( row , rowIndex ) => {
41
41
const col = row . columns [ paneIndex ] || { } ;
42
- const selected = props . selectedIndex === rowIndex ;
43
42
const colIcon = col . icon ? h ( Icon , col . icon ) : null ;
44
43
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 ;
45
47
46
48
if ( colIcon ) {
47
49
children . unshift ( colIcon ) ;
@@ -51,11 +53,11 @@ const createView = props => {
51
53
key : row . key ,
52
54
'data-has-icon' : col . icon ? true : undefined ,
53
55
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} )
59
61
} , children ) ;
60
62
} ;
61
63
@@ -79,7 +81,11 @@ const createView = props => {
79
81
class : 'osjs-gui-list-view-wrapper' ,
80
82
oncreate : el => ( el . scrollTop = props . scrollTop ) ,
81
83
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 ) {
83
89
el . scrollTop = props . scrollTop ;
84
90
}
85
91
}
@@ -92,33 +98,68 @@ export const ListView = props => h(Element, Object.assign({
92
98
93
99
export const listView = ( {
94
100
component : ( state , actions ) => {
101
+
102
+ const createSelection = index => state . selectedIndex . indexOf ( index ) === - 1
103
+ ? [ ...state . selectedIndex , index ]
104
+ : state . selectedIndex ;
105
+
106
+ const getSelection = ( index , ev ) => {
107
+ const selected = state . multiselect
108
+ ? ( ev . shiftKey ? createSelection ( 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
+ return { selected, data} ;
116
+ } ;
117
+
118
+ const clearCurrentSelection = ( 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
+ return { selected, data} ;
128
+ } ;
129
+
95
130
const newProps = Object . assign ( {
131
+ multiselect : false ,
96
132
zebra : true ,
97
133
columns : [ ] ,
98
134
rows : [ ] ,
99
- onselect : ( { data, index, ev} ) => {
100
- actions . select ( { data, index, ev} ) ;
101
- actions . setSelectedIndex ( index ) ;
135
+ onselect : ( { index, ev} ) => {
136
+ const { selected, data} = getSelection ( index , ev ) ;
137
+ actions . select ( { data, index, ev, selected} ) ;
138
+ actions . setSelectedIndex ( selected ) ;
102
139
} ,
103
- onactivate : ( { data, index, ev} ) => {
104
- actions . activate ( { data, index, ev} ) ;
105
- actions . setSelectedIndex ( - 1 ) ;
140
+ onactivate : ( { index, ev} ) => {
141
+ const { selected, data} = clearCurrentSelection ( index , ev ) ;
142
+ actions . activate ( { data, index, ev, selected} ) ;
143
+ actions . setSelectedIndex ( selected ) ;
106
144
} ,
107
- oncontextmenu : ( { data, index, ev} ) => {
145
+ oncontextmenu : ( { index, ev} ) => {
146
+ const { selected, data} = getSelection ( index , ev ) ;
147
+
108
148
actions . select ( { data, index, ev} ) ;
109
- actions . contextmenu ( { data, index, ev} ) ;
110
- actions . setSelectedIndex ( index ) ;
149
+ actions . contextmenu ( { data, index, ev, selected } ) ;
150
+ actions . setSelectedIndex ( selected ) ;
111
151
} ,
112
- oncreate : ( args ) => {
113
- actions . created ( args ) ;
152
+ oncreate : ( { index, el} ) => {
153
+ const data = state . rows [ index ] . data ;
154
+ actions . created ( { index, el, data} ) ;
114
155
}
115
156
} , state ) ;
116
157
117
158
return ( props = { } ) => ListView ( Object . assign ( newProps , props ) ) ;
118
159
} ,
119
160
120
161
state : state => Object . assign ( {
121
- selectedIndex : - 1 ,
162
+ selectedIndex : state . multiselect ? [ ] : - 1 ,
122
163
scrollTop : 0
123
164
} , state ) ,
124
165
@@ -129,7 +170,7 @@ export const listView = ({
129
170
created : ( ) => ( ) => ( { } ) ,
130
171
setRows : rows => ( { rows} ) ,
131
172
setColumns : columns => ( { columns} ) ,
132
- setScrollTop : scrollTop => state => ( { scrollTop} ) ,
133
- setSelectedIndex : selectedIndex => state => ( { selectedIndex} )
173
+ setScrollTop : scrollTop => ( { scrollTop} ) ,
174
+ setSelectedIndex : selectedIndex => ( { selectedIndex} )
134
175
} , actions || { } )
135
176
} ) ;
0 commit comments