@dhis2/ui 8.2.4 → 8.3.0
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.
- package/API.md +2885 -2
- package/package.json +48 -48
package/API.md
CHANGED
|
@@ -1,19 +1,2902 @@
|
|
|
1
|
+
### AlertBar
|
|
2
|
+
|
|
3
|
+
#### Usage
|
|
4
|
+
|
|
5
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
```js
|
|
9
|
+
import { AlertBar } from '@dhis2/ui'
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
#### Props
|
|
14
|
+
|
|
15
|
+
|Name|Type|Default|Required|Description|
|
|
16
|
+
|---|---|---|---|---|
|
|
17
|
+
|actions|custom|||An array of 0-2 action objects|
|
|
18
|
+
|children|string|||The message string for the alert|
|
|
19
|
+
|className|string||||
|
|
20
|
+
|critical|custom|||Alert bars with `critical` will not autohide|
|
|
21
|
+
|dataTest|string|`'dhis2-uicore-alertbar'`|||
|
|
22
|
+
|duration|number|`8000`|||
|
|
23
|
+
|hidden|boolean||||
|
|
24
|
+
|icon|custom|`true`||A specific icon to override the default icon in the bar.<br/>If `false` is provided, no icon will be shown.|
|
|
25
|
+
|permanent|boolean||||
|
|
26
|
+
|success|custom||||
|
|
27
|
+
|warning|custom|||Alert bars with `warning` will not autohide|
|
|
28
|
+
|onHidden|function||||
|
|
29
|
+
|
|
30
|
+
### AlertStack
|
|
31
|
+
|
|
32
|
+
#### Usage
|
|
33
|
+
|
|
34
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import { AlertStack } from '@dhis2/ui'
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
#### Props
|
|
43
|
+
|
|
44
|
+
|Name|Type|Default|Required|Description|
|
|
45
|
+
|---|---|---|---|---|
|
|
46
|
+
|children|node||||
|
|
47
|
+
|className|string||||
|
|
48
|
+
|dataTest|string|`'dhis2-uicore-alertstack'`|||
|
|
49
|
+
|
|
50
|
+
### Box
|
|
51
|
+
|
|
52
|
+
#### Usage
|
|
53
|
+
|
|
54
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
import { Box } from '@dhis2/ui'
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
#### Props
|
|
63
|
+
|
|
64
|
+
|Name|Type|Default|Required|Description|
|
|
65
|
+
|---|---|---|---|---|
|
|
66
|
+
|children|node||||
|
|
67
|
+
|className|string||||
|
|
68
|
+
|dataTest|string|`'dhis2-uicore-box'`|||
|
|
69
|
+
|height|string||||
|
|
70
|
+
|marginTop|string||||
|
|
71
|
+
|maxHeight|string||||
|
|
72
|
+
|maxWidth|string||||
|
|
73
|
+
|minHeight|string||||
|
|
74
|
+
|minWidth|string||||
|
|
75
|
+
|overflow|string||||
|
|
76
|
+
|width|string||||
|
|
77
|
+
|
|
78
|
+
### Button
|
|
79
|
+
|
|
80
|
+
#### Usage
|
|
81
|
+
|
|
82
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
```js
|
|
86
|
+
import { Button } from '@dhis2/ui'
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
#### Props
|
|
91
|
+
|
|
92
|
+
|Name|Type|Default|Required|Description|
|
|
93
|
+
|---|---|---|---|---|
|
|
94
|
+
|children|node|||Component to render inside the button|
|
|
95
|
+
|className|string|||A className that will be passed to the `<button>` element|
|
|
96
|
+
|dataTest|string|`'dhis2-uicore-button'`||A string that will be applied as a `data-test` attribute on the button element<br/>for identification during testing|
|
|
97
|
+
|destructive|custom|||Indicates that the button makes potentially dangerous<br/>deletions or data changes.<br/>Mutually exclusive with `primary` and `secondary` props|
|
|
98
|
+
|disabled|boolean|||Applies a greyed-out appearance and makes the button non-interactive|
|
|
99
|
+
|icon|element|||An icon element to display inside the button|
|
|
100
|
+
|initialFocus|boolean|||Use this variant to capture the initial focus on the page.|
|
|
101
|
+
|large|custom|||Makes the button large. Mutually exclusive with `small`|
|
|
102
|
+
|loading|boolean|||Sets the button into a loading state|
|
|
103
|
+
|name|string|||Sets `name` attribute on button element.<br/>Gets passed as part of the first argument to callbacks (see `onClick`).|
|
|
104
|
+
|primary|custom|||Applies 'primary' button appearance.<br/>Mutually exclusive with `destructive` and `secondary` props|
|
|
105
|
+
|secondary|custom|||Applies 'secondary' button appearance.<br/>Mutually exclusive with `primary` and `destructive` props|
|
|
106
|
+
|small|custom|||Makes the button small. Mutually exclusive with `large` prop|
|
|
107
|
+
|tabIndex|string|||Tab index for focusing the button with a keyboard|
|
|
108
|
+
|toggled|boolean|||Changes appearance of button to an on/off state|
|
|
109
|
+
|type|'submit' │ 'reset' │ 'button'|`'button'`||Sets `type` attribute on `<button>` element|
|
|
110
|
+
|value|string|||Value associated with the button.<br/>Gets passed as part of the first argument to callbacks (see `onClick`).|
|
|
111
|
+
|onBlur|function|||Callback to trigger on de-focus (blur).<br/>Called with same args as `onClick`|
|
|
112
|
+
|onClick|function|||Callback to trigger on click.<br/>Called with args `({ value, name }, event)`|
|
|
113
|
+
|onFocus|function|||Callback to trigger on focus. Called with same args as `onClick`|
|
|
114
|
+
|
|
115
|
+
### ButtonStrip
|
|
116
|
+
|
|
117
|
+
#### Usage
|
|
118
|
+
|
|
119
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
```js
|
|
123
|
+
import { ButtonStrip } from '@dhis2/ui'
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
#### Props
|
|
128
|
+
|
|
129
|
+
|Name|Type|Default|Required|Description|
|
|
130
|
+
|---|---|---|---|---|
|
|
131
|
+
|children|node||||
|
|
132
|
+
|className|string||||
|
|
133
|
+
|dataTest|string|`'dhis2-uicore-buttonstrip'`|||
|
|
134
|
+
|end|custom|||Horizontal alignment for buttons. Mutually exclusive with `middle` prop|
|
|
135
|
+
|middle|custom|||Horizontal alignment. Mutually exclusive with `end` prop|
|
|
136
|
+
|
|
137
|
+
### DropdownButton
|
|
138
|
+
|
|
139
|
+
#### Usage
|
|
140
|
+
|
|
141
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
```js
|
|
145
|
+
import { DropdownButton } from '@dhis2/ui'
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
#### Props
|
|
150
|
+
|
|
151
|
+
|Name|Type|Default|Required|Description|
|
|
152
|
+
|---|---|---|---|---|
|
|
153
|
+
|children|node|||Children to render inside the buton|
|
|
154
|
+
|className|string||||
|
|
155
|
+
|component|element|||Component to show/hide when button is clicked|
|
|
156
|
+
|dataTest|string|`'dhis2-uicore-dropdownbutton'`|||
|
|
157
|
+
|destructive|custom|||Button variant. Mutually exclusive with `primary` and `secondary` props|
|
|
158
|
+
|disabled|boolean|||Make the button non-interactive|
|
|
159
|
+
|icon|element||||
|
|
160
|
+
|initialFocus|boolean|||Grants button initial focus on the page|
|
|
161
|
+
|large|custom|||Button size. Mutually exclusive with `small` prop|
|
|
162
|
+
|name|string||||
|
|
163
|
+
|open|boolean|||Controls popper visibility. When implementing this prop the component becomes a controlled component|
|
|
164
|
+
|primary|custom|||Button variant. Mutually exclusive with `destructive` and `secondary` props|
|
|
165
|
+
|secondary|custom|||Button variant. Mutually exclusive with `primary` and `destructive` props|
|
|
166
|
+
|small|custom|||Button size. Mutually exclusive with `large` prop|
|
|
167
|
+
|tabIndex|string||||
|
|
168
|
+
|type|'submit' │ 'reset' │ 'button'|||Type of button. Can take advantage of different default behavior|
|
|
169
|
+
|value|string||||
|
|
170
|
+
|onClick|custom|||Callback triggered on click.<br/>Called with signature `({ name: string, value: string, open: bool }, event)`<br/>Is required when using the `open` prop to override the internal<br/>state.|
|
|
171
|
+
|
|
172
|
+
### SplitButton
|
|
173
|
+
|
|
174
|
+
#### Usage
|
|
175
|
+
|
|
176
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
```js
|
|
180
|
+
import { SplitButton } from '@dhis2/ui'
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
#### Props
|
|
185
|
+
|
|
186
|
+
|Name|Type|Default|Required|Description|
|
|
187
|
+
|---|---|---|---|---|
|
|
188
|
+
|children|string||||
|
|
189
|
+
|className|string||||
|
|
190
|
+
|component|element|||Component to render when the dropdown is opened|
|
|
191
|
+
|dataTest|string|`'dhis2-uicore-splitbutton'`|||
|
|
192
|
+
|destructive|custom|||Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props|
|
|
193
|
+
|disabled|boolean|||Disables the button and makes it uninteractive|
|
|
194
|
+
|icon|element|||An icon to add inside the button|
|
|
195
|
+
|initialFocus|boolean|||Grants the button the initial focus|
|
|
196
|
+
|large|custom|||Changes button size. Mutually exclusive with `small` prop|
|
|
197
|
+
|name|string||||
|
|
198
|
+
|primary|custom|||Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props|
|
|
199
|
+
|secondary|custom|||Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props|
|
|
200
|
+
|small|custom|||Changes button size. Mutually exclusive with `large` prop|
|
|
201
|
+
|tabIndex|string||||
|
|
202
|
+
|type|'submit' │ 'reset' │ 'button'|||Type of button. Applied to html `button` element|
|
|
203
|
+
|value|string|||Value associated with the button. Passed in object to onClick handler|
|
|
204
|
+
|onClick|function||||
|
|
205
|
+
|
|
206
|
+
### Card
|
|
207
|
+
|
|
208
|
+
#### Usage
|
|
209
|
+
|
|
210
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
```js
|
|
214
|
+
import { Card } from '@dhis2/ui'
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
#### Props
|
|
219
|
+
|
|
220
|
+
|Name|Type|Default|Required|Description|
|
|
221
|
+
|---|---|---|---|---|
|
|
222
|
+
|children|node||||
|
|
223
|
+
|className|string||||
|
|
224
|
+
|dataTest|string|`'dhis2-uicore-card'`|||
|
|
225
|
+
|
|
226
|
+
### Center
|
|
227
|
+
|
|
228
|
+
#### Usage
|
|
229
|
+
|
|
230
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
```js
|
|
234
|
+
import { Center } from '@dhis2/ui'
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
#### Props
|
|
239
|
+
|
|
240
|
+
|Name|Type|Default|Required|Description|
|
|
241
|
+
|---|---|---|---|---|
|
|
242
|
+
|children|node||||
|
|
243
|
+
|className|string||||
|
|
244
|
+
|dataTest|string|`'dhis2-uicore-centeredcontent'`|||
|
|
245
|
+
|position|'top' │ 'middle' │ 'bottom'|`'middle'`||Vertical alignment|
|
|
246
|
+
|
|
247
|
+
### Checkbox
|
|
248
|
+
|
|
249
|
+
#### Usage
|
|
250
|
+
|
|
251
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
```js
|
|
255
|
+
import { Checkbox } from '@dhis2/ui'
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
#### Props
|
|
260
|
+
|
|
261
|
+
|Name|Type|Default|Required|Description|
|
|
262
|
+
|---|---|---|---|---|
|
|
263
|
+
|checked|custom|`false`|||
|
|
264
|
+
|className|string||||
|
|
265
|
+
|dataTest|string|`'dhis2-uicore-checkbox'`|||
|
|
266
|
+
|dense|boolean||||
|
|
267
|
+
|disabled|boolean||||
|
|
268
|
+
|error|custom||||
|
|
269
|
+
|indeterminate|custom|`false`|||
|
|
270
|
+
|initialFocus|boolean||||
|
|
271
|
+
|label|node||||
|
|
272
|
+
|name|string||||
|
|
273
|
+
|tabIndex|string||||
|
|
274
|
+
|valid|custom||||
|
|
275
|
+
|value|string||||
|
|
276
|
+
|warning|custom||||
|
|
277
|
+
|onBlur|function||||
|
|
278
|
+
|onChange|function|||Called with signature `(object, event)`|
|
|
279
|
+
|onFocus|function||||
|
|
280
|
+
|
|
281
|
+
### CheckboxField
|
|
282
|
+
|
|
283
|
+
#### Usage
|
|
284
|
+
|
|
285
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
```js
|
|
289
|
+
import { CheckboxField } from '@dhis2/ui'
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
#### Props
|
|
294
|
+
|
|
295
|
+
|Name|Type|Default|Required|Description|
|
|
296
|
+
|---|---|---|---|---|
|
|
297
|
+
|checked|boolean||||
|
|
298
|
+
|className|string||||
|
|
299
|
+
|dataTest|string|`'dhis2-uiwidgets-checkboxfield'`|||
|
|
300
|
+
|dense|boolean|||Smaller dimensions for information-dense layouts|
|
|
301
|
+
|disabled|boolean|||Disables the checkbox|
|
|
302
|
+
|error|custom|||Applies 'error' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `valid` props|
|
|
303
|
+
|helpText|string|||Useful instructions for the user|
|
|
304
|
+
|initialFocus|boolean||||
|
|
305
|
+
|label|node|||Labels the checkbox|
|
|
306
|
+
|name|string|||Name associate with the checkbox. Passed in object as argument to event handlers|
|
|
307
|
+
|required|boolean|||Adds an asterisk to indicate this field is required|
|
|
308
|
+
|tabIndex|string||||
|
|
309
|
+
|valid|custom|||Applies 'valid' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `error` props|
|
|
310
|
+
|validationText|string|||Adds text below the checkbox to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses|
|
|
311
|
+
|value|string|||Value associated with the checkbox. Passed in object as argument to event handlers|
|
|
312
|
+
|warning|custom|||Applies 'warning' styling to checkbox and validation text for feedback. Mutually exclusive with `valid` and `error` props|
|
|
313
|
+
|onBlur|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
|
|
314
|
+
|onChange|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
|
|
315
|
+
|onFocus|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
|
|
316
|
+
|
|
317
|
+
### Chip
|
|
318
|
+
|
|
319
|
+
#### Usage
|
|
320
|
+
|
|
321
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
```js
|
|
325
|
+
import { Chip } from '@dhis2/ui'
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
|
|
329
|
+
#### Props
|
|
330
|
+
|
|
331
|
+
|Name|Type|Default|Required|Description|
|
|
332
|
+
|---|---|---|---|---|
|
|
333
|
+
|children|any||||
|
|
334
|
+
|className|string||||
|
|
335
|
+
|dataTest|string|`'dhis2-uicore-chip'`|||
|
|
336
|
+
|dense|boolean||||
|
|
337
|
+
|disabled|boolean||||
|
|
338
|
+
|dragging|boolean||||
|
|
339
|
+
|icon|element||||
|
|
340
|
+
|marginBottom|number|`4`||`margin-bottom` value, applied in `px`|
|
|
341
|
+
|marginLeft|number|`4`||`margin-left` value, applied in `px`|
|
|
342
|
+
|marginRight|number|`4`||`margin-right` value, applied in `px`|
|
|
343
|
+
|marginTop|number|`4`||`margin-top` value, applied in `px`|
|
|
344
|
+
|overflow|boolean||||
|
|
345
|
+
|selected|boolean||||
|
|
346
|
+
|onClick|function||||
|
|
347
|
+
|onRemove|function||||
|
|
348
|
+
|
|
349
|
+
### Cover
|
|
350
|
+
|
|
351
|
+
#### Usage
|
|
352
|
+
|
|
353
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
```js
|
|
357
|
+
import { Cover } from '@dhis2/ui'
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
#### Props
|
|
362
|
+
|
|
363
|
+
|Name|Type|Default|Required|Description|
|
|
364
|
+
|---|---|---|---|---|
|
|
365
|
+
|children|node||||
|
|
366
|
+
|className|string||||
|
|
367
|
+
|dataTest|string|`'dhis2-uicore-componentcover'`|||
|
|
368
|
+
|translucent|boolean|||Adds a semi-transparent background to the cover|
|
|
369
|
+
|onClick|function||||
|
|
370
|
+
|
|
1
371
|
### CssReset
|
|
2
372
|
|
|
3
373
|
#### Usage
|
|
4
374
|
|
|
5
375
|
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
6
376
|
|
|
377
|
+
|
|
7
378
|
```js
|
|
8
379
|
import { CssReset } from '@dhis2/ui'
|
|
9
380
|
```
|
|
10
381
|
|
|
11
|
-
|
|
382
|
+
|
|
383
|
+
|
|
384
|
+
### CssVariables
|
|
12
385
|
|
|
13
386
|
#### Usage
|
|
14
387
|
|
|
15
388
|
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
16
389
|
|
|
390
|
+
|
|
17
391
|
```js
|
|
18
|
-
import {
|
|
392
|
+
import { CssVariables } from '@dhis2/ui'
|
|
393
|
+
```
|
|
394
|
+
|
|
395
|
+
|
|
396
|
+
#### Props
|
|
397
|
+
|
|
398
|
+
|Name|Type|Default|Required|Description|
|
|
399
|
+
|---|---|---|---|---|
|
|
400
|
+
|colors|boolean|`false`|||
|
|
401
|
+
|elevations|boolean|`false`|||
|
|
402
|
+
|layers|boolean|`false`|||
|
|
403
|
+
|spacers|boolean|`false`|||
|
|
404
|
+
|theme|boolean|`false`|||
|
|
405
|
+
|
|
406
|
+
### Divider
|
|
407
|
+
|
|
408
|
+
#### Usage
|
|
409
|
+
|
|
410
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
411
|
+
|
|
412
|
+
|
|
413
|
+
```js
|
|
414
|
+
import { Divider } from '@dhis2/ui'
|
|
415
|
+
```
|
|
416
|
+
|
|
417
|
+
|
|
418
|
+
#### Props
|
|
419
|
+
|
|
420
|
+
|Name|Type|Default|Required|Description|
|
|
421
|
+
|---|---|---|---|---|
|
|
422
|
+
|className|string||||
|
|
423
|
+
|dataTest|string|`'dhis2-uicore-divider'`|||
|
|
424
|
+
|dense|boolean||||
|
|
425
|
+
|margin|string|``${spacers.dp8} 0``|||
|
|
426
|
+
|
|
427
|
+
### Field
|
|
428
|
+
|
|
429
|
+
#### Usage
|
|
430
|
+
|
|
431
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
```js
|
|
435
|
+
import { Field } from '@dhis2/ui'
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
|
|
439
|
+
#### Props
|
|
440
|
+
|
|
441
|
+
|Name|Type|Default|Required|Description|
|
|
442
|
+
|---|---|---|---|---|
|
|
443
|
+
|children|node||||
|
|
444
|
+
|className|string||||
|
|
445
|
+
|dataTest|string|`'dhis2-uicore-field'`|||
|
|
446
|
+
|disabled|boolean|||Disabled status, shown when mouse is over label|
|
|
447
|
+
|error|custom|||Field status. Mutually exclusive with `valid` and `warning` props|
|
|
448
|
+
|helpText|string|||Useful text within the field|
|
|
449
|
+
|label|string|||Label at the top of the field|
|
|
450
|
+
|name|string|||`name` will become the target of the `for`/`htmlFor` attribute on the `<label>` element|
|
|
451
|
+
|required|boolean|||Inidcates this field is required|
|
|
452
|
+
|valid|custom|||Field status. Mutually exclusive with `error` and `warning` props|
|
|
453
|
+
|validationText|string|||Feedback given related to validation status of field|
|
|
454
|
+
|warning|custom|||Field status. Mutually exclusive with `valid` and `error` props|
|
|
455
|
+
|
|
456
|
+
### FieldGroup
|
|
457
|
+
|
|
458
|
+
#### Usage
|
|
459
|
+
|
|
460
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
461
|
+
|
|
462
|
+
|
|
463
|
+
```js
|
|
464
|
+
import { FieldGroup } from '@dhis2/ui'
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
|
|
468
|
+
#### Props
|
|
469
|
+
|
|
470
|
+
|Name|Type|Default|Required|Description|
|
|
471
|
+
|---|---|---|---|---|
|
|
472
|
+
|children|node||||
|
|
473
|
+
|className|string||||
|
|
474
|
+
|dataTest|string|`'dhis2-uiwidgets-fieldsetfield'`|||
|
|
475
|
+
|disabled|boolean|||Disables the form controls within|
|
|
476
|
+
|error|custom|||Applies 'error' styling to validation text for feedback. Mutually exclusive with `warning` and `valid` props|
|
|
477
|
+
|helpText|string|||Useful instructions for the user|
|
|
478
|
+
|label|string|||Labels the Field Group|
|
|
479
|
+
|name|string|||Name associate with the Field Group. Passed in object as argument to event handlers|
|
|
480
|
+
|required|boolean|||Adds an asterisk to indicate this field is required|
|
|
481
|
+
|valid|custom|||Applies 'valid' styling to validation text for feedback. Mutually exclusive with `warning` and `error` props|
|
|
482
|
+
|validationText|string|||Adds text at the bottom of the field to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses|
|
|
483
|
+
|warning|custom|||Applies 'warning' styling to validation text for feedback. Mutually exclusive with `valid` and `error` props|
|
|
484
|
+
|
|
485
|
+
### FieldSet
|
|
486
|
+
|
|
487
|
+
#### Usage
|
|
488
|
+
|
|
489
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
490
|
+
|
|
491
|
+
|
|
492
|
+
```js
|
|
493
|
+
import { FieldSet } from '@dhis2/ui'
|
|
494
|
+
```
|
|
495
|
+
|
|
496
|
+
|
|
497
|
+
#### Props
|
|
498
|
+
|
|
499
|
+
|Name|Type|Default|Required|Description|
|
|
500
|
+
|---|---|---|---|---|
|
|
501
|
+
|children|node||||
|
|
502
|
+
|className|string||||
|
|
503
|
+
|dataTest|string|`'dhis2-uicore-fieldset'`|||
|
|
504
|
+
|
|
505
|
+
### FileInput
|
|
506
|
+
|
|
507
|
+
#### Usage
|
|
508
|
+
|
|
509
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
510
|
+
|
|
511
|
+
|
|
512
|
+
```js
|
|
513
|
+
import { FileInput } from '@dhis2/ui'
|
|
514
|
+
```
|
|
515
|
+
|
|
516
|
+
|
|
517
|
+
#### Props
|
|
518
|
+
|
|
519
|
+
|Name|Type|Default|Required|Description|
|
|
520
|
+
|---|---|---|---|---|
|
|
521
|
+
|accept|string|`'*'`||The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)|
|
|
522
|
+
|buttonLabel|string||||
|
|
523
|
+
|className|string||||
|
|
524
|
+
|dataTest|string|`'dhis2-uicore-fileinput'`|||
|
|
525
|
+
|disabled|boolean||||
|
|
526
|
+
|error|custom|||Input status. Mutually exclusive with `warning` and `valid`|
|
|
527
|
+
|initialFocus|boolean||||
|
|
528
|
+
|large|custom|||Button size. Mutually exclusive with `small`|
|
|
529
|
+
|multiple|boolean|||The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)|
|
|
530
|
+
|name|string||||
|
|
531
|
+
|small|custom|||Button size. Mutually exclusive with `large`|
|
|
532
|
+
|tabIndex|string||||
|
|
533
|
+
|valid|custom|||Input status. Mutually exclusive with `warning` and `error`|
|
|
534
|
+
|warning|custom|||Input status. Mutually exclusive with `valid` and `error`|
|
|
535
|
+
|onBlur|function|||Called with signature `(object, event)`|
|
|
536
|
+
|onChange|function|||Called with signature `(object, event)`|
|
|
537
|
+
|onFocus|function|||Called with signature `(object, event)`|
|
|
538
|
+
|
|
539
|
+
### FileInputField
|
|
540
|
+
|
|
541
|
+
#### Usage
|
|
542
|
+
|
|
543
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
544
|
+
|
|
545
|
+
|
|
546
|
+
```js
|
|
547
|
+
import { FileInputField } from '@dhis2/ui'
|
|
548
|
+
```
|
|
549
|
+
|
|
550
|
+
|
|
551
|
+
#### Props
|
|
552
|
+
|
|
553
|
+
|Name|Type|Default|Required|Description|
|
|
554
|
+
|---|---|---|---|---|
|
|
555
|
+
|accept|string|`'*'`||The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)|
|
|
556
|
+
|buttonLabel|string │ function|`() => i18n.t('Upload a file')`||Text on the button|
|
|
557
|
+
|children|node||||
|
|
558
|
+
|className|string||||
|
|
559
|
+
|dataTest|string|`'dhis2-uiwidgets-fileinputfield'`|||
|
|
560
|
+
|disabled|boolean|||Disables the button|
|
|
561
|
+
|error|custom|||Applies 'error' styling to the validation text. Mutually exclusive with `warning` and `valid` props|
|
|
562
|
+
|helpText|string|||Useful guiding text for the user|
|
|
563
|
+
|initialFocus|boolean||||
|
|
564
|
+
|label|string|||A descriptive label above the button|
|
|
565
|
+
|large|custom|||Size of the button. Mutually exclusive with the `small` prop|
|
|
566
|
+
|multiple|boolean|||The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)|
|
|
567
|
+
|name|string|||Name associated with input. Passed to event handler callbacks|
|
|
568
|
+
|placeholder|string │ function|`() => i18n.t('No file uploaded yet')`||Placeholder below the button|
|
|
569
|
+
|required|boolean|||Adds an asterisk to indicate this field is required|
|
|
570
|
+
|small|custom|||Size of the button. Mutually exclusive with the `large` prop|
|
|
571
|
+
|tabIndex|string||||
|
|
572
|
+
|valid|custom|||Applies 'valid' styling to the validation text. Mutually exclusive with `warning` and `error` props|
|
|
573
|
+
|validationText|string|||Text below the button that provides validation feedback|
|
|
574
|
+
|warning|custom|||Applies 'warning' styling to the validation text. Mutually exclusive with `valid` and `error` props|
|
|
575
|
+
|onBlur|function||||
|
|
576
|
+
|onChange|function|||Called with signature `({ name: string, files: [] }, event)`|
|
|
577
|
+
|onFocus|function||||
|
|
578
|
+
|
|
579
|
+
### FileListItem
|
|
580
|
+
|
|
581
|
+
#### Usage
|
|
582
|
+
|
|
583
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
584
|
+
|
|
585
|
+
|
|
586
|
+
```js
|
|
587
|
+
import { FileListItem } from '@dhis2/ui'
|
|
19
588
|
```
|
|
589
|
+
|
|
590
|
+
|
|
591
|
+
#### Props
|
|
592
|
+
|
|
593
|
+
|Name|Type|Default|Required|Description|
|
|
594
|
+
|---|---|---|---|---|
|
|
595
|
+
|onRemove|function||*||
|
|
596
|
+
|cancelText|string||||
|
|
597
|
+
|className|string||||
|
|
598
|
+
|dataTest|string|`'dhis2-uicore-filelistitem'`|||
|
|
599
|
+
|label|string||||
|
|
600
|
+
|loading|boolean||||
|
|
601
|
+
|removeText|string||||
|
|
602
|
+
|onCancel|function||||
|
|
603
|
+
|
|
604
|
+
### FileListPlaceholder
|
|
605
|
+
|
|
606
|
+
#### Usage
|
|
607
|
+
|
|
608
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
609
|
+
|
|
610
|
+
|
|
611
|
+
```js
|
|
612
|
+
import { FileListPlaceholder } from '@dhis2/ui'
|
|
613
|
+
```
|
|
614
|
+
|
|
615
|
+
|
|
616
|
+
#### Props
|
|
617
|
+
|
|
618
|
+
|Name|Type|Default|Required|Description|
|
|
619
|
+
|---|---|---|---|---|
|
|
620
|
+
|children|string||||
|
|
621
|
+
|dataTest|string|`'dhis2-uicore-filelistplaceholder'`|||
|
|
622
|
+
|
|
623
|
+
### FileList
|
|
624
|
+
|
|
625
|
+
#### Usage
|
|
626
|
+
|
|
627
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
628
|
+
|
|
629
|
+
|
|
630
|
+
```js
|
|
631
|
+
import { FileList } from '@dhis2/ui'
|
|
632
|
+
```
|
|
633
|
+
|
|
634
|
+
|
|
635
|
+
#### Props
|
|
636
|
+
|
|
637
|
+
|Name|Type|Default|Required|Description|
|
|
638
|
+
|---|---|---|---|---|
|
|
639
|
+
|children|node||||
|
|
640
|
+
|className|string||||
|
|
641
|
+
|dataTest|string|`'dhis2-uicore-filelist'`|||
|
|
642
|
+
|
|
643
|
+
### HeaderBar
|
|
644
|
+
|
|
645
|
+
#### Usage
|
|
646
|
+
|
|
647
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
648
|
+
|
|
649
|
+
|
|
650
|
+
```js
|
|
651
|
+
import { HeaderBar } from '@dhis2/ui'
|
|
652
|
+
```
|
|
653
|
+
|
|
654
|
+
|
|
655
|
+
#### Props
|
|
656
|
+
|
|
657
|
+
|Name|Type|Default|Required|Description|
|
|
658
|
+
|---|---|---|---|---|
|
|
659
|
+
|appName|string||||
|
|
660
|
+
|className|string||||
|
|
661
|
+
|
|
662
|
+
### Logo
|
|
663
|
+
|
|
664
|
+
#### Usage
|
|
665
|
+
|
|
666
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
667
|
+
|
|
668
|
+
|
|
669
|
+
```js
|
|
670
|
+
import { Logo } from '@dhis2/ui'
|
|
671
|
+
```
|
|
672
|
+
|
|
673
|
+
|
|
674
|
+
|
|
675
|
+
### Help
|
|
676
|
+
|
|
677
|
+
#### Usage
|
|
678
|
+
|
|
679
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
680
|
+
|
|
681
|
+
|
|
682
|
+
```js
|
|
683
|
+
import { Help } from '@dhis2/ui'
|
|
684
|
+
```
|
|
685
|
+
|
|
686
|
+
|
|
687
|
+
#### Props
|
|
688
|
+
|
|
689
|
+
|Name|Type|Default|Required|Description|
|
|
690
|
+
|---|---|---|---|---|
|
|
691
|
+
|children|string||||
|
|
692
|
+
|className|string||||
|
|
693
|
+
|dataTest|string|`'dhis2-uicore-help'`|||
|
|
694
|
+
|error|custom||||
|
|
695
|
+
|valid|custom||||
|
|
696
|
+
|warning|custom||||
|
|
697
|
+
|
|
698
|
+
### Input
|
|
699
|
+
|
|
700
|
+
#### Usage
|
|
701
|
+
|
|
702
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
703
|
+
|
|
704
|
+
|
|
705
|
+
```js
|
|
706
|
+
import { Input } from '@dhis2/ui'
|
|
707
|
+
```
|
|
708
|
+
|
|
709
|
+
|
|
710
|
+
#### Props
|
|
711
|
+
|
|
712
|
+
|Name|Type|Default|Required|Description|
|
|
713
|
+
|---|---|---|---|---|
|
|
714
|
+
|autoComplete|string|||The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete)|
|
|
715
|
+
|className|string||||
|
|
716
|
+
|dataTest|string|`'dhis2-uicore-input'`|||
|
|
717
|
+
|dense|boolean|||Makes the input smaller|
|
|
718
|
+
|disabled|boolean|||Disables the input|
|
|
719
|
+
|error|custom|||Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props|
|
|
720
|
+
|initialFocus|boolean|||The input grabs initial focus on the page|
|
|
721
|
+
|loading|boolean|||Adds a loading indicator beside the input|
|
|
722
|
+
|max|string|||The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'`|
|
|
723
|
+
|min|string|||The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'`|
|
|
724
|
+
|name|string|||Name associated with the input. Passed to event handler callbacks in object|
|
|
725
|
+
|placeholder|string|||Placeholder text for the input|
|
|
726
|
+
|readOnly|boolean|||Makes the input read-only|
|
|
727
|
+
|role|string|||Sets a role attribute on the input|
|
|
728
|
+
|step|string|||The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`|
|
|
729
|
+
|tabIndex|string||||
|
|
730
|
+
|type|'text' │ 'number' │ 'password' │ 'email' │ 'url' │ 'tel' │ 'date' │ 'datetime' │ 'datetime-local' │ 'month' │ 'week' │ 'time' │ 'search'|`'text'`||The native input `type` attribute|
|
|
731
|
+
|valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props|
|
|
732
|
+
|value|string|||Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object|
|
|
733
|
+
|warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props|
|
|
734
|
+
|onBlur|function|||Called with signature `({ name: string, value: string }, event)`|
|
|
735
|
+
|onChange|function|||Called with signature `({ name: string, value: string }, event)`|
|
|
736
|
+
|onFocus|function|||Called with signature `({ name: string, value: string }, event)`|
|
|
737
|
+
|
|
738
|
+
### InputField
|
|
739
|
+
|
|
740
|
+
#### Usage
|
|
741
|
+
|
|
742
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
743
|
+
|
|
744
|
+
|
|
745
|
+
```js
|
|
746
|
+
import { InputField } from '@dhis2/ui'
|
|
747
|
+
```
|
|
748
|
+
|
|
749
|
+
|
|
750
|
+
#### Props
|
|
751
|
+
|
|
752
|
+
|Name|Type|Default|Required|Description|
|
|
753
|
+
|---|---|---|---|---|
|
|
754
|
+
|autoComplete|string|||The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete)|
|
|
755
|
+
|className|string||||
|
|
756
|
+
|dataTest|string|`'dhis2-uiwidgets-inputfield'`|||
|
|
757
|
+
|dense|boolean|||Makes the input smaller|
|
|
758
|
+
|disabled|boolean|||Disables the input|
|
|
759
|
+
|error|custom|||Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props|
|
|
760
|
+
|helpText|string|||Guiding text for how to use this input|
|
|
761
|
+
|initialFocus|boolean|||The input grabs initial focus on the page|
|
|
762
|
+
|inputWidth|string|||Defines the width of the input. Can be any valid CSS measurement|
|
|
763
|
+
|label|string|||Label text for the input|
|
|
764
|
+
|loading|boolean|||Adds a loading indicator beside the input|
|
|
765
|
+
|max|string|||The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'`|
|
|
766
|
+
|min|string|||The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'`|
|
|
767
|
+
|name|string|||Name associated with the input. Passed to event handler callbacks in object|
|
|
768
|
+
|placeholder|string|||Placeholder text for the input|
|
|
769
|
+
|readOnly|boolean|||Makes the input read-only|
|
|
770
|
+
|required|boolean|||Indicates this input is required|
|
|
771
|
+
|step|string|||The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`|
|
|
772
|
+
|tabIndex|string||||
|
|
773
|
+
|type|custom|||Type of input|
|
|
774
|
+
|valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props|
|
|
775
|
+
|validationText|string|||Text below input for validation feedback. Receives styles depending on validation status|
|
|
776
|
+
|value|string|||Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object|
|
|
777
|
+
|warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props|
|
|
778
|
+
|onBlur|function|||Called with signature `({ name: string, value: string }, event)`|
|
|
779
|
+
|onChange|function|||Called with signature `({ name: string, value: string }, event)`|
|
|
780
|
+
|onFocus|function|||Called with signature `({ name: string, value: string }, event)`|
|
|
781
|
+
|
|
782
|
+
### IntersectionDetector
|
|
783
|
+
|
|
784
|
+
#### Usage
|
|
785
|
+
|
|
786
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
787
|
+
|
|
788
|
+
|
|
789
|
+
```js
|
|
790
|
+
import { IntersectionDetector } from '@dhis2/ui'
|
|
791
|
+
```
|
|
792
|
+
|
|
793
|
+
|
|
794
|
+
#### Props
|
|
795
|
+
|
|
796
|
+
|Name|Type|Default|Required|Description|
|
|
797
|
+
|---|---|---|---|---|
|
|
798
|
+
|rootRef|{<br/> "current": "instanceOf(HTMLElement)"<br/>}||*|React ref on other component to detect intersections with|
|
|
799
|
+
|onChange|function||*|Called with signature `({ isIntersecting: bool })`|
|
|
800
|
+
|children|any||||
|
|
801
|
+
|className|string||||
|
|
802
|
+
|dataTest|string|`'dhis2-uicore-intersectiondetector'`|||
|
|
803
|
+
|threshold|number|`0`||The [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) value: a value from 0.0 to 1.0 that controls the point at which an intersecting component is considered 'intersected' or 'visible' and the onChange callback triggers|
|
|
804
|
+
|
|
805
|
+
### Label
|
|
806
|
+
|
|
807
|
+
#### Usage
|
|
808
|
+
|
|
809
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
810
|
+
|
|
811
|
+
|
|
812
|
+
```js
|
|
813
|
+
import { Label } from '@dhis2/ui'
|
|
814
|
+
```
|
|
815
|
+
|
|
816
|
+
|
|
817
|
+
#### Props
|
|
818
|
+
|
|
819
|
+
|Name|Type|Default|Required|Description|
|
|
820
|
+
|---|---|---|---|---|
|
|
821
|
+
|children|string||||
|
|
822
|
+
|className|string||||
|
|
823
|
+
|dataTest|string|`'dhis2-uicore-label'`|||
|
|
824
|
+
|disabled|boolean||||
|
|
825
|
+
|htmlFor|string||||
|
|
826
|
+
|required|boolean||||
|
|
827
|
+
|
|
828
|
+
### Layer
|
|
829
|
+
|
|
830
|
+
#### Usage
|
|
831
|
+
|
|
832
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
833
|
+
|
|
834
|
+
|
|
835
|
+
```js
|
|
836
|
+
import { Layer } from '@dhis2/ui'
|
|
837
|
+
```
|
|
838
|
+
|
|
839
|
+
|
|
840
|
+
#### Props
|
|
841
|
+
|
|
842
|
+
|Name|Type|Default|Required|Description|
|
|
843
|
+
|---|---|---|---|---|
|
|
844
|
+
|children|node||||
|
|
845
|
+
|className|string||||
|
|
846
|
+
|dataTest|string|`'dhis2-uicore-layer'`|||
|
|
847
|
+
|disablePortal|boolean|||Disable the Portal, useful for nesting layers|
|
|
848
|
+
|level|number │ string|`'auto'`||Z-index level|
|
|
849
|
+
|position|'absolute' │ 'fixed'|`'fixed'`|||
|
|
850
|
+
|translucent|boolean|||Adds a semi-transparent background|
|
|
851
|
+
|onBackdropClick|function|||Backdrop click handler|
|
|
852
|
+
|onClick|custom|||Click handler - DEPRECATED|
|
|
853
|
+
|
|
854
|
+
### Legend
|
|
855
|
+
|
|
856
|
+
#### Usage
|
|
857
|
+
|
|
858
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
859
|
+
|
|
860
|
+
|
|
861
|
+
```js
|
|
862
|
+
import { Legend } from '@dhis2/ui'
|
|
863
|
+
```
|
|
864
|
+
|
|
865
|
+
|
|
866
|
+
#### Props
|
|
867
|
+
|
|
868
|
+
|Name|Type|Default|Required|Description|
|
|
869
|
+
|---|---|---|---|---|
|
|
870
|
+
|children|node||||
|
|
871
|
+
|className|string||||
|
|
872
|
+
|dataTest|string|`'dhis2-uicore-legend'`|||
|
|
873
|
+
|required|boolean|||Indicates the associated field set is required|
|
|
874
|
+
|
|
875
|
+
### CircularLoader
|
|
876
|
+
|
|
877
|
+
#### Usage
|
|
878
|
+
|
|
879
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
880
|
+
|
|
881
|
+
|
|
882
|
+
```js
|
|
883
|
+
import { CircularLoader } from '@dhis2/ui'
|
|
884
|
+
```
|
|
885
|
+
|
|
886
|
+
|
|
887
|
+
#### Props
|
|
888
|
+
|
|
889
|
+
|Name|Type|Default|Required|Description|
|
|
890
|
+
|---|---|---|---|---|
|
|
891
|
+
|className|string||||
|
|
892
|
+
|dataTest|string|`'dhis2-uicore-circularloader'`|||
|
|
893
|
+
|extrasmall|custom||||
|
|
894
|
+
|invert|boolean||||
|
|
895
|
+
|large|custom||||
|
|
896
|
+
|small|custom||||
|
|
897
|
+
|
|
898
|
+
### LinearLoader
|
|
899
|
+
|
|
900
|
+
#### Usage
|
|
901
|
+
|
|
902
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
903
|
+
|
|
904
|
+
|
|
905
|
+
```js
|
|
906
|
+
import { LinearLoader } from '@dhis2/ui'
|
|
907
|
+
```
|
|
908
|
+
|
|
909
|
+
|
|
910
|
+
#### Props
|
|
911
|
+
|
|
912
|
+
|Name|Type|Default|Required|Description|
|
|
913
|
+
|---|---|---|---|---|
|
|
914
|
+
|amount|number||*|The progression in percent without the '%' sign|
|
|
915
|
+
|className|string||||
|
|
916
|
+
|dataTest|string|`'dhis2-uicore-linearloader'`|||
|
|
917
|
+
|invert|boolean|||Use inverted color scheme|
|
|
918
|
+
|margin|string|`spacers.dp12`||The margin around the loader, can be a full shorthand|
|
|
919
|
+
|width|string|`'300px'`||The width of the entire indicator|
|
|
920
|
+
|
|
921
|
+
### LogoIcon
|
|
922
|
+
|
|
923
|
+
#### Usage
|
|
924
|
+
|
|
925
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
926
|
+
|
|
927
|
+
|
|
928
|
+
```js
|
|
929
|
+
import { LogoIcon } from '@dhis2/ui'
|
|
930
|
+
```
|
|
931
|
+
|
|
932
|
+
|
|
933
|
+
#### Props
|
|
934
|
+
|
|
935
|
+
|Name|Type|Default|Required|Description|
|
|
936
|
+
|---|---|---|---|---|
|
|
937
|
+
|className|string||||
|
|
938
|
+
|dataTest|string|`'dhis2-uicore-logoicon'`|||
|
|
939
|
+
|
|
940
|
+
### LogoIconWhite
|
|
941
|
+
|
|
942
|
+
#### Usage
|
|
943
|
+
|
|
944
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
945
|
+
|
|
946
|
+
|
|
947
|
+
```js
|
|
948
|
+
import { LogoIconWhite } from '@dhis2/ui'
|
|
949
|
+
```
|
|
950
|
+
|
|
951
|
+
|
|
952
|
+
#### Props
|
|
953
|
+
|
|
954
|
+
|Name|Type|Default|Required|Description|
|
|
955
|
+
|---|---|---|---|---|
|
|
956
|
+
|className|string||||
|
|
957
|
+
|dataTest|string|`'dhis2-uicore-logoiconwhite'`|||
|
|
958
|
+
|
|
959
|
+
### Logo
|
|
960
|
+
|
|
961
|
+
#### Usage
|
|
962
|
+
|
|
963
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
964
|
+
|
|
965
|
+
|
|
966
|
+
```js
|
|
967
|
+
import { Logo } from '@dhis2/ui'
|
|
968
|
+
```
|
|
969
|
+
|
|
970
|
+
|
|
971
|
+
#### Props
|
|
972
|
+
|
|
973
|
+
|Name|Type|Default|Required|Description|
|
|
974
|
+
|---|---|---|---|---|
|
|
975
|
+
|className|string||||
|
|
976
|
+
|dataTest|string|`'dhis2-uicore-logo'`|||
|
|
977
|
+
|
|
978
|
+
### LogoWhite
|
|
979
|
+
|
|
980
|
+
#### Usage
|
|
981
|
+
|
|
982
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
983
|
+
|
|
984
|
+
|
|
985
|
+
```js
|
|
986
|
+
import { LogoWhite } from '@dhis2/ui'
|
|
987
|
+
```
|
|
988
|
+
|
|
989
|
+
|
|
990
|
+
#### Props
|
|
991
|
+
|
|
992
|
+
|Name|Type|Default|Required|Description|
|
|
993
|
+
|---|---|---|---|---|
|
|
994
|
+
|className|string||||
|
|
995
|
+
|dataTest|string|`'dhis2-uicore-logowhite'`|||
|
|
996
|
+
|
|
997
|
+
### FlyoutMenu
|
|
998
|
+
|
|
999
|
+
#### Usage
|
|
1000
|
+
|
|
1001
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1002
|
+
|
|
1003
|
+
|
|
1004
|
+
```js
|
|
1005
|
+
import { FlyoutMenu } from '@dhis2/ui'
|
|
1006
|
+
```
|
|
1007
|
+
|
|
1008
|
+
|
|
1009
|
+
#### Props
|
|
1010
|
+
|
|
1011
|
+
|Name|Type|Default|Required|Description|
|
|
1012
|
+
|---|---|---|---|---|
|
|
1013
|
+
|children|node|||Typically, but not limited to, `MenuItem` components|
|
|
1014
|
+
|className|string||||
|
|
1015
|
+
|dataTest|string|`'dhis2-uicore-menu'`|||
|
|
1016
|
+
|dense|boolean|||Menu uses smaller dimensions|
|
|
1017
|
+
|maxHeight|string|`'auto'`|||
|
|
1018
|
+
|maxWidth|string|`'380px'`|||
|
|
1019
|
+
|
|
1020
|
+
### Menu
|
|
1021
|
+
|
|
1022
|
+
#### Usage
|
|
1023
|
+
|
|
1024
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1025
|
+
|
|
1026
|
+
|
|
1027
|
+
```js
|
|
1028
|
+
import { Menu } from '@dhis2/ui'
|
|
1029
|
+
```
|
|
1030
|
+
|
|
1031
|
+
|
|
1032
|
+
#### Props
|
|
1033
|
+
|
|
1034
|
+
|Name|Type|Default|Required|Description|
|
|
1035
|
+
|---|---|---|---|---|
|
|
1036
|
+
|children|node|||Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader`|
|
|
1037
|
+
|className|string||||
|
|
1038
|
+
|dataTest|string|`'dhis2-uicore-menulist'`|||
|
|
1039
|
+
|dense|boolean|||Applies `dense` property to all child components unless already specified|
|
|
1040
|
+
|
|
1041
|
+
### MenuDivider
|
|
1042
|
+
|
|
1043
|
+
#### Usage
|
|
1044
|
+
|
|
1045
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1046
|
+
|
|
1047
|
+
|
|
1048
|
+
```js
|
|
1049
|
+
import { MenuDivider } from '@dhis2/ui'
|
|
1050
|
+
```
|
|
1051
|
+
|
|
1052
|
+
|
|
1053
|
+
#### Props
|
|
1054
|
+
|
|
1055
|
+
|Name|Type|Default|Required|Description|
|
|
1056
|
+
|---|---|---|---|---|
|
|
1057
|
+
|className|string||||
|
|
1058
|
+
|dataTest|string|`'dhis2-uicore-menudivider'`|||
|
|
1059
|
+
|dense|boolean||||
|
|
1060
|
+
|
|
1061
|
+
### MenuItem
|
|
1062
|
+
|
|
1063
|
+
#### Usage
|
|
1064
|
+
|
|
1065
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1066
|
+
|
|
1067
|
+
|
|
1068
|
+
```js
|
|
1069
|
+
import { MenuItem } from '@dhis2/ui'
|
|
1070
|
+
```
|
|
1071
|
+
|
|
1072
|
+
|
|
1073
|
+
#### Props
|
|
1074
|
+
|
|
1075
|
+
|Name|Type|Default|Required|Description|
|
|
1076
|
+
|---|---|---|---|---|
|
|
1077
|
+
|active|boolean||||
|
|
1078
|
+
|chevron|boolean||||
|
|
1079
|
+
|children|node|||Nested menu items can become submenus.<br/>See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo|
|
|
1080
|
+
|className|string||||
|
|
1081
|
+
|dataTest|string|`'dhis2-uicore-menuitem'`|||
|
|
1082
|
+
|dense|boolean||||
|
|
1083
|
+
|destructive|boolean||||
|
|
1084
|
+
|disabled|boolean||||
|
|
1085
|
+
|href|string|||For using menu item as a link|
|
|
1086
|
+
|icon|node|||An icon for the left side of the menu item|
|
|
1087
|
+
|label|node|||Text in the menu item|
|
|
1088
|
+
|showSubMenu|boolean|||When true, nested menu items are shown in a Popper|
|
|
1089
|
+
|target|string|||For using menu item as a link|
|
|
1090
|
+
|toggleSubMenu|function|||On click, this function is called (without args)|
|
|
1091
|
+
|value|string|||Value associated with item. Passed as an argument to onClick handler.|
|
|
1092
|
+
|onClick|function|||Click handler called with signature `({ value: string }, event)`|
|
|
1093
|
+
|
|
1094
|
+
### MenuSectionHeader
|
|
1095
|
+
|
|
1096
|
+
#### Usage
|
|
1097
|
+
|
|
1098
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1099
|
+
|
|
1100
|
+
|
|
1101
|
+
```js
|
|
1102
|
+
import { MenuSectionHeader } from '@dhis2/ui'
|
|
1103
|
+
```
|
|
1104
|
+
|
|
1105
|
+
|
|
1106
|
+
#### Props
|
|
1107
|
+
|
|
1108
|
+
|Name|Type|Default|Required|Description|
|
|
1109
|
+
|---|---|---|---|---|
|
|
1110
|
+
|className|string||||
|
|
1111
|
+
|dataTest|string|`'dhis2-uicore-menusectionheader'`|||
|
|
1112
|
+
|dense|boolean||||
|
|
1113
|
+
|hideDivider|boolean||||
|
|
1114
|
+
|label|node||||
|
|
1115
|
+
|
|
1116
|
+
### Modal
|
|
1117
|
+
|
|
1118
|
+
#### Usage
|
|
1119
|
+
|
|
1120
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1121
|
+
|
|
1122
|
+
|
|
1123
|
+
```js
|
|
1124
|
+
import { Modal } from '@dhis2/ui'
|
|
1125
|
+
```
|
|
1126
|
+
|
|
1127
|
+
|
|
1128
|
+
#### Props
|
|
1129
|
+
|
|
1130
|
+
|Name|Type|Default|Required|Description|
|
|
1131
|
+
|---|---|---|---|---|
|
|
1132
|
+
|children|node||||
|
|
1133
|
+
|className|string||||
|
|
1134
|
+
|dataTest|string|`'dhis2-uicore-modal'`|||
|
|
1135
|
+
|fluid|boolean||||
|
|
1136
|
+
|hide|boolean||||
|
|
1137
|
+
|large|custom||||
|
|
1138
|
+
|position|custom|`'top'`|||
|
|
1139
|
+
|small|custom||||
|
|
1140
|
+
|onClose|function|||Callback used when the Modal closes|
|
|
1141
|
+
|
|
1142
|
+
### ModalActions
|
|
1143
|
+
|
|
1144
|
+
#### Usage
|
|
1145
|
+
|
|
1146
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1147
|
+
|
|
1148
|
+
|
|
1149
|
+
```js
|
|
1150
|
+
import { ModalActions } from '@dhis2/ui'
|
|
1151
|
+
```
|
|
1152
|
+
|
|
1153
|
+
|
|
1154
|
+
#### Props
|
|
1155
|
+
|
|
1156
|
+
|Name|Type|Default|Required|Description|
|
|
1157
|
+
|---|---|---|---|---|
|
|
1158
|
+
|children|node||||
|
|
1159
|
+
|dataTest|string|`'dhis2-uicore-modalactions'`|||
|
|
1160
|
+
|
|
1161
|
+
### ModalContent
|
|
1162
|
+
|
|
1163
|
+
#### Usage
|
|
1164
|
+
|
|
1165
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1166
|
+
|
|
1167
|
+
|
|
1168
|
+
```js
|
|
1169
|
+
import { ModalContent } from '@dhis2/ui'
|
|
1170
|
+
```
|
|
1171
|
+
|
|
1172
|
+
|
|
1173
|
+
#### Props
|
|
1174
|
+
|
|
1175
|
+
|Name|Type|Default|Required|Description|
|
|
1176
|
+
|---|---|---|---|---|
|
|
1177
|
+
|children|node||||
|
|
1178
|
+
|className|string||||
|
|
1179
|
+
|dataTest|string|`'dhis2-uicore-modalcontent'`|||
|
|
1180
|
+
|
|
1181
|
+
### ModalTitle
|
|
1182
|
+
|
|
1183
|
+
#### Usage
|
|
1184
|
+
|
|
1185
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1186
|
+
|
|
1187
|
+
|
|
1188
|
+
```js
|
|
1189
|
+
import { ModalTitle } from '@dhis2/ui'
|
|
1190
|
+
```
|
|
1191
|
+
|
|
1192
|
+
|
|
1193
|
+
#### Props
|
|
1194
|
+
|
|
1195
|
+
|Name|Type|Default|Required|Description|
|
|
1196
|
+
|---|---|---|---|---|
|
|
1197
|
+
|children|string||||
|
|
1198
|
+
|dataTest|string|`'dhis2-uicore-modaltitle'`|||
|
|
1199
|
+
|
|
1200
|
+
### Node
|
|
1201
|
+
|
|
1202
|
+
#### Usage
|
|
1203
|
+
|
|
1204
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1205
|
+
|
|
1206
|
+
|
|
1207
|
+
```js
|
|
1208
|
+
import { Node } from '@dhis2/ui'
|
|
1209
|
+
```
|
|
1210
|
+
|
|
1211
|
+
|
|
1212
|
+
#### Props
|
|
1213
|
+
|
|
1214
|
+
|Name|Type|Default|Required|Description|
|
|
1215
|
+
|---|---|---|---|---|
|
|
1216
|
+
|children|node|||Content below this level of the hierarchy; children are revealed when this leaf is 'open'|
|
|
1217
|
+
|className|string||||
|
|
1218
|
+
|component|element|||Content/label for this leaf, for example a checkbox|
|
|
1219
|
+
|dataTest|string|`'dhis2-uicore-node'`|||
|
|
1220
|
+
|icon|node|||A custom icon to use instead of a toggle arrow|
|
|
1221
|
+
|open|boolean||||
|
|
1222
|
+
|onClose|function||||
|
|
1223
|
+
|onOpen|function||||
|
|
1224
|
+
|
|
1225
|
+
### NoticeBox
|
|
1226
|
+
|
|
1227
|
+
#### Usage
|
|
1228
|
+
|
|
1229
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1230
|
+
|
|
1231
|
+
|
|
1232
|
+
```js
|
|
1233
|
+
import { NoticeBox } from '@dhis2/ui'
|
|
1234
|
+
```
|
|
1235
|
+
|
|
1236
|
+
|
|
1237
|
+
#### Props
|
|
1238
|
+
|
|
1239
|
+
|Name|Type|Default|Required|Description|
|
|
1240
|
+
|---|---|---|---|---|
|
|
1241
|
+
|children|node||||
|
|
1242
|
+
|className|string||||
|
|
1243
|
+
|dataTest|string|`'dhis2-uicore-noticebox'`|||
|
|
1244
|
+
|error|custom|||Applies 'error' message styles. Mutually exclusive with the `warning` prop|
|
|
1245
|
+
|title|string||||
|
|
1246
|
+
|warning|custom|||Applies 'warning' message styles. Mutually exclusive with the `error` prop|
|
|
1247
|
+
|
|
1248
|
+
### OrganisationUnitTree
|
|
1249
|
+
|
|
1250
|
+
#### Usage
|
|
1251
|
+
|
|
1252
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1253
|
+
|
|
1254
|
+
|
|
1255
|
+
```js
|
|
1256
|
+
import { OrganisationUnitTree } from '@dhis2/ui'
|
|
1257
|
+
```
|
|
1258
|
+
|
|
1259
|
+
|
|
1260
|
+
#### Props
|
|
1261
|
+
|
|
1262
|
+
|Name|Type|Default|Required|Description|
|
|
1263
|
+
|---|---|---|---|---|
|
|
1264
|
+
|roots|string │ arrayOf(string)||*|Root org unit ID(s)|
|
|
1265
|
+
|onChange|function||*|Will be called with the following object:<br/>`{ id: string, displayName: string, path: string, checked: boolean, selected: string[] }`|
|
|
1266
|
+
|autoExpandLoadingError|boolean|||When set, the error when loading children fails will be shown automatically|
|
|
1267
|
+
|dataTest|string|`'dhis2-uiwidgets-orgunittree'`|||
|
|
1268
|
+
|disableSelection|boolean|||When set to true, no unit can be selected|
|
|
1269
|
+
|expanded|custom||||
|
|
1270
|
+
|filter|arrayOf(custom)|`[]`||All organisation units with a path that includes the provided paths will be shown.<br/>All others will not be rendered. When not provided, all org units will be shown.|
|
|
1271
|
+
|forceReload|boolean|||When true, everything will be reloaded. In order to load it again after reloading, `forceReload` has to be set to `false` and then to `true` again|
|
|
1272
|
+
|handleCollapse|custom||||
|
|
1273
|
+
|handleExpand|custom||||
|
|
1274
|
+
|highlighted|arrayOf(custom)|`[]`||All units provided to "highlighted" as path will be visually<br/>highlighted.<br/>Note:<br/>The d2-ui component used two props for this:<br/>* searchResults<br/>* highlightSearchResults|
|
|
1275
|
+
|initiallyExpanded|arrayOf(custom)|`[]`||An array of OU paths that will be expanded automatically<br/>as soon as they are encountered.<br/>The path of an OU is the UIDs of the OU<br/>and all its parent OUs separated by slashes (/)<br/>Note: This replaces "openFirstLevel" as that's redundant|
|
|
1276
|
+
|isUserDataViewFallback|boolean|||When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units|
|
|
1277
|
+
|renderNodeLabel|function|`defaultRenderNodeLabel`||Renders the actual node component for each leaf, can be used to<br/>customize the node. The default function just returns the node's<br/>displayName<br/><br/>Shape of the object passed to the callback:<br/>```<br/>{<br/> label: string,<br/> node: {<br/> displayName: string,<br/> id: string,<br/> // Only provided once `loading` is false<br/> path?: string,<br/> // Only provided once `loading` is false<br/> children?: Array.<{<br/> id: string,<br/> path: string,<br/> displayName: string<br/> }><br/> },<br/> loading: boolean,<br/> error: string,<br/> open: boolean,<br/> selected: string[],<br/> singleSelection: boolean,<br/> disableSelection: boolean,<br/>}<br/>```|
|
|
1278
|
+
|selected|arrayOf(custom)|`[]`||An array of paths of selected OUs. The path of an OU is the UIDs of the OU and all its parent OUs separated by slashes (`/`)|
|
|
1279
|
+
|singleSelection|boolean|||When set, no checkboxes will be displayed and only the first selected path in `selected` will be highlighted|
|
|
1280
|
+
|suppressAlphabeticalSorting|boolean|||Turns off alphabetical sorting of units|
|
|
1281
|
+
|onChildrenLoaded|function|||Called with the children's data that was loaded|
|
|
1282
|
+
|onCollapse|function|||Called with `{ path: string }` with the path of the parent of the level closed|
|
|
1283
|
+
|onExpand|function|||Called with `{ path: string }` with the path of the parent of the level opened|
|
|
1284
|
+
|
|
1285
|
+
### Label
|
|
1286
|
+
|
|
1287
|
+
#### Usage
|
|
1288
|
+
|
|
1289
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1290
|
+
|
|
1291
|
+
|
|
1292
|
+
```js
|
|
1293
|
+
import { Label } from '@dhis2/ui'
|
|
1294
|
+
```
|
|
1295
|
+
|
|
1296
|
+
|
|
1297
|
+
#### Props
|
|
1298
|
+
|
|
1299
|
+
|Name|Type|Default|Required|Description|
|
|
1300
|
+
|---|---|---|---|---|
|
|
1301
|
+
|children|any||*||
|
|
1302
|
+
|dataTest|string||*||
|
|
1303
|
+
|fullPath|string||*||
|
|
1304
|
+
|hasChildren|boolean||*||
|
|
1305
|
+
|loading|boolean||*||
|
|
1306
|
+
|node|{<br/> "displayName": "string",<br/> "id": "string",<br/> "children": "number",<br/> "path": "string"<br/>}||*||
|
|
1307
|
+
|open|boolean||*||
|
|
1308
|
+
|rootId|string||*||
|
|
1309
|
+
|onChange|function||*||
|
|
1310
|
+
|onToggleOpen|function||*||
|
|
1311
|
+
|checked|boolean||||
|
|
1312
|
+
|disableSelection|boolean||||
|
|
1313
|
+
|hasSelectedDescendants|boolean||||
|
|
1314
|
+
|highlighted|boolean||||
|
|
1315
|
+
|selected|arrayOf(custom)||||
|
|
1316
|
+
|singleSelection|boolean||||
|
|
1317
|
+
|
|
1318
|
+
### Pagination
|
|
1319
|
+
|
|
1320
|
+
#### Usage
|
|
1321
|
+
|
|
1322
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1323
|
+
|
|
1324
|
+
|
|
1325
|
+
```js
|
|
1326
|
+
import { Pagination } from '@dhis2/ui'
|
|
1327
|
+
```
|
|
1328
|
+
|
|
1329
|
+
|
|
1330
|
+
#### Props
|
|
1331
|
+
|
|
1332
|
+
|Name|Type|Default|Required|Description|
|
|
1333
|
+
|---|---|---|---|---|
|
|
1334
|
+
|page|number||*||
|
|
1335
|
+
|pageSize|number||*||
|
|
1336
|
+
|className|string||||
|
|
1337
|
+
|dataTest|string|`'dhis2-uiwidgets-pagination'`|||
|
|
1338
|
+
|disabled|boolean||||
|
|
1339
|
+
|hidePageSelect|boolean||||
|
|
1340
|
+
|hidePageSizeSelect|boolean||||
|
|
1341
|
+
|hidePageSummary|boolean||||
|
|
1342
|
+
|isLastPage|boolean||||
|
|
1343
|
+
|nextPageText|string │ function|`() => i18n.t('Next')`|||
|
|
1344
|
+
|pageCount|number||||
|
|
1345
|
+
|pageLength|custom||||
|
|
1346
|
+
|pageSelectText|string │ function|`() => i18n.t('Page')`|||
|
|
1347
|
+
|pageSizeSelectText|string │ function|`() => i18n.t('Items per page')`|||
|
|
1348
|
+
|pageSizes|arrayOf(string)|`['5', '10', '20', '30', '40', '50', '75', '100']`|||
|
|
1349
|
+
|pageSummaryText|string │ function|`getDefaultPageSummaryText`|||
|
|
1350
|
+
|previousPageText|string │ function|`() => i18n.t('Previous')`|||
|
|
1351
|
+
|total|number||||
|
|
1352
|
+
|onPageChange|function||||
|
|
1353
|
+
|onPageSizeChange|function||||
|
|
1354
|
+
|
|
1355
|
+
### Popover
|
|
1356
|
+
|
|
1357
|
+
#### Usage
|
|
1358
|
+
|
|
1359
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1360
|
+
|
|
1361
|
+
|
|
1362
|
+
```js
|
|
1363
|
+
import { Popover } from '@dhis2/ui'
|
|
1364
|
+
```
|
|
1365
|
+
|
|
1366
|
+
|
|
1367
|
+
#### Props
|
|
1368
|
+
|
|
1369
|
+
|Name|Type|Default|Required|Description|
|
|
1370
|
+
|---|---|---|---|---|
|
|
1371
|
+
|children|node||*||
|
|
1372
|
+
|arrow|boolean|`true`||Show or hide the arrow|
|
|
1373
|
+
|className|string||||
|
|
1374
|
+
|dataTest|string|`'dhis2-uicore-popover'`|||
|
|
1375
|
+
|elevation|string|`elevations.e200`||Box-shadow to create appearance of elevation. Use `elevations` constants from the UI library.|
|
|
1376
|
+
|maxWidth|number|`360`|||
|
|
1377
|
+
|observePopperResize|boolean||||
|
|
1378
|
+
|observeReferenceResize|boolean||||
|
|
1379
|
+
|placement|custom|`'top'`|||
|
|
1380
|
+
|reference|custom|||A React ref that refers to the element the Popover should position against|
|
|
1381
|
+
|onClickOutside|function||||
|
|
1382
|
+
|
|
1383
|
+
### Popper
|
|
1384
|
+
|
|
1385
|
+
#### Usage
|
|
1386
|
+
|
|
1387
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1388
|
+
|
|
1389
|
+
|
|
1390
|
+
```js
|
|
1391
|
+
import { Popper } from '@dhis2/ui'
|
|
1392
|
+
```
|
|
1393
|
+
|
|
1394
|
+
|
|
1395
|
+
#### Props
|
|
1396
|
+
|
|
1397
|
+
|Name|Type|Default|Required|Description|
|
|
1398
|
+
|---|---|---|---|---|
|
|
1399
|
+
|children|node||*|Content inside the Popper|
|
|
1400
|
+
|className|string||||
|
|
1401
|
+
|dataTest|string|`'dhis2-uicore-popper'`|||
|
|
1402
|
+
|modifiers|arrayOf({<br/> "name": "string",<br/> "options": "object"<br/>})|`[]`||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
|
|
1403
|
+
|observePopperResize|boolean|||Makes the Popper update position when the **Popper content** changes size|
|
|
1404
|
+
|observeReferenceResize|boolean|||Makes the Popper update position when the **reference element** changes size|
|
|
1405
|
+
|placement|custom|`'auto'`||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
|
|
1406
|
+
|reference|custom|||A React ref, DOM node, or [virtual element](https://popper.js.org/docs/v2/virtual-elements/) for the popper to position itself against|
|
|
1407
|
+
|strategy|'absolute' │ 'fixed'|||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
|
|
1408
|
+
|onFirstUpdate|function|||A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)|
|
|
1409
|
+
|
|
1410
|
+
### Radio
|
|
1411
|
+
|
|
1412
|
+
#### Usage
|
|
1413
|
+
|
|
1414
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1415
|
+
|
|
1416
|
+
|
|
1417
|
+
```js
|
|
1418
|
+
import { Radio } from '@dhis2/ui'
|
|
1419
|
+
```
|
|
1420
|
+
|
|
1421
|
+
|
|
1422
|
+
#### Props
|
|
1423
|
+
|
|
1424
|
+
|Name|Type|Default|Required|Description|
|
|
1425
|
+
|---|---|---|---|---|
|
|
1426
|
+
|checked|boolean||||
|
|
1427
|
+
|className|string||||
|
|
1428
|
+
|dataTest|string|`'dhis2-uicore-radio'`|||
|
|
1429
|
+
|dense|boolean||||
|
|
1430
|
+
|disabled|boolean||||
|
|
1431
|
+
|error|custom|||Adds 'error' styling for feedback. Mutually exclusive with `valid` and `warning` props|
|
|
1432
|
+
|initialFocus|boolean||||
|
|
1433
|
+
|label|node||||
|
|
1434
|
+
|name|string|||Name associated with this element. Passed in object to event handler functions|
|
|
1435
|
+
|tabIndex|string||||
|
|
1436
|
+
|valid|custom|||Adds 'valid' styling for feedback. Mutually exclusive with `error` and `warning` props|
|
|
1437
|
+
|value|string|||Value associated with this element. Passed in object to event handler functions|
|
|
1438
|
+
|warning|custom|||Adds 'warning' styling for feedback. Mutually exclusive with `valid` and `error` props|
|
|
1439
|
+
|onBlur|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
|
|
1440
|
+
|onChange|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
|
|
1441
|
+
|onFocus|function|||Called with the signature `({ name: string, value: string, checked: bool }, event)`|
|
|
1442
|
+
|
|
1443
|
+
### Required
|
|
1444
|
+
|
|
1445
|
+
#### Usage
|
|
1446
|
+
|
|
1447
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1448
|
+
|
|
1449
|
+
|
|
1450
|
+
```js
|
|
1451
|
+
import { Required } from '@dhis2/ui'
|
|
1452
|
+
```
|
|
1453
|
+
|
|
1454
|
+
|
|
1455
|
+
#### Props
|
|
1456
|
+
|
|
1457
|
+
|Name|Type|Default|Required|Description|
|
|
1458
|
+
|---|---|---|---|---|
|
|
1459
|
+
|dataTest|string||*||
|
|
1460
|
+
|
|
1461
|
+
### SegmentedControl
|
|
1462
|
+
|
|
1463
|
+
#### Usage
|
|
1464
|
+
|
|
1465
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1466
|
+
|
|
1467
|
+
|
|
1468
|
+
```js
|
|
1469
|
+
import { SegmentedControl } from '@dhis2/ui'
|
|
1470
|
+
```
|
|
1471
|
+
|
|
1472
|
+
|
|
1473
|
+
#### Props
|
|
1474
|
+
|
|
1475
|
+
|Name|Type|Default|Required|Description|
|
|
1476
|
+
|---|---|---|---|---|
|
|
1477
|
+
|options|arrayOf({<br/> "label": "string",<br/> "value": "string",<br/> "disabled": "boolean"<br/>})||*|Options to populate the segmented control|
|
|
1478
|
+
|selected|string||*|An option to select; should match the `value` property of the option to be selected|
|
|
1479
|
+
|onChange|function||*|Called with the signature `({ value: string }, event)`|
|
|
1480
|
+
|
|
1481
|
+
### Input
|
|
1482
|
+
|
|
1483
|
+
#### Usage
|
|
1484
|
+
|
|
1485
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1486
|
+
|
|
1487
|
+
|
|
1488
|
+
```js
|
|
1489
|
+
import { Input } from '@dhis2/ui'
|
|
1490
|
+
```
|
|
1491
|
+
|
|
1492
|
+
|
|
1493
|
+
#### Props
|
|
1494
|
+
|
|
1495
|
+
|Name|Type|Default|Required|Description|
|
|
1496
|
+
|---|---|---|---|---|
|
|
1497
|
+
|dataTest|string||*||
|
|
1498
|
+
|className|string||||
|
|
1499
|
+
|clearText|custom||||
|
|
1500
|
+
|clearable|boolean||||
|
|
1501
|
+
|disabled|boolean||||
|
|
1502
|
+
|inputMaxHeight|string|`'100px'`|||
|
|
1503
|
+
|options|node||||
|
|
1504
|
+
|placeholder|string||||
|
|
1505
|
+
|prefix|string||||
|
|
1506
|
+
|selected|arrayOf(string)||||
|
|
1507
|
+
|onChange|function||||
|
|
1508
|
+
|
|
1509
|
+
### Menu
|
|
1510
|
+
|
|
1511
|
+
#### Usage
|
|
1512
|
+
|
|
1513
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1514
|
+
|
|
1515
|
+
|
|
1516
|
+
```js
|
|
1517
|
+
import { Menu } from '@dhis2/ui'
|
|
1518
|
+
```
|
|
1519
|
+
|
|
1520
|
+
|
|
1521
|
+
#### Props
|
|
1522
|
+
|
|
1523
|
+
|Name|Type|Default|Required|Description|
|
|
1524
|
+
|---|---|---|---|---|
|
|
1525
|
+
|dataTest|string||*||
|
|
1526
|
+
|empty|node|`''`|||
|
|
1527
|
+
|options|node||||
|
|
1528
|
+
|selected|arrayOf(string)||||
|
|
1529
|
+
|onChange|function||||
|
|
1530
|
+
|
|
1531
|
+
### MultiSelect
|
|
1532
|
+
|
|
1533
|
+
#### Usage
|
|
1534
|
+
|
|
1535
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1536
|
+
|
|
1537
|
+
|
|
1538
|
+
```js
|
|
1539
|
+
import { MultiSelect } from '@dhis2/ui'
|
|
1540
|
+
```
|
|
1541
|
+
|
|
1542
|
+
|
|
1543
|
+
#### Props
|
|
1544
|
+
|
|
1545
|
+
|Name|Type|Default|Required|Description|
|
|
1546
|
+
|---|---|---|---|---|
|
|
1547
|
+
|children|node||||
|
|
1548
|
+
|className|string||||
|
|
1549
|
+
|clearText|custom|||Required if `clearable` prop is `true`|
|
|
1550
|
+
|clearable|boolean|||Adds a 'clear' option to the menu|
|
|
1551
|
+
|dataTest|string|`'dhis2-uicore-multiselect'`|||
|
|
1552
|
+
|dense|boolean||||
|
|
1553
|
+
|disabled|boolean||||
|
|
1554
|
+
|empty|node||||
|
|
1555
|
+
|error|custom||||
|
|
1556
|
+
|filterPlaceholder|string||||
|
|
1557
|
+
|filterable|boolean|||Adds a 'filter' field to the menu|
|
|
1558
|
+
|initialFocus|boolean||||
|
|
1559
|
+
|inputMaxHeight|string||||
|
|
1560
|
+
|loading|boolean||||
|
|
1561
|
+
|loadingText|string||||
|
|
1562
|
+
|maxHeight|string||||
|
|
1563
|
+
|noMatchText|custom|||Required if `filterable` prop is `true`|
|
|
1564
|
+
|placeholder|string||||
|
|
1565
|
+
|prefix|string||||
|
|
1566
|
+
|selected|arrayOf(string)|`[]`|||
|
|
1567
|
+
|tabIndex|string||||
|
|
1568
|
+
|valid|custom||||
|
|
1569
|
+
|warning|custom||||
|
|
1570
|
+
|onBlur|function||||
|
|
1571
|
+
|onChange|function||||
|
|
1572
|
+
|onFocus|function||||
|
|
1573
|
+
|
|
1574
|
+
### MultiSelectField
|
|
1575
|
+
|
|
1576
|
+
#### Usage
|
|
1577
|
+
|
|
1578
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1579
|
+
|
|
1580
|
+
|
|
1581
|
+
```js
|
|
1582
|
+
import { MultiSelectField } from '@dhis2/ui'
|
|
1583
|
+
```
|
|
1584
|
+
|
|
1585
|
+
|
|
1586
|
+
#### Props
|
|
1587
|
+
|
|
1588
|
+
|Name|Type|Default|Required|Description|
|
|
1589
|
+
|---|---|---|---|---|
|
|
1590
|
+
|children|node|||Should be `MultiSelectOption` components|
|
|
1591
|
+
|className|string||||
|
|
1592
|
+
|clearText|string │ function|`() => i18n.t('Clear')`||Label for the button that clears selections|
|
|
1593
|
+
|clearable|boolean|||Adds a button to the MultiSelect that clears selections when pressed|
|
|
1594
|
+
|dataTest|string|`'dhis2-uiwidgets-multiselectfield'`|||
|
|
1595
|
+
|dense|boolean|||Makes the MultiSelect smaller|
|
|
1596
|
+
|disabled|boolean|||Disables the MultiSelect|
|
|
1597
|
+
|empty|node │ function|`() => i18n.t('No data found')`||Text to display when there are no options|
|
|
1598
|
+
|error|custom|||Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props|
|
|
1599
|
+
|filterPlaceholder|node │ function|`() => i18n.t('Type to filter options')`||Placeholder text to show in the filter field when it is empty|
|
|
1600
|
+
|filterable|boolean|||Adds a field to filter options|
|
|
1601
|
+
|helpText|string|||Useful guiding text to display below the MultiSelect|
|
|
1602
|
+
|initialFocus|boolean|||Grabs initial focus on the page|
|
|
1603
|
+
|inputMaxHeight|string|||Constrains the height of the input|
|
|
1604
|
+
|inputWidth|string|||Sets the width of the input. Can be any valid CSS measurement|
|
|
1605
|
+
|label|string|||Text for the label above the MultiSelect|
|
|
1606
|
+
|loading|boolean|||Applies a loading appearance to the dropdown options|
|
|
1607
|
+
|loadingText|string │ function|`() => i18n.t('Loading options')`||Text to display when `loading` is true|
|
|
1608
|
+
|maxHeight|string|||Constrains height of the MultiSelect|
|
|
1609
|
+
|noMatchText|string │ function|`() => i18n.t('No options found')`||Text to display when there are no filter results|
|
|
1610
|
+
|placeholder|string|||Placeholder text when the MultiSelect is empty|
|
|
1611
|
+
|prefix|string|||Leading text to prefix selections|
|
|
1612
|
+
|required|boolean|||Indicates that a selection is required|
|
|
1613
|
+
|selected|arrayOf(string)|`[]`||Selected items in the MultiSelect (each string should refer to the item's `value` attribute)|
|
|
1614
|
+
|tabIndex|string||||
|
|
1615
|
+
|valid|custom|||Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props|
|
|
1616
|
+
|validationText|string|||Text to provide form validation feedback. Receives styles according to validation status|
|
|
1617
|
+
|warning|custom|||Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props|
|
|
1618
|
+
|onBlur|function|||Called with signature `({ selected: [String] }, event)`|
|
|
1619
|
+
|onChange|function|||Called with signature `({ selected: [String] }, event)`|
|
|
1620
|
+
|onFocus|function|||Called with signature `({ selected: [String] }, event)`|
|
|
1621
|
+
|
|
1622
|
+
### MultiSelectOption
|
|
1623
|
+
|
|
1624
|
+
#### Usage
|
|
1625
|
+
|
|
1626
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1627
|
+
|
|
1628
|
+
|
|
1629
|
+
```js
|
|
1630
|
+
import { MultiSelectOption } from '@dhis2/ui'
|
|
1631
|
+
```
|
|
1632
|
+
|
|
1633
|
+
|
|
1634
|
+
#### Props
|
|
1635
|
+
|
|
1636
|
+
|Name|Type|Default|Required|Description|
|
|
1637
|
+
|---|---|---|---|---|
|
|
1638
|
+
|label|string||*||
|
|
1639
|
+
|value|string||*||
|
|
1640
|
+
|active|boolean||||
|
|
1641
|
+
|className|string||||
|
|
1642
|
+
|dataTest|string|`'dhis2-uicore-multiselectoption'`|||
|
|
1643
|
+
|disabled|boolean||||
|
|
1644
|
+
|onClick|function||||
|
|
1645
|
+
|
|
1646
|
+
### Input
|
|
1647
|
+
|
|
1648
|
+
#### Usage
|
|
1649
|
+
|
|
1650
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1651
|
+
|
|
1652
|
+
|
|
1653
|
+
```js
|
|
1654
|
+
import { Input } from '@dhis2/ui'
|
|
1655
|
+
```
|
|
1656
|
+
|
|
1657
|
+
|
|
1658
|
+
#### Props
|
|
1659
|
+
|
|
1660
|
+
|Name|Type|Default|Required|Description|
|
|
1661
|
+
|---|---|---|---|---|
|
|
1662
|
+
|dataTest|string||*||
|
|
1663
|
+
|className|string||||
|
|
1664
|
+
|clearText|custom||||
|
|
1665
|
+
|clearable|boolean||||
|
|
1666
|
+
|disabled|boolean||||
|
|
1667
|
+
|inputMaxHeight|string|`'100px'`|||
|
|
1668
|
+
|options|node||||
|
|
1669
|
+
|placeholder|string||||
|
|
1670
|
+
|prefix|string||||
|
|
1671
|
+
|selected|string||||
|
|
1672
|
+
|onChange|function||||
|
|
1673
|
+
|
|
1674
|
+
### Menu
|
|
1675
|
+
|
|
1676
|
+
#### Usage
|
|
1677
|
+
|
|
1678
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1679
|
+
|
|
1680
|
+
|
|
1681
|
+
```js
|
|
1682
|
+
import { Menu } from '@dhis2/ui'
|
|
1683
|
+
```
|
|
1684
|
+
|
|
1685
|
+
|
|
1686
|
+
#### Props
|
|
1687
|
+
|
|
1688
|
+
|Name|Type|Default|Required|Description|
|
|
1689
|
+
|---|---|---|---|---|
|
|
1690
|
+
|dataTest|string||*||
|
|
1691
|
+
|empty|node|`''`|||
|
|
1692
|
+
|handleClose|function||||
|
|
1693
|
+
|handleFocusInput|function||||
|
|
1694
|
+
|options|node||||
|
|
1695
|
+
|selected|string||||
|
|
1696
|
+
|onChange|function||||
|
|
1697
|
+
|
|
1698
|
+
### SingleSelect
|
|
1699
|
+
|
|
1700
|
+
#### Usage
|
|
1701
|
+
|
|
1702
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1703
|
+
|
|
1704
|
+
|
|
1705
|
+
```js
|
|
1706
|
+
import { SingleSelect } from '@dhis2/ui'
|
|
1707
|
+
```
|
|
1708
|
+
|
|
1709
|
+
|
|
1710
|
+
#### Props
|
|
1711
|
+
|
|
1712
|
+
|Name|Type|Default|Required|Description|
|
|
1713
|
+
|---|---|---|---|---|
|
|
1714
|
+
|children|node||||
|
|
1715
|
+
|className|string||||
|
|
1716
|
+
|clearText|custom|||Text on button that clears selection. Required if `clearable` prop is true|
|
|
1717
|
+
|clearable|boolean|||Adds a button to clear selection|
|
|
1718
|
+
|dataTest|string|`'dhis2-uicore-singleselect'`|||
|
|
1719
|
+
|dense|boolean||||
|
|
1720
|
+
|disabled|boolean||||
|
|
1721
|
+
|empty|node|||Text or component to display when there are no options|
|
|
1722
|
+
|error|custom|||Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props|
|
|
1723
|
+
|filterPlaceholder|string||||
|
|
1724
|
+
|filterable|boolean|||Adds a filter field to add text to filter options|
|
|
1725
|
+
|initialFocus|boolean||||
|
|
1726
|
+
|inputMaxHeight|string||||
|
|
1727
|
+
|loading|boolean||||
|
|
1728
|
+
|loadingText|string||||
|
|
1729
|
+
|maxHeight|string||||
|
|
1730
|
+
|noMatchText|custom|||Text to show when filter returns no results. Required if `filterable` prop is true|
|
|
1731
|
+
|placeholder|string||||
|
|
1732
|
+
|prefix|string||||
|
|
1733
|
+
|selected|string|`''`|||
|
|
1734
|
+
|tabIndex|string||||
|
|
1735
|
+
|valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `error` props|
|
|
1736
|
+
|warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props|
|
|
1737
|
+
|onBlur|function||||
|
|
1738
|
+
|onChange|function||||
|
|
1739
|
+
|onFocus|function||||
|
|
1740
|
+
|
|
1741
|
+
### SingleSelectField
|
|
1742
|
+
|
|
1743
|
+
#### Usage
|
|
1744
|
+
|
|
1745
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1746
|
+
|
|
1747
|
+
|
|
1748
|
+
```js
|
|
1749
|
+
import { SingleSelectField } from '@dhis2/ui'
|
|
1750
|
+
```
|
|
1751
|
+
|
|
1752
|
+
|
|
1753
|
+
#### Props
|
|
1754
|
+
|
|
1755
|
+
|Name|Type|Default|Required|Description|
|
|
1756
|
+
|---|---|---|---|---|
|
|
1757
|
+
|children|node|||Should be `SingleSelectOption` components|
|
|
1758
|
+
|className|string||||
|
|
1759
|
+
|clearText|string │ function|`() => i18n.t('Clear')`||Label for the button that clears selections|
|
|
1760
|
+
|clearable|boolean|||Adds a button to the SingleSelect that clears selections when pressed|
|
|
1761
|
+
|dataTest|string|`'dhis2-uiwidgets-singleselectfield'`|||
|
|
1762
|
+
|dense|boolean|||Makes the SingleSelect smaller|
|
|
1763
|
+
|disabled|boolean|||Disables the SingleSelect|
|
|
1764
|
+
|empty|node │ function|`() => i18n.t('No data found')`||Text to display when there are no options|
|
|
1765
|
+
|error|custom|||Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props|
|
|
1766
|
+
|filterPlaceholder|node │ function|`() => i18n.t('Type to filter options')`||Placeholder text to show in the filter field when it is empty|
|
|
1767
|
+
|filterable|boolean|||Adds a field to filter options|
|
|
1768
|
+
|helpText|string|||Useful guiding text to display below the SingleSelect|
|
|
1769
|
+
|initialFocus|boolean|||Grabs initial focus on the page|
|
|
1770
|
+
|inputMaxHeight|string|||Constrains the height of the input|
|
|
1771
|
+
|inputWidth|string|||Sets the width of the input. Can be any valid CSS measurement|
|
|
1772
|
+
|label|string|||Text for the label above the SingleSelect|
|
|
1773
|
+
|loading|boolean|||Applies a loading appearance to the dropdown options|
|
|
1774
|
+
|loadingText|string │ function|`() => i18n.t('Loading options')`||Text to display when `loading` is true|
|
|
1775
|
+
|maxHeight|string|||Constrains height of the SingleSelect|
|
|
1776
|
+
|noMatchText|string │ function|`() => i18n.t('No options found')`||Text to display when there are no filter results|
|
|
1777
|
+
|placeholder|string|||Placeholder text when the SingleSelect is empty|
|
|
1778
|
+
|prefix|string|||Leading text to prefix selections|
|
|
1779
|
+
|required|boolean|||Indicates that a selection is required|
|
|
1780
|
+
|selected|string|`''`||Selected item in the SingleSelect (the string should refer to the item's `value` attribute)|
|
|
1781
|
+
|tabIndex|string||||
|
|
1782
|
+
|valid|custom|||Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props|
|
|
1783
|
+
|validationText|string|||Text to provide form validation feedback. Receives styles according to validation status|
|
|
1784
|
+
|warning|custom|||Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props|
|
|
1785
|
+
|onBlur|function|||Called with signature `({ selected: string }, event)`|
|
|
1786
|
+
|onChange|function|||Called with signature `({ selected: string }, event)`|
|
|
1787
|
+
|onFocus|function|||Called with signature `({ selected: string }, event)`|
|
|
1788
|
+
|
|
1789
|
+
### SingleSelectOption
|
|
1790
|
+
|
|
1791
|
+
#### Usage
|
|
1792
|
+
|
|
1793
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1794
|
+
|
|
1795
|
+
|
|
1796
|
+
```js
|
|
1797
|
+
import { SingleSelectOption } from '@dhis2/ui'
|
|
1798
|
+
```
|
|
1799
|
+
|
|
1800
|
+
|
|
1801
|
+
#### Props
|
|
1802
|
+
|
|
1803
|
+
|Name|Type|Default|Required|Description|
|
|
1804
|
+
|---|---|---|---|---|
|
|
1805
|
+
|label|string||*||
|
|
1806
|
+
|value|string||*||
|
|
1807
|
+
|active|boolean||||
|
|
1808
|
+
|className|string||||
|
|
1809
|
+
|dataTest|string|`'dhis2-uicore-singleselectoption'`|||
|
|
1810
|
+
|disabled|boolean||||
|
|
1811
|
+
|onClick|function||||
|
|
1812
|
+
|
|
1813
|
+
### SelectorBar
|
|
1814
|
+
|
|
1815
|
+
#### Usage
|
|
1816
|
+
|
|
1817
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1818
|
+
|
|
1819
|
+
|
|
1820
|
+
```js
|
|
1821
|
+
import { SelectorBar } from '@dhis2/ui'
|
|
1822
|
+
```
|
|
1823
|
+
|
|
1824
|
+
|
|
1825
|
+
#### Props
|
|
1826
|
+
|
|
1827
|
+
|Name|Type|Default|Required|Description|
|
|
1828
|
+
|---|---|---|---|---|
|
|
1829
|
+
|children|any||*||
|
|
1830
|
+
|additionalContent|any||||
|
|
1831
|
+
|className|string||||
|
|
1832
|
+
|dataTest|string|`'dhis2-ui-selectorbar'`|||
|
|
1833
|
+
|disableClearSelections|boolean||||
|
|
1834
|
+
|onClearSelectionClick|function||||
|
|
1835
|
+
|
|
1836
|
+
### SelectorBarItem
|
|
1837
|
+
|
|
1838
|
+
#### Usage
|
|
1839
|
+
|
|
1840
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1841
|
+
|
|
1842
|
+
|
|
1843
|
+
```js
|
|
1844
|
+
import { SelectorBarItem } from '@dhis2/ui'
|
|
1845
|
+
```
|
|
1846
|
+
|
|
1847
|
+
|
|
1848
|
+
#### Props
|
|
1849
|
+
|
|
1850
|
+
|Name|Type|Default|Required|Description|
|
|
1851
|
+
|---|---|---|---|---|
|
|
1852
|
+
|children|any||*||
|
|
1853
|
+
|label|string||*||
|
|
1854
|
+
|noValueMessage|string||*||
|
|
1855
|
+
|open|boolean||*||
|
|
1856
|
+
|setOpen|function||*||
|
|
1857
|
+
|className|string||||
|
|
1858
|
+
|dataTest|string|`'dhis2-ui-selectorbaritem'`|||
|
|
1859
|
+
|disabled|boolean||||
|
|
1860
|
+
|value|string||||
|
|
1861
|
+
|
|
1862
|
+
### SharingDialog
|
|
1863
|
+
|
|
1864
|
+
#### Usage
|
|
1865
|
+
|
|
1866
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1867
|
+
|
|
1868
|
+
|
|
1869
|
+
```js
|
|
1870
|
+
import { SharingDialog } from '@dhis2/ui'
|
|
1871
|
+
```
|
|
1872
|
+
|
|
1873
|
+
|
|
1874
|
+
#### Props
|
|
1875
|
+
|
|
1876
|
+
|Name|Type|Default|Required|Description|
|
|
1877
|
+
|---|---|---|---|---|
|
|
1878
|
+
|id|string||*|The id of the object to share|
|
|
1879
|
+
|type|import {
|
|
1880
|
+
ACCESS_NONE,
|
|
1881
|
+
ACCESS_VIEW_ONLY,
|
|
1882
|
+
ACCESS_VIEW_AND_EDIT,
|
|
1883
|
+
VISUALIZATION,
|
|
1884
|
+
DASHBOARD,
|
|
1885
|
+
EVENT_VISUALIZATION,
|
|
1886
|
+
INTERPRETATION,
|
|
1887
|
+
} from './constants.js' │ import {
|
|
1888
|
+
ACCESS_NONE,
|
|
1889
|
+
ACCESS_VIEW_ONLY,
|
|
1890
|
+
ACCESS_VIEW_AND_EDIT,
|
|
1891
|
+
VISUALIZATION,
|
|
1892
|
+
DASHBOARD,
|
|
1893
|
+
EVENT_VISUALIZATION,
|
|
1894
|
+
INTERPRETATION,
|
|
1895
|
+
} from './constants.js' │ import {
|
|
1896
|
+
ACCESS_NONE,
|
|
1897
|
+
ACCESS_VIEW_ONLY,
|
|
1898
|
+
ACCESS_VIEW_AND_EDIT,
|
|
1899
|
+
VISUALIZATION,
|
|
1900
|
+
DASHBOARD,
|
|
1901
|
+
EVENT_VISUALIZATION,
|
|
1902
|
+
INTERPRETATION,
|
|
1903
|
+
} from './constants.js' │ import {
|
|
1904
|
+
ACCESS_NONE,
|
|
1905
|
+
ACCESS_VIEW_ONLY,
|
|
1906
|
+
ACCESS_VIEW_AND_EDIT,
|
|
1907
|
+
VISUALIZATION,
|
|
1908
|
+
DASHBOARD,
|
|
1909
|
+
EVENT_VISUALIZATION,
|
|
1910
|
+
INTERPRETATION,
|
|
1911
|
+
} from './constants.js'||*|The type of object to share|
|
|
1912
|
+
|initialSharingSettings|{<br/> "allowPublic": "boolean",<br/> "groups": "objectOf",<br/> "name": "string",<br/> "public": "import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js' │ import {\n ACCESS_NONE,\n ACCESS_VIEW_ONLY,\n ACCESS_VIEW_AND_EDIT,\n VISUALIZATION,\n DASHBOARD,\n EVENT_VISUALIZATION,\n INTERPRETATION,\n} from './constants.js'",<br/> "users": "objectOf"<br/>}|`{
|
|
1913
|
+
name: '',
|
|
1914
|
+
allowPublic: true,
|
|
1915
|
+
public: ACCESS_NONE,
|
|
1916
|
+
groups: {},
|
|
1917
|
+
users: {},
|
|
1918
|
+
}`||Used to seed the component with data to show whilst loading|
|
|
1919
|
+
|onClose|function|`() => {}`|||
|
|
1920
|
+
|onError|function|`() => {}`|||
|
|
1921
|
+
|onSave|function|`() => {}`|||
|
|
1922
|
+
|
|
1923
|
+
### Modal
|
|
1924
|
+
|
|
1925
|
+
#### Usage
|
|
1926
|
+
|
|
1927
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1928
|
+
|
|
1929
|
+
|
|
1930
|
+
```js
|
|
1931
|
+
import { Modal } from '@dhis2/ui'
|
|
1932
|
+
```
|
|
1933
|
+
|
|
1934
|
+
|
|
1935
|
+
#### Props
|
|
1936
|
+
|
|
1937
|
+
|Name|Type|Default|Required|Description|
|
|
1938
|
+
|---|---|---|---|---|
|
|
1939
|
+
|children|node||*||
|
|
1940
|
+
|name|string||||
|
|
1941
|
+
|onClose|function||||
|
|
1942
|
+
|
|
1943
|
+
### Switch
|
|
1944
|
+
|
|
1945
|
+
#### Usage
|
|
1946
|
+
|
|
1947
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1948
|
+
|
|
1949
|
+
|
|
1950
|
+
```js
|
|
1951
|
+
import { Switch } from '@dhis2/ui'
|
|
1952
|
+
```
|
|
1953
|
+
|
|
1954
|
+
|
|
1955
|
+
#### Props
|
|
1956
|
+
|
|
1957
|
+
|Name|Type|Default|Required|Description|
|
|
1958
|
+
|---|---|---|---|---|
|
|
1959
|
+
|ariaLabel|string|||Sets an aria-label attribute on the input|
|
|
1960
|
+
|checked|boolean|`false`|||
|
|
1961
|
+
|className|string||||
|
|
1962
|
+
|dataTest|string|`'dhis2-uicore-switch'`|||
|
|
1963
|
+
|dense|boolean|||Makes the switch smaller for information-dense layouts|
|
|
1964
|
+
|disabled|boolean|||Disables the switch|
|
|
1965
|
+
|error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` prop types|
|
|
1966
|
+
|initialFocus|boolean|||Grab initial focus on the page|
|
|
1967
|
+
|label|node|||Label for the switch. Can be a string or an element, for example an image|
|
|
1968
|
+
|name|string|||Name associated with the switch. Passed to event handlers in object|
|
|
1969
|
+
|role|string|`'switch'`||Sets a role attribute on the input|
|
|
1970
|
+
|tabIndex|string||||
|
|
1971
|
+
|valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `error` and `warning` prop types|
|
|
1972
|
+
|value|string|||Value associated with the switch. Passed to event handlers in object|
|
|
1973
|
+
|warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` prop types|
|
|
1974
|
+
|onBlur|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
|
|
1975
|
+
|onChange|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
|
|
1976
|
+
|onFocus|function|||Called with signature `({ name: string, value: string, checked: bool }, event)`|
|
|
1977
|
+
|
|
1978
|
+
### SwitchField
|
|
1979
|
+
|
|
1980
|
+
#### Usage
|
|
1981
|
+
|
|
1982
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
1983
|
+
|
|
1984
|
+
|
|
1985
|
+
```js
|
|
1986
|
+
import { SwitchField } from '@dhis2/ui'
|
|
1987
|
+
```
|
|
1988
|
+
|
|
1989
|
+
|
|
1990
|
+
#### Props
|
|
1991
|
+
|
|
1992
|
+
|Name|Type|Default|Required|Description|
|
|
1993
|
+
|---|---|---|---|---|
|
|
1994
|
+
|checked|boolean||||
|
|
1995
|
+
|className|string||||
|
|
1996
|
+
|dataTest|string|`'dhis2-uiwidgets-switchfield'`|||
|
|
1997
|
+
|dense|boolean|||Smaller dimensions for information-dense layouts|
|
|
1998
|
+
|disabled|boolean|||Disables the switch|
|
|
1999
|
+
|error|custom|||Applies 'error' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `valid` props|
|
|
2000
|
+
|helpText|string|||Useful instructions for the user|
|
|
2001
|
+
|initialFocus|boolean||||
|
|
2002
|
+
|label|node|||Labels the switch|
|
|
2003
|
+
|name|string|||Name associate with the switch. Passed in object as argument to event handlers|
|
|
2004
|
+
|required|boolean|||Adds an asterisk to indicate this field is required|
|
|
2005
|
+
|tabIndex|string||||
|
|
2006
|
+
|valid|custom|||Applies 'valid' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `error` props|
|
|
2007
|
+
|validationText|string|||Adds text below the switch to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses|
|
|
2008
|
+
|value|string|||Value associated with the switch. Passed in object as argument to event handlers|
|
|
2009
|
+
|warning|custom|||Applies 'warning' styling to switch and validation text for feedback. Mutually exclusive with `valid` and `error` props|
|
|
2010
|
+
|onBlur|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
|
|
2011
|
+
|onChange|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
|
|
2012
|
+
|onFocus|function|||Called with signature ({ name: string, value: string, checked: bool }, event)|
|
|
2013
|
+
|
|
2014
|
+
### Tab
|
|
2015
|
+
|
|
2016
|
+
#### Usage
|
|
2017
|
+
|
|
2018
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2019
|
+
|
|
2020
|
+
|
|
2021
|
+
```js
|
|
2022
|
+
import { Tab } from '@dhis2/ui'
|
|
2023
|
+
```
|
|
2024
|
+
|
|
2025
|
+
|
|
2026
|
+
#### Props
|
|
2027
|
+
|
|
2028
|
+
|Name|Type|Default|Required|Description|
|
|
2029
|
+
|---|---|---|---|---|
|
|
2030
|
+
|children|node||||
|
|
2031
|
+
|className|string||||
|
|
2032
|
+
|dataTest|string|`'dhis2-uicore-tab'`|||
|
|
2033
|
+
|disabled|boolean||||
|
|
2034
|
+
|icon|element||||
|
|
2035
|
+
|selected|boolean|||Indicates this tab is selected|
|
|
2036
|
+
|onClick|function|||Called with the signature `({}, event)`|
|
|
2037
|
+
|
|
2038
|
+
### TabBar
|
|
2039
|
+
|
|
2040
|
+
#### Usage
|
|
2041
|
+
|
|
2042
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2043
|
+
|
|
2044
|
+
|
|
2045
|
+
```js
|
|
2046
|
+
import { TabBar } from '@dhis2/ui'
|
|
2047
|
+
```
|
|
2048
|
+
|
|
2049
|
+
|
|
2050
|
+
#### Props
|
|
2051
|
+
|
|
2052
|
+
|Name|Type|Default|Required|Description|
|
|
2053
|
+
|---|---|---|---|---|
|
|
2054
|
+
|children|node||||
|
|
2055
|
+
|className|string||||
|
|
2056
|
+
|dataTest|string|`'dhis2-uicore-tabbar'`|||
|
|
2057
|
+
|fixed|boolean|||Fixed tabs fill the width of their container. If false (i.e. fluid), tabs take up an amount of space defined by the tab name. Fluid tabs should be used most of the time.|
|
|
2058
|
+
|scrollable|boolean|||Enables horizontal scrolling for many tabs that don't fit the width of the container|
|
|
2059
|
+
|
|
2060
|
+
### DataTableCell
|
|
2061
|
+
|
|
2062
|
+
#### Usage
|
|
2063
|
+
|
|
2064
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2065
|
+
|
|
2066
|
+
|
|
2067
|
+
```js
|
|
2068
|
+
import { DataTableCell } from '@dhis2/ui'
|
|
2069
|
+
```
|
|
2070
|
+
|
|
2071
|
+
|
|
2072
|
+
#### Props
|
|
2073
|
+
|
|
2074
|
+
|Name|Type|Default|Required|Description|
|
|
2075
|
+
|---|---|---|---|---|
|
|
2076
|
+
|active|boolean|||To toggle border color, for example for editing|
|
|
2077
|
+
|align|'left' │ 'center' │ 'right'|`'left'`|||
|
|
2078
|
+
|backgroundColor|string|||Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states|
|
|
2079
|
+
|bordered|boolean||||
|
|
2080
|
+
|children|node||||
|
|
2081
|
+
|className|string||||
|
|
2082
|
+
|colSpan|string||||
|
|
2083
|
+
|dataTest|string|`'dhis2-uicore-datatablecell'`|||
|
|
2084
|
+
|error|custom|||Mutually exclusive with muted and valid|
|
|
2085
|
+
|fixed|boolean|||When true a TableHeaderCell with sticky positioning will be rendered|
|
|
2086
|
+
|large|boolean||||
|
|
2087
|
+
|left|custom|`'auto'`||Required when fixed|
|
|
2088
|
+
|muted|custom|||Mutually exclusive with error and valid|
|
|
2089
|
+
|role|string||||
|
|
2090
|
+
|rowSpan|string||||
|
|
2091
|
+
|scope|string||||
|
|
2092
|
+
|staticStyle|boolean|||Surpress hover and active event styles|
|
|
2093
|
+
|tag|'td' │ 'th'|||Render a TableDataCell or TableHeaderCell respectively|
|
|
2094
|
+
|valid|custom|||Mutually exclusive with error and muted|
|
|
2095
|
+
|width|custom|`'auto'`||Required when fixed|
|
|
2096
|
+
|onClick|function||||
|
|
2097
|
+
|
|
2098
|
+
### DataTable
|
|
2099
|
+
|
|
2100
|
+
#### Usage
|
|
2101
|
+
|
|
2102
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2103
|
+
|
|
2104
|
+
|
|
2105
|
+
```js
|
|
2106
|
+
import { DataTable } from '@dhis2/ui'
|
|
2107
|
+
```
|
|
2108
|
+
|
|
2109
|
+
|
|
2110
|
+
#### Props
|
|
2111
|
+
|
|
2112
|
+
|Name|Type|Default|Required|Description|
|
|
2113
|
+
|---|---|---|---|---|
|
|
2114
|
+
|children|node|||Should be `<DataTableHead>`, `<DataTableBody>`, and `<DataTableFoot>` components|
|
|
2115
|
+
|className|string||||
|
|
2116
|
+
|dataTest|string|`'dhis2-uicore-datatable'`|||
|
|
2117
|
+
|layout|'auto' │ 'fixed' │ 'initial' │ 'inherit'|`'auto'`||Sets the `datatable-layout` property. Switching to `fixed` can prevent style<br/>issues when dealing with a datatable with multiple frozen columns or when dealing<br/>with filter elements in the datatable headers.|
|
|
2118
|
+
|role|string||||
|
|
2119
|
+
|scrollHeight|string|||Sets max-height of scrollbox|
|
|
2120
|
+
|scrollWidth|string|||Sets max-width of scrollbox|
|
|
2121
|
+
|width|string|`'100%'`||Sets the `width` property. Providing an explicit width can prevent style<br/>issues when dealing with horizontally scrolling datatables with a fixed layout.|
|
|
2122
|
+
|
|
2123
|
+
### StackedTableBody
|
|
2124
|
+
|
|
2125
|
+
#### Usage
|
|
2126
|
+
|
|
2127
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2128
|
+
|
|
2129
|
+
|
|
2130
|
+
```js
|
|
2131
|
+
import { StackedTableBody } from '@dhis2/ui'
|
|
2132
|
+
```
|
|
2133
|
+
|
|
2134
|
+
|
|
2135
|
+
#### Props
|
|
2136
|
+
|
|
2137
|
+
|Name|Type|Default|Required|Description|
|
|
2138
|
+
|---|---|---|---|---|
|
|
2139
|
+
|children|node||||
|
|
2140
|
+
|className|string||||
|
|
2141
|
+
|dataTest|string|`'dhis2-uicore-stackedtablebody'`|||
|
|
2142
|
+
|
|
2143
|
+
### StackedTableCellHead
|
|
2144
|
+
|
|
2145
|
+
#### Usage
|
|
2146
|
+
|
|
2147
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2148
|
+
|
|
2149
|
+
|
|
2150
|
+
```js
|
|
2151
|
+
import { StackedTableCellHead } from '@dhis2/ui'
|
|
2152
|
+
```
|
|
2153
|
+
|
|
2154
|
+
|
|
2155
|
+
#### Props
|
|
2156
|
+
|
|
2157
|
+
|Name|Type|Default|Required|Description|
|
|
2158
|
+
|---|---|---|---|---|
|
|
2159
|
+
|children|string|`''`|||
|
|
2160
|
+
|className|string||||
|
|
2161
|
+
|colSpan|string||||
|
|
2162
|
+
|dataTest|string|`'dhis2-uicore-stackedtablecellhead'`|||
|
|
2163
|
+
|rowSpan|string||||
|
|
2164
|
+
|
|
2165
|
+
### StackedTableCell
|
|
2166
|
+
|
|
2167
|
+
#### Usage
|
|
2168
|
+
|
|
2169
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2170
|
+
|
|
2171
|
+
|
|
2172
|
+
```js
|
|
2173
|
+
import { StackedTableCell } from '@dhis2/ui'
|
|
2174
|
+
```
|
|
2175
|
+
|
|
2176
|
+
|
|
2177
|
+
#### Props
|
|
2178
|
+
|
|
2179
|
+
|Name|Type|Default|Required|Description|
|
|
2180
|
+
|---|---|---|---|---|
|
|
2181
|
+
|children|node||||
|
|
2182
|
+
|className|string||||
|
|
2183
|
+
|colSpan|string||||
|
|
2184
|
+
|column|number||||
|
|
2185
|
+
|dataTest|string|`'dhis2-uicore-stackedtablecell'`|||
|
|
2186
|
+
|headerLabels|arrayOf(string)|`[]`|||
|
|
2187
|
+
|hideTitle|boolean||||
|
|
2188
|
+
|rowSpan|string||||
|
|
2189
|
+
|title|string||||
|
|
2190
|
+
|
|
2191
|
+
### StackedTableFoot
|
|
2192
|
+
|
|
2193
|
+
#### Usage
|
|
2194
|
+
|
|
2195
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2196
|
+
|
|
2197
|
+
|
|
2198
|
+
```js
|
|
2199
|
+
import { StackedTableFoot } from '@dhis2/ui'
|
|
2200
|
+
```
|
|
2201
|
+
|
|
2202
|
+
|
|
2203
|
+
#### Props
|
|
2204
|
+
|
|
2205
|
+
|Name|Type|Default|Required|Description|
|
|
2206
|
+
|---|---|---|---|---|
|
|
2207
|
+
|children|node||||
|
|
2208
|
+
|className|string||||
|
|
2209
|
+
|dataTest|string|`'dhis2-uicore-stackedtablefoot'`|||
|
|
2210
|
+
|
|
2211
|
+
### StackedTableHead
|
|
2212
|
+
|
|
2213
|
+
#### Usage
|
|
2214
|
+
|
|
2215
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2216
|
+
|
|
2217
|
+
|
|
2218
|
+
```js
|
|
2219
|
+
import { StackedTableHead } from '@dhis2/ui'
|
|
2220
|
+
```
|
|
2221
|
+
|
|
2222
|
+
|
|
2223
|
+
#### Props
|
|
2224
|
+
|
|
2225
|
+
|Name|Type|Default|Required|Description|
|
|
2226
|
+
|---|---|---|---|---|
|
|
2227
|
+
|children|node||||
|
|
2228
|
+
|className|string||||
|
|
2229
|
+
|dataTest|string|`'dhis2-uicore-stackedtablehead'`|||
|
|
2230
|
+
|
|
2231
|
+
### StackedTableRowHead
|
|
2232
|
+
|
|
2233
|
+
#### Usage
|
|
2234
|
+
|
|
2235
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2236
|
+
|
|
2237
|
+
|
|
2238
|
+
```js
|
|
2239
|
+
import { StackedTableRowHead } from '@dhis2/ui'
|
|
2240
|
+
```
|
|
2241
|
+
|
|
2242
|
+
|
|
2243
|
+
#### Props
|
|
2244
|
+
|
|
2245
|
+
|Name|Type|Default|Required|Description|
|
|
2246
|
+
|---|---|---|---|---|
|
|
2247
|
+
|children|node||||
|
|
2248
|
+
|className|string||||
|
|
2249
|
+
|dataTest|string|`'dhis2-uicore-stackedtablerowhead'`|||
|
|
2250
|
+
|
|
2251
|
+
### StackedTableRow
|
|
2252
|
+
|
|
2253
|
+
#### Usage
|
|
2254
|
+
|
|
2255
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2256
|
+
|
|
2257
|
+
|
|
2258
|
+
```js
|
|
2259
|
+
import { StackedTableRow } from '@dhis2/ui'
|
|
2260
|
+
```
|
|
2261
|
+
|
|
2262
|
+
|
|
2263
|
+
#### Props
|
|
2264
|
+
|
|
2265
|
+
|Name|Type|Default|Required|Description|
|
|
2266
|
+
|---|---|---|---|---|
|
|
2267
|
+
|children|node||||
|
|
2268
|
+
|className|string||||
|
|
2269
|
+
|dataTest|string|`'dhis2-uicore-stackedtablerow'`|||
|
|
2270
|
+
|
|
2271
|
+
### StackedTable
|
|
2272
|
+
|
|
2273
|
+
#### Usage
|
|
2274
|
+
|
|
2275
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2276
|
+
|
|
2277
|
+
|
|
2278
|
+
```js
|
|
2279
|
+
import { StackedTable } from '@dhis2/ui'
|
|
2280
|
+
```
|
|
2281
|
+
|
|
2282
|
+
|
|
2283
|
+
#### Props
|
|
2284
|
+
|
|
2285
|
+
|Name|Type|Default|Required|Description|
|
|
2286
|
+
|---|---|---|---|---|
|
|
2287
|
+
|children|node||||
|
|
2288
|
+
|className|string||||
|
|
2289
|
+
|dataTest|string|`'dhis2-uicore-stackedtable'`|||
|
|
2290
|
+
|headerLabels|arrayOf(string)|||Labels for columns. Use an empty string for a column without a header.|
|
|
2291
|
+
|
|
2292
|
+
### Table
|
|
2293
|
+
|
|
2294
|
+
#### Usage
|
|
2295
|
+
|
|
2296
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2297
|
+
|
|
2298
|
+
|
|
2299
|
+
```js
|
|
2300
|
+
import { Table } from '@dhis2/ui'
|
|
2301
|
+
```
|
|
2302
|
+
|
|
2303
|
+
|
|
2304
|
+
#### Props
|
|
2305
|
+
|
|
2306
|
+
|Name|Type|Default|Required|Description|
|
|
2307
|
+
|---|---|---|---|---|
|
|
2308
|
+
|children|node||*||
|
|
2309
|
+
|className|string||||
|
|
2310
|
+
|dataTest|string||||
|
|
2311
|
+
|
|
2312
|
+
### TableBody
|
|
2313
|
+
|
|
2314
|
+
#### Usage
|
|
2315
|
+
|
|
2316
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2317
|
+
|
|
2318
|
+
|
|
2319
|
+
```js
|
|
2320
|
+
import { TableBody } from '@dhis2/ui'
|
|
2321
|
+
```
|
|
2322
|
+
|
|
2323
|
+
|
|
2324
|
+
#### Props
|
|
2325
|
+
|
|
2326
|
+
|Name|Type|Default|Required|Description|
|
|
2327
|
+
|---|---|---|---|---|
|
|
2328
|
+
|children|node|||Should be `<TableRow>` components|
|
|
2329
|
+
|className|string||||
|
|
2330
|
+
|dataTest|string|`'dhis2-uicore-tablebody'`|||
|
|
2331
|
+
|role|string||||
|
|
2332
|
+
|
|
2333
|
+
### TableCellHead
|
|
2334
|
+
|
|
2335
|
+
#### Usage
|
|
2336
|
+
|
|
2337
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2338
|
+
|
|
2339
|
+
|
|
2340
|
+
```js
|
|
2341
|
+
import { TableCellHead } from '@dhis2/ui'
|
|
2342
|
+
```
|
|
2343
|
+
|
|
2344
|
+
|
|
2345
|
+
#### Props
|
|
2346
|
+
|
|
2347
|
+
|Name|Type|Default|Required|Description|
|
|
2348
|
+
|---|---|---|---|---|
|
|
2349
|
+
|children|node||||
|
|
2350
|
+
|className|string||||
|
|
2351
|
+
|colSpan|string||||
|
|
2352
|
+
|dataTest|string|`'dhis2-uicore-tablecellhead'`|||
|
|
2353
|
+
|dense|boolean|||Uses less padding and height for information-dense layouts|
|
|
2354
|
+
|role|string||||
|
|
2355
|
+
|rowSpan|string||||
|
|
2356
|
+
|
|
2357
|
+
### TableCell
|
|
2358
|
+
|
|
2359
|
+
#### Usage
|
|
2360
|
+
|
|
2361
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2362
|
+
|
|
2363
|
+
|
|
2364
|
+
```js
|
|
2365
|
+
import { TableCell } from '@dhis2/ui'
|
|
2366
|
+
```
|
|
2367
|
+
|
|
2368
|
+
|
|
2369
|
+
#### Props
|
|
2370
|
+
|
|
2371
|
+
|Name|Type|Default|Required|Description|
|
|
2372
|
+
|---|---|---|---|---|
|
|
2373
|
+
|children|node||||
|
|
2374
|
+
|className|string||||
|
|
2375
|
+
|colSpan|string||||
|
|
2376
|
+
|dataTest|string|`'dhis2-uicore-tablecell'`|||
|
|
2377
|
+
|dense|boolean|||Usees less padding and height for information-dense layouts|
|
|
2378
|
+
|role|string||||
|
|
2379
|
+
|rowSpan|string||||
|
|
2380
|
+
|
|
2381
|
+
### TableFoot
|
|
2382
|
+
|
|
2383
|
+
#### Usage
|
|
2384
|
+
|
|
2385
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2386
|
+
|
|
2387
|
+
|
|
2388
|
+
```js
|
|
2389
|
+
import { TableFoot } from '@dhis2/ui'
|
|
2390
|
+
```
|
|
2391
|
+
|
|
2392
|
+
|
|
2393
|
+
#### Props
|
|
2394
|
+
|
|
2395
|
+
|Name|Type|Default|Required|Description|
|
|
2396
|
+
|---|---|---|---|---|
|
|
2397
|
+
|children|node|||Should be `<TableRow>` components|
|
|
2398
|
+
|className|string||||
|
|
2399
|
+
|dataTest|string|`'dhis2-uicore-tablefoot'`|||
|
|
2400
|
+
|role|string||||
|
|
2401
|
+
|
|
2402
|
+
### TableHead
|
|
2403
|
+
|
|
2404
|
+
#### Usage
|
|
2405
|
+
|
|
2406
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2407
|
+
|
|
2408
|
+
|
|
2409
|
+
```js
|
|
2410
|
+
import { TableHead } from '@dhis2/ui'
|
|
2411
|
+
```
|
|
2412
|
+
|
|
2413
|
+
|
|
2414
|
+
#### Props
|
|
2415
|
+
|
|
2416
|
+
|Name|Type|Default|Required|Description|
|
|
2417
|
+
|---|---|---|---|---|
|
|
2418
|
+
|children|node|||Should be `<TableRowHead>` components|
|
|
2419
|
+
|className|string||||
|
|
2420
|
+
|dataTest|string|`'dhis2-uicore-tablehead'`|||
|
|
2421
|
+
|role|string||||
|
|
2422
|
+
|
|
2423
|
+
### TableRowHead
|
|
2424
|
+
|
|
2425
|
+
#### Usage
|
|
2426
|
+
|
|
2427
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2428
|
+
|
|
2429
|
+
|
|
2430
|
+
```js
|
|
2431
|
+
import { TableRowHead } from '@dhis2/ui'
|
|
2432
|
+
```
|
|
2433
|
+
|
|
2434
|
+
|
|
2435
|
+
#### Props
|
|
2436
|
+
|
|
2437
|
+
|Name|Type|Default|Required|Description|
|
|
2438
|
+
|---|---|---|---|---|
|
|
2439
|
+
|children|node|||Should be `<TableCellHead>` components|
|
|
2440
|
+
|className|string||||
|
|
2441
|
+
|dataTest|string|`'dhis2-uicore-tablerowhead'`|||
|
|
2442
|
+
|role|string||||
|
|
2443
|
+
|suppressZebraStriping|boolean|||Disables the default row striping for this row|
|
|
2444
|
+
|
|
2445
|
+
### TableRow
|
|
2446
|
+
|
|
2447
|
+
#### Usage
|
|
2448
|
+
|
|
2449
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2450
|
+
|
|
2451
|
+
|
|
2452
|
+
```js
|
|
2453
|
+
import { TableRow } from '@dhis2/ui'
|
|
2454
|
+
```
|
|
2455
|
+
|
|
2456
|
+
|
|
2457
|
+
#### Props
|
|
2458
|
+
|
|
2459
|
+
|Name|Type|Default|Required|Description|
|
|
2460
|
+
|---|---|---|---|---|
|
|
2461
|
+
|children|node|||Should be `<TableCell>` or `<TableCellHead>` components|
|
|
2462
|
+
|className|string||||
|
|
2463
|
+
|dataTest|string|`'dhis2-uicore-tablerow'`|||
|
|
2464
|
+
|role|string||||
|
|
2465
|
+
|suppressZebraStriping|boolean|||Disables the default row striping for this row|
|
|
2466
|
+
|
|
2467
|
+
### Table
|
|
2468
|
+
|
|
2469
|
+
#### Usage
|
|
2470
|
+
|
|
2471
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2472
|
+
|
|
2473
|
+
|
|
2474
|
+
```js
|
|
2475
|
+
import { Table } from '@dhis2/ui'
|
|
2476
|
+
```
|
|
2477
|
+
|
|
2478
|
+
|
|
2479
|
+
#### Props
|
|
2480
|
+
|
|
2481
|
+
|Name|Type|Default|Required|Description|
|
|
2482
|
+
|---|---|---|---|---|
|
|
2483
|
+
|children|node|||Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components|
|
|
2484
|
+
|className|string||||
|
|
2485
|
+
|dataTest|string|`'dhis2-uicore-table'`|||
|
|
2486
|
+
|role|string||||
|
|
2487
|
+
|suppressZebraStriping|boolean|||Remove the default striping on alternating rows|
|
|
2488
|
+
|
|
2489
|
+
### DataTableColumnHeader
|
|
2490
|
+
|
|
2491
|
+
#### Usage
|
|
2492
|
+
|
|
2493
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2494
|
+
|
|
2495
|
+
|
|
2496
|
+
```js
|
|
2497
|
+
import { DataTableColumnHeader } from '@dhis2/ui'
|
|
2498
|
+
```
|
|
2499
|
+
|
|
2500
|
+
|
|
2501
|
+
#### Props
|
|
2502
|
+
|
|
2503
|
+
|Name|Type|Default|Required|Description|
|
|
2504
|
+
|---|---|---|---|---|
|
|
2505
|
+
|align|'left' │ 'center' │ 'right'||||
|
|
2506
|
+
|children|node||||
|
|
2507
|
+
|className|string||||
|
|
2508
|
+
|colSpan|string||||
|
|
2509
|
+
|dataTest|string|`'dhis2-uicore-datatablecellhead'`|||
|
|
2510
|
+
|filter|custom|||The filter element (JSX), required when onFilterIconClick or showFilter are present|
|
|
2511
|
+
|fixed|boolean||||
|
|
2512
|
+
|large|boolean||||
|
|
2513
|
+
|left|custom|||Left or top required when fixed|
|
|
2514
|
+
|name|string|||Can be used to match a column with a property name|
|
|
2515
|
+
|role|string||||
|
|
2516
|
+
|rowSpan|string||||
|
|
2517
|
+
|scope|string||||
|
|
2518
|
+
|showFilter|custom||||
|
|
2519
|
+
|sortDirection|custom||||
|
|
2520
|
+
|sortIconTitle|string||||
|
|
2521
|
+
|top|custom|||Left or top required when fixed|
|
|
2522
|
+
|width|string||||
|
|
2523
|
+
|onFilterIconClick|custom||||
|
|
2524
|
+
|onSortIconClick|custom|||Sort icon click callback with `nextSortDirection` and `name` in payload|
|
|
2525
|
+
|
|
2526
|
+
### DataTableRow
|
|
2527
|
+
|
|
2528
|
+
#### Usage
|
|
2529
|
+
|
|
2530
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2531
|
+
|
|
2532
|
+
|
|
2533
|
+
```js
|
|
2534
|
+
import { DataTableRow } from '@dhis2/ui'
|
|
2535
|
+
```
|
|
2536
|
+
|
|
2537
|
+
|
|
2538
|
+
#### Props
|
|
2539
|
+
|
|
2540
|
+
|Name|Type|Default|Required|Description|
|
|
2541
|
+
|---|---|---|---|---|
|
|
2542
|
+
|children|node|||Should be `<DataTableCell>` or `<DataTableCellHead>` components|
|
|
2543
|
+
|className|string||||
|
|
2544
|
+
|dataTest|string|`'dhis2-uicore-datatablerow'`|||
|
|
2545
|
+
|draggable|boolean|||Renders and additional table cell with drag icon and applies draggable styles|
|
|
2546
|
+
|expandableContent|custom|||This content will be rendered into an additional row with fullwidth cell and the presence of this prop will display an additional table cell with expand icon|
|
|
2547
|
+
|expanded|boolean|||Toggles expand icon (up/down) and expandable content visibility|
|
|
2548
|
+
|role|string||||
|
|
2549
|
+
|selected|boolean|||Adds a green background color|
|
|
2550
|
+
|onExpandToggle|custom|||Callback for expand icon cell clicks|
|
|
2551
|
+
|
|
2552
|
+
### TableBody
|
|
2553
|
+
|
|
2554
|
+
#### Usage
|
|
2555
|
+
|
|
2556
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2557
|
+
|
|
2558
|
+
|
|
2559
|
+
```js
|
|
2560
|
+
import { TableBody } from '@dhis2/ui'
|
|
2561
|
+
```
|
|
2562
|
+
|
|
2563
|
+
|
|
2564
|
+
#### Props
|
|
2565
|
+
|
|
2566
|
+
|Name|Type|Default|Required|Description|
|
|
2567
|
+
|---|---|---|---|---|
|
|
2568
|
+
|children|node|||Should be `<TableRow>` components|
|
|
2569
|
+
|className|string||||
|
|
2570
|
+
|dataTest|string|`'dhis2-uicore-tablebody'`|||
|
|
2571
|
+
|loading|boolean||||
|
|
2572
|
+
|role|string||||
|
|
2573
|
+
|
|
2574
|
+
### TableFoot
|
|
2575
|
+
|
|
2576
|
+
#### Usage
|
|
2577
|
+
|
|
2578
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2579
|
+
|
|
2580
|
+
|
|
2581
|
+
```js
|
|
2582
|
+
import { TableFoot } from '@dhis2/ui'
|
|
2583
|
+
```
|
|
2584
|
+
|
|
2585
|
+
|
|
2586
|
+
#### Props
|
|
2587
|
+
|
|
2588
|
+
|Name|Type|Default|Required|Description|
|
|
2589
|
+
|---|---|---|---|---|
|
|
2590
|
+
|children|node|||Should be `<TableRow>` components|
|
|
2591
|
+
|className|string||||
|
|
2592
|
+
|dataTest|string|`'dhis2-uicore-tablefoot'`|||
|
|
2593
|
+
|role|string||||
|
|
2594
|
+
|
|
2595
|
+
### TableHead
|
|
2596
|
+
|
|
2597
|
+
#### Usage
|
|
2598
|
+
|
|
2599
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2600
|
+
|
|
2601
|
+
|
|
2602
|
+
```js
|
|
2603
|
+
import { TableHead } from '@dhis2/ui'
|
|
2604
|
+
```
|
|
2605
|
+
|
|
2606
|
+
|
|
2607
|
+
#### Props
|
|
2608
|
+
|
|
2609
|
+
|Name|Type|Default|Required|Description|
|
|
2610
|
+
|---|---|---|---|---|
|
|
2611
|
+
|children|node|||Should be `<TableRowHead>` components|
|
|
2612
|
+
|className|string||||
|
|
2613
|
+
|dataTest|string|`'dhis2-uicore-tablehead'`|||
|
|
2614
|
+
|role|string||||
|
|
2615
|
+
|
|
2616
|
+
### TableRow
|
|
2617
|
+
|
|
2618
|
+
#### Usage
|
|
2619
|
+
|
|
2620
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2621
|
+
|
|
2622
|
+
|
|
2623
|
+
```js
|
|
2624
|
+
import { TableRow } from '@dhis2/ui'
|
|
2625
|
+
```
|
|
2626
|
+
|
|
2627
|
+
|
|
2628
|
+
#### Props
|
|
2629
|
+
|
|
2630
|
+
|Name|Type|Default|Required|Description|
|
|
2631
|
+
|---|---|---|---|---|
|
|
2632
|
+
|children|node|||Should be `<TableDataCell>` or `<TableDataCellHead>` components|
|
|
2633
|
+
|className|string||||
|
|
2634
|
+
|dataTest|string|`'dhis2-uicore-tablerow'`|||
|
|
2635
|
+
|draggable|boolean|||Applies draggable cursor styles|
|
|
2636
|
+
|role|string||||
|
|
2637
|
+
|selected|boolean|||Sets a selected (teal) background color|
|
|
2638
|
+
|
|
2639
|
+
### Table
|
|
2640
|
+
|
|
2641
|
+
#### Usage
|
|
2642
|
+
|
|
2643
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2644
|
+
|
|
2645
|
+
|
|
2646
|
+
```js
|
|
2647
|
+
import { Table } from '@dhis2/ui'
|
|
2648
|
+
```
|
|
2649
|
+
|
|
2650
|
+
|
|
2651
|
+
#### Props
|
|
2652
|
+
|
|
2653
|
+
|Name|Type|Default|Required|Description|
|
|
2654
|
+
|---|---|---|---|---|
|
|
2655
|
+
|borderless|boolean|||Removes border from the table|
|
|
2656
|
+
|children|node|||Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components|
|
|
2657
|
+
|className|string||||
|
|
2658
|
+
|dataTest|string|`'dhis2-uicore-table'`|||
|
|
2659
|
+
|layout|'auto' │ 'fixed' │ 'initial' │ 'inherit'|`'auto'`||Sets the `table-layout` property. Switching to `fixed` can prevent style<br/>issues when dealing with a table with multiple frozen columns or when dealing<br/>with filter elements in the table headers.|
|
|
2660
|
+
|role|string||||
|
|
2661
|
+
|width|string|`'100%'`||Sets the `width` property. Providing an explicit width can prevent style<br/>issues when dealing with horizontally scrolling tables with a fixed layout.|
|
|
2662
|
+
|
|
2663
|
+
### Tag
|
|
2664
|
+
|
|
2665
|
+
#### Usage
|
|
2666
|
+
|
|
2667
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2668
|
+
|
|
2669
|
+
|
|
2670
|
+
```js
|
|
2671
|
+
import { Tag } from '@dhis2/ui'
|
|
2672
|
+
```
|
|
2673
|
+
|
|
2674
|
+
|
|
2675
|
+
#### Props
|
|
2676
|
+
|
|
2677
|
+
|Name|Type|Default|Required|Description|
|
|
2678
|
+
|---|---|---|---|---|
|
|
2679
|
+
|bold|boolean|||Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused.|
|
|
2680
|
+
|children|string||||
|
|
2681
|
+
|className|string||||
|
|
2682
|
+
|dataTest|string|`'dhis2-uicore-tag'`|||
|
|
2683
|
+
|icon|node|||Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon.|
|
|
2684
|
+
|maxWidth|string|`'240px'`|||
|
|
2685
|
+
|negative|custom|||Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props|
|
|
2686
|
+
|neutral|custom|||Blue 'neutral' tags are used when a tag _could_ have valid or error status but is currently neutral. `neutral`, `positive`, and `negative` are mutually exclusive props|
|
|
2687
|
+
|positive|custom|||Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props|
|
|
2688
|
+
|
|
2689
|
+
### TextArea
|
|
2690
|
+
|
|
2691
|
+
#### Usage
|
|
2692
|
+
|
|
2693
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2694
|
+
|
|
2695
|
+
|
|
2696
|
+
```js
|
|
2697
|
+
import { TextArea } from '@dhis2/ui'
|
|
2698
|
+
```
|
|
2699
|
+
|
|
2700
|
+
|
|
2701
|
+
#### Props
|
|
2702
|
+
|
|
2703
|
+
|Name|Type|Default|Required|Description|
|
|
2704
|
+
|---|---|---|---|---|
|
|
2705
|
+
|autoGrow|boolean|||Grow the text area in response to overflow instead of adding a scroll bar|
|
|
2706
|
+
|className|string||||
|
|
2707
|
+
|dataTest|string|`'dhis2-uicore-textarea'`|||
|
|
2708
|
+
|dense|boolean|||Compact mode|
|
|
2709
|
+
|disabled|boolean|||Disables the textarea and makes in non-interactive|
|
|
2710
|
+
|error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props|
|
|
2711
|
+
|initialFocus|boolean|||Grabs initial focus on the page|
|
|
2712
|
+
|loading|boolean|||Adds a loading spinner|
|
|
2713
|
+
|name|string|||Name associated with the text area. Passed in object argument to event handlers.|
|
|
2714
|
+
|placeholder|string|||Placeholder text for an empty textarea|
|
|
2715
|
+
|readOnly|boolean|||Makes the textarea read-only|
|
|
2716
|
+
|resize|'none' │ 'both' │ 'horizontal' │ 'vertical'|`'vertical'`||[Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element|
|
|
2717
|
+
|rows|number|`4`||Initial height of the textarea, in lines of text|
|
|
2718
|
+
|tabIndex|string||||
|
|
2719
|
+
|valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props|
|
|
2720
|
+
|value|string|||Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers.|
|
|
2721
|
+
|warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props|
|
|
2722
|
+
|width|string|`'100%'`||Width of the text area. Can be any valid CSS measurement|
|
|
2723
|
+
|onBlur|function|||Called with signature ({ name: string, value: string }, event)|
|
|
2724
|
+
|onChange|function|||Called with signature ({ name: string, value: string }, event)|
|
|
2725
|
+
|onFocus|function|||Called with signature ({ name: string, value: string }, event)|
|
|
2726
|
+
|
|
2727
|
+
### TextAreaField
|
|
2728
|
+
|
|
2729
|
+
#### Usage
|
|
2730
|
+
|
|
2731
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2732
|
+
|
|
2733
|
+
|
|
2734
|
+
```js
|
|
2735
|
+
import { TextAreaField } from '@dhis2/ui'
|
|
2736
|
+
```
|
|
2737
|
+
|
|
2738
|
+
|
|
2739
|
+
#### Props
|
|
2740
|
+
|
|
2741
|
+
|Name|Type|Default|Required|Description|
|
|
2742
|
+
|---|---|---|---|---|
|
|
2743
|
+
|autoGrow|boolean|||Grow the text area in response to overflow instead of adding a scroll bar|
|
|
2744
|
+
|className|string||||
|
|
2745
|
+
|dataTest|string|`'dhis2-uiwidgets-textareafield'`|||
|
|
2746
|
+
|dense|boolean|||Compact mode|
|
|
2747
|
+
|disabled|boolean|||Disables the textarea and makes in non-interactive|
|
|
2748
|
+
|error|custom|||Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props|
|
|
2749
|
+
|helpText|string|||Adds useful help text below the textarea|
|
|
2750
|
+
|initialFocus|boolean|||Grabs initial focus on the page|
|
|
2751
|
+
|inputWidth|string|||Sets the width of the textarea. Minimum 220px. Any valid CSS measurement can be used|
|
|
2752
|
+
|label|string|||Labels the textarea|
|
|
2753
|
+
|loading|boolean|||Adds a loading spinner|
|
|
2754
|
+
|name|string|||Name associated with the text area. Passed in object argument to event handlers.|
|
|
2755
|
+
|placeholder|string|||Placeholder text for an empty textarea|
|
|
2756
|
+
|readOnly|boolean|||Makes the textarea read-only|
|
|
2757
|
+
|required|boolean|||Adds an asterisk to the label to indicate this field is required|
|
|
2758
|
+
|resize|'none' │ 'both' │ 'horizontal' │ 'vertical'|`'vertical'`||[Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element|
|
|
2759
|
+
|rows|number|`4`||Initial height of the textarea, in lines of text|
|
|
2760
|
+
|tabIndex|string||||
|
|
2761
|
+
|valid|custom|||Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props|
|
|
2762
|
+
|validationText|string|||Validation text below the textarea to provide validation feedback. Changes appearance depending on validation status|
|
|
2763
|
+
|value|string|||Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers.|
|
|
2764
|
+
|warning|custom|||Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props|
|
|
2765
|
+
|onBlur|function|||Called with signature ({ name: string, value: string }, event)|
|
|
2766
|
+
|onChange|function|||Called with signature ({ name: string, value: string }, event)|
|
|
2767
|
+
|onFocus|function|||Called with signature ({ name: string, value: string }, event)|
|
|
2768
|
+
|
|
2769
|
+
### Tooltip
|
|
2770
|
+
|
|
2771
|
+
#### Usage
|
|
2772
|
+
|
|
2773
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2774
|
+
|
|
2775
|
+
|
|
2776
|
+
```js
|
|
2777
|
+
import { Tooltip } from '@dhis2/ui'
|
|
2778
|
+
```
|
|
2779
|
+
|
|
2780
|
+
|
|
2781
|
+
#### Props
|
|
2782
|
+
|
|
2783
|
+
|Name|Type|Default|Required|Description|
|
|
2784
|
+
|---|---|---|---|---|
|
|
2785
|
+
|children|node │ function|||If child is a function, it's called with `{ onMouseOver, onMouseOut, ref }` args to apply to a reference element. If child is a node, it is wrapped in a `span` with the appropriate attributes and handlers.|
|
|
2786
|
+
|className|string||||
|
|
2787
|
+
|closeDelay|number|`200`||Time (in ms) until tooltip closes after mouse out|
|
|
2788
|
+
|content|node|||Content to display when the tooltip is open|
|
|
2789
|
+
|dataTest|string|`'dhis2-uicore-tooltip'`|||
|
|
2790
|
+
|maxWidth|number|`300`||Max width of the tooltip in px|
|
|
2791
|
+
|openDelay|number|`200`||Time (in ms) until tooltip open after mouse over|
|
|
2792
|
+
|placement|'top' │ 'right' │ 'bottom' │ 'left'|`'top'`||Where to place the tooltip relative to its reference|
|
|
2793
|
+
|
|
2794
|
+
### TransferOption
|
|
2795
|
+
|
|
2796
|
+
#### Usage
|
|
2797
|
+
|
|
2798
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2799
|
+
|
|
2800
|
+
|
|
2801
|
+
```js
|
|
2802
|
+
import { TransferOption } from '@dhis2/ui'
|
|
2803
|
+
```
|
|
2804
|
+
|
|
2805
|
+
|
|
2806
|
+
#### Props
|
|
2807
|
+
|
|
2808
|
+
|Name|Type|Default|Required|Description|
|
|
2809
|
+
|---|---|---|---|---|
|
|
2810
|
+
|label|node||*||
|
|
2811
|
+
|value|string||*||
|
|
2812
|
+
|className|string||||
|
|
2813
|
+
|dataTest|string|`'dhis2-uicore-transferoption'`|||
|
|
2814
|
+
|disabled|boolean||||
|
|
2815
|
+
|highlighted|boolean||||
|
|
2816
|
+
|onClick|function||||
|
|
2817
|
+
|onDoubleClick|function||||
|
|
2818
|
+
|
|
2819
|
+
### Transfer
|
|
2820
|
+
|
|
2821
|
+
#### Usage
|
|
2822
|
+
|
|
2823
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2824
|
+
|
|
2825
|
+
|
|
2826
|
+
```js
|
|
2827
|
+
import { Transfer } from '@dhis2/ui'
|
|
2828
|
+
```
|
|
2829
|
+
|
|
2830
|
+
|
|
2831
|
+
#### Props
|
|
2832
|
+
|
|
2833
|
+
|Name|Type|Default|Required|Description|
|
|
2834
|
+
|---|---|---|---|---|
|
|
2835
|
+
|options|arrayOf({<br/> "label": "string",<br/> "value": "string",<br/> "disabled": "boolean"<br/>})||*||
|
|
2836
|
+
|onChange|function||*||
|
|
2837
|
+
|addAllText|string||||
|
|
2838
|
+
|addIndividualText|string||||
|
|
2839
|
+
|className|string||||
|
|
2840
|
+
|dataTest|string|`'dhis2-uicore-transfer'`|||
|
|
2841
|
+
|disabled|boolean||||
|
|
2842
|
+
|enableOrderChange|boolean||||
|
|
2843
|
+
|filterCallback|function|`defaultFilterCallback`|||
|
|
2844
|
+
|filterCallbackPicked|function|`defaultFilterCallback`|||
|
|
2845
|
+
|filterLabel|string||||
|
|
2846
|
+
|filterLabelPicked|string||||
|
|
2847
|
+
|filterPlaceholder|string||||
|
|
2848
|
+
|filterPlaceholderPicked|string||||
|
|
2849
|
+
|filterable|boolean||||
|
|
2850
|
+
|filterablePicked|boolean||||
|
|
2851
|
+
|height|string|`'240px'`|||
|
|
2852
|
+
|hideFilterInput|boolean||||
|
|
2853
|
+
|hideFilterInputPicked|boolean||||
|
|
2854
|
+
|initialSearchTerm|string|`''`|||
|
|
2855
|
+
|initialSearchTermPicked|string|`''`|||
|
|
2856
|
+
|leftFooter|node||||
|
|
2857
|
+
|leftHeader|node||||
|
|
2858
|
+
|loading|boolean||||
|
|
2859
|
+
|loadingPicked|boolean||||
|
|
2860
|
+
|maxSelections|1 │ Infinity|`Infinity`|||
|
|
2861
|
+
|optionsWidth|string|`'320px'`|||
|
|
2862
|
+
|removeAllText|string||||
|
|
2863
|
+
|removeIndividualText|string||||
|
|
2864
|
+
|renderOption|function|`(option) => <TransferOption {...option} />`|||
|
|
2865
|
+
|rightFooter|node||||
|
|
2866
|
+
|rightHeader|node||||
|
|
2867
|
+
|searchTerm|string||||
|
|
2868
|
+
|searchTermPicked|string||||
|
|
2869
|
+
|selected|arrayOf(string)|`[]`|||
|
|
2870
|
+
|selectedEmptyComponent|node||||
|
|
2871
|
+
|selectedWidth|string|`'320px'`|||
|
|
2872
|
+
|sourceEmptyPlaceholder|node||||
|
|
2873
|
+
|onEndReached|function||||
|
|
2874
|
+
|onEndReachedPicked|function||||
|
|
2875
|
+
|onFilterChange|function||||
|
|
2876
|
+
|onFilterChangePicked|function||||
|
|
2877
|
+
|
|
2878
|
+
### UserAvatar
|
|
2879
|
+
|
|
2880
|
+
#### Usage
|
|
2881
|
+
|
|
2882
|
+
**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
|
|
2883
|
+
|
|
2884
|
+
|
|
2885
|
+
```js
|
|
2886
|
+
import { UserAvatar } from '@dhis2/ui'
|
|
2887
|
+
```
|
|
2888
|
+
|
|
2889
|
+
|
|
2890
|
+
#### Props
|
|
2891
|
+
|
|
2892
|
+
|Name|Type|Default|Required|Description|
|
|
2893
|
+
|---|---|---|---|---|
|
|
2894
|
+
|name|string||*||
|
|
2895
|
+
|avatarId|string||||
|
|
2896
|
+
|className|string||||
|
|
2897
|
+
|dataTest|string|`'dhis2-uicore-useravatar'`|||
|
|
2898
|
+
|extralarge|custom||||
|
|
2899
|
+
|extrasmall|custom||||
|
|
2900
|
+
|large|custom||||
|
|
2901
|
+
|medium|custom||||
|
|
2902
|
+
|small|custom||||
|