targetselector

This commit is contained in:
insanity 2017-05-28 22:27:05 +09:00
parent fd014ff386
commit e7589e4cc1

View File

@ -6,22 +6,22 @@ import Subheader from 'material-ui/Subheader';
import Checkbox from 'material-ui/Checkbox'; import Checkbox from 'material-ui/Checkbox';
let SelectableList = makeSelectable(List); let SelectableList = makeSelectable(List);
function wrapState(ComposedComponent: any, par : any) { function wrapState(ComposedComponent: any, par: any) {
return class SelectableList extends React.Component<any, any> { return class SelectableList extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
componentWillMount() { componentWillMount() {
this.setState({ this.setState({
selectedIndex: this.props.defaultValue, selectedIndex: -1,
}); });
} }
handleRequestChange = (event: any, index: any) => { handleRequestChange = (event: any, index: any) => {
this.setState({
selectedIndex: index,
});
par.handleSelect(index); par.handleSelect(index);
}; };
@ -48,7 +48,7 @@ export class TargetSelector extends React.Component<any, any> {
SelectableList = wrapState(SelectableList, this); SelectableList = wrapState(SelectableList, this);
} }
handleSelect(idx : any) { handleSelect(idx: any) {
this.props.onChange(idx); this.props.onChange(idx);
} }
@ -56,37 +56,45 @@ export class TargetSelector extends React.Component<any, any> {
return ( return (
<MuiThemeProvider > <MuiThemeProvider >
<div> <div>
<SelectableList ref={'list'} > <SelectableList >
<Subheader>Select a target to monitor</Subheader> <Subheader>Select a target to monitor</Subheader>
<ListItem <ListItem
value={1} value={1}
primaryText="192.168.1.0" primaryText="192.168.1.0"
secondaryText={'Zone'}
initiallyOpen={true} initiallyOpen={true}
nestedItems={[ nestedItems={[
<ListItem <ListItem
value={2} value={2}
primaryText="192.168.1.11" primaryText="192.168.1.11"
secondaryText={'Host'}
initiallyOpen={true} initiallyOpen={true}
nestedItems={[ nestedItems={[
<ListItem value={3} primaryText="Redis" secondaryText="5432" />, <ListItem
<ListItem value={4} primaryText="FTP" secondaryText="5432" />, value={3}
primaryText="Redis"
secondaryText="Port 5432" />,
<ListItem
value={4}
primaryText="FTP"
secondaryText="Port 5432" />,
]} ]}
/>, />,
<ListItem <ListItem
value={5} value={5}
primaryText="192.168.1.12" primaryText="192.168.1.12"
secondaryText={'Host'}
initiallyOpen={true} initiallyOpen={true}
nestedItems={[ nestedItems={[
<ListItem value={6} primaryText="MySQL" secondaryText="5432" />, <ListItem
<ListItem value={7} primaryText="SSH" secondaryText="5432" />, value={6}
]}
/>, primaryText="MySQL"
<ListItem secondaryText="Port 5432" />,
value={8} <ListItem
primaryText="192.168.1.13" value={7}
initiallyOpen={true} primaryText="SSH"
nestedItems={[ secondaryText="Port 5432" />,
<ListItem value={9} primaryText="Tomcat" secondaryText="8080" />,
]} ]}
/>, />,
]} ]}