-
Notifications
You must be signed in to change notification settings - Fork 34
/
FilterBadge.js
72 lines (63 loc) · 1.82 KB
/
FilterBadge.js
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
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import i18n from '@dhis2/d2-i18n';
import { colors } from '@dhis2/ui-core';
const styles = {
badgeContainer: {
margin: '2px',
padding: '0 16px',
borderRadius: '4px',
color: colors.white,
backgroundColor: '#212934',
height: 36,
display: 'flex',
alignItems: 'center',
},
badge: {
fontSize: '13px',
cursor: 'pointer',
whiteSpace: 'nowrap',
},
badgeRemove: {
fontSize: '12px',
textDecoration: 'underline',
marginLeft: '24px',
cursor: 'pointer',
},
};
class FilterBadge extends Component {
onClick = id => () => this.props.onClick(id);
onRemove = id => () => this.props.onRemove(id);
render() {
const { data } = this.props;
return (
<div style={styles.badgeContainer}>
<span style={styles.badge} onClick={this.onClick(data.id)}>
{`${data.name}: ${
data.values.length > 1
? i18n.t('{{count}} selected', {
count: data.values.length,
})
: data.values[0].name
}`}
</span>
<span
style={styles.badgeRemove}
onClick={this.onRemove(data.id)}
>
{i18n.t('Remove')}
</span>
</div>
);
}
}
FilterBadge.propTypes = {
data: PropTypes.object.isRequired,
onClick: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
};
FilterBadge.defaultProps = {
onClick: Function.prototype,
onRemove: Function.prototype,
};
export default FilterBadge;