diff options
author | 2022-11-17 05:45:39 +0530 | |
---|---|---|
committer | 2022-11-17 00:15:39 +0000 | |
commit | d9502c7516bc2d4ae467c6ea8a2e4816b0885f37 (patch) | |
tree | b339c587a5529ac26d52cfc12d9972a8a00255e6 /src/features/workspaces/components/WorkspaceDrawerItem.tsx | |
parent | Transform JSX components to TSX (#755) (diff) | |
download | ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.gz ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.zst ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.zip |
Transfrom workspace components to ts (#775)
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawerItem.tsx')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.tsx | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.tsx b/src/features/workspaces/components/WorkspaceDrawerItem.tsx new file mode 100644 index 000000000..0ad56d1ae --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx | |||
@@ -0,0 +1,153 @@ | |||
1 | import { Component, MouseEventHandler, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
6 | import { noop } from 'lodash'; | ||
7 | import { Menu } from '@electron/remote'; | ||
8 | import { MenuItemConstructorOptions } from 'electron'; | ||
9 | import { altKey, cmdOrCtrlShortcutKey } from '../../../environment'; | ||
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 itemTransition = | ||
23 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | ||
24 | ? 'background-color 300ms ease-out' | ||
25 | : 'none'; | ||
26 | |||
27 | const styles = theme => ({ | ||
28 | item: { | ||
29 | height: '67px', | ||
30 | padding: `15px ${theme.workspaces.drawer.padding}px`, | ||
31 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, | ||
32 | transition: itemTransition, | ||
33 | '&:first-child': { | ||
34 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, | ||
35 | }, | ||
36 | '&:hover': { | ||
37 | backgroundColor: theme.workspaces.drawer.listItem.hoverBackground, | ||
38 | }, | ||
39 | }, | ||
40 | isActiveItem: { | ||
41 | backgroundColor: theme.workspaces.drawer.listItem.activeBackground, | ||
42 | '&:hover': { | ||
43 | backgroundColor: theme.workspaces.drawer.listItem.activeBackground, | ||
44 | }, | ||
45 | }, | ||
46 | name: { | ||
47 | marginTop: '4px', | ||
48 | color: theme.workspaces.drawer.listItem.name.color, | ||
49 | }, | ||
50 | activeName: { | ||
51 | color: theme.workspaces.drawer.listItem.name.activeColor, | ||
52 | }, | ||
53 | services: { | ||
54 | display: 'block', | ||
55 | fontSize: '11px', | ||
56 | marginTop: '5px', | ||
57 | color: theme.workspaces.drawer.listItem.services.color, | ||
58 | whiteSpace: 'nowrap', | ||
59 | textOverflow: 'ellipsis', | ||
60 | overflow: 'hidden', | ||
61 | lineHeight: '15px', | ||
62 | }, | ||
63 | activeServices: { | ||
64 | color: theme.workspaces.drawer.listItem.services.active, | ||
65 | }, | ||
66 | }); | ||
67 | |||
68 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | ||
69 | isActive: boolean; | ||
70 | name: string; | ||
71 | onClick: MouseEventHandler<HTMLInputElement>; | ||
72 | services: string[]; | ||
73 | onContextMenuEditClick?: () => void | null; | ||
74 | shortcutIndex: number; | ||
75 | } | ||
76 | |||
77 | @observer | ||
78 | class WorkspaceDrawerItem extends Component<IProps> { | ||
79 | render(): ReactElement { | ||
80 | const { | ||
81 | classes, | ||
82 | isActive, | ||
83 | name, | ||
84 | onClick, | ||
85 | onContextMenuEditClick = null, | ||
86 | services, | ||
87 | shortcutIndex, | ||
88 | intl, | ||
89 | } = this.props; | ||
90 | |||
91 | const contextMenuTemplate: MenuItemConstructorOptions[] = [ | ||
92 | { | ||
93 | label: name, | ||
94 | enabled: false, | ||
95 | }, | ||
96 | { | ||
97 | type: 'separator', | ||
98 | }, | ||
99 | { | ||
100 | label: intl.formatMessage(messages.contextMenuEdit), | ||
101 | click: onContextMenuEditClick || noop, | ||
102 | }, | ||
103 | ]; | ||
104 | |||
105 | const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); | ||
106 | |||
107 | return ( | ||
108 | <div | ||
109 | className={classnames([ | ||
110 | classes.item, | ||
111 | isActive ? classes.isActiveItem : null, | ||
112 | ])} | ||
113 | onClick={onClick} | ||
114 | onContextMenu={() => { | ||
115 | if (onContextMenuEditClick) { | ||
116 | contextMenu.popup(); | ||
117 | } | ||
118 | }} | ||
119 | onKeyDown={noop} | ||
120 | data-tip={`${ | ||
121 | shortcutIndex <= 9 | ||
122 | ? `(${cmdOrCtrlShortcutKey(false)}+${altKey( | ||
123 | false, | ||
124 | )}+${shortcutIndex})` | ||
125 | : '' | ||
126 | }`} | ||
127 | > | ||
128 | <span | ||
129 | className={classnames([ | ||
130 | classes.name, | ||
131 | isActive ? classes.activeName : null, | ||
132 | ])} | ||
133 | > | ||
134 | {name} | ||
135 | </span> | ||
136 | <span | ||
137 | className={classnames([ | ||
138 | classes.services, | ||
139 | isActive ? classes.activeServices : null, | ||
140 | ])} | ||
141 | > | ||
142 | {services.length > 0 | ||
143 | ? services.join(', ') | ||
144 | : intl.formatMessage(messages.noServicesAddedYet)} | ||
145 | </span> | ||
146 | </div> | ||
147 | ); | ||
148 | } | ||
149 | } | ||
150 | |||
151 | export default injectIntl( | ||
152 | withStyles(styles, { injectTheme: true })(WorkspaceDrawerItem), | ||
153 | ); | ||