diff options
Diffstat (limited to 'src/components/settings/services/ServiceItem.js')
-rw-r--r-- | src/components/settings/services/ServiceItem.js | 48 |
1 files changed, 17 insertions, 31 deletions
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js index ebc618a00..4916e4ecc 100644 --- a/src/components/settings/services/ServiceItem.js +++ b/src/components/settings/services/ServiceItem.js | |||
@@ -1,6 +1,6 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, injectIntl } from 'react-intl'; |
4 | import ReactTooltip from 'react-tooltip'; | 4 | import ReactTooltip from 'react-tooltip'; |
5 | import { observer } from 'mobx-react'; | 5 | import { observer } from 'mobx-react'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
@@ -10,35 +10,32 @@ import ServiceModel from '../../../models/Service'; | |||
10 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
11 | tooltipIsDisabled: { | 11 | tooltipIsDisabled: { |
12 | id: 'settings.services.tooltip.isDisabled', | 12 | id: 'settings.services.tooltip.isDisabled', |
13 | defaultMessage: '!!!Service is disabled', | 13 | defaultMessage: 'Service is disabled', |
14 | }, | 14 | }, |
15 | tooltipNotificationsDisabled: { | 15 | tooltipNotificationsDisabled: { |
16 | id: 'settings.services.tooltip.notificationsDisabled', | 16 | id: 'settings.services.tooltip.notificationsDisabled', |
17 | defaultMessage: '!!!Notifications are disabled', | 17 | defaultMessage: 'Notifications are disabled', |
18 | }, | 18 | }, |
19 | tooltipIsMuted: { | 19 | tooltipIsMuted: { |
20 | id: 'settings.services.tooltip.isMuted', | 20 | id: 'settings.services.tooltip.isMuted', |
21 | defaultMessage: '!!!All sounds are muted', | 21 | defaultMessage: 'All sounds are muted', |
22 | }, | 22 | }, |
23 | }); | 23 | }); |
24 | 24 | ||
25 | export default @observer class ServiceItem extends Component { | 25 | @observer |
26 | class ServiceItem extends Component { | ||
26 | static propTypes = { | 27 | static propTypes = { |
27 | service: PropTypes.instanceOf(ServiceModel).isRequired, | 28 | service: PropTypes.instanceOf(ServiceModel).isRequired, |
28 | goToServiceForm: PropTypes.func.isRequired, | 29 | goToServiceForm: PropTypes.func.isRequired, |
29 | }; | 30 | }; |
30 | 31 | ||
31 | static contextTypes = { | ||
32 | intl: intlShape, | ||
33 | }; | ||
34 | |||
35 | render() { | 32 | render() { |
36 | const { | 33 | const { |
37 | service, | 34 | service, |
38 | // toggleAction, | 35 | // toggleAction, |
39 | goToServiceForm, | 36 | goToServiceForm, |
40 | } = this.props; | 37 | } = this.props; |
41 | const { intl } = this.context; | 38 | const { intl } = this.props; |
42 | 39 | ||
43 | return ( | 40 | return ( |
44 | <tr | 41 | <tr |
@@ -47,10 +44,7 @@ export default @observer class ServiceItem extends Component { | |||
47 | 'service-table__row--disabled': !service.isEnabled, | 44 | 'service-table__row--disabled': !service.isEnabled, |
48 | })} | 45 | })} |
49 | > | 46 | > |
50 | <td | 47 | <td className="service-table__column-icon" onClick={goToServiceForm}> |
51 | className="service-table__column-icon" | ||
52 | onClick={goToServiceForm} | ||
53 | > | ||
54 | <img | 48 | <img |
55 | src={service.icon} | 49 | src={service.icon} |
56 | className={classnames({ | 50 | className={classnames({ |
@@ -60,16 +54,10 @@ export default @observer class ServiceItem extends Component { | |||
60 | alt="" | 54 | alt="" |
61 | /> | 55 | /> |
62 | </td> | 56 | </td> |
63 | <td | 57 | <td className="service-table__column-name" onClick={goToServiceForm}> |
64 | className="service-table__column-name" | ||
65 | onClick={goToServiceForm} | ||
66 | > | ||
67 | {service.name !== '' ? service.name : service.recipe.name} | 58 | {service.name !== '' ? service.name : service.recipe.name} |
68 | </td> | 59 | </td> |
69 | <td | 60 | <td className="service-table__column-info" onClick={goToServiceForm}> |
70 | className="service-table__column-info" | ||
71 | onClick={goToServiceForm} | ||
72 | > | ||
73 | {service.isMuted && ( | 61 | {service.isMuted && ( |
74 | <span | 62 | <span |
75 | className="mdi mdi-bell-off" | 63 | className="mdi mdi-bell-off" |
@@ -77,10 +65,7 @@ export default @observer class ServiceItem extends Component { | |||
77 | /> | 65 | /> |
78 | )} | 66 | )} |
79 | </td> | 67 | </td> |
80 | <td | 68 | <td className="service-table__column-info" onClick={goToServiceForm}> |
81 | className="service-table__column-info" | ||
82 | onClick={goToServiceForm} | ||
83 | > | ||
84 | {!service.isEnabled && ( | 69 | {!service.isEnabled && ( |
85 | <span | 70 | <span |
86 | className="mdi mdi-power" | 71 | className="mdi mdi-power" |
@@ -88,14 +73,13 @@ export default @observer class ServiceItem extends Component { | |||
88 | /> | 73 | /> |
89 | )} | 74 | )} |
90 | </td> | 75 | </td> |
91 | <td | 76 | <td className="service-table__column-info" onClick={goToServiceForm}> |
92 | className="service-table__column-info" | ||
93 | onClick={goToServiceForm} | ||
94 | > | ||
95 | {!service.isNotificationEnabled && ( | 77 | {!service.isNotificationEnabled && ( |
96 | <span | 78 | <span |
97 | className="mdi mdi-message-bulleted-off" | 79 | className="mdi mdi-message-bulleted-off" |
98 | data-tip={intl.formatMessage(messages.tooltipNotificationsDisabled)} | 80 | data-tip={intl.formatMessage( |
81 | messages.tooltipNotificationsDisabled, | ||
82 | )} | ||
99 | /> | 83 | /> |
100 | )} | 84 | )} |
101 | <ReactTooltip place="top" type="dark" effect="solid" /> | 85 | <ReactTooltip place="top" type="dark" effect="solid" /> |
@@ -104,3 +88,5 @@ export default @observer class ServiceItem extends Component { | |||
104 | ); | 88 | ); |
105 | } | 89 | } |
106 | } | 90 | } |
91 | |||
92 | export default injectIntl(ServiceItem); | ||