craneoperator/app/components/ContainerList.jsx

30 lines
1.0 KiB
JavaScript

import React, { Component } from 'react';
import { Button, FormGroup, FormControl, Col} from 'react-bootstrap';
export default class ContainerList extends Component {
render() {
return (
<div>
<FormGroup>
<FormControl type="text" placeholder="Filter" onChange={(event) => this.props.onFilterChange(event)} value={this.props.filter ? this.props.filter : ""}/>
</FormGroup>
<div style={{marginBottom: '0.8em'}}>
{!this.props.loaded ? "loading..." : ""}
</div>
<ul className="list-group">
{this.props.error && this.props.error}
{this.props.list.map((container, index) => (
this.props.container === container ?
<Button bsClass="list-group-item active" key={index} onClick={() => this.props.onClick(container)}>{container}</Button>
:
<Button bsClass="list-group-item" key={index} onClick={() => this.props.onClick(container)}>{container}</Button>
))}
</ul>
</div>
);
}
}