diff options
Diffstat (limited to 'src/components/services/tabs/Tabbar.tsx')
-rw-r--r-- | src/components/services/tabs/Tabbar.tsx | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/src/components/services/tabs/Tabbar.tsx b/src/components/services/tabs/Tabbar.tsx new file mode 100644 index 000000000..64541cc8f --- /dev/null +++ b/src/components/services/tabs/Tabbar.tsx | |||
@@ -0,0 +1,128 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | |||
4 | import TabBarSortableList from './TabBarSortableList'; | ||
5 | import Service from '../../../models/Service'; | ||
6 | |||
7 | interface IProps { | ||
8 | useHorizontalStyle: boolean; | ||
9 | showMessageBadgeWhenMutedSetting: boolean; | ||
10 | showServiceNameSetting: boolean; | ||
11 | showMessageBadgesEvenWhenMuted: boolean; | ||
12 | services: Service[]; | ||
13 | setActive: (args: { serviceId: string }) => void; | ||
14 | openSettings: (args: { path: string }) => void; | ||
15 | enableToolTip: () => void; | ||
16 | disableToolTip: () => void; | ||
17 | reorder: (args: { oldIndex: number; newIndex: number }) => void; | ||
18 | reload: (args: { serviceId: string }) => void; | ||
19 | toggleNotifications: (args: { serviceId: string }) => void; | ||
20 | toggleAudio: (args: { serviceId: string }) => void; | ||
21 | toggleDarkMode: (args: { serviceId: string }) => void; | ||
22 | deleteService: (args: { serviceId: string }) => void; | ||
23 | hibernateService: (args: { serviceId: string }) => void; | ||
24 | wakeUpService: (args: { serviceId: string }) => void; | ||
25 | updateService: (args: { | ||
26 | serviceId: string; | ||
27 | serviceData: { isEnabled: boolean; isMediaPlaying: boolean }; | ||
28 | redirect: boolean; | ||
29 | }) => void; | ||
30 | } | ||
31 | |||
32 | @observer | ||
33 | class TabBar extends Component<IProps> { | ||
34 | onSortEnd = ({ oldIndex, newIndex }) => { | ||
35 | const { enableToolTip, reorder } = this.props; | ||
36 | |||
37 | enableToolTip(); | ||
38 | reorder({ oldIndex, newIndex }); | ||
39 | }; | ||
40 | |||
41 | shouldPreventSorting = event => event.target.tagName !== 'LI'; | ||
42 | |||
43 | toggleService = (args: { serviceId: string; isEnabled: boolean }) => { | ||
44 | const { updateService } = this.props; | ||
45 | |||
46 | if (args.serviceId) { | ||
47 | updateService({ | ||
48 | serviceId: args.serviceId, | ||
49 | serviceData: { | ||
50 | isEnabled: args.isEnabled, | ||
51 | isMediaPlaying: false, | ||
52 | }, | ||
53 | redirect: false, | ||
54 | }); | ||
55 | } | ||
56 | }; | ||
57 | |||
58 | disableService({ serviceId }) { | ||
59 | this.toggleService({ serviceId, isEnabled: false }); | ||
60 | } | ||
61 | |||
62 | enableService({ serviceId }) { | ||
63 | this.toggleService({ serviceId, isEnabled: true }); | ||
64 | } | ||
65 | |||
66 | hibernateService({ serviceId }) { | ||
67 | if (serviceId) { | ||
68 | this.props.hibernateService({ serviceId }); | ||
69 | } | ||
70 | } | ||
71 | |||
72 | wakeUpService({ serviceId }) { | ||
73 | if (serviceId) { | ||
74 | this.props.wakeUpService({ serviceId }); | ||
75 | } | ||
76 | } | ||
77 | |||
78 | render() { | ||
79 | const { | ||
80 | services, | ||
81 | setActive, | ||
82 | openSettings, | ||
83 | disableToolTip, | ||
84 | reload, | ||
85 | toggleNotifications, | ||
86 | toggleAudio, | ||
87 | toggleDarkMode, | ||
88 | deleteService, | ||
89 | useHorizontalStyle, | ||
90 | showMessageBadgeWhenMutedSetting, | ||
91 | showServiceNameSetting, | ||
92 | showMessageBadgesEvenWhenMuted, | ||
93 | } = this.props; | ||
94 | |||
95 | const axis = useHorizontalStyle ? 'x' : 'y'; | ||
96 | |||
97 | return ( | ||
98 | <div> | ||
99 | <TabBarSortableList | ||
100 | services={services} | ||
101 | setActive={setActive} | ||
102 | onSortEnd={this.onSortEnd} | ||
103 | onSortStart={disableToolTip} | ||
104 | shouldCancelStart={this.shouldPreventSorting} | ||
105 | reload={reload} | ||
106 | toggleNotifications={toggleNotifications} | ||
107 | toggleAudio={toggleAudio} | ||
108 | toggleDarkMode={toggleDarkMode} | ||
109 | deleteService={deleteService} | ||
110 | disableService={args => this.disableService(args)} | ||
111 | enableService={args => this.enableService(args)} | ||
112 | hibernateService={args => this.hibernateService(args)} | ||
113 | wakeUpService={args => this.wakeUpService(args)} | ||
114 | openSettings={openSettings} | ||
115 | distance={20} | ||
116 | axis={axis} | ||
117 | lockAxis={axis} | ||
118 | helperClass="is-reordering" | ||
119 | showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting} | ||
120 | showServiceNameSetting={showServiceNameSetting} | ||
121 | showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted} | ||
122 | /> | ||
123 | </div> | ||
124 | ); | ||
125 | } | ||
126 | } | ||
127 | |||
128 | export default TabBar; | ||