import React , { Component } from 'react' ; import { connect , ResolveThunks } from 'react-redux' ; import { Select } from '@redux-devtools/ui' ; import { selectInstance } from '../actions' ; import { StoreState } from '../reducers' ; type StateProps = ReturnType < typeof mapStateToProps > ; type DispatchProps = ResolveThunks < typeof actionCreators > ; type Props = StateProps & DispatchProps ; class InstanceSelector extends Component < Props > { select ? : { readonly value : string ; readonly label : string | number ; } [ ] ; render ( ) { this . select = [ { value : '' , label : 'Autoselect instances' } ] ; const instances = this . props . instances ; let name ; Object . keys ( instances ) . forEach ( ( key ) => { name = instances [ key ] . name ; if ( name !== undefined ) this . select ! . push ( { value : key , label : name } ) ; } ) ; return ( < Select options = { this . select } onChange = { ( option ) => this . props . onSelect ( option ! . value ) } value = { this . select . find ( ( option ) => option . value === this . props . selected ) } / > ) ; } } const mapStateToProps = ( state ) => ( { selected : state . instances . selected , instances : state . instances . options , } ) ; const actionCreators = { onSelect : selectInstance , } ; export default connect ( mapStateToProps , actionCreators ) ( InstanceSelector ) ;