diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawerItem.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.js | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js new file mode 100644 index 000000000..59a2144d3 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -0,0 +1,137 @@ | |||
1 | import { remote } from 'electron'; | ||
2 | import React, { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { observer } from 'mobx-react'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | import classnames from 'classnames'; | ||
7 | import { defineMessages, intlShape } from 'react-intl'; | ||
8 | |||
9 | const { Menu } = remote; | ||
10 | |||
11 | const messages = defineMessages({ | ||
12 | noServicesAddedYet: { | ||
13 | id: 'workspaceDrawer.item.noServicesAddedYet', | ||
14 | defaultMessage: '!!!No services added yet', | ||
15 | }, | ||
16 | contextMenuEdit: { | ||
17 | id: 'workspaceDrawer.item.contextMenuEdit', | ||
18 | defaultMessage: '!!!edit', | ||
19 | }, | ||
20 | }); | ||
21 | |||
22 | const styles = theme => ({ | ||
23 | item: { | ||
24 | height: '67px', | ||
25 | padding: `15px ${theme.workspaces.drawer.padding}px`, | ||
26 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, | ||
27 | transition: 'background-color 300ms ease-out', | ||
28 | '&:first-child': { | ||
29 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, | ||
30 | }, | ||
31 | '&:hover': { | ||
32 | backgroundColor: theme.workspaces.drawer.listItem.hoverBackground, | ||
33 | }, | ||
34 | }, | ||
35 | isActiveItem: { | ||
36 | backgroundColor: theme.workspaces.drawer.listItem.activeBackground, | ||
37 | '&:hover': { | ||
38 | backgroundColor: theme.workspaces.drawer.listItem.activeBackground, | ||
39 | }, | ||
40 | }, | ||
41 | name: { | ||
42 | marginTop: '4px', | ||
43 | color: theme.workspaces.drawer.listItem.name.color, | ||
44 | }, | ||
45 | activeName: { | ||
46 | color: theme.workspaces.drawer.listItem.name.activeColor, | ||
47 | }, | ||
48 | services: { | ||
49 | display: 'block', | ||
50 | fontSize: '11px', | ||
51 | marginTop: '5px', | ||
52 | color: theme.workspaces.drawer.listItem.services.color, | ||
53 | whiteSpace: 'nowrap', | ||
54 | textOverflow: 'ellipsis', | ||
55 | overflow: 'hidden', | ||
56 | lineHeight: '15px', | ||
57 | }, | ||
58 | activeServices: { | ||
59 | color: theme.workspaces.drawer.listItem.services.active, | ||
60 | }, | ||
61 | }); | ||
62 | |||
63 | @injectSheet(styles) @observer | ||
64 | class WorkspaceDrawerItem extends Component { | ||
65 | static propTypes = { | ||
66 | classes: PropTypes.object.isRequired, | ||
67 | isActive: PropTypes.bool.isRequired, | ||
68 | name: PropTypes.string.isRequired, | ||
69 | onClick: PropTypes.func.isRequired, | ||
70 | services: PropTypes.arrayOf(PropTypes.string).isRequired, | ||
71 | onContextMenuEditClick: PropTypes.func, | ||
72 | }; | ||
73 | |||
74 | static defaultProps = { | ||
75 | onContextMenuEditClick: null, | ||
76 | }; | ||
77 | |||
78 | static contextTypes = { | ||
79 | intl: intlShape, | ||
80 | }; | ||
81 | |||
82 | render() { | ||
83 | const { | ||
84 | classes, | ||
85 | isActive, | ||
86 | name, | ||
87 | onClick, | ||
88 | onContextMenuEditClick, | ||
89 | services, | ||
90 | } = this.props; | ||
91 | const { intl } = this.context; | ||
92 | |||
93 | const contextMenuTemplate = [{ | ||
94 | label: name, | ||
95 | enabled: false, | ||
96 | }, { | ||
97 | type: 'separator', | ||
98 | }, { | ||
99 | label: intl.formatMessage(messages.contextMenuEdit), | ||
100 | click: onContextMenuEditClick, | ||
101 | }]; | ||
102 | |||
103 | const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); | ||
104 | |||
105 | return ( | ||
106 | <div | ||
107 | className={classnames([ | ||
108 | classes.item, | ||
109 | isActive ? classes.isActiveItem : null, | ||
110 | ])} | ||
111 | onClick={onClick} | ||
112 | onContextMenu={() => ( | ||
113 | onContextMenuEditClick && contextMenu.popup(remote.getCurrentWindow()) | ||
114 | )} | ||
115 | > | ||
116 | <span | ||
117 | className={classnames([ | ||
118 | classes.name, | ||
119 | isActive ? classes.activeName : null, | ||
120 | ])} | ||
121 | > | ||
122 | {name} | ||
123 | </span> | ||
124 | <span | ||
125 | className={classnames([ | ||
126 | classes.services, | ||
127 | isActive ? classes.activeServices : null, | ||
128 | ])} | ||
129 | > | ||
130 | {services.length ? services.join(', ') : intl.formatMessage(messages.noServicesAddedYet)} | ||
131 | </span> | ||
132 | </div> | ||
133 | ); | ||
134 | } | ||
135 | } | ||
136 | |||
137 | export default WorkspaceDrawerItem; | ||