89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import * as 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 { Theme, withStyles } from '@material-ui/core/styles'
|
|
import {
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
ListSubheader,
|
|
} from '@material-ui/core'
|
|
|
|
interface Props {
|
|
classes: any
|
|
selected?: string
|
|
connections: {[s: string]: ConnectionOptions}
|
|
actions: any
|
|
}
|
|
|
|
class ProfileList extends React.Component<Props, {}> {
|
|
constructor(props: Props) {
|
|
super(props)
|
|
}
|
|
|
|
private addConnectionButton() {
|
|
return <AddButton action={this.props.actions.createConnection} />
|
|
}
|
|
|
|
public render() {
|
|
return (
|
|
<List
|
|
style={{ height: '100%' }}
|
|
component="nav"
|
|
subheader={<ListSubheader component="div">{this.addConnectionButton()} Connections</ListSubheader>}
|
|
>
|
|
<div className={this.props.classes.list}>
|
|
{Object.values(this.props.connections).map(connection => <ConnectionItem connection={connection} key={connection.id} selected={this.props.selected === connection.id} />)}
|
|
</div>
|
|
</List>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = (theme: Theme) => ({
|
|
list: {
|
|
marginTop: `${theme.spacing.unit}px`,
|
|
height: `calc(100% - ${theme.spacing.unit * 6}px)`,
|
|
overflowY: 'auto' as 'auto',
|
|
},
|
|
})
|
|
|
|
const mapDispatchToProps = (dispatch: any) => {
|
|
return {
|
|
actions: bindActionCreators(connectionManagerActions, dispatch),
|
|
}
|
|
}
|
|
|
|
interface ConnectionItemProps {
|
|
connection: ConnectionOptions,
|
|
actions: any,
|
|
selected: boolean,
|
|
}
|
|
|
|
const connectionItemRenderer = (props: ConnectionItemProps) => {
|
|
return (
|
|
<ListItem
|
|
button={true}
|
|
selected={props.selected}
|
|
onClick={() => props.actions.selectConnection(props.connection.id)}
|
|
>
|
|
<ListItemText primary={props.connection.name} />
|
|
</ListItem>
|
|
)
|
|
}
|
|
|
|
const ConnectionItem = connect(null, mapDispatchToProps)(connectionItemRenderer)
|
|
|
|
const mapStateToProps = (state: AppState) => {
|
|
return {
|
|
connections: state.connectionManager.connections,
|
|
selected: state.connectionManager.selected,
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList))
|