diff options
Diffstat (limited to 'src/components/ui/ServiceIcon.tsx')
-rw-r--r-- | src/components/ui/ServiceIcon.tsx | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/src/components/ui/ServiceIcon.tsx b/src/components/ui/ServiceIcon.tsx new file mode 100644 index 000000000..39a32e44d --- /dev/null +++ b/src/components/ui/ServiceIcon.tsx | |||
@@ -0,0 +1,52 @@ | |||
1 | import { Component, ReactNode } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
4 | import classnames from 'classnames'; | ||
5 | import ServiceModel from '../../models/Service'; | ||
6 | |||
7 | const styles = theme => ({ | ||
8 | root: { | ||
9 | height: 'auto', | ||
10 | }, | ||
11 | icon: { | ||
12 | width: theme.serviceIcon.width, | ||
13 | }, | ||
14 | isCustomIcon: { | ||
15 | width: theme.serviceIcon.isCustom.width, | ||
16 | border: theme.serviceIcon.isCustom.border, | ||
17 | borderRadius: theme.serviceIcon.isCustom.borderRadius, | ||
18 | }, | ||
19 | isDisabled: { | ||
20 | filter: 'grayscale(100%)', | ||
21 | opacity: '.5', | ||
22 | }, | ||
23 | }); | ||
24 | |||
25 | interface IProps extends WithStylesProps<typeof styles> { | ||
26 | service: ServiceModel; | ||
27 | className?: string; | ||
28 | } | ||
29 | |||
30 | // TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'? | ||
31 | @observer | ||
32 | class ServiceIcon extends Component<IProps> { | ||
33 | render(): ReactNode { | ||
34 | const { classes, className = '', service } = this.props; | ||
35 | |||
36 | return ( | ||
37 | <div className={classnames([classes.root, className])}> | ||
38 | <img | ||
39 | src={service.icon} | ||
40 | className={classnames([ | ||
41 | classes.icon, | ||
42 | service.isEnabled ? null : classes.isDisabled, | ||
43 | service.hasCustomIcon ? classes.isCustomIcon : null, | ||
44 | ])} | ||
45 | alt="" | ||
46 | /> | ||
47 | </div> | ||
48 | ); | ||
49 | } | ||
50 | } | ||
51 | |||
52 | export default withStyles(styles, { injectTheme: true })(ServiceIcon); | ||