goblin-desktop 4.2.0 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/.editorconfig +9 -9
  2. package/.zou-flow +2 -2
  3. package/LICENSE +21 -21
  4. package/README.md +108 -108
  5. package/builders/builders.js +3 -3
  6. package/builders/wizard.js +462 -462
  7. package/contexts.js +13 -13
  8. package/desktop-manager.js +10 -10
  9. package/desktop-window.js +13 -13
  10. package/desktop.js +13 -13
  11. package/eslint.config.js +65 -65
  12. package/lib/service.js +137 -137
  13. package/package.json +48 -48
  14. package/password-wizard.js +24 -24
  15. package/quest-run-wizard.js +24 -24
  16. package/taskbar.js +13 -13
  17. package/widgets/audio/sfx.js +177 -177
  18. package/widgets/board/view.js +37 -37
  19. package/widgets/board/widget.js +65 -65
  20. package/widgets/contexts/logic-handlers.js +36 -36
  21. package/widgets/contexts/service.js +40 -40
  22. package/widgets/contexts/view.js +21 -21
  23. package/widgets/contexts/widget.js +147 -147
  24. package/widgets/datagrid/datagrid-entity.js +82 -82
  25. package/widgets/datagrid/datagrid-headers.js +274 -274
  26. package/widgets/datagrid/styles.js +13 -13
  27. package/widgets/datagrid/widget.js +192 -192
  28. package/widgets/datagrid-cell/styles.js +52 -52
  29. package/widgets/datagrid-cell/widget.js +41 -41
  30. package/widgets/datagrid-item/styles.js +15 -15
  31. package/widgets/datagrid-item/widget.js +74 -74
  32. package/widgets/default/view.js +160 -160
  33. package/widgets/desktop/compensator.js +9 -9
  34. package/widgets/desktop/logic-handlers.js +243 -243
  35. package/widgets/desktop/reducer.js +35 -35
  36. package/widgets/desktop/service.js +858 -858
  37. package/widgets/desktop/styles.js +28 -28
  38. package/widgets/desktop/widget.js +191 -191
  39. package/widgets/desktop-clock/styles.js +69 -69
  40. package/widgets/desktop-clock/widget.js +387 -387
  41. package/widgets/desktop-clock-clock/styles.js +56 -56
  42. package/widgets/desktop-clock-clock/widget.js +96 -96
  43. package/widgets/desktop-clock-menu/styles.js +129 -129
  44. package/widgets/desktop-clock-menu/widget.js +63 -63
  45. package/widgets/desktop-connection-status/reducer.js +15 -15
  46. package/widgets/desktop-connection-status/styles.js +44 -44
  47. package/widgets/desktop-connection-status/widget.js +134 -134
  48. package/widgets/desktop-content/widget.js +68 -68
  49. package/widgets/desktop-footer/reducer.js +31 -31
  50. package/widgets/desktop-footer/styles.js +36 -36
  51. package/widgets/desktop-footer/widget.js +52 -52
  52. package/widgets/desktop-monitors/styles.js +155 -155
  53. package/widgets/desktop-monitors/widget.js +272 -272
  54. package/widgets/desktop-notebook/styles.js +155 -155
  55. package/widgets/desktop-notebook/widget.js +252 -252
  56. package/widgets/desktop-notifications/styles.js +147 -147
  57. package/widgets/desktop-notifications/widget.js +231 -231
  58. package/widgets/desktop-scale/reducer.js +15 -15
  59. package/widgets/desktop-scale/styles.js +49 -49
  60. package/widgets/desktop-scale/widget.js +173 -172
  61. package/widgets/desktop-state-monitor/styles.js +72 -72
  62. package/widgets/desktop-state-monitor/widget.js +123 -123
  63. package/widgets/desktop-taskbar/widget.js +57 -57
  64. package/widgets/desktop-themes-menu/widget.js +121 -121
  65. package/widgets/desktop-topbar/widget.js +201 -201
  66. package/widgets/desktop-window/service.js +56 -56
  67. package/widgets/desktop-window/styles.js +22 -22
  68. package/widgets/desktop-window/widget.js +70 -70
  69. package/widgets/detail/compensator.js +17 -17
  70. package/widgets/detail/view.js +40 -40
  71. package/widgets/detail/widget.js +119 -119
  72. package/widgets/editor/widget.js +82 -82
  73. package/widgets/entity-alerts/styles.js +77 -77
  74. package/widgets/entity-alerts/widget.js +328 -328
  75. package/widgets/entity-list/styles.js +66 -66
  76. package/widgets/entity-list/view.js +36 -36
  77. package/widgets/entity-list/widget.js +209 -209
  78. package/widgets/entity-list-item/widget.js +68 -68
  79. package/widgets/entity-row/styles.js +105 -105
  80. package/widgets/entity-row/widget.js +524 -524
  81. package/widgets/entity-row-button/styles.js +46 -46
  82. package/widgets/entity-row-button/widget.js +57 -57
  83. package/widgets/entity-view/reducer.js +20 -20
  84. package/widgets/entity-view/styles.js +90 -90
  85. package/widgets/entity-view/widget.js +601 -601
  86. package/widgets/facet-checkbox/styles.js +17 -17
  87. package/widgets/facet-checkbox/widget.js +43 -43
  88. package/widgets/facet-filter/widget.js +94 -94
  89. package/widgets/facet-filter-add/styles.js +30 -30
  90. package/widgets/facet-filter-add/widget.js +105 -105
  91. package/widgets/facet-filter-button/styles.js +74 -74
  92. package/widgets/facet-filter-button/widget.js +214 -214
  93. package/widgets/facet-filter-list-dialog/styles.js +59 -59
  94. package/widgets/facet-filter-list-dialog/widget.js +273 -273
  95. package/widgets/facet-filter-list-dialog-footer/styles.js +22 -22
  96. package/widgets/facet-filter-list-dialog-footer/widget.js +105 -105
  97. package/widgets/facet-filter-range-dialog/styles.js +82 -82
  98. package/widgets/facet-filter-range-dialog/widget.js +399 -399
  99. package/widgets/facet-filter-range-dialog-footer/styles.js +22 -22
  100. package/widgets/facet-filter-range-dialog-footer/widget.js +182 -182
  101. package/widgets/gamepad/widget.js +75 -75
  102. package/widgets/helpers/facet-helpers.js +105 -105
  103. package/widgets/hinter/reducer.js +35 -35
  104. package/widgets/hinter/styles.js +79 -79
  105. package/widgets/hinter/view.js +32 -32
  106. package/widgets/hinter/widget.js +289 -291
  107. package/widgets/junction/styles.js +22 -22
  108. package/widgets/junction/widget.js +50 -50
  109. package/widgets/main-tab-menu/styles.js +17 -17
  110. package/widgets/main-tab-menu/widget.js +130 -130
  111. package/widgets/map/view.js +49 -49
  112. package/widgets/map/widget.js +64 -64
  113. package/widgets/monitor/reducer.js +15 -15
  114. package/widgets/monitor/widget.js +60 -60
  115. package/widgets/navigating-layer/widget.js +25 -25
  116. package/widgets/notifications-button/widget.js +44 -44
  117. package/widgets/password-wizard/service.js +53 -53
  118. package/widgets/password-wizard/ui.js +66 -66
  119. package/widgets/plugin/reducer.js +19 -19
  120. package/widgets/plugin/styles.js +294 -294
  121. package/widgets/plugin/widget.js +622 -622
  122. package/widgets/quest-run-wizard/service.js +49 -49
  123. package/widgets/quest-run-wizard/ui.js +25 -25
  124. package/widgets/search/styles.js +80 -80
  125. package/widgets/search/widget.js +283 -285
  126. package/widgets/simple/view.js +28 -28
  127. package/widgets/status-filters/widget.js +121 -121
  128. package/widgets/tab/styles.js +16 -16
  129. package/widgets/tab/widget.js +89 -89
  130. package/widgets/tab-content/widget.js +35 -35
  131. package/widgets/tabs/widget.js +48 -48
  132. package/widgets/taskbar/service.js +99 -99
  133. package/widgets/taskbar/view.js +27 -27
  134. package/widgets/taskbar/widget.js +167 -167
  135. package/widgets/widget-doc-caller/reducer.js +15 -15
  136. package/widgets/widget-doc-caller/styles.js +20 -20
  137. package/widgets/widget-doc-caller/widget.js +55 -55
  138. package/widgets/wizard/widget.js +298 -298
  139. package/widgets/wizard-buttons/widget.js +111 -111
  140. package/widgets/workitem/styles.js +286 -286
  141. package/widgets/workitem/view.js +62 -62
  142. package/widgets/workitem/widget.js +988 -988
  143. package/widgets/workitem-dialog/widget.js +86 -86
  144. package/widgets/workitem-fields/widget.js +64 -64
@@ -1,22 +1,22 @@
1
- /******************************************************************************/
2
-
3
- export default function styles(theme) {
4
- const footer = {
5
- height: '50px',
6
- minHeight: '50px',
7
- padding: '0px 10px 0px 30px',
8
- display: 'flex',
9
- flexDirection: 'row',
10
- alignItems: 'center',
11
- borderRadius: '0px 0px 3px 3px',
12
- backgroundColor: theme.palette.paneNavigatorBackground,
13
- };
14
-
15
- const sajex = {
16
- flexGrow: 1,
17
- };
18
-
19
- return {footer, sajex};
20
- }
21
-
22
- /******************************************************************************/
1
+ /******************************************************************************/
2
+
3
+ export default function styles(theme) {
4
+ const footer = {
5
+ height: '50px',
6
+ minHeight: '50px',
7
+ padding: '0px 10px 0px 30px',
8
+ display: 'flex',
9
+ flexDirection: 'row',
10
+ alignItems: 'center',
11
+ borderRadius: '0px 0px 3px 3px',
12
+ backgroundColor: theme.palette.paneNavigatorBackground,
13
+ };
14
+
15
+ const sajex = {
16
+ flexGrow: 1,
17
+ };
18
+
19
+ return {footer, sajex};
20
+ }
21
+
22
+ /******************************************************************************/
@@ -1,182 +1,182 @@
1
- import React from 'react';
2
- import Widget from 'goblin-laboratory/widgets/widget';
3
- import T from 't';
4
- import Button from 'goblin-gadgets/widgets/button/widget';
5
- import {date as DateConverters} from 'xcraft-core-converters';
6
-
7
- /******************************************************************************/
8
-
9
- class FacetFilterRangeDialogFooter extends Widget {
10
- constructor() {
11
- super(...arguments);
12
- this.setAll = this.setAll.bind(this);
13
- this.setNow = this.setNow.bind(this);
14
- this.setMonth = this.setMonth.bind(this);
15
- this.setPrev = this.setPrev.bind(this);
16
- this.setNext = this.setNext.bind(this);
17
- this.deleteFacet = this.deleteFacet.bind(this);
18
- }
19
-
20
- setAll() {
21
- this.props.setFilter(this.props.min, this.props.max, 'all');
22
- }
23
-
24
- setNow() {
25
- const now = DateConverters.getNowCanonical();
26
- this.props.setFilter(now, now, 'now');
27
- }
28
-
29
- setMonth() {
30
- const now = DateConverters.getNowCanonical();
31
- const from = DateConverters.moveAtBeginningOfMonth(now);
32
- const to = DateConverters.moveAtEndingOfMonth(now);
33
- this.props.setFilter(from, to, 'month');
34
- }
35
-
36
- setPrev() {
37
- let from, to;
38
- if (this.props.type === 'date') {
39
- const result = DateConverters.changePeriod(
40
- this.props.from,
41
- this.props.to,
42
- -1
43
- );
44
- from = result.fromDate;
45
- to = result.toDate;
46
- } else {
47
- const n = this.props.to - this.props.from;
48
- to = this.props.from - 1;
49
- from = to - n;
50
- }
51
- this.props.setFilter(from, to);
52
- }
53
-
54
- setNext() {
55
- let from, to;
56
- if (this.props.type === 'date') {
57
- const result = DateConverters.changePeriod(
58
- this.props.from,
59
- this.props.to,
60
- 1
61
- );
62
- from = result.fromDate;
63
- to = result.toDate;
64
- } else {
65
- const n = this.props.to - this.props.from;
66
- from = this.props.to + 1;
67
- from = from + n;
68
- }
69
- this.props.setFilter(from, to);
70
- }
71
-
72
- deleteFacet() {
73
- // TODO
74
- }
75
-
76
- /******************************************************************************/
77
-
78
- render() {
79
- const showAll = this.props.useRange;
80
- const activeAll =
81
- this.props.from === this.props.min && this.props.to === this.props.max;
82
-
83
- const now = DateConverters.getNowCanonical();
84
- const showNow =
85
- this.props.useRange &&
86
- this.props.type === 'date' &&
87
- now >= this.props.min &&
88
- now <= this.props.max;
89
- const activeNow = this.props.from === now && this.props.to === now;
90
-
91
- const monthFrom = DateConverters.moveAtBeginningOfMonth(now);
92
- const monthTo = DateConverters.moveAtEndingOfMonth(now);
93
- const showMonth =
94
- this.props.useRange &&
95
- this.props.type === 'date' &&
96
- this.props.max > this.props.min &&
97
- monthFrom <= this.props.max &&
98
- monthTo >= this.props.min;
99
- const activeMonth =
100
- monthFrom <= this.props.max &&
101
- monthTo >= this.props.min &&
102
- this.props.from === monthFrom &&
103
- this.props.to === monthTo;
104
-
105
- const showPrevNext = this.props.useRange;
106
- const enablePrev = this.props.from > this.props.min;
107
- const enableNext = this.props.to < this.props.max;
108
-
109
- return (
110
- <div className={this.styles.classNames.footer}>
111
- {showAll ? (
112
- <Button
113
- active={activeAll}
114
- border="none"
115
- text={T('Max')}
116
- tooltip={T('Montre un maximum de données')}
117
- onClick={this.setAll}
118
- />
119
- ) : null}
120
-
121
- {showNow ? (
122
- <Button
123
- active={activeNow}
124
- border="none"
125
- text={T("Aujourd'hui")}
126
- tooltip={T("Montre aujourd'hui")}
127
- onClick={this.setNow}
128
- />
129
- ) : null}
130
-
131
- {showMonth ? (
132
- <Button
133
- active={activeMonth}
134
- border="none"
135
- text={T('Ce mois')}
136
- tooltip={T('Montre le mois en cours')}
137
- onClick={this.setMonth}
138
- />
139
- ) : null}
140
-
141
- {showPrevNext ? (
142
- <Button
143
- disabled={!enablePrev}
144
- border="none"
145
- glyph="solid/chevron-left"
146
- tooltip={T('Données précédentes')}
147
- onClick={this.setPrev}
148
- />
149
- ) : null}
150
-
151
- {showPrevNext ? (
152
- <Button
153
- disabled={!enableNext}
154
- border="none"
155
- glyph="solid/chevron-right"
156
- tooltip={T('Données suivantes')}
157
- onClick={this.setNext}
158
- />
159
- ) : null}
160
-
161
- <div className={this.styles.classNames.sajex} />
162
- {this.props.prototypeMode ? (
163
- <Button
164
- border="none"
165
- glyph="solid/trash"
166
- tooltip={T('Supprime le filtre')}
167
- onClick={this.deleteFacet}
168
- />
169
- ) : null}
170
- </div>
171
- );
172
- }
173
- }
174
-
175
- /******************************************************************************/
176
-
177
- export default Widget.connect((state, props) => {
178
- const userSession = Widget.getUserSession(state);
179
- const prototypeMode = userSession.get('prototypeMode');
180
-
181
- return {prototypeMode};
182
- })(FacetFilterRangeDialogFooter);
1
+ import React from 'react';
2
+ import Widget from 'goblin-laboratory/widgets/widget';
3
+ import T from 't';
4
+ import Button from 'goblin-gadgets/widgets/button/widget';
5
+ import {date as DateConverters} from 'xcraft-core-converters';
6
+
7
+ /******************************************************************************/
8
+
9
+ class FacetFilterRangeDialogFooter extends Widget {
10
+ constructor() {
11
+ super(...arguments);
12
+ this.setAll = this.setAll.bind(this);
13
+ this.setNow = this.setNow.bind(this);
14
+ this.setMonth = this.setMonth.bind(this);
15
+ this.setPrev = this.setPrev.bind(this);
16
+ this.setNext = this.setNext.bind(this);
17
+ this.deleteFacet = this.deleteFacet.bind(this);
18
+ }
19
+
20
+ setAll() {
21
+ this.props.setFilter(this.props.min, this.props.max, 'all');
22
+ }
23
+
24
+ setNow() {
25
+ const now = DateConverters.getNowCanonical();
26
+ this.props.setFilter(now, now, 'now');
27
+ }
28
+
29
+ setMonth() {
30
+ const now = DateConverters.getNowCanonical();
31
+ const from = DateConverters.moveAtBeginningOfMonth(now);
32
+ const to = DateConverters.moveAtEndingOfMonth(now);
33
+ this.props.setFilter(from, to, 'month');
34
+ }
35
+
36
+ setPrev() {
37
+ let from, to;
38
+ if (this.props.type === 'date') {
39
+ const result = DateConverters.changePeriod(
40
+ this.props.from,
41
+ this.props.to,
42
+ -1
43
+ );
44
+ from = result.fromDate;
45
+ to = result.toDate;
46
+ } else {
47
+ const n = this.props.to - this.props.from;
48
+ to = this.props.from - 1;
49
+ from = to - n;
50
+ }
51
+ this.props.setFilter(from, to);
52
+ }
53
+
54
+ setNext() {
55
+ let from, to;
56
+ if (this.props.type === 'date') {
57
+ const result = DateConverters.changePeriod(
58
+ this.props.from,
59
+ this.props.to,
60
+ 1
61
+ );
62
+ from = result.fromDate;
63
+ to = result.toDate;
64
+ } else {
65
+ const n = this.props.to - this.props.from;
66
+ from = this.props.to + 1;
67
+ from = from + n;
68
+ }
69
+ this.props.setFilter(from, to);
70
+ }
71
+
72
+ deleteFacet() {
73
+ // TODO
74
+ }
75
+
76
+ /******************************************************************************/
77
+
78
+ render() {
79
+ const showAll = this.props.useRange;
80
+ const activeAll =
81
+ this.props.from === this.props.min && this.props.to === this.props.max;
82
+
83
+ const now = DateConverters.getNowCanonical();
84
+ const showNow =
85
+ this.props.useRange &&
86
+ this.props.type === 'date' &&
87
+ now >= this.props.min &&
88
+ now <= this.props.max;
89
+ const activeNow = this.props.from === now && this.props.to === now;
90
+
91
+ const monthFrom = DateConverters.moveAtBeginningOfMonth(now);
92
+ const monthTo = DateConverters.moveAtEndingOfMonth(now);
93
+ const showMonth =
94
+ this.props.useRange &&
95
+ this.props.type === 'date' &&
96
+ this.props.max > this.props.min &&
97
+ monthFrom <= this.props.max &&
98
+ monthTo >= this.props.min;
99
+ const activeMonth =
100
+ monthFrom <= this.props.max &&
101
+ monthTo >= this.props.min &&
102
+ this.props.from === monthFrom &&
103
+ this.props.to === monthTo;
104
+
105
+ const showPrevNext = this.props.useRange;
106
+ const enablePrev = this.props.from > this.props.min;
107
+ const enableNext = this.props.to < this.props.max;
108
+
109
+ return (
110
+ <div className={this.styles.classNames.footer}>
111
+ {showAll ? (
112
+ <Button
113
+ active={activeAll}
114
+ border="none"
115
+ text={T('Max')}
116
+ tooltip={T('Montre un maximum de données')}
117
+ onClick={this.setAll}
118
+ />
119
+ ) : null}
120
+
121
+ {showNow ? (
122
+ <Button
123
+ active={activeNow}
124
+ border="none"
125
+ text={T("Aujourd'hui")}
126
+ tooltip={T("Montre aujourd'hui")}
127
+ onClick={this.setNow}
128
+ />
129
+ ) : null}
130
+
131
+ {showMonth ? (
132
+ <Button
133
+ active={activeMonth}
134
+ border="none"
135
+ text={T('Ce mois')}
136
+ tooltip={T('Montre le mois en cours')}
137
+ onClick={this.setMonth}
138
+ />
139
+ ) : null}
140
+
141
+ {showPrevNext ? (
142
+ <Button
143
+ disabled={!enablePrev}
144
+ border="none"
145
+ glyph="solid/chevron-left"
146
+ tooltip={T('Données précédentes')}
147
+ onClick={this.setPrev}
148
+ />
149
+ ) : null}
150
+
151
+ {showPrevNext ? (
152
+ <Button
153
+ disabled={!enableNext}
154
+ border="none"
155
+ glyph="solid/chevron-right"
156
+ tooltip={T('Données suivantes')}
157
+ onClick={this.setNext}
158
+ />
159
+ ) : null}
160
+
161
+ <div className={this.styles.classNames.sajex} />
162
+ {this.props.prototypeMode ? (
163
+ <Button
164
+ border="none"
165
+ glyph="solid/trash"
166
+ tooltip={T('Supprime le filtre')}
167
+ onClick={this.deleteFacet}
168
+ />
169
+ ) : null}
170
+ </div>
171
+ );
172
+ }
173
+ }
174
+
175
+ /******************************************************************************/
176
+
177
+ export default Widget.connect((state, props) => {
178
+ const userSession = Widget.getUserSession(state);
179
+ const prototypeMode = userSession.get('prototypeMode');
180
+
181
+ return {prototypeMode};
182
+ })(FacetFilterRangeDialogFooter);
@@ -1,75 +1,75 @@
1
- import React from 'react';
2
- import Widget from 'goblin-laboratory/widgets/widget';
3
- import {fromJS} from 'immutable';
4
-
5
- class GamePad extends Widget {
6
- constructor() {
7
- super(...arguments);
8
- }
9
-
10
- UNSAFE_componentWillReceiveProps() {
11
- if (this.props.gamepad) {
12
- this.doFor(this.props.id, 'gamepad-changed', {
13
- gamepad: this.props.gamepad,
14
- });
15
- }
16
- }
17
-
18
- render() {
19
- return null;
20
- }
21
- }
22
-
23
- class GamePads extends Widget {
24
- constructor() {
25
- super(...arguments);
26
- this.state = {gamepads: []};
27
- this.pollGamepads = this.pollGamepads.bind(this);
28
- }
29
-
30
- tick() {
31
- this.setState({gamepads: this.pollGamepads()});
32
- window.requestAnimationFrame(() => this.tick());
33
- }
34
-
35
- pollGamepads() {
36
- return navigator.getGamepads();
37
- }
38
-
39
- componentDidMount() {
40
- this.tick();
41
- }
42
-
43
- render() {
44
- const gamepads = [].slice.call(this.state.gamepads);
45
- return (
46
- <>
47
- {gamepads.map((g, i) => {
48
- if (!g) {
49
- return null;
50
- }
51
- const {id, index, connected, mapping, buttons, axes} = g;
52
- return (
53
- <GamePad
54
- id={this.props.id}
55
- gamepad={Widget.shred(
56
- fromJS({
57
- id,
58
- index,
59
- connected,
60
- mapping,
61
- buttons: buttons.map((b) => b.value),
62
- axes,
63
- })
64
- )}
65
- key={i}
66
- controller={i}
67
- />
68
- );
69
- })}
70
- </>
71
- );
72
- }
73
- }
74
-
75
- export default GamePads;
1
+ import React from 'react';
2
+ import Widget from 'goblin-laboratory/widgets/widget';
3
+ import {fromJS} from 'immutable';
4
+
5
+ class GamePad extends Widget {
6
+ constructor() {
7
+ super(...arguments);
8
+ }
9
+
10
+ UNSAFE_componentWillReceiveProps() {
11
+ if (this.props.gamepad) {
12
+ this.doFor(this.props.id, 'gamepad-changed', {
13
+ gamepad: this.props.gamepad,
14
+ });
15
+ }
16
+ }
17
+
18
+ render() {
19
+ return null;
20
+ }
21
+ }
22
+
23
+ class GamePads extends Widget {
24
+ constructor() {
25
+ super(...arguments);
26
+ this.state = {gamepads: []};
27
+ this.pollGamepads = this.pollGamepads.bind(this);
28
+ }
29
+
30
+ tick() {
31
+ this.setState({gamepads: this.pollGamepads()});
32
+ window.requestAnimationFrame(() => this.tick());
33
+ }
34
+
35
+ pollGamepads() {
36
+ return navigator.getGamepads();
37
+ }
38
+
39
+ componentDidMount() {
40
+ this.tick();
41
+ }
42
+
43
+ render() {
44
+ const gamepads = [].slice.call(this.state.gamepads);
45
+ return (
46
+ <>
47
+ {gamepads.map((g, i) => {
48
+ if (!g) {
49
+ return null;
50
+ }
51
+ const {id, index, connected, mapping, buttons, axes} = g;
52
+ return (
53
+ <GamePad
54
+ id={this.props.id}
55
+ gamepad={Widget.shred(
56
+ fromJS({
57
+ id,
58
+ index,
59
+ connected,
60
+ mapping,
61
+ buttons: buttons.map((b) => b.value),
62
+ axes,
63
+ })
64
+ )}
65
+ key={i}
66
+ controller={i}
67
+ />
68
+ );
69
+ })}
70
+ </>
71
+ );
72
+ }
73
+ }
74
+
75
+ export default GamePads;