diff options
Diffstat (limited to 'src/components/settings/services/ServiceItem.tsx')
-rw-r--r-- | src/components/settings/services/ServiceItem.tsx | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/src/components/settings/services/ServiceItem.tsx b/src/components/settings/services/ServiceItem.tsx new file mode 100644 index 000000000..fd961a0a8 --- /dev/null +++ b/src/components/settings/services/ServiceItem.tsx | |||
@@ -0,0 +1,112 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
3 | import ReactTooltip from 'react-tooltip'; | ||
4 | import { observer } from 'mobx-react'; | ||
5 | import classnames from 'classnames'; | ||
6 | import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js'; | ||
7 | import ServiceModel from '../../../models/Service'; | ||
8 | import Icon from '../../ui/icon'; | ||
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 | tooltipIsMuted: { | ||
20 | id: 'settings.services.tooltip.isMuted', | ||
21 | defaultMessage: 'All sounds are muted', | ||
22 | }, | ||
23 | }); | ||
24 | |||
25 | interface IProps extends WrappedComponentProps { | ||
26 | service: ServiceModel; | ||
27 | goToServiceForm: () => void; | ||
28 | } | ||
29 | |||
30 | @observer | ||
31 | class ServiceItem extends Component<IProps> { | ||
32 | render(): ReactElement { | ||
33 | const { | ||
34 | service, | ||
35 | // toggleAction, // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it later | ||
36 | goToServiceForm, | ||
37 | } = this.props; | ||
38 | const { intl } = this.props; | ||
39 | |||
40 | return ( | ||
41 | <tr | ||
42 | className={classnames({ | ||
43 | 'service-table__row': true, | ||
44 | 'service-table__row--disabled': !service.isEnabled, | ||
45 | })} | ||
46 | > | ||
47 | <td | ||
48 | className="service-table__column-icon" | ||
49 | onClick={goToServiceForm} | ||
50 | role="gridcell" | ||
51 | > | ||
52 | <img | ||
53 | src={service.icon} | ||
54 | className={classnames({ | ||
55 | 'service-table__icon': true, | ||
56 | 'has-custom-icon': service.hasCustomIcon, | ||
57 | })} | ||
58 | alt="" | ||
59 | /> | ||
60 | </td> | ||
61 | <td | ||
62 | className="service-table__column-name" | ||
63 | onClick={goToServiceForm} | ||
64 | role="gridcell" | ||
65 | > | ||
66 | {service.name !== '' ? service.name : service.recipe.name} | ||
67 | </td> | ||
68 | <td | ||
69 | className="service-table__column-info" | ||
70 | onClick={goToServiceForm} | ||
71 | role="gridcell" | ||
72 | > | ||
73 | {service.isMuted && ( | ||
74 | <Icon | ||
75 | icon={mdiBellOff} | ||
76 | data-tip={intl.formatMessage(messages.tooltipIsMuted)} | ||
77 | /> | ||
78 | )} | ||
79 | </td> | ||
80 | <td | ||
81 | className="service-table__column-info" | ||
82 | onClick={goToServiceForm} | ||
83 | role="gridcell" | ||
84 | > | ||
85 | {!service.isEnabled && ( | ||
86 | <Icon | ||
87 | icon={mdiPower} | ||
88 | data-tip={intl.formatMessage(messages.tooltipIsDisabled)} | ||
89 | /> | ||
90 | )} | ||
91 | </td> | ||
92 | <td | ||
93 | className="service-table__column-info" | ||
94 | onClick={goToServiceForm} | ||
95 | role="gridcell" | ||
96 | > | ||
97 | {!service.isNotificationEnabled && ( | ||
98 | <Icon | ||
99 | icon={mdiMessageBulletedOff} | ||
100 | data-tip={intl.formatMessage( | ||
101 | messages.tooltipNotificationsDisabled, | ||
102 | )} | ||
103 | /> | ||
104 | )} | ||
105 | <ReactTooltip place="top" type="dark" effect="solid" /> | ||
106 | </td> | ||
107 | </tr> | ||
108 | ); | ||
109 | } | ||
110 | } | ||
111 | |||
112 | export default injectIntl(ServiceItem); | ||