diff options
Diffstat (limited to 'src/features/quickSwitch')
-rw-r--r-- | src/features/quickSwitch/Component.js | 67 |
1 files changed, 36 insertions, 31 deletions
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js index 78d5d94a0..df2bf968d 100644 --- a/src/features/quickSwitch/Component.js +++ b/src/features/quickSwitch/Component.js | |||
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; | |||
4 | import { observer, inject } from 'mobx-react'; | 4 | import { observer, inject } from 'mobx-react'; |
5 | import { reaction } from 'mobx'; | 5 | import { reaction } from 'mobx'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, injectIntl } from 'react-intl'; |
8 | import { Input } from '@meetfranz/forms'; | 8 | import { Input } from '@meetfranz/forms'; |
9 | import { H1 } from '@meetfranz/ui'; | 9 | import { H1 } from '@meetfranz/ui'; |
10 | 10 | ||
@@ -16,19 +16,20 @@ import ServicesStore from '../../stores/ServicesStore'; | |||
16 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
17 | title: { | 17 | title: { |
18 | id: 'feature.quickSwitch.title', | 18 | id: 'feature.quickSwitch.title', |
19 | defaultMessage: '!!!QuickSwitch', | 19 | defaultMessage: 'QuickSwitch', |
20 | }, | 20 | }, |
21 | search: { | 21 | search: { |
22 | id: 'feature.quickSwitch.search', | 22 | id: 'feature.quickSwitch.search', |
23 | defaultMessage: '!!!Search...', | 23 | defaultMessage: 'Search...', |
24 | }, | 24 | }, |
25 | info: { | 25 | info: { |
26 | id: 'feature.quickSwitch.info', | 26 | id: 'feature.quickSwitch.info', |
27 | defaultMessage: '!!!Select a service with TAB, ↑ and ↓. Open a service with ENTER.', | 27 | defaultMessage: |
28 | 'Select a service with TAB, ↑ and ↓. Open a service with ENTER.', | ||
28 | }, | 29 | }, |
29 | }); | 30 | }); |
30 | 31 | ||
31 | const styles = (theme) => ({ | 32 | const styles = theme => ({ |
32 | modal: { | 33 | modal: { |
33 | width: '80%', | 34 | width: '80%', |
34 | maxWidth: 600, | 35 | maxWidth: 600, |
@@ -80,20 +81,19 @@ const styles = (theme) => ({ | |||
80 | }, | 81 | }, |
81 | }); | 82 | }); |
82 | 83 | ||
83 | export default @injectSheet(styles) @inject('stores', 'actions') @observer class QuickSwitchModal extends Component { | 84 | @injectSheet(styles) |
85 | @inject('stores', 'actions') | ||
86 | @observer | ||
87 | class QuickSwitchModal extends Component { | ||
84 | static propTypes = { | 88 | static propTypes = { |
85 | classes: PropTypes.object.isRequired, | 89 | classes: PropTypes.object.isRequired, |
86 | }; | 90 | }; |
87 | 91 | ||
88 | static contextTypes = { | ||
89 | intl: intlShape, | ||
90 | }; | ||
91 | |||
92 | state = { | 92 | state = { |
93 | selected: 0, | 93 | selected: 0, |
94 | search: '', | 94 | search: '', |
95 | wasPrevVisible: false, | 95 | wasPrevVisible: false, |
96 | } | 96 | }; |
97 | 97 | ||
98 | ARROW_DOWN = 40; | 98 | ARROW_DOWN = 40; |
99 | 99 | ||
@@ -118,9 +118,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
118 | this.openService = this.openService.bind(this); | 118 | this.openService = this.openService.bind(this); |
119 | 119 | ||
120 | reaction( | 120 | reaction( |
121 | () => ( | 121 | () => ModalState.isModalVisible, |
122 | ModalState.isModalVisible | ||
123 | ), | ||
124 | () => { | 122 | () => { |
125 | this._handleVisibilityChange(); | 123 | this._handleVisibilityChange(); |
126 | }, | 124 | }, |
@@ -140,10 +138,17 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
140 | // Get currently shown services | 138 | // Get currently shown services |
141 | services() { | 139 | services() { |
142 | let services = []; | 140 | let services = []; |
143 | if (this.state.search && compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0) { | 141 | if ( |
142 | this.state.search && | ||
143 | compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0 | ||
144 | ) { | ||
144 | // Apply simple search algorythm to list of all services | 145 | // Apply simple search algorythm to list of all services |
145 | services = this.props.stores.services.allDisplayed; | 146 | services = this.props.stores.services.allDisplayed; |
146 | services = services.filter((service) => service.name.toLowerCase().search(this.state.search.toLowerCase()) !== -1); | 147 | services = services.filter( |
148 | service => | ||
149 | service.name.toLowerCase().search(this.state.search.toLowerCase()) !== | ||
150 | -1, | ||
151 | ); | ||
147 | } else { | 152 | } else { |
148 | // Add the currently active service first | 153 | // Add the currently active service first |
149 | const currentService = this.props.stores.services.active; | 154 | const currentService = this.props.stores.services.active; |
@@ -186,14 +191,14 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
186 | // Change the selected service | 191 | // Change the selected service |
187 | // factor should be -1 or 1 | 192 | // factor should be -1 or 1 |
188 | changeSelected(factor) { | 193 | changeSelected(factor) { |
189 | this.setState((state) => { | 194 | this.setState(state => { |
190 | let newSelected = state.selected + factor; | 195 | let newSelected = state.selected + factor; |
191 | const services = this.services().length; | 196 | const services = this.services().length; |
192 | 197 | ||
193 | // Roll around when on edge of list | 198 | // Roll around when on edge of list |
194 | if (state.selected < 1 && factor === -1) { | 199 | if (state.selected < 1 && factor === -1) { |
195 | newSelected = services - 1; | 200 | newSelected = services - 1; |
196 | } else if ((state.selected >= (services - 1)) && factor === 1) { | 201 | } else if (state.selected >= services - 1 && factor === 1) { |
197 | newSelected = 0; | 202 | newSelected = 0; |
198 | } | 203 | } |
199 | 204 | ||
@@ -286,17 +291,13 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
286 | render() { | 291 | render() { |
287 | const { isModalVisible } = ModalState; | 292 | const { isModalVisible } = ModalState; |
288 | 293 | ||
289 | const { | 294 | const { openService } = this; |
290 | openService, | ||
291 | } = this; | ||
292 | 295 | ||
293 | const { | 296 | const { classes } = this.props; |
294 | classes, | ||
295 | } = this.props; | ||
296 | 297 | ||
297 | const services = this.services(); | 298 | const services = this.services(); |
298 | 299 | ||
299 | const { intl } = this.context; | 300 | const { intl } = this.props; |
300 | 301 | ||
301 | return ( | 302 | return ( |
302 | <Modal | 303 | <Modal |
@@ -318,12 +319,16 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
318 | </div> | 319 | </div> |
319 | 320 | ||
320 | <div className={classes.services}> | 321 | <div className={classes.services}> |
321 | { services.map((service, index) => ( | 322 | {services.map((service, index) => ( |
322 | <div | 323 | <div |
323 | className={`${classes.service} ${this.state.selected === index ? `${classes.activeService} active` : ''} service`} | 324 | className={`${classes.service} ${ |
325 | this.state.selected === index | ||
326 | ? `${classes.activeService} active` | ||
327 | : '' | ||
328 | } service`} | ||
324 | onClick={() => openService(index)} | 329 | onClick={() => openService(index)} |
325 | key={service.id} | 330 | key={service.id} |
326 | ref={(el) => { | 331 | ref={el => { |
327 | this.serviceElements[index] = el; | 332 | this.serviceElements[index] = el; |
328 | }} | 333 | }} |
329 | > | 334 | > |
@@ -332,9 +337,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
332 | className={classes.serviceIcon} | 337 | className={classes.serviceIcon} |
333 | alt={service.recipe.name} | 338 | alt={service.recipe.name} |
334 | /> | 339 | /> |
335 | <div> | 340 | <div>{service.name}</div> |
336 | { service.name } | ||
337 | </div> | ||
338 | </div> | 341 | </div> |
339 | ))} | 342 | ))} |
340 | </div> | 343 | </div> |
@@ -356,3 +359,5 @@ QuickSwitchModal.wrappedComponent.propTypes = { | |||
356 | service: PropTypes.instanceOf(ServicesStore).isRequired, | 359 | service: PropTypes.instanceOf(ServicesStore).isRequired, |
357 | }).isRequired, | 360 | }).isRequired, |
358 | }; | 361 | }; |
362 | |||
363 | export default injectIntl(QuickSwitchModal); | ||