-
Notifications
You must be signed in to change notification settings - Fork 256
/
CardSelectCard.tsx
95 lines (81 loc) · 2.2 KB
/
CardSelectCard.tsx
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// Libraries
import React, {PureComponent} from 'react'
import classnames from 'classnames'
// Types
import {CardSelectCardProps} from 'src/types/cardSelect'
import {ErrorHandling} from 'src/shared/decorators/errors'
interface State {
checked: boolean
}
@ErrorHandling
class CardSelectCard extends PureComponent<CardSelectCardProps, State> {
public static defaultProps: Partial<CardSelectCardProps> = {
checked: false,
disabled: false,
}
constructor(props) {
super(props)
this.state = {
checked: this.props.checked,
}
}
public render() {
const {id, label, disabled} = this.props
const {checked} = this.state
return (
<div className="card-select--card-holder">
<div
data-toggle="card_toggle"
onClick={this.toggleChecked}
className={classnames('card-select--card', {
'card-select--checked': checked,
'card-select--disabled': disabled,
'card-select--active': !disabled,
})}
>
<label className="card-select--container">
<input
id={`card_select_${id}`}
name={`card_select_${id}`}
type="checkbox"
value={id}
checked={checked}
disabled={disabled}
/>
<span
className={classnames(
'card-select--checkmark',
'icon',
'checkmark',
{
'card-select--checked': checked,
}
)}
/>
<div className="card-select--image">{this.cardImage}</div>
<span className="card-select--label">{label}</span>
</label>
</div>
</div>
)
}
private toggleChecked = e => {
const {disabled} = this.props
if (disabled) {
return
}
const {checked} = this.state
e.preventDefault()
this.setState({
checked: !checked,
})
}
private get cardImage() {
const {image, label} = this.props
if (image) {
return <img src={image} alt={`${label} icon`} />
}
return <span className="card-select--placeholder icon dash-j" />
}
}
export default CardSelectCard