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