-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
index.js
76 lines (70 loc) · 1.78 KB
/
index.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
73
74
75
76
import React, { PureComponent } from 'react';
import styled from '@emotion/styled';
import { colors } from '@arch-ui/theme';
const boldBackgroundColor = {
default: colors.N60,
inverted: colors.text,
primary: colors.primary,
created: colors.create,
warning: colors.warning,
danger: colors.danger,
};
const boldTextColor = {
default: 'white',
inverted: 'white',
primary: 'white',
created: 'white',
warning: 'white',
danger: 'white',
};
const subtleBackgroundColor = {
default: colors.N10,
inverted: 'white',
primary: colors.B.L85,
created: colors.G.L85,
warning: colors.Y.L85,
danger: colors.R.L85,
};
const subtleTextColor = {
default: colors.N70,
inverted: colors.text,
primary: colors.B.D20,
created: colors.G.D20,
warning: colors.Y.D20,
danger: colors.R.D20,
};
const BadgeElement = styled.div(({ appearance, variant }) => ({
backgroundColor:
variant === 'bold' ? boldBackgroundColor[appearance] : subtleBackgroundColor[appearance],
borderRadius: '2em',
boxSizing: 'border-box',
color: variant === 'bold' ? boldTextColor[appearance] : subtleTextColor[appearance],
display: 'inline-block',
fontSize: 12,
fontWeight: 500,
lineHeight: 1,
minWidth: '2em',
padding: '0.25em 0.5em',
textAlign: 'center',
}));
export class Badge extends PureComponent {
static defaultProps = {
appearance: 'default',
max: 99,
value: 0,
variant: 'subtle',
};
getValue = ({ value, max }) => {
if (value < 0) return '0';
if (max > 0 && value > max) return `${max}+`;
return value;
};
render() {
const { appearance, max, value, variant, ...rest } = this.props;
return (
<BadgeElement appearance={appearance} variant={variant} {...rest}>
{this.getValue({ value, max })}
</BadgeElement>
);
}
}