Skip to content

Commit ad5dda1

Browse files
dutzimarkelog
authored andcommitted
Add search bar to the rules list
Closes gh-33
1 parent ac39dd2 commit ad5dda1

File tree

3 files changed

+45
-5
lines changed

3 files changed

+45
-5
lines changed

app/views/AppView/index.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ var NotFound = React.createClass({
3232
var routes = (
3333
<Route handler={App}>
3434
<Route name="index" path="/" handler={IndexPageView} />
35-
<Route name="rules" handler={RuleListPageView} />
35+
<Route name="rules" path="rules/:filter?" handler={RuleListPageView} />
3636
<Route name="rule" path="rule/:ruleName" handler={RulePageView} />
3737
<Route name="overview" handler={OverviewPageView} />
3838
<Route name="contributing" handler={ContributingPageView} />
@@ -41,4 +41,4 @@ var routes = (
4141
</Route>
4242
);
4343

44-
export default routes;
44+
export default routes;

app/views/pages/RuleListPageView/index.jsx

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,52 @@ import PageView from '../../PageView';
55
import TitleView from '../../TitleView';
66
import { State } from 'react-router';
77
import PageTitle from '../../../mixins/PageTitle';
8+
import { Navigation } from 'react-router';
89

910
import './style.styl';
1011

1112
export default React.createClass({
12-
mixins: [State, PageTitle],
13+
getInitialState() {
14+
var search = '';
15+
16+
if (this.props.params.filter) {
17+
search = new RegExp(this.props.params.filter, 'i')
18+
}
19+
20+
return {
21+
search: search
22+
}
23+
},
24+
componentDidMount() {
25+
React.findDOMNode(this.refs.search).focus();
26+
},
27+
onSearchChange() {
28+
var query = React.findDOMNode(this.refs.search).value;
29+
this.transitionTo('/rules/' + query)
30+
this.setState({
31+
search: new RegExp(query, 'i')
32+
});
33+
this.render();
34+
},
35+
mixins: [State, PageTitle, Navigation],
1336
render() {
1437
return (
1538
<PageView>
1639
<TitleView>Rules</TitleView>
40+
<input
41+
type="text"
42+
className="search-bar"
43+
ref="search"
44+
placeholder="Filter: e.g, 'MultipleSpaces'..."
45+
defaultValue={this.props.params.filter}
46+
onChange={this.onSearchChange}/>
1747
<ul className="rule-list">
1848
{dataStore.getData().getRules()
1949
.filter((rule) => Boolean(rule.getShortDescription()))
50+
.filter((rule) => {
51+
return rule.getShortDescription().match(this.state.search) ||
52+
rule.getName().match(this.state.search);
53+
})
2054
.map((rule) => {
2155
return <RuleListItem
2256
key={rule.getFilename()}
@@ -44,4 +78,4 @@ var RuleListItem = React.createClass({
4478
</li>
4579
);
4680
}
47-
});
81+
});

app/views/pages/RuleListPageView/style.styl

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
.search-bar {
2+
width: 100%;
3+
padding: 6px;
4+
font-size: 1.2em;
5+
}
6+
17
.rule-list {
28
list-style-type: none;
39
padding: 0;
@@ -14,4 +20,4 @@
1420
&__item-description {
1521
margin-top: -10px;
1622
}
17-
}
23+
}

0 commit comments

Comments
 (0)