diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-20 17:35:21 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-20 17:35:21 +0530 |
commit | 86f9ab693dcad951271f727046214b03d91ebd69 (patch) | |
tree | 3d32ff4814b5484495b811c5fe0ebea4805f4e55 /src/features/todos/components/TodosWebview.js | |
parent | 6.2.1-nightly.47 [skip ci] (diff) | |
download | ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.tar.gz ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.tar.zst ferdium-app-86f9ab693dcad951271f727046214b03d91ebd69.zip |
Transform Todo feature, ServiceBarTargetUrl, ServiceIcon, TeamDashboard, Slider, Loader & WorkspaceSwitchningIndicator into ts (#782)
Diffstat (limited to 'src/features/todos/components/TodosWebview.js')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 203 |
1 files changed, 0 insertions, 203 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js deleted file mode 100644 index 780864b91..000000000 --- a/src/features/todos/components/TodosWebview.js +++ /dev/null | |||
@@ -1,203 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import Webview from 'react-electron-web-view'; | ||
6 | import classnames from 'classnames'; | ||
7 | |||
8 | import { TODOS_PARTITION_ID } from '../../../config'; | ||
9 | |||
10 | const styles = theme => ({ | ||
11 | root: { | ||
12 | background: theme.colorBackground, | ||
13 | position: 'relative', | ||
14 | borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor], | ||
15 | zIndex: 300, | ||
16 | |||
17 | transform: ({ isVisible, width, isTodosServiceActive }) => | ||
18 | `translateX(${isVisible || isTodosServiceActive ? 0 : width}px)`, | ||
19 | |||
20 | '& webview': { | ||
21 | height: '100%', | ||
22 | }, | ||
23 | }, | ||
24 | resizeHandler: { | ||
25 | position: 'absolute', | ||
26 | left: 0, | ||
27 | marginLeft: -5, | ||
28 | width: 10, | ||
29 | zIndex: 400, | ||
30 | cursor: 'col-resize', | ||
31 | }, | ||
32 | dragIndicator: { | ||
33 | position: 'absolute', | ||
34 | left: 0, | ||
35 | width: 5, | ||
36 | zIndex: 400, | ||
37 | background: theme.todos.dragIndicator.background, | ||
38 | }, | ||
39 | isTodosServiceActive: { | ||
40 | width: 'calc(100% - 368px)', | ||
41 | position: 'absolute', | ||
42 | right: 0, | ||
43 | zIndex: 0, | ||
44 | borderLeftWidth: 0, | ||
45 | }, | ||
46 | hidden: { | ||
47 | borderLeftWidth: 0, | ||
48 | }, | ||
49 | }); | ||
50 | |||
51 | class TodosWebview extends Component { | ||
52 | static propTypes = { | ||
53 | classes: PropTypes.object.isRequired, | ||
54 | isTodosServiceActive: PropTypes.bool.isRequired, | ||
55 | isVisible: PropTypes.bool.isRequired, | ||
56 | handleClientMessage: PropTypes.func.isRequired, | ||
57 | setTodosWebview: PropTypes.func.isRequired, | ||
58 | resize: PropTypes.func.isRequired, | ||
59 | width: PropTypes.number.isRequired, | ||
60 | minWidth: PropTypes.number.isRequired, | ||
61 | userAgent: PropTypes.string.isRequired, | ||
62 | todoUrl: PropTypes.string.isRequired, | ||
63 | isTodoUrlValid: PropTypes.bool.isRequired, | ||
64 | }; | ||
65 | |||
66 | state = { | ||
67 | isDragging: false, | ||
68 | width: 300, | ||
69 | }; | ||
70 | |||
71 | componentDidMount() { | ||
72 | this.setState({ | ||
73 | width: this.props.width, | ||
74 | }); | ||
75 | |||
76 | this.node.addEventListener('mousemove', this.resizePanel.bind(this)); | ||
77 | this.node.addEventListener('mouseup', this.stopResize.bind(this)); | ||
78 | this.node.addEventListener('mouseleave', this.stopResize.bind(this)); | ||
79 | } | ||
80 | |||
81 | startResize = event => { | ||
82 | this.setState({ | ||
83 | isDragging: true, | ||
84 | initialPos: event.clientX, | ||
85 | delta: 0, | ||
86 | }); | ||
87 | }; | ||
88 | |||
89 | resizePanel(e) { | ||
90 | const { minWidth } = this.props; | ||
91 | |||
92 | const { isDragging, initialPos } = this.state; | ||
93 | |||
94 | if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) { | ||
95 | const delta = e.clientX - initialPos; | ||
96 | |||
97 | this.setState({ | ||
98 | delta, | ||
99 | }); | ||
100 | } | ||
101 | } | ||
102 | |||
103 | stopResize() { | ||
104 | const { resize, minWidth } = this.props; | ||
105 | |||
106 | const { isDragging, delta, width } = this.state; | ||
107 | |||
108 | if (isDragging) { | ||
109 | let newWidth = width + (delta < 0 ? Math.abs(delta) : -Math.abs(delta)); | ||
110 | |||
111 | if (newWidth < minWidth) { | ||
112 | newWidth = minWidth; | ||
113 | } | ||
114 | |||
115 | this.setState({ | ||
116 | isDragging: false, | ||
117 | delta: 0, | ||
118 | width: newWidth, | ||
119 | }); | ||
120 | |||
121 | resize(newWidth); | ||
122 | } | ||
123 | } | ||
124 | |||
125 | startListeningToIpcMessages() { | ||
126 | const { handleClientMessage } = this.props; | ||
127 | if (!this.webview) return; | ||
128 | this.webview.addEventListener('ipc-message', e => { | ||
129 | handleClientMessage({ channel: e.channel, message: e.args[0] }); | ||
130 | }); | ||
131 | } | ||
132 | |||
133 | render() { | ||
134 | const { | ||
135 | classes, | ||
136 | isTodosServiceActive, | ||
137 | isVisible, | ||
138 | userAgent, | ||
139 | todoUrl, | ||
140 | isTodoUrlValid, | ||
141 | } = this.props; | ||
142 | |||
143 | const { width, delta, isDragging } = this.state; | ||
144 | |||
145 | let displayedWidth = isVisible ? width : 0; | ||
146 | if (isTodosServiceActive) { | ||
147 | displayedWidth = null; | ||
148 | } | ||
149 | |||
150 | return ( | ||
151 | <div | ||
152 | className={classnames({ | ||
153 | [classes.root]: true, | ||
154 | [classes.isTodosServiceActive]: isTodosServiceActive, | ||
155 | 'todos__todos-panel--expanded': isTodosServiceActive, | ||
156 | [classes.hidden]: !isVisible, | ||
157 | })} | ||
158 | style={{ width: displayedWidth }} | ||
159 | onMouseUp={() => this.stopResize()} | ||
160 | ref={node => { | ||
161 | this.node = node; | ||
162 | }} | ||
163 | id="todos-panel" | ||
164 | > | ||
165 | <div | ||
166 | className={classes.resizeHandler} | ||
167 | style={{ | ||
168 | left: delta, | ||
169 | ...(isDragging ? { width: 600, marginLeft: -200 } : {}), | ||
170 | }} // This hack is required as resizing with webviews beneath behaves quite bad | ||
171 | onMouseDown={e => this.startResize(e)} | ||
172 | /> | ||
173 | {isDragging && ( | ||
174 | <div | ||
175 | className={classes.dragIndicator} | ||
176 | style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad | ||
177 | /> | ||
178 | )} | ||
179 | {isTodoUrlValid && ( | ||
180 | <Webview | ||
181 | className={classes.webview} | ||
182 | onDidAttach={() => { | ||
183 | const { setTodosWebview } = this.props; | ||
184 | setTodosWebview(this.webview); | ||
185 | this.startListeningToIpcMessages(); | ||
186 | }} | ||
187 | partition={TODOS_PARTITION_ID} | ||
188 | preload="./features/todos/preload.js" | ||
189 | ref={webview => { | ||
190 | this.webview = webview ? webview.view : null; | ||
191 | }} | ||
192 | useragent={userAgent} | ||
193 | src={todoUrl} | ||
194 | /> | ||
195 | )} | ||
196 | </div> | ||
197 | ); | ||
198 | } | ||
199 | } | ||
200 | |||
201 | export default injectSheet(styles, { injectTheme: true })( | ||
202 | observer(TodosWebview), | ||
203 | ); | ||