import ConnectionItem from './ConnectionItem' ; import React from 'react' ; import { AddButton } from './AddButton' ; import { AppState } from '../../../reducers' ; import { bindActionCreators } from 'redux' ; import { connect } from 'react-redux' ; import { connectionManagerActions } from '../../../actions' ; import { ConnectionOptions } from '../../../model/ConnectionOptions' ; import { KeyCodes } from '../../../utils/KeyCodes' ; import { List , ListSubheader } from '@material-ui/core' ; import { Theme , withStyles } from '@material-ui/core/styles' ; import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler' ; interface Props { classes : any ; selected ? : string ; connections : { [ s ] : ConnectionOptions ; } ; actions : typeof connectionManagerActions ; } function ProfileList ( props ) { const { actions , classes , connections , selected } = props ; const selectConnection = ( dir ) => ( event ) => { if ( ! selected ) { return ; } const indexDirection = dir === 'next' ? 1 : - 1 ; const connectionArray = Object . values ( connections ) ; const selectedIndex = connectionArray . map ( connection => connection . id ) . indexOf ( selected ) ; const nextConnection = connectionArray [ selectedIndex + indexDirection ] ; if ( nextConnection ) { actions . selectConnection ( nextConnection . id ) ; } event . preventDefault ( ) ; } ; useGlobalKeyEventHandler ( KeyCodes . arrow_down , selectConnection ( 'next' ) ) ; useGlobalKeyEventHandler ( KeyCodes . arrow_up , selectConnection ( 'previous' ) ) ; const createConnectionButton = ( < div style = { { padding : '8px 16px' } } > < AddButton action = { actions . createConnection } /> Connections < /div>); return ( < List style = { { height : '100%' } } component = "nav" subheader = { createConnectionButton } > < div className = { classes . list } > { Object . values ( connections ) . map ( connection => ( < ConnectionItem connection = { connection } key = { connection . id } selected = { selected === connection . id } / > ) ) } < /div> < /List>); } const styles = ( theme ) => ( { list : { marginTop : theme . spacing ( 1 ) , height : `calc(100% - ${ theme . spacing ( 6 ) })` , overflowY : 'auto' as 'auto' , } , } ) ; const mapDispatchToProps = ( dispatch ) => { return { actions : bindActionCreators ( connectionManagerActions , dispatch ) , } ; } ; const mapStateToProps = ( state ) => { return { connections : state . connectionManager . connections , selected : state . connectionManager . selected , } ; } ; export default connect ( mapStateToProps , mapDispatchToProps ) ( withStyles ( styles ) ( ProfileList ) ) ;