@ -15,6 +15,7 @@ limitations under the License.
* /
import React from 'react' ;
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg' ;
export default class NetworkDropdown extends React . Component {
constructor ( ) {
@ -26,12 +27,17 @@ export default class NetworkDropdown extends React.Component {
this . onInputClick = this . onInputClick . bind ( this ) ;
this . onRootClick = this . onRootClick . bind ( this ) ;
this . onDocumentClick = this . onDocumentClick . bind ( this ) ;
this . onNetworkClick = this . onNetworkClick . bind ( this ) ;
this . onMenuOptionClick = this . onMenuOptionClick . bind ( this ) ;
this . onInputKeyUp = this . onInputKeyUp . bind ( this ) ;
this . collectRoot = this . collectRoot . bind ( this ) ;
this . collectInputTextBox = this . collectInputTextBox . bind ( this ) ;
this . inputTextBox = null ;
this . state = {
expanded : false ,
selectedNetwork : null ,
selectedServer : MatrixClientPeg . getHomeServerName ( ) ,
selectedNetwork : '_matrix' ,
} ;
}
@ -39,6 +45,9 @@ export default class NetworkDropdown extends React.Component {
// Listen for all clicks on the document so we can close the
// menu when the user clicks somewhere else
document . addEventListener ( 'click' , this . onDocumentClick , false ) ;
// fire this now so the defaults can be set up
this . props . onOptionChange ( this . state . selectedServer , this . state . selectedNetwork ) ;
}
componentWillUnmount ( ) {
@ -72,12 +81,24 @@ export default class NetworkDropdown extends React.Component {
ev . preventDefault ( ) ;
}
onNetworkClick ( network , ev ) {
onMenuOptionClick ( server , network , ev ) {
this . setState ( {
expanded : false ,
selectedServer : server ,
selectedNetwork : network ,
} ) ;
this . props . onNetworkChange ( network ) ;
this . props . onOptionChange ( server , network ) ;
}
onInputKeyUp ( e ) {
if ( e . key == 'Enter' ) {
this . setState ( {
expanded : false ,
selectedServer : e . target . value ,
selectedNetwork : null ,
} ) ;
this . props . onOptionChange ( e . target . value , null ) ;
}
}
collectRoot ( e ) {
@ -90,41 +111,86 @@ export default class NetworkDropdown extends React.Component {
this . dropdownRootElement = e ;
}
_optionForNetwork ( network , wire _onclick ) {
collectInputTextBox ( e ) {
this . inputTextBox = e ;
}
_getMenuOptions ( ) {
const options = [ ] ;
let servers = [ ] ;
if ( this . props . config . servers ) {
servers = servers . concat ( this . props . config . servers ) ;
}
if ( servers . indexOf ( MatrixClientPeg . getHomeServerName ( ) ) == - 1 ) {
servers . unshift ( MatrixClientPeg . getHomeServerName ( ) ) ;
}
for ( const server of servers ) {
options . push ( this . _makeMenuOption ( server , null ) ) ;
if ( this . props . config . serverConfig && this . props . config . serverConfig [ server ] && this . props . config . serverConfig [ server ] . networks ) {
for ( const network of this . props . config . serverConfig [ server ] . networks ) {
options . push ( this . _makeMenuOption ( server , network ) ) ;
}
}
}
return options ;
}
_makeMenuOption ( server , network , wire _onclick ) {
if ( wire _onclick === undefined ) wire _onclick = true ;
let icon ;
let name ;
let span _class ;
if ( network === null ) {
name = 'All networks' ;
name = server ;
span _class = 'mx_NetworkDropdown_menu_all' ;
} else if ( network == '_matrix' ) {
name = 'Matrix' ;
icon = < img src = "/img/network-matrix.svg" width = "16" height = "16" / > ;
span _class = 'mx_NetworkDropdown_menu_network' ;
} else {
name = this . props . config . networkNames [ network ] ;
icon = < img src = { this . props . config . networkIcons [ network ] } / > ;
span _class = 'mx_NetworkDropdown_menu_network' ;
}
const click _handler = wire _onclick ? this . onNetworkClick . bind ( this , network ) : null ;
const click _handler = wire _onclick ? this . onMenuOption Click . bind ( this , server , network ) : null ;
return < div key = { network } className = "mx_NetworkDropdown_networkoption" onClick = { click _handler } >
let key = server ;
if ( network !== null ) {
key += '_' + network ;
}
return < div key = { key } className = "mx_NetworkDropdown_networkoption" onClick = { click _handler } >
{ icon }
< span className = { span _class } > { name } < / s p a n >
< / d i v > ;
}
componentDidUpdate ( ) {
if ( this . state . expanded && this . inputTextBox ) {
this . inputTextBox . focus ( ) ;
}
}
render ( ) {
const current _value = this . _optionForNetwork ( this . state . selectedNetwork , false ) ;
let current _value = this . _makeMenuOption (
this . state . selectedServer , this . state . selectedNetwork , false
) ;
let menu ;
if ( this . state . expanded ) {
const menu _options = [ this . _optionForNetwork ( null ) ] ;
for ( const network of this . props . config . networks ) {
menu _options . push ( this . _optionForNetwork ( network ) ) ;
}
const menu _options = this . _getMenuOptions ( ) ;
menu = < div className = "mx_NetworkDropdown_menu" >
{ menu _options }
< / d i v > ;
current _value = < input type = "text" className = "mx_NetworkDropdown_networkoption"
ref = { this . collectInputTextBox } onKeyUp = { this . onInputKeyUp }
/ >
}
return < div className = "mx_NetworkDropdown" ref = { this . collectRoot } >
@ -138,7 +204,7 @@ export default class NetworkDropdown extends React.Component {
}
NetworkDropdown . propTypes = {
onNetwork Change : React . PropTypes . func . isRequired ,
onOption Change : React . PropTypes . func . isRequired ,
config : React . PropTypes . object ,
} ;
David Baker
6 years ago
