AlphabetizeFiter.js
3.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React,{PropTypes} from 'react';
import {ButtonGroup,Button} from 'react-bootstrap';
import cx from 'classnames';
import s from './AlphabetizeFiter.scss';
class AlphabetizeFiter extends React.Component {
constructor (props) {
super(props);
this.changeFilter=this.changeFilter.bind(this);
this.state={
key:''
}
}
static propTypes = {
onChange: PropTypes.func
}
changeFilter(e){
const key=$(e.target).data('key');
this.setState({
key:key
})
this.props.onChange(key);
}
render(){
const {key}=this.state;
return(
<div className={cx(s.filter_alphabetize_wrap)}>
<ButtonGroup>
<Button data-key='A' className={cx({'active':key=='A'})} bsSize="xsmall" onClick={this.changeFilter}>A</Button>
<Button data-key='B' className={cx({'active':key=='B'})} bsSize="xsmall" onClick={this.changeFilter}>B</Button>
<Button data-key='C' className={cx({'active':key=='C'})} bsSize="xsmall" onClick={this.changeFilter}>C</Button>
<Button data-key='D' className={cx({'active':key=='D'})} bsSize="xsmall" onClick={this.changeFilter}>D</Button>
<Button data-key='E' className={cx({'active':key=='E'})} bsSize="xsmall" onClick={this.changeFilter}>E</Button>
<Button data-key='F' className={cx({'active':key=='F'})} bsSize="xsmall" onClick={this.changeFilter}>F</Button>
<Button data-key='G' className={cx({'active':key=='G'})} bsSize="xsmall" onClick={this.changeFilter}>G</Button>
<Button data-key='H' className={cx({'active':key=='H'})} bsSize="xsmall" onClick={this.changeFilter}>H</Button>
<Button data-key='I' className={cx({'active':key=='I'})} bsSize="xsmall" onClick={this.changeFilter}>I</Button>
<Button data-key='J' className={cx({'active':key=='J'})} bsSize="xsmall" onClick={this.changeFilter}>J</Button>
<Button data-key='K' className={cx({'active':key=='K'})} bsSize="xsmall" onClick={this.changeFilter}>K</Button>
<Button data-key='L' className={cx({'active':key=='L'})} bsSize="xsmall" onClick={this.changeFilter}>L</Button>
<Button data-key='M' className={cx({'active':key=='M'})} bsSize="xsmall" onClick={this.changeFilter}>M</Button>
<Button data-key='N' className={cx({'active':key=='N'})} bsSize="xsmall" onClick={this.changeFilter}>N</Button>
<Button data-key='O' className={cx({'active':key=='O'})} bsSize="xsmall" onClick={this.changeFilter}>O</Button>
<Button data-key='P' className={cx({'active':key=='P'})} bsSize="xsmall" onClick={this.changeFilter}>P</Button>
<Button data-key='Q' className={cx({'active':key=='Q'})} bsSize="xsmall" onClick={this.changeFilter}>Q</Button>
<Button data-key='R' className={cx({'active':key=='R'})} bsSize="xsmall" onClick={this.changeFilter}>R</Button>
<Button data-key='S' className={cx({'active':key=='S'})} bsSize="xsmall" onClick={this.changeFilter}>S</Button>
<Button data-key='T' className={cx({'active':key=='T'})} bsSize="xsmall" onClick={this.changeFilter}>T</Button>
<Button data-key='U' className={cx({'active':key=='U'})} bsSize="xsmall" onClick={this.changeFilter}>U</Button>
<Button data-key='V' className={cx({'active':key=='V'})} bsSize="xsmall" onClick={this.changeFilter}>V</Button>
<Button data-key='W' className={cx({'active':key=='W'})} bsSize="xsmall" onClick={this.changeFilter}>W</Button>
<Button data-key='X' className={cx({'active':key=='X'})} bsSize="xsmall" onClick={this.changeFilter}>X</Button>
<Button data-key='Y' className={cx({'active':key=='Y'})} bsSize="xsmall" onClick={this.changeFilter}>Y</Button>
<Button data-key='Z' className={cx({'active':key=='Z'})} bsSize="xsmall" onClick={this.changeFilter}>Z</Button>
</ButtonGroup>
</div>
)
}
}
export default AlphabetizeFiter;