diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-02-06 20:28:15 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-02-06 20:28:15 +0100 |
commit | 14b151cad6a5a849bb476aaa3fc53bf1eead7f4b (patch) | |
tree | 8daa38d28fe21e1745093962526dd36744be4274 /packages/forms/src/select | |
parent | update versions (diff) | |
download | ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.tar.gz ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.tar.zst ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.zip |
cleanup
Diffstat (limited to 'packages/forms/src/select')
-rw-r--r-- | packages/forms/src/select/index.tsx | 99 |
1 files changed, 57 insertions, 42 deletions
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx index 58bb7317a..4a9e3c56e 100644 --- a/packages/forms/src/select/index.tsx +++ b/packages/forms/src/select/index.tsx | |||
@@ -2,8 +2,6 @@ import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi | |||
2 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
3 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '@meetfranz/theme'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import debounce from 'lodash/debounce'; | ||
6 | import { observer } from 'mobx-react'; | ||
7 | import React, { Component, createRef } from 'react'; | 5 | import React, { Component, createRef } from 'react'; |
8 | import injectStyle from 'react-jss'; | 6 | import injectStyle from 'react-jss'; |
9 | 7 | ||
@@ -86,7 +84,8 @@ const styles = (theme: Theme) => ({ | |||
86 | }, | 84 | }, |
87 | }, | 85 | }, |
88 | selected: { | 86 | selected: { |
89 | fontWeight: 'bold', | 87 | background: theme.selectOptionItemActive, |
88 | color: theme.selectOptionItemActiveColor, | ||
90 | }, | 89 | }, |
91 | toggle: { | 90 | toggle: { |
92 | marginLeft: 'auto', | 91 | marginLeft: 'auto', |
@@ -133,7 +132,6 @@ const styles = (theme: Theme) => ({ | |||
133 | }, | 132 | }, |
134 | }); | 133 | }); |
135 | 134 | ||
136 | @observer | ||
137 | class SelectComponent extends Component<IProps> { | 135 | class SelectComponent extends Component<IProps> { |
138 | public static defaultProps = { | 136 | public static defaultProps = { |
139 | onChange: () => {}, | 137 | onChange: () => {}, |
@@ -166,7 +164,7 @@ class SelectComponent extends Component<IProps> { | |||
166 | } | 164 | } |
167 | } | 165 | } |
168 | 166 | ||
169 | componentDidUpdate() { | 167 | componentDidUpdate(prevProps: IProps, prevState: IState) { |
170 | const { | 168 | const { |
171 | open, | 169 | open, |
172 | } = this.state; | 170 | } = this.state; |
@@ -179,41 +177,6 @@ class SelectComponent extends Component<IProps> { | |||
179 | } | 177 | } |
180 | 178 | ||
181 | componentDidMount() { | 179 | componentDidMount() { |
182 | if (this.componentRef && this.componentRef.current) { | ||
183 | this.keyListener = this.componentRef.current.addEventListener('keydown', debounce((e) => { | ||
184 | const { | ||
185 | selected, | ||
186 | open, | ||
187 | options, | ||
188 | } = this.state; | ||
189 | |||
190 | if (!open) return; | ||
191 | |||
192 | if (e.keyCode === 38 && selected > 0) { | ||
193 | this.setState((state: IState) => ({ | ||
194 | selected: state.selected - 1, | ||
195 | })); | ||
196 | } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) { | ||
197 | this.setState((state: IState) => ({ | ||
198 | selected: state.selected + 1, | ||
199 | })); | ||
200 | } else if (e.keyCode === 13) { | ||
201 | this.select(Object.keys(options!)[selected]); | ||
202 | } | ||
203 | |||
204 | if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) { | ||
205 | const containerTopOffset = this.scrollContainerRef.current.offsetTop; | ||
206 | const optionTopOffset = this.activeOptionRef.current.offsetTop; | ||
207 | |||
208 | const topOffset = optionTopOffset - containerTopOffset; | ||
209 | |||
210 | this.scrollContainerRef.current.scrollTop = topOffset - 35; | ||
211 | } | ||
212 | }, 10, { | ||
213 | leading: true, | ||
214 | })); | ||
215 | } | ||
216 | |||
217 | if (this.inputRef && this.inputRef.current) { | 180 | if (this.inputRef && this.inputRef.current) { |
218 | const { | 181 | const { |
219 | data, | 182 | data, |
@@ -223,10 +186,14 @@ class SelectComponent extends Component<IProps> { | |||
223 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); | 186 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); |
224 | } | 187 | } |
225 | } | 188 | } |
189 | |||
190 | window.addEventListener('keydown', this.arrowKeysHandler.bind(this), false); | ||
226 | } | 191 | } |
227 | 192 | ||
228 | componentWillMount() { | 193 | componentWillMount() { |
229 | const { value } = this.props; | 194 | const { |
195 | value, | ||
196 | } = this.props; | ||
230 | 197 | ||
231 | if (this.componentRef && this.componentRef.current) { | 198 | if (this.componentRef && this.componentRef.current) { |
232 | this.componentRef.current.removeEventListener('keydown', this.keyListener); | 199 | this.componentRef.current.removeEventListener('keydown', this.keyListener); |
@@ -241,6 +208,10 @@ class SelectComponent extends Component<IProps> { | |||
241 | this.setFilter(); | 208 | this.setFilter(); |
242 | } | 209 | } |
243 | 210 | ||
211 | componentWillUnmount() { | ||
212 | window.removeEventListener('keydown', this.arrowKeysHandler.bind(this)); | ||
213 | } | ||
214 | |||
244 | setFilter(needle: string = '') { | 215 | setFilter(needle: string = '') { |
245 | const { options } = this.props; | 216 | const { options } = this.props; |
246 | 217 | ||
@@ -277,6 +248,49 @@ class SelectComponent extends Component<IProps> { | |||
277 | } | 248 | } |
278 | } | 249 | } |
279 | 250 | ||
251 | arrowKeysHandler(e: KeyboardEvent) { | ||
252 | const { | ||
253 | selected, | ||
254 | open, | ||
255 | options, | ||
256 | } = this.state; | ||
257 | |||
258 | if (!open) return; | ||
259 | |||
260 | if (e.keyCode === 38 || e.keyCode === 40) { | ||
261 | e.preventDefault(); | ||
262 | } | ||
263 | |||
264 | if (this.componentRef && this.componentRef.current) { | ||
265 | if (e.keyCode === 38 && selected > 0) { | ||
266 | this.setState((state: IState) => ({ | ||
267 | selected: state.selected - 1, | ||
268 | })); | ||
269 | } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) { | ||
270 | this.setState((state: IState) => ({ | ||
271 | selected: state.selected + 1, | ||
272 | })); | ||
273 | } else if (e.keyCode === 13) { | ||
274 | this.select(Object.keys(options!)[selected]); | ||
275 | } | ||
276 | |||
277 | if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) { | ||
278 | const containerTopOffset = this.scrollContainerRef.current.offsetTop; | ||
279 | const optionTopOffset = this.activeOptionRef.current.offsetTop; | ||
280 | |||
281 | const topOffset = optionTopOffset - containerTopOffset; | ||
282 | |||
283 | this.scrollContainerRef.current.scrollTop = topOffset - 35; | ||
284 | } | ||
285 | } | ||
286 | |||
287 | switch (e.keyCode){ | ||
288 | case 37: case 39: case 38: case 40: // Arrow keys | ||
289 | case 32: break; // Space | ||
290 | default: break; // do not block other keys | ||
291 | } | ||
292 | } | ||
293 | |||
280 | render() { | 294 | render() { |
281 | const { | 295 | const { |
282 | actionText, | 296 | actionText, |
@@ -314,6 +328,7 @@ class SelectComponent extends Component<IProps> { | |||
314 | return ( | 328 | return ( |
315 | <Wrapper | 329 | <Wrapper |
316 | className={className} | 330 | className={className} |
331 | identifier="franz-select" | ||
317 | > | 332 | > |
318 | <Label | 333 | <Label |
319 | title={label} | 334 | title={label} |
@@ -366,7 +381,7 @@ class SelectComponent extends Component<IProps> { | |||
366 | <button | 381 | <button |
367 | type="button" | 382 | type="button" |
368 | className={classes.clearNeedle} | 383 | className={classes.clearNeedle} |
369 | onClick={() => this.setState({ needle: '', selected: -1 })} | 384 | onClick={() => this.setFilter()} |
370 | > | 385 | > |
371 | <Icon | 386 | <Icon |
372 | path={mdiCloseCircle} | 387 | path={mdiCloseCircle} |