@patternfly/react-core 4.202.26 → 4.202.27
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/CHANGELOG.md +8 -0
- package/package.json +5 -5
- package/src/components/DataList/examples/DataList.md +10 -1193
- package/src/components/DataList/examples/DataListActions.tsx +100 -0
- package/src/components/DataList/examples/DataListBasic.tsx +33 -0
- package/src/components/DataList/examples/DataListCheckboxes.tsx +200 -0
- package/src/components/DataList/examples/DataListCompact.tsx +33 -0
- package/src/components/DataList/examples/DataListControllingText.tsx +29 -0
- package/src/components/DataList/examples/DataListDraggable.tsx +98 -0
- package/src/components/DataList/examples/DataListExpandable.tsx +261 -0
- package/src/components/DataList/examples/DataListSelectableRows.tsx +120 -0
- package/src/components/DataList/examples/DataListSmGridBreakpoint.tsx +22 -0
- package/src/components/DataList/examples/DataListWidthModifiers.tsx +204 -0
|
@@ -27,1101 +27,42 @@ import { css } from '@patternfly/react-styles';
|
|
|
27
27
|
|
|
28
28
|
### Basic
|
|
29
29
|
|
|
30
|
-
```
|
|
31
|
-
import React from 'react';
|
|
32
|
-
import {
|
|
33
|
-
Button,
|
|
34
|
-
DataList,
|
|
35
|
-
DataListItem,
|
|
36
|
-
DataListItemRow,
|
|
37
|
-
DataListItemCells,
|
|
38
|
-
DataListCell,
|
|
39
|
-
DataListCheck,
|
|
40
|
-
DataListAction,
|
|
41
|
-
DataListToggle,
|
|
42
|
-
DataListContent,
|
|
43
|
-
Dropdown,
|
|
44
|
-
KebabToggle,
|
|
45
|
-
DropdownItem
|
|
46
|
-
} from '@patternfly/react-core';
|
|
47
|
-
|
|
48
|
-
<DataList aria-label="Simple data list example">
|
|
49
|
-
<DataListItem aria-labelledby="simple-item1">
|
|
50
|
-
<DataListItemRow>
|
|
51
|
-
<DataListItemCells
|
|
52
|
-
dataListCells={[
|
|
53
|
-
<DataListCell key="primary content">
|
|
54
|
-
<span id="simple-item1">Primary content</span>
|
|
55
|
-
</DataListCell>,
|
|
56
|
-
<DataListCell key="secondary content">Secondary content</DataListCell>
|
|
57
|
-
]}
|
|
58
|
-
/>
|
|
59
|
-
</DataListItemRow>
|
|
60
|
-
</DataListItem>
|
|
61
|
-
<DataListItem aria-labelledby="simple-item2">
|
|
62
|
-
<DataListItemRow>
|
|
63
|
-
<DataListItemCells
|
|
64
|
-
dataListCells={[
|
|
65
|
-
<DataListCell isFilled={false} key="secondary content fill">
|
|
66
|
-
<span id="simple-item2">Secondary content (pf-m-no-fill)</span>
|
|
67
|
-
</DataListCell>,
|
|
68
|
-
<DataListCell isFilled={false} alignRight key="secondary content align">
|
|
69
|
-
Secondary content (pf-m-align-right pf-m-no-fill)
|
|
70
|
-
</DataListCell>
|
|
71
|
-
]}
|
|
72
|
-
/>
|
|
73
|
-
</DataListItemRow>
|
|
74
|
-
</DataListItem>
|
|
75
|
-
</DataList>
|
|
30
|
+
```ts file="./DataListBasic.tsx"
|
|
76
31
|
```
|
|
77
32
|
|
|
78
33
|
### Compact
|
|
79
34
|
|
|
80
|
-
```
|
|
81
|
-
import React from 'react';
|
|
82
|
-
import {
|
|
83
|
-
Button,
|
|
84
|
-
DataList,
|
|
85
|
-
DataListItem,
|
|
86
|
-
DataListItemRow,
|
|
87
|
-
DataListItemCells,
|
|
88
|
-
DataListCell,
|
|
89
|
-
DataListCheck,
|
|
90
|
-
DataListAction,
|
|
91
|
-
DataListToggle,
|
|
92
|
-
DataListContent,
|
|
93
|
-
Dropdown,
|
|
94
|
-
KebabToggle,
|
|
95
|
-
DropdownItem
|
|
96
|
-
} from '@patternfly/react-core';
|
|
97
|
-
|
|
98
|
-
<DataList aria-label="Compact data list example" isCompact>
|
|
99
|
-
<DataListItem aria-labelledby="simple-item1">
|
|
100
|
-
<DataListItemRow>
|
|
101
|
-
<DataListItemCells
|
|
102
|
-
dataListCells={[
|
|
103
|
-
<DataListCell key="primary content">
|
|
104
|
-
<span id="simple-item1">Primary content</span>
|
|
105
|
-
</DataListCell>,
|
|
106
|
-
<DataListCell key="secondary content">Secondary content</DataListCell>
|
|
107
|
-
]}
|
|
108
|
-
/>
|
|
109
|
-
</DataListItemRow>
|
|
110
|
-
</DataListItem>
|
|
111
|
-
<DataListItem aria-labelledby="simple-item2">
|
|
112
|
-
<DataListItemRow>
|
|
113
|
-
<DataListItemCells
|
|
114
|
-
dataListCells={[
|
|
115
|
-
<DataListCell isFilled={false} key="secondary content fill">
|
|
116
|
-
<span id="simple-item2">Secondary content (pf-m-no-fill)</span>
|
|
117
|
-
</DataListCell>,
|
|
118
|
-
<DataListCell isFilled={false} alignRight key="secondary content align">
|
|
119
|
-
Secondary content (pf-m-align-right pf-m-no-fill)
|
|
120
|
-
</DataListCell>
|
|
121
|
-
]}
|
|
122
|
-
/>
|
|
123
|
-
</DataListItemRow>
|
|
124
|
-
</DataListItem>
|
|
125
|
-
</DataList>
|
|
35
|
+
```ts file="./DataListCompact.tsx"
|
|
126
36
|
```
|
|
127
37
|
|
|
128
38
|
### Checkboxes, actions and additional cells
|
|
129
39
|
|
|
130
|
-
```
|
|
131
|
-
import React from 'react';
|
|
132
|
-
import {
|
|
133
|
-
Button,
|
|
134
|
-
DataList,
|
|
135
|
-
DataListActionModifiers,
|
|
136
|
-
DataListItem,
|
|
137
|
-
DataListItemCells,
|
|
138
|
-
DataListItemRow,
|
|
139
|
-
DataListCell,
|
|
140
|
-
DataListCheck,
|
|
141
|
-
DataListAction,
|
|
142
|
-
Dropdown,
|
|
143
|
-
DropdownItem,
|
|
144
|
-
DropdownPosition,
|
|
145
|
-
KebabToggle
|
|
146
|
-
} from '@patternfly/react-core';
|
|
147
|
-
|
|
148
|
-
class CheckboxActionDataList extends React.Component {
|
|
149
|
-
constructor(props) {
|
|
150
|
-
super(props);
|
|
151
|
-
this.state = { isOpen1: false, isOpen2: false, isOpen3: false };
|
|
152
|
-
|
|
153
|
-
this.onToggle1 = isOpen1 => {
|
|
154
|
-
this.setState({ isOpen1 });
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
this.onSelect1 = event => {
|
|
158
|
-
this.setState(prevState => ({
|
|
159
|
-
isOpen1: !prevState.isOpen1
|
|
160
|
-
}));
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
this.onToggle2 = isOpen2 => {
|
|
164
|
-
this.setState({ isOpen2 });
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
this.onSelect2 = event => {
|
|
168
|
-
this.setState(prevState => ({
|
|
169
|
-
isOpen2: !prevState.isOpen2
|
|
170
|
-
}));
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
this.onToggle3 = isOpen3 => {
|
|
174
|
-
this.setState({ isOpen3 });
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
this.onSelect3 = event => {
|
|
178
|
-
this.setState(prevState => ({
|
|
179
|
-
isOpen3: !prevState.isOpen3
|
|
180
|
-
}));
|
|
181
|
-
};
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
render() {
|
|
185
|
-
return (
|
|
186
|
-
<DataList aria-label="Checkbox and action data list example">
|
|
187
|
-
<DataListItem aria-labelledby="check-action-item1">
|
|
188
|
-
<DataListItemRow>
|
|
189
|
-
<DataListCheck aria-labelledby="check-action-item1" name="check-action-check1" />
|
|
190
|
-
<DataListItemCells
|
|
191
|
-
dataListCells={[
|
|
192
|
-
<DataListCell key="primary content">
|
|
193
|
-
<span id="check-action-item1">Primary content</span> Dolor sit amet, consectetur adipisicing elit, sed
|
|
194
|
-
do eiusmod.
|
|
195
|
-
</DataListCell>,
|
|
196
|
-
<DataListCell key="secondary content 1">
|
|
197
|
-
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
|
|
198
|
-
</DataListCell>,
|
|
199
|
-
<DataListCell key="secondary content 2">
|
|
200
|
-
<span>Tertiary content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
|
|
201
|
-
</DataListCell>,
|
|
202
|
-
<DataListCell key="more content 1">
|
|
203
|
-
<span>More content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
|
|
204
|
-
</DataListCell>,
|
|
205
|
-
<DataListCell key="more content 2">
|
|
206
|
-
<span>More content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
|
|
207
|
-
</DataListCell>
|
|
208
|
-
]}
|
|
209
|
-
/>
|
|
210
|
-
<DataListAction
|
|
211
|
-
aria-labelledby="check-action-item1 check-action-action1"
|
|
212
|
-
id="check-action-action1"
|
|
213
|
-
aria-label="Actions"
|
|
214
|
-
isPlainButtonAction
|
|
215
|
-
>
|
|
216
|
-
<Dropdown
|
|
217
|
-
isPlain
|
|
218
|
-
position={DropdownPosition.right}
|
|
219
|
-
isOpen={this.state.isOpen1}
|
|
220
|
-
onSelect={this.onSelect1}
|
|
221
|
-
toggle={<KebabToggle onToggle={this.onToggle1} />}
|
|
222
|
-
dropdownItems={[
|
|
223
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
224
|
-
<DropdownItem key="action" component="button">
|
|
225
|
-
Action
|
|
226
|
-
</DropdownItem>,
|
|
227
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
228
|
-
Disabled Link
|
|
229
|
-
</DropdownItem>
|
|
230
|
-
]}
|
|
231
|
-
/>
|
|
232
|
-
</DataListAction>
|
|
233
|
-
</DataListItemRow>
|
|
234
|
-
</DataListItem>
|
|
235
|
-
<DataListItem aria-labelledby="check-action-item2">
|
|
236
|
-
<DataListItemRow>
|
|
237
|
-
<DataListCheck aria-labelledby="check-action-item2" name="check-action-check2" />
|
|
238
|
-
<DataListItemCells
|
|
239
|
-
dataListCells={[
|
|
240
|
-
<DataListCell key="primary content">
|
|
241
|
-
<span id="check-action-item2">Primary content - Lorem ipsum</span> dolor sit amet, consectetur
|
|
242
|
-
adipisicing elit, sed do eiusmod.
|
|
243
|
-
</DataListCell>,
|
|
244
|
-
<DataListCell key="secondary content">
|
|
245
|
-
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
|
|
246
|
-
</DataListCell>
|
|
247
|
-
]}
|
|
248
|
-
/>
|
|
249
|
-
<DataListAction
|
|
250
|
-
visibility={{ lg: 'hidden' }}
|
|
251
|
-
aria-labelledby="check-action-item2 check-action-action2"
|
|
252
|
-
id="check-action-action2"
|
|
253
|
-
aria-label="Actions"
|
|
254
|
-
isPlainButtonAction
|
|
255
|
-
>
|
|
256
|
-
<Dropdown
|
|
257
|
-
isPlain
|
|
258
|
-
position={DropdownPosition.right}
|
|
259
|
-
isOpen={this.state.isOpen2}
|
|
260
|
-
onSelect={this.onSelect2}
|
|
261
|
-
toggle={<KebabToggle onToggle={this.onToggle2} />}
|
|
262
|
-
dropdownItems={[
|
|
263
|
-
<DropdownItem key="pri-action2" component="button">
|
|
264
|
-
Primary
|
|
265
|
-
</DropdownItem>,
|
|
266
|
-
<DropdownItem key="sec-action2" component="button">
|
|
267
|
-
Secondary
|
|
268
|
-
</DropdownItem>
|
|
269
|
-
]}
|
|
270
|
-
/>
|
|
271
|
-
</DataListAction>
|
|
272
|
-
<DataListAction
|
|
273
|
-
visibility={{ default: 'hidden', lg: 'visible' }}
|
|
274
|
-
aria-labelledby="check-action-item2 check-action-action2"
|
|
275
|
-
id="check-action-action2"
|
|
276
|
-
aria-label="Actions"
|
|
277
|
-
>
|
|
278
|
-
<Button variant="primary">Primary</Button>
|
|
279
|
-
<Button variant="secondary">Secondary</Button>
|
|
280
|
-
</DataListAction>
|
|
281
|
-
</DataListItemRow>
|
|
282
|
-
</DataListItem>
|
|
283
|
-
<DataListItem aria-labelledby="check-action-item3">
|
|
284
|
-
<DataListItemRow>
|
|
285
|
-
<DataListCheck aria-labelledby="check-action-item3" name="check-action-check3" />
|
|
286
|
-
<DataListItemCells
|
|
287
|
-
dataListCells={[
|
|
288
|
-
<DataListCell key="primary content">
|
|
289
|
-
<span id="check-action-item3">Primary content - Lorem ipsum</span> dolor sit amet, consectetur
|
|
290
|
-
adipisicing elit, sed do eiusmod.
|
|
291
|
-
</DataListCell>,
|
|
292
|
-
<DataListCell key="secondary content">
|
|
293
|
-
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
|
|
294
|
-
</DataListCell>
|
|
295
|
-
]}
|
|
296
|
-
/>
|
|
297
|
-
<DataListAction
|
|
298
|
-
visibility={{ xl: 'hidden' }}
|
|
299
|
-
aria-labelledby="check-action-item3 check-action-action3"
|
|
300
|
-
id="check-action-action3"
|
|
301
|
-
aria-label="Actions"
|
|
302
|
-
isPlainButtonAction
|
|
303
|
-
>
|
|
304
|
-
<Dropdown
|
|
305
|
-
isPlain
|
|
306
|
-
position={DropdownPosition.right}
|
|
307
|
-
isOpen={this.state.isOpen3}
|
|
308
|
-
onSelect={this.onSelect3}
|
|
309
|
-
toggle={<KebabToggle onToggle={this.onToggle3} />}
|
|
310
|
-
dropdownItems={[
|
|
311
|
-
<DropdownItem key="pri-action3" component="button">
|
|
312
|
-
Primary
|
|
313
|
-
</DropdownItem>,
|
|
314
|
-
<DropdownItem key="sec1-action3" component="button">
|
|
315
|
-
Secondary
|
|
316
|
-
</DropdownItem>,
|
|
317
|
-
<DropdownItem key="sec2-action3" component="button">
|
|
318
|
-
Secondary
|
|
319
|
-
</DropdownItem>,
|
|
320
|
-
<DropdownItem key="sec3-action3" component="button">
|
|
321
|
-
Secondary
|
|
322
|
-
</DropdownItem>
|
|
323
|
-
]}
|
|
324
|
-
/>
|
|
325
|
-
</DataListAction>
|
|
326
|
-
<DataListAction
|
|
327
|
-
visibility={{ default: 'hidden', xl: 'visible' }}
|
|
328
|
-
aria-labelledby="check-action-item3 check-action-action3"
|
|
329
|
-
id="check-action-action3"
|
|
330
|
-
aria-label="Actions"
|
|
331
|
-
>
|
|
332
|
-
<Button variant="primary">Primary</Button>
|
|
333
|
-
<Button variant="secondary">Secondary</Button>
|
|
334
|
-
<Button variant="secondary">Secondary</Button>
|
|
335
|
-
<Button variant="secondary">Secondary</Button>
|
|
336
|
-
</DataListAction>
|
|
337
|
-
</DataListItemRow>
|
|
338
|
-
</DataListItem>
|
|
339
|
-
</DataList>
|
|
340
|
-
);
|
|
341
|
-
}
|
|
342
|
-
}
|
|
40
|
+
```ts file="./DataListCheckboxes.tsx"
|
|
343
41
|
```
|
|
344
42
|
|
|
345
43
|
### Actions: single and multiple
|
|
346
44
|
|
|
347
|
-
```
|
|
348
|
-
import React from 'react';
|
|
349
|
-
import {
|
|
350
|
-
Button,
|
|
351
|
-
Dropdown,
|
|
352
|
-
DropdownItem,
|
|
353
|
-
DropdownPosition,
|
|
354
|
-
KebabToggle,
|
|
355
|
-
DataList,
|
|
356
|
-
DataListItem,
|
|
357
|
-
DataListCell,
|
|
358
|
-
DataListItemRow,
|
|
359
|
-
DataListCheck,
|
|
360
|
-
DataListItemCells,
|
|
361
|
-
DataListAction
|
|
362
|
-
} from '@patternfly/react-core';
|
|
363
|
-
|
|
364
|
-
class ActionsDataList extends React.Component {
|
|
365
|
-
constructor(props) {
|
|
366
|
-
super(props);
|
|
367
|
-
this.state = { isOpen: false, isDeleted: false };
|
|
368
|
-
|
|
369
|
-
this.onToggle = isOpen => {
|
|
370
|
-
this.setState({ isOpen });
|
|
371
|
-
};
|
|
372
|
-
|
|
373
|
-
this.onSelect = event => {
|
|
374
|
-
this.setState(prevState => ({
|
|
375
|
-
isOpen: !prevState.isOpen
|
|
376
|
-
}));
|
|
377
|
-
};
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
render() {
|
|
381
|
-
return (
|
|
382
|
-
<React.Fragment>
|
|
383
|
-
<DataList aria-label="single action data list example ">
|
|
384
|
-
{!this.state.isDeleted && (
|
|
385
|
-
<DataListItem aria-labelledby="single-action-item1">
|
|
386
|
-
<DataListItemRow>
|
|
387
|
-
<DataListItemCells
|
|
388
|
-
dataListCells={[
|
|
389
|
-
<DataListCell key="primary content">
|
|
390
|
-
<span id="single-action-item1">Single actionable Primary content</span>
|
|
391
|
-
</DataListCell>,
|
|
392
|
-
<DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
|
|
393
|
-
]}
|
|
394
|
-
/>
|
|
395
|
-
<DataListAction
|
|
396
|
-
aria-labelledby="single-action-item1 single-action-action1"
|
|
397
|
-
id="single-action-action1"
|
|
398
|
-
aria-label="Actions"
|
|
399
|
-
>
|
|
400
|
-
<Button
|
|
401
|
-
onClick={() => {
|
|
402
|
-
if (confirm('Are you sure?')) {
|
|
403
|
-
this.setState({ isDeleted: true });
|
|
404
|
-
}
|
|
405
|
-
}}
|
|
406
|
-
variant="primary"
|
|
407
|
-
key="delete-action"
|
|
408
|
-
>
|
|
409
|
-
Delete
|
|
410
|
-
</Button>
|
|
411
|
-
</DataListAction>
|
|
412
|
-
</DataListItemRow>
|
|
413
|
-
</DataListItem>
|
|
414
|
-
)}
|
|
415
|
-
<DataListItem aria-labelledby="multi-actions-item1">
|
|
416
|
-
<DataListItemRow>
|
|
417
|
-
<DataListItemCells
|
|
418
|
-
dataListCells={[
|
|
419
|
-
<DataListCell key="primary content">
|
|
420
|
-
<span id="multi-actions-item1">Multi actions Primary content</span>
|
|
421
|
-
</DataListCell>,
|
|
422
|
-
<DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
|
|
423
|
-
]}
|
|
424
|
-
/>
|
|
425
|
-
<DataListAction
|
|
426
|
-
aria-labelledby="multi-actions-item1 multi-actions-action1"
|
|
427
|
-
id="multi-actions-action1"
|
|
428
|
-
aria-label="Actions"
|
|
429
|
-
isPlainButtonAction
|
|
430
|
-
>
|
|
431
|
-
<Dropdown
|
|
432
|
-
isPlain
|
|
433
|
-
position={DropdownPosition.right}
|
|
434
|
-
isOpen={this.state.isOpen}
|
|
435
|
-
onSelect={this.onSelect}
|
|
436
|
-
toggle={<KebabToggle onToggle={this.onToggle} />}
|
|
437
|
-
dropdownItems={[
|
|
438
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
439
|
-
<DropdownItem key="action" component="button">
|
|
440
|
-
Action
|
|
441
|
-
</DropdownItem>,
|
|
442
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
443
|
-
Disabled Link
|
|
444
|
-
</DropdownItem>
|
|
445
|
-
]}
|
|
446
|
-
/>
|
|
447
|
-
</DataListAction>
|
|
448
|
-
</DataListItemRow>
|
|
449
|
-
</DataListItem>
|
|
450
|
-
</DataList>
|
|
451
|
-
</React.Fragment>
|
|
452
|
-
);
|
|
453
|
-
}
|
|
454
|
-
}
|
|
45
|
+
```ts file="./DataListActions.tsx"
|
|
455
46
|
```
|
|
456
47
|
|
|
457
48
|
### Expandable
|
|
458
49
|
|
|
459
|
-
```
|
|
460
|
-
import React from 'react';
|
|
461
|
-
import {
|
|
462
|
-
Button,
|
|
463
|
-
DataList,
|
|
464
|
-
DataListItem,
|
|
465
|
-
DataListItemRow,
|
|
466
|
-
DataListCell,
|
|
467
|
-
DataListCheck,
|
|
468
|
-
DataListAction,
|
|
469
|
-
DataListToggle,
|
|
470
|
-
DataListContent,
|
|
471
|
-
DataListItemCells,
|
|
472
|
-
Dropdown,
|
|
473
|
-
DropdownItem,
|
|
474
|
-
DropdownPosition,
|
|
475
|
-
KebabToggle
|
|
476
|
-
} from '@patternfly/react-core';
|
|
477
|
-
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
478
|
-
import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
|
|
479
|
-
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
|
480
|
-
|
|
481
|
-
class ExpandableDataList extends React.Component {
|
|
482
|
-
constructor(props) {
|
|
483
|
-
super(props);
|
|
484
|
-
this.state = {
|
|
485
|
-
expanded: ['ex-toggle1', 'ex-toggle3'],
|
|
486
|
-
isOpen1: false,
|
|
487
|
-
isOpen2: false,
|
|
488
|
-
isOpen3: false,
|
|
489
|
-
allExpanded: false
|
|
490
|
-
};
|
|
491
|
-
|
|
492
|
-
this.onToggleAll = () => {
|
|
493
|
-
this.setState(
|
|
494
|
-
{
|
|
495
|
-
allExpanded: !this.state.allExpanded
|
|
496
|
-
},
|
|
497
|
-
() => {
|
|
498
|
-
if (this.state.allExpanded) {
|
|
499
|
-
this.setState({
|
|
500
|
-
expanded: ['ex-toggle1', 'ex-toggle2', 'ex-toggle3']
|
|
501
|
-
});
|
|
502
|
-
} else {
|
|
503
|
-
this.setState({
|
|
504
|
-
expanded: []
|
|
505
|
-
});
|
|
506
|
-
}
|
|
507
|
-
}
|
|
508
|
-
);
|
|
509
|
-
};
|
|
510
|
-
|
|
511
|
-
this.onToggle1 = isOpen1 => {
|
|
512
|
-
this.setState({ isOpen1 });
|
|
513
|
-
};
|
|
514
|
-
|
|
515
|
-
this.onToggle2 = isOpen2 => {
|
|
516
|
-
this.setState({ isOpen2 });
|
|
517
|
-
};
|
|
518
|
-
|
|
519
|
-
this.onToggle3 = isOpen3 => {
|
|
520
|
-
this.setState({ isOpen3 });
|
|
521
|
-
};
|
|
522
|
-
|
|
523
|
-
this.onSelect1 = event => {
|
|
524
|
-
this.setState(prevState => ({
|
|
525
|
-
isOpen1: !prevState.isOpen1
|
|
526
|
-
}));
|
|
527
|
-
};
|
|
528
|
-
|
|
529
|
-
this.onSelect2 = event => {
|
|
530
|
-
this.setState(prevState => ({
|
|
531
|
-
isOpen2: !prevState.isOpen2
|
|
532
|
-
}));
|
|
533
|
-
};
|
|
534
|
-
|
|
535
|
-
this.onSelect3 = event => {
|
|
536
|
-
this.setState(prevState => ({
|
|
537
|
-
isOpen3: !prevState.isOpen3
|
|
538
|
-
}));
|
|
539
|
-
};
|
|
540
|
-
}
|
|
541
|
-
|
|
542
|
-
render() {
|
|
543
|
-
const toggle = id => {
|
|
544
|
-
const expanded = this.state.expanded;
|
|
545
|
-
const index = expanded.indexOf(id);
|
|
546
|
-
const newExpanded =
|
|
547
|
-
index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
|
|
548
|
-
this.setState(() => ({ expanded: newExpanded }));
|
|
549
|
-
};
|
|
550
|
-
return (
|
|
551
|
-
<React.Fragment>
|
|
552
|
-
<Button onClick={this.onToggleAll}>
|
|
553
|
-
{this.state.allExpanded && <AngleDownIcon />}
|
|
554
|
-
{!this.state.allExpanded && <AngleRightIcon />}
|
|
555
|
-
Expand/Collapse All
|
|
556
|
-
</Button>
|
|
557
|
-
<br />
|
|
558
|
-
<br />
|
|
559
|
-
<DataList aria-label="Expandable data list example">
|
|
560
|
-
<DataListItem aria-labelledby="ex-item1" isExpanded={this.state.expanded.includes('ex-toggle1')}>
|
|
561
|
-
<DataListItemRow>
|
|
562
|
-
<DataListToggle
|
|
563
|
-
onClick={() => toggle('ex-toggle1')}
|
|
564
|
-
isExpanded={this.state.expanded.includes('ex-toggle1')}
|
|
565
|
-
id="ex-toggle1"
|
|
566
|
-
aria-controls="ex-expand1"
|
|
567
|
-
/>
|
|
568
|
-
<DataListItemCells
|
|
569
|
-
dataListCells={[
|
|
570
|
-
<DataListCell isIcon key="icon">
|
|
571
|
-
<CodeBranchIcon />
|
|
572
|
-
</DataListCell>,
|
|
573
|
-
<DataListCell key="primary content">
|
|
574
|
-
<div id="ex-item1">Primary content</div>
|
|
575
|
-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
576
|
-
<a href="#">link</a>
|
|
577
|
-
</DataListCell>,
|
|
578
|
-
<DataListCell key="secondary content">
|
|
579
|
-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
580
|
-
</DataListCell>,
|
|
581
|
-
<DataListCell key="secondary content 2">
|
|
582
|
-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
583
|
-
</DataListCell>
|
|
584
|
-
]}
|
|
585
|
-
/>
|
|
586
|
-
<DataListAction
|
|
587
|
-
aria-labelledby="ex-item1 ex-action1"
|
|
588
|
-
id="ex-action1"
|
|
589
|
-
aria-label="Actions"
|
|
590
|
-
isPlainButtonAction
|
|
591
|
-
>
|
|
592
|
-
<Dropdown
|
|
593
|
-
isPlain
|
|
594
|
-
position={DropdownPosition.right}
|
|
595
|
-
isOpen={this.state.isOpen1}
|
|
596
|
-
onSelect={this.onSelect1}
|
|
597
|
-
toggle={<KebabToggle onToggle={this.onToggle1} />}
|
|
598
|
-
dropdownItems={[
|
|
599
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
600
|
-
<DropdownItem key="action" component="button">
|
|
601
|
-
Action
|
|
602
|
-
</DropdownItem>,
|
|
603
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
604
|
-
Disabled Link
|
|
605
|
-
</DropdownItem>
|
|
606
|
-
]}
|
|
607
|
-
/>
|
|
608
|
-
</DataListAction>
|
|
609
|
-
</DataListItemRow>
|
|
610
|
-
<DataListContent
|
|
611
|
-
aria-label="Primary Content Details"
|
|
612
|
-
id="ex-expand1"
|
|
613
|
-
isHidden={!this.state.expanded.includes('ex-toggle1')}
|
|
614
|
-
>
|
|
615
|
-
<p>
|
|
616
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
617
|
-
dolore magna aliqua.
|
|
618
|
-
</p>
|
|
619
|
-
</DataListContent>
|
|
620
|
-
</DataListItem>
|
|
621
|
-
<DataListItem aria-labelledby="ex-item2" isExpanded={this.state.expanded.includes('ex-toggle2')}>
|
|
622
|
-
<DataListItemRow>
|
|
623
|
-
<DataListToggle
|
|
624
|
-
onClick={() => toggle('ex-toggle2')}
|
|
625
|
-
isExpanded={this.state.expanded.includes('ex-toggle2')}
|
|
626
|
-
id="ex-toggle2"
|
|
627
|
-
aria-controls="ex-expand2"
|
|
628
|
-
/>
|
|
629
|
-
<DataListItemCells
|
|
630
|
-
dataListCells={[
|
|
631
|
-
<DataListCell isIcon key="icon">
|
|
632
|
-
<CodeBranchIcon />
|
|
633
|
-
</DataListCell>,
|
|
634
|
-
<DataListCell key="secondary content">
|
|
635
|
-
<div id="ex-item2">Secondary content</div>
|
|
636
|
-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
637
|
-
</DataListCell>,
|
|
638
|
-
<DataListCell key="secondary content 2">
|
|
639
|
-
<span>Lorem ipsum dolor sit amet.</span>
|
|
640
|
-
</DataListCell>,
|
|
641
|
-
<DataListCell key="secondary content3">
|
|
642
|
-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
643
|
-
</DataListCell>
|
|
644
|
-
]}
|
|
645
|
-
/>
|
|
646
|
-
<DataListAction
|
|
647
|
-
aria-labelledby="ex-item2 ex-action2"
|
|
648
|
-
id="ex-action2"
|
|
649
|
-
aria-label="Actions"
|
|
650
|
-
isPlainButtonAction
|
|
651
|
-
>
|
|
652
|
-
<Dropdown
|
|
653
|
-
isPlain
|
|
654
|
-
position={DropdownPosition.right}
|
|
655
|
-
isOpen={this.state.isOpen2}
|
|
656
|
-
onSelect={this.onSelect2}
|
|
657
|
-
toggle={<KebabToggle onToggle={this.onToggle2} />}
|
|
658
|
-
dropdownItems={[
|
|
659
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
660
|
-
<DropdownItem key="action" component="button">
|
|
661
|
-
Action
|
|
662
|
-
</DropdownItem>,
|
|
663
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
664
|
-
Disabled Link
|
|
665
|
-
</DropdownItem>
|
|
666
|
-
]}
|
|
667
|
-
/>
|
|
668
|
-
</DataListAction>
|
|
669
|
-
</DataListItemRow>
|
|
670
|
-
<DataListContent
|
|
671
|
-
aria-label="Primary Content Details"
|
|
672
|
-
id="ex-expand2"
|
|
673
|
-
isHidden={!this.state.expanded.includes('ex-toggle2')}
|
|
674
|
-
>
|
|
675
|
-
<p>
|
|
676
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
677
|
-
dolore magna aliqua.
|
|
678
|
-
</p>
|
|
679
|
-
</DataListContent>
|
|
680
|
-
</DataListItem>
|
|
681
|
-
<DataListItem aria-labelledby="ex-item3" isExpanded={this.state.expanded.includes('ex-toggle3')}>
|
|
682
|
-
<DataListItemRow>
|
|
683
|
-
<DataListToggle
|
|
684
|
-
onClick={() => toggle('ex-toggle3')}
|
|
685
|
-
isExpanded={this.state.expanded.includes('ex-toggle3')}
|
|
686
|
-
id="ex-toggle3"
|
|
687
|
-
aria-controls="ex-expand3"
|
|
688
|
-
/>
|
|
689
|
-
<DataListItemCells
|
|
690
|
-
dataListCells={[
|
|
691
|
-
<DataListCell isIcon key="icon">
|
|
692
|
-
<CodeBranchIcon />
|
|
693
|
-
</DataListCell>,
|
|
694
|
-
<DataListCell key="tertiary content">
|
|
695
|
-
<div id="ex-item3">Tertiary content</div>
|
|
696
|
-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
697
|
-
</DataListCell>,
|
|
698
|
-
<DataListCell key="secondary content">
|
|
699
|
-
<span>Lorem ipsum dolor sit amet.</span>
|
|
700
|
-
</DataListCell>,
|
|
701
|
-
<DataListCell key="secondary content 2">
|
|
702
|
-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
703
|
-
</DataListCell>
|
|
704
|
-
]}
|
|
705
|
-
/>
|
|
706
|
-
<DataListAction
|
|
707
|
-
aria-labelledby="ex-item3 ex-action3"
|
|
708
|
-
aria-labelledby="ex-item3 ex-action3"
|
|
709
|
-
id="ex-action3"
|
|
710
|
-
aria-label="Actions"
|
|
711
|
-
isPlainButtonAction
|
|
712
|
-
>
|
|
713
|
-
<Dropdown
|
|
714
|
-
isPlain
|
|
715
|
-
position={DropdownPosition.right}
|
|
716
|
-
isOpen={this.state.isOpen3}
|
|
717
|
-
onSelect={this.onSelect3}
|
|
718
|
-
toggle={<KebabToggle onToggle={this.onToggle3} />}
|
|
719
|
-
dropdownItems={[
|
|
720
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
721
|
-
<DropdownItem key="action" component="button">
|
|
722
|
-
Action
|
|
723
|
-
</DropdownItem>,
|
|
724
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
725
|
-
Disabled Link
|
|
726
|
-
</DropdownItem>
|
|
727
|
-
]}
|
|
728
|
-
/>
|
|
729
|
-
</DataListAction>
|
|
730
|
-
</DataListItemRow>
|
|
731
|
-
<DataListContent
|
|
732
|
-
aria-label="Primary Content Details"
|
|
733
|
-
id="ex-expand3"
|
|
734
|
-
isHidden={!this.state.expanded.includes('ex-toggle3')}
|
|
735
|
-
hasNoPadding
|
|
736
|
-
>
|
|
737
|
-
This expanded section has no padding.
|
|
738
|
-
</DataListContent>
|
|
739
|
-
</DataListItem>
|
|
740
|
-
</DataList>
|
|
741
|
-
</React.Fragment>
|
|
742
|
-
);
|
|
743
|
-
}
|
|
744
|
-
}
|
|
50
|
+
```ts file="./DataListExpandable.tsx"
|
|
745
51
|
```
|
|
746
52
|
|
|
747
53
|
### Width modifiers
|
|
748
54
|
|
|
749
|
-
```
|
|
750
|
-
import React from 'react';
|
|
751
|
-
import {
|
|
752
|
-
Button,
|
|
753
|
-
DataList,
|
|
754
|
-
DataListItem,
|
|
755
|
-
DataListCell,
|
|
756
|
-
DataListCheck,
|
|
757
|
-
DataListAction,
|
|
758
|
-
DataListToggle,
|
|
759
|
-
DataListContent,
|
|
760
|
-
DataListItemCells,
|
|
761
|
-
DataListItemRow,
|
|
762
|
-
Dropdown,
|
|
763
|
-
DropdownItem,
|
|
764
|
-
KebabToggle
|
|
765
|
-
} from '@patternfly/react-core';
|
|
766
|
-
|
|
767
|
-
class ModifiersDataList extends React.Component {
|
|
768
|
-
constructor(props) {
|
|
769
|
-
super(props);
|
|
770
|
-
this.state = { show: true, isOpen1: false, isOpen2: false, isOpen3: false };
|
|
771
|
-
|
|
772
|
-
this.onToggle1 = isOpen1 => {
|
|
773
|
-
this.setState({ isOpen1 });
|
|
774
|
-
};
|
|
775
|
-
|
|
776
|
-
this.onToggle2 = isOpen2 => {
|
|
777
|
-
this.setState({ isOpen2 });
|
|
778
|
-
};
|
|
779
|
-
|
|
780
|
-
this.onSelect1 = event => {
|
|
781
|
-
this.setState(prevState => ({
|
|
782
|
-
isOpen1: !prevState.isOpen1
|
|
783
|
-
}));
|
|
784
|
-
};
|
|
785
|
-
|
|
786
|
-
this.onSelect2 = event => {
|
|
787
|
-
this.setState(prevState => ({
|
|
788
|
-
isOpen2: !prevState.isOpen2
|
|
789
|
-
}));
|
|
790
|
-
};
|
|
791
|
-
}
|
|
792
|
-
|
|
793
|
-
render() {
|
|
794
|
-
const previewPlaceholder = {
|
|
795
|
-
display: 'block',
|
|
796
|
-
width: '100%',
|
|
797
|
-
padding: '.25rem .5rem',
|
|
798
|
-
color: '#004e8a',
|
|
799
|
-
backgroundColor: '#def3ff',
|
|
800
|
-
border: '1px solid rgba(0,0,0,.1)',
|
|
801
|
-
borderRadius: '4px'
|
|
802
|
-
};
|
|
803
|
-
|
|
804
|
-
return [
|
|
805
|
-
<div key="example-1">
|
|
806
|
-
<h2>Default fitting - example 1</h2>
|
|
807
|
-
<DataList aria-label="Width modifier data list example 1">
|
|
808
|
-
<DataListItem aria-labelledby="width-ex1-item1">
|
|
809
|
-
<DataListItemRow>
|
|
810
|
-
<DataListCheck aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
|
|
811
|
-
<DataListItemCells
|
|
812
|
-
dataListCells={[
|
|
813
|
-
<DataListCell key="default">
|
|
814
|
-
<div style={previewPlaceholder}>
|
|
815
|
-
<b id="width-ex1-item1">default</b>
|
|
816
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
817
|
-
</div>
|
|
818
|
-
</DataListCell>,
|
|
819
|
-
<DataListCell key="default2">
|
|
820
|
-
<div style={previewPlaceholder}>
|
|
821
|
-
<b>default</b>
|
|
822
|
-
<p>
|
|
823
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
|
824
|
-
labore et dolore magna aliqua.
|
|
825
|
-
</p>
|
|
826
|
-
</div>
|
|
827
|
-
</DataListCell>
|
|
828
|
-
]}
|
|
829
|
-
/>
|
|
830
|
-
</DataListItemRow>
|
|
831
|
-
</DataListItem>
|
|
832
|
-
</DataList>
|
|
833
|
-
</div>,
|
|
834
|
-
<div key="example-2">
|
|
835
|
-
<h2>Flex modifiers - example 2</h2>
|
|
836
|
-
<DataList aria-label="Width modifier data list example 2">
|
|
837
|
-
<DataListItem aria-labelledby="width-ex2-item1">
|
|
838
|
-
<DataListItemRow>
|
|
839
|
-
<DataListCheck aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
|
|
840
|
-
<DataListItemCells
|
|
841
|
-
dataListCells={[
|
|
842
|
-
<DataListCell width={2} key="width 2">
|
|
843
|
-
<div style={previewPlaceholder}>
|
|
844
|
-
<b id="width-ex2-item1">width 2</b>
|
|
845
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
|
|
846
|
-
</div>
|
|
847
|
-
</DataListCell>,
|
|
848
|
-
<DataListCell width={4} key="width 4">
|
|
849
|
-
<div style={previewPlaceholder}>
|
|
850
|
-
<b>width 4</b>
|
|
851
|
-
<p>Lorem ipsum dolor sit amet.</p>
|
|
852
|
-
</div>
|
|
853
|
-
</DataListCell>
|
|
854
|
-
]}
|
|
855
|
-
/>
|
|
856
|
-
<DataListAction
|
|
857
|
-
aria-labelledby="width-ex2-item1 width-ex2-action1"
|
|
858
|
-
id="width-ex2-action1"
|
|
859
|
-
aria-label="Actions"
|
|
860
|
-
isPlainButtonAction
|
|
861
|
-
>
|
|
862
|
-
<Dropdown
|
|
863
|
-
isPlain
|
|
864
|
-
position={DropdownPosition.right}
|
|
865
|
-
isOpen={this.state.isOpen1}
|
|
866
|
-
onSelect={this.onSelect1}
|
|
867
|
-
toggle={<KebabToggle onToggle={this.onToggle1} />}
|
|
868
|
-
dropdownItems={[
|
|
869
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
870
|
-
<DropdownItem key="action" component="button">
|
|
871
|
-
Action
|
|
872
|
-
</DropdownItem>,
|
|
873
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
874
|
-
Disabled Link
|
|
875
|
-
</DropdownItem>
|
|
876
|
-
]}
|
|
877
|
-
/>
|
|
878
|
-
</DataListAction>
|
|
879
|
-
</DataListItemRow>
|
|
880
|
-
</DataListItem>
|
|
881
|
-
</DataList>
|
|
882
|
-
</div>,
|
|
883
|
-
<div key="example-3">
|
|
884
|
-
<h2>Flex modifiers - example 3</h2>
|
|
885
|
-
<DataList aria-label="Width modifier data list example 3">
|
|
886
|
-
<DataListItem aria-labelledby="width-ex3-item1" isExpanded={this.state.show}>
|
|
887
|
-
<DataListItemRow>
|
|
888
|
-
<DataListToggle
|
|
889
|
-
isExpanded={this.state.show}
|
|
890
|
-
id="width-ex3-toggle1"
|
|
891
|
-
aria-controls="width-ex3-expand1"
|
|
892
|
-
onClick={() => this.setState({ show: !this.state.show })}
|
|
893
|
-
/>
|
|
894
|
-
<DataListCheck aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
|
|
895
|
-
<DataListItemCells
|
|
896
|
-
dataListCells={[
|
|
897
|
-
<DataListCell width={5} key="width 5">
|
|
898
|
-
<div style={previewPlaceholder}>
|
|
899
|
-
<b id="width-ex3-item1">width 5</b>
|
|
900
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
901
|
-
</div>
|
|
902
|
-
</DataListCell>,
|
|
903
|
-
<DataListCell width={2} key="width 2">
|
|
904
|
-
<div style={previewPlaceholder}>
|
|
905
|
-
<b>width 2</b>
|
|
906
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
907
|
-
</div>
|
|
908
|
-
</DataListCell>,
|
|
909
|
-
<DataListCell key="default">
|
|
910
|
-
<div style={previewPlaceholder}>default</div>
|
|
911
|
-
</DataListCell>
|
|
912
|
-
]}
|
|
913
|
-
/>
|
|
914
|
-
<DataListAction
|
|
915
|
-
aria-labelledby="width-ex3-item1 width-ex3-action1"
|
|
916
|
-
id="width-ex3-action1"
|
|
917
|
-
aria-label="Actions"
|
|
918
|
-
isPlainButtonAction
|
|
919
|
-
>
|
|
920
|
-
<Dropdown
|
|
921
|
-
isPlain
|
|
922
|
-
position={DropdownPosition.right}
|
|
923
|
-
isOpen={this.state.isOpen2}
|
|
924
|
-
onSelect={this.onSelect2}
|
|
925
|
-
toggle={<KebabToggle onToggle={this.onToggle2} />}
|
|
926
|
-
dropdownItems={[
|
|
927
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
928
|
-
<DropdownItem key="action" component="button">
|
|
929
|
-
Action
|
|
930
|
-
</DropdownItem>,
|
|
931
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
932
|
-
Disabled Link
|
|
933
|
-
</DropdownItem>
|
|
934
|
-
]}
|
|
935
|
-
/>
|
|
936
|
-
</DataListAction>
|
|
937
|
-
</DataListItemRow>
|
|
938
|
-
<DataListContent aria-label="Primary Content Details" id="width-ex3-expand1" isHidden={!this.state.show}>
|
|
939
|
-
<p>
|
|
940
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
941
|
-
dolore magna aliqua.
|
|
942
|
-
</p>
|
|
943
|
-
</DataListContent>
|
|
944
|
-
</DataListItem>
|
|
945
|
-
</DataList>
|
|
946
|
-
</div>
|
|
947
|
-
];
|
|
948
|
-
}
|
|
949
|
-
}
|
|
55
|
+
```ts file="./DataListWidthModifiers.tsx"
|
|
950
56
|
```
|
|
951
57
|
|
|
952
58
|
### Selectable rows
|
|
953
59
|
|
|
954
|
-
```
|
|
955
|
-
import React from 'react';
|
|
956
|
-
import {
|
|
957
|
-
Button,
|
|
958
|
-
Dropdown,
|
|
959
|
-
DropdownItem,
|
|
960
|
-
DropdownPosition,
|
|
961
|
-
KebabToggle,
|
|
962
|
-
DataList,
|
|
963
|
-
DataListItem,
|
|
964
|
-
DataListCell,
|
|
965
|
-
DataListItemRow,
|
|
966
|
-
DataListCheck,
|
|
967
|
-
DataListItemCells,
|
|
968
|
-
DataListAction
|
|
969
|
-
} from '@patternfly/react-core';
|
|
970
|
-
|
|
971
|
-
class SelectableDataList extends React.Component {
|
|
972
|
-
constructor(props) {
|
|
973
|
-
super(props);
|
|
974
|
-
this.state = {
|
|
975
|
-
isOpen1: false,
|
|
976
|
-
isOpen2: false,
|
|
977
|
-
selectedDataListItemId: ''
|
|
978
|
-
};
|
|
979
|
-
|
|
980
|
-
this.onToggle1 = isOpen1 => {
|
|
981
|
-
this.setState({ isOpen1 });
|
|
982
|
-
};
|
|
983
|
-
|
|
984
|
-
this.onToggle2 = isOpen2 => {
|
|
985
|
-
this.setState({ isOpen2 });
|
|
986
|
-
};
|
|
987
|
-
|
|
988
|
-
this.onSelect1 = event => {
|
|
989
|
-
this.setState(prevState => ({
|
|
990
|
-
isOpen1: !prevState.isOpen1
|
|
991
|
-
}));
|
|
992
|
-
};
|
|
993
|
-
|
|
994
|
-
this.onSelect2 = event => {
|
|
995
|
-
this.setState(prevState => ({
|
|
996
|
-
isOpen2: !prevState.isOpen2
|
|
997
|
-
}));
|
|
998
|
-
};
|
|
999
|
-
|
|
1000
|
-
this.onSelectDataListItem = id => {
|
|
1001
|
-
this.setState({ selectedDataListItemId: id });
|
|
1002
|
-
};
|
|
1003
|
-
}
|
|
1004
|
-
|
|
1005
|
-
render() {
|
|
1006
|
-
return (
|
|
1007
|
-
<React.Fragment>
|
|
1008
|
-
<DataList
|
|
1009
|
-
aria-label="selectable data list example"
|
|
1010
|
-
selectedDataListItemId={this.state.selectedDataListItemId}
|
|
1011
|
-
onSelectDataListItem={this.onSelectDataListItem}
|
|
1012
|
-
>
|
|
1013
|
-
{!this.state.isDeleted && (
|
|
1014
|
-
<DataListItem aria-labelledby="selectable-action-item1" id="item1">
|
|
1015
|
-
<DataListItemRow>
|
|
1016
|
-
<DataListItemCells
|
|
1017
|
-
dataListCells={[
|
|
1018
|
-
<DataListCell key="primary content">
|
|
1019
|
-
<span id="selectable-action-item1">Single actionable Primary content</span>
|
|
1020
|
-
</DataListCell>,
|
|
1021
|
-
<DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
|
|
1022
|
-
]}
|
|
1023
|
-
/>
|
|
1024
|
-
<DataListAction
|
|
1025
|
-
aria-labelledby="selectable-action-item1 selectable-action-action1"
|
|
1026
|
-
id="selectable-action-action1"
|
|
1027
|
-
aria-label="Actions"
|
|
1028
|
-
isPlainButtonAction
|
|
1029
|
-
>
|
|
1030
|
-
<Dropdown
|
|
1031
|
-
isPlain
|
|
1032
|
-
position={DropdownPosition.right}
|
|
1033
|
-
isOpen={this.state.isOpen1}
|
|
1034
|
-
onSelect={this.onSelect1}
|
|
1035
|
-
toggle={<KebabToggle onToggle={this.onToggle1} />}
|
|
1036
|
-
dropdownItems={[
|
|
1037
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
1038
|
-
<DropdownItem key="action" component="button">
|
|
1039
|
-
Action
|
|
1040
|
-
</DropdownItem>,
|
|
1041
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
1042
|
-
Disabled Link
|
|
1043
|
-
</DropdownItem>
|
|
1044
|
-
]}
|
|
1045
|
-
/>
|
|
1046
|
-
</DataListAction>
|
|
1047
|
-
</DataListItemRow>
|
|
1048
|
-
</DataListItem>
|
|
1049
|
-
)}
|
|
1050
|
-
<DataListItem aria-labelledby="selectable-actions-item2" id="item2">
|
|
1051
|
-
<DataListItemRow>
|
|
1052
|
-
<DataListItemCells
|
|
1053
|
-
dataListCells={[
|
|
1054
|
-
<DataListCell key="primary content">
|
|
1055
|
-
<span id="selectable-actions-item2">Selectable actions Primary content</span>
|
|
1056
|
-
</DataListCell>,
|
|
1057
|
-
<DataListCell key="secondary content">Selectable actions Secondary content</DataListCell>
|
|
1058
|
-
]}
|
|
1059
|
-
/>
|
|
1060
|
-
<DataListAction
|
|
1061
|
-
aria-labelledby="selectable-actions-item2 selectable-actions-action2"
|
|
1062
|
-
id="selectable-actions-action2"
|
|
1063
|
-
aria-label="Actions"
|
|
1064
|
-
isPlainButtonAction
|
|
1065
|
-
>
|
|
1066
|
-
<Dropdown
|
|
1067
|
-
isPlain
|
|
1068
|
-
position={DropdownPosition.right}
|
|
1069
|
-
isOpen={this.state.isOpen2}
|
|
1070
|
-
onSelect={this.onSelect2}
|
|
1071
|
-
toggle={<KebabToggle onToggle={this.onToggle2} />}
|
|
1072
|
-
dropdownItems={[
|
|
1073
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
1074
|
-
<DropdownItem key="action" component="button">
|
|
1075
|
-
Action
|
|
1076
|
-
</DropdownItem>,
|
|
1077
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
1078
|
-
Disabled Link
|
|
1079
|
-
</DropdownItem>
|
|
1080
|
-
]}
|
|
1081
|
-
/>
|
|
1082
|
-
</DataListAction>
|
|
1083
|
-
</DataListItemRow>
|
|
1084
|
-
</DataListItem>
|
|
1085
|
-
</DataList>
|
|
1086
|
-
</React.Fragment>
|
|
1087
|
-
);
|
|
1088
|
-
}
|
|
1089
|
-
}
|
|
60
|
+
```ts file="./DataListSelectableRows.tsx"
|
|
1090
61
|
```
|
|
1091
62
|
|
|
1092
63
|
### Controlling text
|
|
1093
64
|
|
|
1094
|
-
```
|
|
1095
|
-
import React from 'react';
|
|
1096
|
-
import {
|
|
1097
|
-
Button,
|
|
1098
|
-
DataList,
|
|
1099
|
-
DataListItem,
|
|
1100
|
-
DataListItemRow,
|
|
1101
|
-
DataListItemCells,
|
|
1102
|
-
DataListCell,
|
|
1103
|
-
DataListCheck,
|
|
1104
|
-
DataListAction,
|
|
1105
|
-
DataListWrapModifier
|
|
1106
|
-
} from '@patternfly/react-core';
|
|
1107
|
-
|
|
1108
|
-
<DataList aria-label="Simple data list example">
|
|
1109
|
-
<DataListItem aria-labelledby="simple-item1">
|
|
1110
|
-
<DataListItemRow>
|
|
1111
|
-
<DataListItemCells
|
|
1112
|
-
dataListCells={[
|
|
1113
|
-
<DataListCell key="primary content" wrapModifier={DataListWrapModifier.breakWord}>
|
|
1114
|
-
<span id="simple-item1">Primary content</span>
|
|
1115
|
-
</DataListCell>,
|
|
1116
|
-
<DataListCell key="secondary content" wrapModifier={DataListWrapModifier.truncate}>
|
|
1117
|
-
Really really really really really really really really really really really really really really long
|
|
1118
|
-
description that should be truncated before it ends
|
|
1119
|
-
</DataListCell>
|
|
1120
|
-
]}
|
|
1121
|
-
/>
|
|
1122
|
-
</DataListItemRow>
|
|
1123
|
-
</DataListItem>
|
|
1124
|
-
</DataList>
|
|
65
|
+
```ts file="./DataListControllingText.tsx"
|
|
1125
66
|
```
|
|
1126
67
|
|
|
1127
68
|
### Draggable
|
|
@@ -1129,135 +70,11 @@ import {
|
|
|
1129
70
|
Draggable data lists used to have their own HTML5-based API for drag and drop, which wasn't able to fulfill requirements such as custom styling on items being dragged. So we wrote generic `DragDrop`, `Draggable`, and `Droppable` components for this purpose. Use those new components instead of the deprecated (and buggy!) HTML5-based API.
|
|
1130
71
|
|
|
1131
72
|
Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
|
|
1132
|
-
```js isBeta
|
|
1133
|
-
import React from 'react';
|
|
1134
|
-
import {
|
|
1135
|
-
DataList,
|
|
1136
|
-
DataListItem,
|
|
1137
|
-
DataListCell,
|
|
1138
|
-
DataListItemRow,
|
|
1139
|
-
DataListCheck,
|
|
1140
|
-
DataListControl,
|
|
1141
|
-
DataListDragButton,
|
|
1142
|
-
DataListItemCells,
|
|
1143
|
-
DragDrop,
|
|
1144
|
-
Draggable,
|
|
1145
|
-
Droppable
|
|
1146
|
-
} from '@patternfly/react-core';
|
|
1147
|
-
|
|
1148
|
-
const getItems = count =>
|
|
1149
|
-
Array.from({ length: count }, (v, k) => k).map(k => ({
|
|
1150
|
-
id: `item-${k}`,
|
|
1151
|
-
content: `item ${k} `.repeat(k === 4 ? 20 : 1)
|
|
1152
|
-
}));
|
|
1153
|
-
|
|
1154
|
-
const reorder = (list, startIndex, endIndex) => {
|
|
1155
|
-
const result = Array.from(list);
|
|
1156
|
-
const [removed] = result.splice(startIndex, 1);
|
|
1157
|
-
result.splice(endIndex, 0, removed);
|
|
1158
|
-
return result;
|
|
1159
|
-
};
|
|
1160
73
|
|
|
1161
|
-
|
|
1162
|
-
const [items, setItems] = React.useState(getItems(10));
|
|
1163
|
-
const [liveText, setLiveText] = React.useState('');
|
|
1164
|
-
|
|
1165
|
-
function onDrag(source) {
|
|
1166
|
-
setLiveText(`Started dragging ${items[source.index].content}`);
|
|
1167
|
-
// Return true to allow drag
|
|
1168
|
-
return true;
|
|
1169
|
-
}
|
|
1170
|
-
|
|
1171
|
-
function onDragMove(source, dest) {
|
|
1172
|
-
const newText = dest
|
|
1173
|
-
? `Move ${items[source.index].content} to ${items[dest.index].content}`
|
|
1174
|
-
: 'Invalid drop zone';
|
|
1175
|
-
if (newText !== liveText) {
|
|
1176
|
-
setLiveText(newText);
|
|
1177
|
-
}
|
|
1178
|
-
}
|
|
1179
|
-
|
|
1180
|
-
function onDrop(source, dest) {
|
|
1181
|
-
if (dest) {
|
|
1182
|
-
const newItems = reorder(
|
|
1183
|
-
items,
|
|
1184
|
-
source.index,
|
|
1185
|
-
dest.index
|
|
1186
|
-
);
|
|
1187
|
-
setItems(newItems);
|
|
1188
|
-
|
|
1189
|
-
setLiveText('Dragging finished.');
|
|
1190
|
-
return true; // Signal that this is a valid drop and not to animate the item returning home.
|
|
1191
|
-
} else {
|
|
1192
|
-
setLiveText('Dragging cancelled. List unchanged.');
|
|
1193
|
-
}
|
|
1194
|
-
}
|
|
1195
|
-
|
|
1196
|
-
return (
|
|
1197
|
-
<DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>
|
|
1198
|
-
<Droppable hasNoWrapper>
|
|
1199
|
-
<DataList aria-label="draggable data list example" isCompact>
|
|
1200
|
-
{items.map(({id, content}) =>
|
|
1201
|
-
<Draggable key={id} hasNoWrapper>
|
|
1202
|
-
<DataListItem aria-labelledby={id} ref={React.createRef()}>
|
|
1203
|
-
<DataListItemRow>
|
|
1204
|
-
<DataListControl>
|
|
1205
|
-
<DataListDragButton
|
|
1206
|
-
aria-label="Reorder"
|
|
1207
|
-
aria-labelledby={id}
|
|
1208
|
-
aria-describedby="Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
|
|
1209
|
-
aria-pressed="false"
|
|
1210
|
-
/>
|
|
1211
|
-
<DataListCheck aria-labelledby={id} name={id} otherControls />
|
|
1212
|
-
</DataListControl>
|
|
1213
|
-
<DataListItemCells
|
|
1214
|
-
dataListCells={[
|
|
1215
|
-
<DataListCell key={id}>
|
|
1216
|
-
<span id={id}>{content}</span>
|
|
1217
|
-
</DataListCell>
|
|
1218
|
-
]}
|
|
1219
|
-
/>
|
|
1220
|
-
</DataListItemRow>
|
|
1221
|
-
</DataListItem>
|
|
1222
|
-
</Draggable>
|
|
1223
|
-
)}
|
|
1224
|
-
</DataList>
|
|
1225
|
-
</Droppable>
|
|
1226
|
-
<div className="pf-screen-reader" aria-live="assertive">
|
|
1227
|
-
{liveText}
|
|
1228
|
-
</div>
|
|
1229
|
-
</DragDrop>
|
|
1230
|
-
);
|
|
1231
|
-
};
|
|
74
|
+
```ts isBeta file="./DataListDraggable.tsx"
|
|
1232
75
|
```
|
|
1233
76
|
|
|
1234
77
|
### Small grid breakpoint
|
|
1235
78
|
|
|
1236
|
-
```
|
|
1237
|
-
import React from 'react';
|
|
1238
|
-
import {
|
|
1239
|
-
DataList,
|
|
1240
|
-
DataListItem,
|
|
1241
|
-
DataListItemRow,
|
|
1242
|
-
DataListItemCells,
|
|
1243
|
-
DataListCell
|
|
1244
|
-
} from '@patternfly/react-core';
|
|
1245
|
-
|
|
1246
|
-
<DataList aria-label="Simple data list example" gridBreakpoint="sm">
|
|
1247
|
-
<DataListItem aria-labelledby="simple-item1">
|
|
1248
|
-
<DataListItemRow>
|
|
1249
|
-
<DataListItemCells
|
|
1250
|
-
dataListCells={[
|
|
1251
|
-
<DataListCell key="primary content">
|
|
1252
|
-
<span id="simple-item1">Primary content</span>
|
|
1253
|
-
</DataListCell>,
|
|
1254
|
-
<DataListCell key="secondary content">
|
|
1255
|
-
Really really really really really really really really really really really really really really long
|
|
1256
|
-
description that should be truncated before it ends
|
|
1257
|
-
</DataListCell>
|
|
1258
|
-
]}
|
|
1259
|
-
/>
|
|
1260
|
-
</DataListItemRow>
|
|
1261
|
-
</DataListItem>
|
|
1262
|
-
</DataList>
|
|
79
|
+
```ts file="./DataListSmGridBreakpoint.tsx"
|
|
1263
80
|
```
|