@@ -17,22 +17,31 @@ limitations under the License.
1717'use strict' ;
1818
1919import React from 'react' ;
20+ import PropTypes from 'prop-types' ;
2021import classNames from 'classnames' ;
22+ import { DragDropContext } from 'react-beautiful-dnd' ;
23+ import { MatrixClient } from 'matrix-js-sdk' ;
2124import { KeyCode } from 'matrix-react-sdk/lib/Keyboard' ;
2225import sdk from 'matrix-react-sdk' ;
2326import dis from 'matrix-react-sdk/lib/dispatcher' ;
24- import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg' ;
25- import CallHandler from 'matrix-react-sdk/lib/CallHandler' ;
26- import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton' ;
2727import VectorConferenceHandler from '../../VectorConferenceHandler' ;
2828
29+ import SettingsStore from 'matrix-react-sdk/lib/settings/SettingsStore' ;
30+ import TagOrderActions from 'matrix-react-sdk/lib/actions/TagOrderActions' ;
31+ import RoomListActions from 'matrix-react-sdk/lib/actions/RoomListActions' ;
32+
33+
2934var LeftPanel = React . createClass ( {
3035 displayName : 'LeftPanel' ,
3136
3237 // NB. If you add props, don't forget to update
3338 // shouldComponentUpdate!
3439 propTypes : {
35- collapsed : React . PropTypes . bool . isRequired ,
40+ collapsed : PropTypes . bool . isRequired ,
41+ } ,
42+
43+ contextTypes : {
44+ matrixClient : PropTypes . instanceOf ( MatrixClient ) ,
3645 } ,
3746
3847 getInitialState : function ( ) {
@@ -161,13 +170,59 @@ var LeftPanel = React.createClass({
161170 this . setState ( { searchFilter : term } ) ;
162171 } ,
163172
173+ onDragEnd : function ( result ) {
174+ // Dragged to an invalid destination, not onto a droppable
175+ if ( ! result . destination ) {
176+ return ;
177+ }
178+
179+ const dest = result . destination . droppableId ;
180+
181+ if ( dest === 'tag-panel-droppable' ) {
182+ // Dispatch synchronously so that the TagPanel receives an
183+ // optimistic update from TagOrderStore before the previous
184+ // state is shown.
185+ dis . dispatch ( TagOrderActions . moveTag (
186+ this . context . matrixClient ,
187+ result . draggableId ,
188+ result . destination . index ,
189+ ) , true ) ;
190+ } else {
191+ this . onRoomTileEndDrag ( result ) ;
192+ }
193+ } ,
194+
195+ onRoomTileEndDrag : function ( result ) {
196+ let newTag = result . destination . droppableId . split ( '_' ) [ 1 ] ;
197+ let prevTag = result . source . droppableId . split ( '_' ) [ 1 ] ;
198+ if ( newTag === 'undefined' ) newTag = undefined ;
199+ if ( prevTag === 'undefined' ) prevTag = undefined ;
200+
201+ const roomId = result . draggableId . split ( '_' ) [ 1 ] ;
202+
203+ const oldIndex = result . source . index ;
204+ const newIndex = result . destination . index ;
205+
206+ dis . dispatch ( RoomListActions . tagRoom (
207+ this . context . matrixClient ,
208+ this . context . matrixClient . getRoom ( roomId ) ,
209+ prevTag , newTag ,
210+ oldIndex , newIndex ,
211+ ) , true ) ;
212+ } ,
213+
214+ collectRoomList : function ( ref ) {
215+ this . _roomList = ref ;
216+ } ,
217+
164218 render : function ( ) {
165219 const RoomList = sdk . getComponent ( 'rooms.RoomList' ) ;
220+ const TagPanel = sdk . getComponent ( 'structures.TagPanel' ) ;
166221 const BottomLeftMenu = sdk . getComponent ( 'structures.BottomLeftMenu' ) ;
167222 const CallPreview = sdk . getComponent ( 'voip.CallPreview' ) ;
168223
169224 let topBox ;
170- if ( MatrixClientPeg . get ( ) . isGuest ( ) ) {
225+ if ( this . context . matrixClient . isGuest ( ) ) {
171226 const LoginBox = sdk . getComponent ( 'structures.LoginBox' ) ;
172227 topBox = < LoginBox collapsed = { this . props . collapsed } /> ;
173228 } else {
@@ -183,16 +238,33 @@ var LeftPanel = React.createClass({
183238 }
184239 ) ;
185240
241+ const tagPanelEnabled = SettingsStore . isFeatureEnabled ( "feature_tag_panel" ) ;
242+ const tagPanel = tagPanelEnabled ? < TagPanel /> : < div /> ;
243+
244+ const containerClasses = classNames (
245+ "mx_LeftPanel_container" ,
246+ {
247+ "mx_LeftPanel_container_collapsed" : this . props . collapsed ,
248+ "mx_LeftPanel_container_hasTagPanel" : tagPanelEnabled ,
249+ } ,
250+ ) ;
251+
186252 return (
187- < aside className = { classes } onKeyDown = { this . _onKeyDown } onFocus = { this . _onFocus } onBlur = { this . _onBlur } >
188- { topBox }
189- < CallPreview ConferenceHandler = { VectorConferenceHandler } />
190- < RoomList
191- collapsed = { this . props . collapsed }
192- searchFilter = { this . state . searchFilter }
193- ConferenceHandler = { VectorConferenceHandler } />
194- < BottomLeftMenu collapsed = { this . props . collapsed } />
195- </ aside >
253+ < DragDropContext onDragEnd = { this . onDragEnd } >
254+ < div className = { containerClasses } >
255+ { tagPanel }
256+ < aside className = { classes } onKeyDown = { this . _onKeyDown } onFocus = { this . _onFocus } onBlur = { this . _onBlur } >
257+ { topBox }
258+ < CallPreview ConferenceHandler = { VectorConferenceHandler } />
259+ < RoomList
260+ ref = { this . collectRoomList }
261+ collapsed = { this . props . collapsed }
262+ searchFilter = { this . state . searchFilter }
263+ ConferenceHandler = { VectorConferenceHandler } />
264+ < BottomLeftMenu collapsed = { this . props . collapsed } />
265+ </ aside >
266+ </ div >
267+ </ DragDropContext >
196268 ) ;
197269 }
198270} ) ;
0 commit comments