diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-04-12 13:32:19 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-04-12 13:32:19 +0200 |
commit | f941074dd7520efb63e9507294df8c420715b9df (patch) | |
tree | 614d03296254f02fe93a67a5c3b2feef1446e3aa /src/features/workspaces/components/WorkspaceServiceListItem.js | |
parent | Don't invalidate user request on componentWillMount (diff) | |
parent | feat(App): Update electron to 4.1.4 (diff) | |
download | ferdium-app-f941074dd7520efb63e9507294df8c420715b9df.tar.gz ferdium-app-f941074dd7520efb63e9507294df8c420715b9df.tar.zst ferdium-app-f941074dd7520efb63e9507294df8c420715b9df.zip |
Merge branch 'develop' into chore/streamline-dashboard
Diffstat (limited to 'src/features/workspaces/components/WorkspaceServiceListItem.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceServiceListItem.js | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js new file mode 100644 index 000000000..e05b21440 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceServiceListItem.js | |||
@@ -0,0 +1,75 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import classnames from 'classnames'; | ||
6 | import { Toggle } from '@meetfranz/forms'; | ||
7 | |||
8 | import Service from '../../../models/Service'; | ||
9 | import ServiceIcon from '../../../components/ui/ServiceIcon'; | ||
10 | |||
11 | const styles = theme => ({ | ||
12 | listItem: { | ||
13 | height: theme.workspaces.settings.listItems.height, | ||
14 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, | ||
15 | display: 'flex', | ||
16 | alignItems: 'center', | ||
17 | }, | ||
18 | serviceIcon: { | ||
19 | padding: theme.workspaces.settings.listItems.padding, | ||
20 | }, | ||
21 | toggle: { | ||
22 | height: 'auto', | ||
23 | margin: 0, | ||
24 | }, | ||
25 | label: { | ||
26 | padding: theme.workspaces.settings.listItems.padding, | ||
27 | flexGrow: 1, | ||
28 | }, | ||
29 | disabledLabel: { | ||
30 | color: theme.workspaces.settings.listItems.disabled.color, | ||
31 | }, | ||
32 | }); | ||
33 | |||
34 | @injectSheet(styles) @observer | ||
35 | class WorkspaceServiceListItem extends Component { | ||
36 | static propTypes = { | ||
37 | classes: PropTypes.object.isRequired, | ||
38 | isInWorkspace: PropTypes.bool.isRequired, | ||
39 | onToggle: PropTypes.func.isRequired, | ||
40 | service: PropTypes.instanceOf(Service).isRequired, | ||
41 | }; | ||
42 | |||
43 | render() { | ||
44 | const { | ||
45 | classes, | ||
46 | isInWorkspace, | ||
47 | onToggle, | ||
48 | service, | ||
49 | } = this.props; | ||
50 | |||
51 | return ( | ||
52 | <div className={classes.listItem}> | ||
53 | <ServiceIcon | ||
54 | className={classes.serviceIcon} | ||
55 | service={service} | ||
56 | /> | ||
57 | <span | ||
58 | className={classnames([ | ||
59 | classes.label, | ||
60 | service.isEnabled ? null : classes.disabledLabel, | ||
61 | ])} | ||
62 | > | ||
63 | {service.name} | ||
64 | </span> | ||
65 | <Toggle | ||
66 | className={classes.toggle} | ||
67 | checked={isInWorkspace} | ||
68 | onChange={onToggle} | ||
69 | /> | ||
70 | </div> | ||
71 | ); | ||
72 | } | ||
73 | } | ||
74 | |||
75 | export default WorkspaceServiceListItem; | ||