2016-06-18 21:53:18 +02:00
|
|
|
'use strict';
|
2016-10-26 10:43:11 +02:00
|
|
|
|
2016-06-18 21:53:18 +02:00
|
|
|
const React = require('react');
|
|
|
|
const Feature = require('./Feature');
|
2014-10-30 18:25:38 +01:00
|
|
|
|
2016-07-02 11:54:50 +02:00
|
|
|
const noop = function () {};
|
2014-12-19 06:54:51 +01:00
|
|
|
|
2016-06-18 21:53:18 +02:00
|
|
|
const FeatureList = React.createClass({
|
2014-12-19 06:54:51 +01:00
|
|
|
propTypes: {
|
2015-03-17 22:01:46 +01:00
|
|
|
features: React.PropTypes.array.isRequired,
|
2016-06-18 21:55:46 +02:00
|
|
|
strategies: React.PropTypes.array.isRequired,
|
2014-12-19 06:54:51 +01:00
|
|
|
},
|
|
|
|
|
2016-07-02 11:54:50 +02:00
|
|
|
getDefaultProps () {
|
2014-12-19 06:54:51 +01:00
|
|
|
return {
|
|
|
|
onFeatureChanged: noop,
|
2016-06-18 21:55:46 +02:00
|
|
|
onFeatureArchive: noop,
|
2014-12-19 06:54:51 +01:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2016-07-02 11:54:50 +02:00
|
|
|
getInitialState () {
|
2014-12-19 06:54:51 +01:00
|
|
|
return {
|
2016-06-18 21:55:46 +02:00
|
|
|
filter: undefined,
|
2014-12-19 06:54:51 +01:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2016-07-02 11:54:50 +02:00
|
|
|
onFilterChange (e) {
|
2014-12-19 06:54:51 +01:00
|
|
|
e.preventDefault();
|
2016-06-18 21:55:46 +02:00
|
|
|
this.setState({ filter: e.target.value.trim() });
|
2014-12-19 06:54:51 +01:00
|
|
|
},
|
|
|
|
|
2016-07-02 11:54:50 +02:00
|
|
|
filteredFeatures () {
|
2016-06-18 21:55:46 +02:00
|
|
|
if (this.state.filter) {
|
|
|
|
const regex = new RegExp(this.state.filter, 'i');
|
2014-12-19 06:54:51 +01:00
|
|
|
|
2016-06-18 21:53:18 +02:00
|
|
|
return this.props.features.filter(item => regex.test(item.name) || regex.test(item.strategy));
|
2014-12-19 06:54:51 +01:00
|
|
|
}
|
2016-06-18 22:23:19 +02:00
|
|
|
return this.props.features;
|
2014-12-19 06:54:51 +01:00
|
|
|
},
|
|
|
|
|
2016-07-02 11:54:50 +02:00
|
|
|
render () {
|
2016-06-18 21:53:18 +02:00
|
|
|
const featureNodes = this.filteredFeatures().map(feature => <Feature
|
|
|
|
key={feature.name}
|
|
|
|
feature={feature}
|
|
|
|
onChange={this.props.onFeatureChanged}
|
|
|
|
onArchive={this.props.onFeatureArchive}
|
|
|
|
strategies={this.props.strategies}
|
|
|
|
/>);
|
2014-10-30 18:25:38 +01:00
|
|
|
|
2014-11-13 10:46:45 +01:00
|
|
|
return (
|
2016-06-18 21:55:46 +02:00
|
|
|
<div className="">
|
|
|
|
<table className="outerborder man">
|
2014-12-19 06:54:51 +01:00
|
|
|
<thead>
|
|
|
|
<tr>
|
2016-08-25 13:24:14 +02:00
|
|
|
<th />
|
2014-12-19 06:54:51 +01:00
|
|
|
<th>Name</th>
|
|
|
|
<th className="hide-lt480">Strategy</th>
|
2016-08-25 13:24:14 +02:00
|
|
|
<th />
|
2014-12-19 06:54:51 +01:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td colSpan="4">
|
|
|
|
<input
|
|
|
|
name="filter"
|
|
|
|
ref="filter"
|
|
|
|
type="text"
|
|
|
|
placeholder="Filter by name or strategy"
|
|
|
|
onChange={this.onFilterChange}
|
|
|
|
value={this.state.filter}
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
{featureNodes}
|
|
|
|
</table>
|
|
|
|
</div>
|
2016-11-02 13:01:50 +01:00
|
|
|
);
|
2016-06-18 21:55:46 +02:00
|
|
|
},
|
2014-10-30 18:25:38 +01:00
|
|
|
});
|
|
|
|
|
2015-03-17 22:01:46 +01:00
|
|
|
module.exports = FeatureList;
|