@@ -18,6 +18,8 @@ import { Score } from '../dynamic-icons/score/example';
18
18
import SvgIcon from '../../shared/svg-icon' ;
19
19
import { Radio } from '../radio-group/base/example' ;
20
20
21
+ const checkboxRadioGroupHeaderId = 'check-group-header' ;
22
+
21
23
export const InlineEditTableContainer = props => (
22
24
< div className = "slds-table_edit_container slds-is-relative" >
23
25
{ props . children }
@@ -51,18 +53,18 @@ export const AdvancedDataTable = props => (
51
53
/**
52
54
* @name Thead - thead block for advanced, inline, and product edit grids
53
55
* @param {* } props
56
+ * @prop {array } columnHeaderIcons - List of column names->icon name blocks which show an icon
54
57
* @prop {array } columns - Grid columns
55
58
* @prop {boolean } actionableMode - Specifies whether the grid is in actionable or navigation mode
56
- * @prop {array } columnHeaderIcons - List of column names->icon name blocks which show an icon
57
59
* @prop {boolean } hasErrorColumn - Specifies whether the grid has a errors column
58
60
* @prop {boolean } hasFocus - Specifies whether a cell in the thead is in user focus
59
- * @prop {boolean } hasNoSelectability - Specifies whether the thead should not contain a "select all" checkbox
60
61
* @prop {boolean } hasMenus - Specifies whether the cells in the thead have a menu button
62
+ * @prop {boolean } hasNoSelectability - Specifies whether the thead should not contain a "select all" checkbox
63
+ * @prop {boolean } isSingleSelect - Specifies if the row selection uses radio buttons
61
64
* @prop {boolean } selectAll - Specifies whether the select all checkbox is marked
62
65
* @prop {string } mainColumnWidth - Specifies width of main columns
63
66
* @prop {string } singleColumnWidth - Specifies width of a specific column
64
67
* @prop {string } sortDirection - Specifies the sort direction of a specific column
65
- * @prop {string } radioGroupId - common id of radio group
66
68
*/
67
69
export const Thead = props => {
68
70
const selectAllColumnWidth = props . hasErrorColumn ? '2rem' : '3.25rem' ;
@@ -73,7 +75,7 @@ export const Thead = props => {
73
75
< tr className = "slds-line-height_reset" >
74
76
{ props . hasErrorColumn ? < ErrorsTh /> : null }
75
77
76
- { props . hasNoSelectability ? null : (
78
+ { props . hasNoSelectability || props . isSingleSelect ? null : (
77
79
< SelectAllTh
78
80
actionableMode = { props . actionableMode }
79
81
checked = { props . selectAll }
@@ -82,13 +84,9 @@ export const Thead = props => {
82
84
/>
83
85
) }
84
86
85
- { props . radioGroupId ? (
86
- < RadioGroupTh
87
- style = { { width : selectAllColumnWidth } }
88
- radioGroupId = { props . radioGroupId }
89
- label = { props . label }
90
- />
91
- ) : null }
87
+ { props . isSingleSelect && (
88
+ < RadioGroupTh style = { { width : selectAllColumnWidth } } />
89
+ ) }
92
90
93
91
{ _ . times ( props . columns . length , i => (
94
92
< Th
@@ -278,12 +276,17 @@ export let Th = props => {
278
276
*/
279
277
export const SelectAllTh = props => (
280
278
< th style = { props . style } className = { props . className } scope = "col" >
279
+ < span id = { checkboxRadioGroupHeaderId } className = "slds-assistive-text" >
280
+ Choose a row
281
+ </ span >
281
282
< div className = "slds-th__action slds-th__action_form" >
282
283
< Checkbox
283
284
tabIndex = { props . actionableMode ? '0' : '-1' }
285
+ labelId = "check-select-all-label"
284
286
label = "Select All"
285
287
hideLabel
286
288
checked = { props . checked ? true : null }
289
+ groupId = { checkboxRadioGroupHeaderId }
287
290
/>
288
291
</ div >
289
292
</ th >
@@ -293,17 +296,12 @@ export const SelectAllTh = props => (
293
296
* @name RadioGroupTh - Radio group column header
294
297
* @param {* } props
295
298
* @prop {object } style - React style object
296
- * @prop {string } radioGroupId - common id of radio group
297
- * @prop {string } label - header text for radio group column
298
299
*/
299
300
export const RadioGroupTh = props => (
300
- < th
301
- className = { props . className }
302
- scope = "col"
303
- style = { props . style }
304
- id = { props . radioGroupId }
305
- >
306
- < span className = "slds-assistive-text" > { props . label } </ span >
301
+ < th className = { props . className } scope = "col" style = { props . style } >
302
+ < span id = "radio-group-header" className = "slds-assistive-text" >
303
+ Choose a row to select
304
+ </ span >
307
305
</ th >
308
306
) ;
309
307
@@ -337,6 +335,7 @@ export const ErrorsTh = props => (
337
335
* @prop {boolean } actionableMode - Specifies whether the grid is in actionable or navigation mode
338
336
* @prop {boolean } hasFocus - Specifies whether a specific cell is in focus
339
337
* @prop {boolean } hasScore - Specifies whether a row has a score cell
338
+ * @prop {boolean } isSingleSelect - Specifies whether to use a radio button for selection or not
340
339
* @prop {boolean } rowSelected
341
340
* @prop {integer } index - Row index in the Grid
342
341
* @prop {string } accountName
@@ -349,7 +348,6 @@ export const ErrorsTh = props => (
349
348
* @prop {string } contact
350
349
* @prop {string } recordName
351
350
* @prop {string } stage
352
- * @prop {string } radioGroupId - common id of radio group
353
351
*/
354
352
export const AdvancedDataTableTr = props => (
355
353
< AdvancedDataTableTrElement
@@ -361,7 +359,7 @@ export const AdvancedDataTableTr = props => (
361
359
inputTabIndex = { props . actionableMode ? '0' : '-1' }
362
360
checked = { props . rowSelected }
363
361
index = { props . index }
364
- radioGroupId = { props . radioGroupId }
362
+ isSingleSelect = { props . isSingleSelect }
365
363
/>
366
364
< ReadOnlyBodyTh
367
365
actionableMode = { props . actionableMode }
@@ -484,11 +482,11 @@ export const AdvancedDataTableBodyTh = props => {
484
482
* @prop {boolean } checked - Set checked on the cell checkbox
485
483
* @prop {boolean } hasFocus - Determines whether the cell is in user focus
486
484
* @prop {boolean } isEditable - Determines whether the cell is editable
485
+ * @prop {boolean } isSingleSelect - Specifies whether to use a radio button for selection or not
487
486
* @prop {integer } cellTabIndex - Set tabindex on the cell
488
- * @prop {integer } inputTabIndex - Set tabindex on the checkbox
489
487
* @prop {integer } index - Grid row index
488
+ * @prop {integer } inputTabIndex - Set tabindex on the checkbox
490
489
* @prop {string } className
491
- * @prop {string } radioGroupId - common id of radio group
492
490
*/
493
491
export const SelectRowTd = props => (
494
492
< AdvancedDataTableTd
@@ -497,22 +495,24 @@ export const SelectRowTd = props => (
497
495
isEditable = { props . isEditable }
498
496
tabIndex = { props . cellTabIndex }
499
497
>
500
- { props . radioGroupId ? (
498
+ { props . isSingleSelect ? (
501
499
< Radio
502
500
checked = { props . checked }
503
501
hideLabel
504
502
id = { `radio-0${ props . index } ` }
505
503
labelId = { `radio-button-label-0${ props . index } ` }
506
504
label = { `Select item ${ props . index } ` }
507
- radioGroupId = { props . radioGroupId }
505
+ groupId = "radio-group-header"
508
506
tabIndex = { props . inputTabIndex }
509
507
/>
510
508
) : (
511
509
< Checkbox
512
510
checked = { props . checked }
513
511
hideLabel
512
+ labelId = { `check-button-label-0${ props . index } ` }
514
513
id = { `checkbox-0${ props . index } ` }
515
514
label = { `Select item ${ props . index } ` }
515
+ groupId = { checkboxRadioGroupHeaderId }
516
516
tabIndex = { props . inputTabIndex }
517
517
/>
518
518
) }
0 commit comments