fix(data-table): cancelling selection should uncheck batch selection checkbox

This commit is contained in:
Eric Liu 2020-10-26 08:24:20 -07:00
commit a0caa12a27
3 changed files with 148 additions and 136 deletions

View file

@ -2677,14 +2677,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 7427, "start": 7574,
"end": 7445, "end": 7592,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 7433, "start": 7580,
"end": 7444, "end": 7591,
"type": "Text", "type": "Text",
"raw": "cell-header", "raw": "cell-header",
"data": "cell-header" "data": "cell-header"
@ -2692,26 +2692,26 @@
] ]
}, },
{ {
"start": 7446, "start": 7593,
"end": 7463, "end": 7610,
"type": "Attribute", "type": "Attribute",
"name": "header", "name": "header",
"value": [ "value": [
{ {
"start": 7454, "start": 7601,
"end": 7462, "end": 7609,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 7455, "start": 7602,
"end": 7461, "end": 7608,
"loc": { "loc": {
"start": { "start": {
"line": 260, "line": 265,
"column": 46 "column": 46
}, },
"end": { "end": {
"line": 260, "line": 265,
"column": 52 "column": 52
} }
}, },
@ -2723,34 +2723,34 @@
], ],
"children": [ "children": [
{ {
"start": 7464, "start": 7611,
"end": 7478, "end": 7625,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 7465, "start": 7612,
"end": 7477, "end": 7624,
"loc": { "loc": {
"start": { "start": {
"line": 260, "line": 265,
"column": 56 "column": 56
}, },
"end": { "end": {
"line": 260, "line": 265,
"column": 68 "column": 68
} }
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 7465, "start": 7612,
"end": 7471, "end": 7618,
"loc": { "loc": {
"start": { "start": {
"line": 260, "line": 265,
"column": 56 "column": 56
}, },
"end": { "end": {
"line": 260, "line": 265,
"column": 62 "column": 62
} }
}, },
@ -2758,15 +2758,15 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 7472, "start": 7619,
"end": 7477, "end": 7624,
"loc": { "loc": {
"start": { "start": {
"line": 260, "line": 265,
"column": 63 "column": 63
}, },
"end": { "end": {
"line": 260, "line": 265,
"column": 68 "column": 68
} }
}, },
@ -2786,14 +2786,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 10474, "start": 10621,
"end": 10485, "end": 10632,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 10480, "start": 10627,
"end": 10484, "end": 10631,
"type": "Text", "type": "Text",
"raw": "cell", "raw": "cell",
"data": "cell" "data": "cell"
@ -2801,26 +2801,26 @@
] ]
}, },
{ {
"start": 10486, "start": 10633,
"end": 10497, "end": 10644,
"type": "Attribute", "type": "Attribute",
"name": "row", "name": "row",
"value": [ "value": [
{ {
"start": 10491, "start": 10638,
"end": 10496, "end": 10643,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 10492, "start": 10639,
"end": 10495, "end": 10642,
"loc": { "loc": {
"start": { "start": {
"line": 341, "line": 346,
"column": 38 "column": 38
}, },
"end": { "end": {
"line": 341, "line": 346,
"column": 41 "column": 41
} }
}, },
@ -2830,26 +2830,26 @@
] ]
}, },
{ {
"start": 10498, "start": 10645,
"end": 10511, "end": 10658,
"type": "Attribute", "type": "Attribute",
"name": "cell", "name": "cell",
"value": [ "value": [
{ {
"start": 10504, "start": 10651,
"end": 10510, "end": 10657,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 10505, "start": 10652,
"end": 10509, "end": 10656,
"loc": { "loc": {
"start": { "start": {
"line": 341, "line": 346,
"column": 51 "column": 51
}, },
"end": { "end": {
"line": 341, "line": 346,
"column": 55 "column": 55
} }
}, },
@ -2861,69 +2861,69 @@
], ],
"children": [ "children": [
{ {
"start": 10512, "start": 10659,
"end": 10529, "end": 10676,
"type": "Text", "type": "Text",
"raw": "\n ", "raw": "\n ",
"data": "\n " "data": "\n "
}, },
{ {
"start": 10529, "start": 10676,
"end": 10595, "end": 10742,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "ConditionalExpression", "type": "ConditionalExpression",
"start": 10530, "start": 10677,
"end": 10594, "end": 10741,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 17 "column": 17
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 81 "column": 81
} }
}, },
"test": { "test": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 10530, "start": 10677,
"end": 10548, "end": 10695,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 17 "column": 17
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 35 "column": 35
} }
}, },
"object": { "object": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 10530, "start": 10677,
"end": 10540, "end": 10687,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 17 "column": 17
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 27 "column": 27
} }
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 10530, "start": 10677,
"end": 10537, "end": 10684,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 17 "column": 17
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 24 "column": 24
} }
}, },
@ -2931,15 +2931,15 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 10538, "start": 10685,
"end": 10539, "end": 10686,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 25 "column": 25
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 26 "column": 26
} }
}, },
@ -2950,15 +2950,15 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 10541, "start": 10688,
"end": 10548, "end": 10695,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 28 "column": 28
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 35 "column": 35
} }
}, },
@ -2969,57 +2969,57 @@
}, },
"consequent": { "consequent": {
"type": "CallExpression", "type": "CallExpression",
"start": 10551, "start": 10698,
"end": 10581, "end": 10728,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 38 "column": 38
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 68 "column": 68
} }
}, },
"callee": { "callee": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 10551, "start": 10698,
"end": 10569, "end": 10716,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 38 "column": 38
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 56 "column": 56
} }
}, },
"object": { "object": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 10551, "start": 10698,
"end": 10561, "end": 10708,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 38 "column": 38
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 48 "column": 48
} }
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 10551, "start": 10698,
"end": 10558, "end": 10705,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 38 "column": 38
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 45 "column": 45
} }
}, },
@ -3027,15 +3027,15 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 10559, "start": 10706,
"end": 10560, "end": 10707,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 46 "column": 46
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 47 "column": 47
} }
}, },
@ -3046,15 +3046,15 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 10562, "start": 10709,
"end": 10569, "end": 10716,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 49 "column": 49
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 56 "column": 56
} }
}, },
@ -3066,29 +3066,29 @@
"arguments": [ "arguments": [
{ {
"type": "MemberExpression", "type": "MemberExpression",
"start": 10570, "start": 10717,
"end": 10580, "end": 10727,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 57 "column": 57
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 67 "column": 67
} }
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 10570, "start": 10717,
"end": 10574, "end": 10721,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 57 "column": 57
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 61 "column": 61
} }
}, },
@ -3096,15 +3096,15 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 10575, "start": 10722,
"end": 10580, "end": 10727,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 62 "column": 62
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 67 "column": 67
} }
}, },
@ -3118,29 +3118,29 @@
}, },
"alternate": { "alternate": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 10584, "start": 10731,
"end": 10594, "end": 10741,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 71 "column": 71
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 81 "column": 81
} }
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 10584, "start": 10731,
"end": 10588, "end": 10735,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 71 "column": 71
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 75 "column": 75
} }
}, },
@ -3148,15 +3148,15 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 10589, "start": 10736,
"end": 10594, "end": 10741,
"loc": { "loc": {
"start": { "start": {
"line": 342, "line": 347,
"column": 76 "column": 76
}, },
"end": { "end": {
"line": 342, "line": 347,
"column": 81 "column": 81
} }
}, },
@ -3168,8 +3168,8 @@
} }
}, },
{ {
"start": 10595, "start": 10742,
"end": 10610, "end": 10757,
"type": "Text", "type": "Text",
"raw": "\n ", "raw": "\n ",
"data": "\n " "data": "\n "
@ -3184,14 +3184,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 11146, "start": 11293,
"end": 11165, "end": 11312,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 11152, "start": 11299,
"end": 11164, "end": 11311,
"type": "Text", "type": "Text",
"raw": "expanded-row", "raw": "expanded-row",
"data": "expanded-row" "data": "expanded-row"
@ -3199,26 +3199,26 @@
] ]
}, },
{ {
"start": 11166, "start": 11313,
"end": 11177, "end": 11324,
"type": "Attribute", "type": "Attribute",
"name": "row", "name": "row",
"value": [ "value": [
{ {
"start": 11171, "start": 11318,
"end": 11176, "end": 11323,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 11172, "start": 11319,
"end": 11175, "end": 11322,
"loc": { "loc": {
"start": { "start": {
"line": 361, "line": 366,
"column": 48 "column": 48
}, },
"end": { "end": {
"line": 361, "line": 366,
"column": 51 "column": 51
} }
}, },

View file

@ -22,9 +22,16 @@
* @type {string} [id] * @type {string} [id]
*/ */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
</script> </script>
<input <input
bind:this="{ref}"
type="checkbox" type="checkbox"
class:bx--checkbox="{true}" class:bx--checkbox="{true}"
checked="{indeterminate ? false : checked}" checked="{indeterminate ? false : checked}"

View file

@ -131,7 +131,9 @@
tableSortable, tableSortable,
batchSelectedIds, batchSelectedIds,
resetSelectedRowIds: () => { resetSelectedRowIds: () => {
selectAll = false;
selectedRowIds = []; selectedRowIds = [];
if (refSelectAll) refSelectAll.checked = false;
}, },
add: (id) => { add: (id) => {
headerItems.update((_) => [..._, id]); headerItems.update((_) => [..._, id]);
@ -147,6 +149,8 @@
); );
let selectAll = false; let selectAll = false;
let refSelectAll = null;
$: batchSelectedIds.set(selectedRowIds); $: batchSelectedIds.set(selectedRowIds);
$: indeterminate = $: indeterminate =
selectedRowIds.length > 0 && selectedRowIds.length < rows.length; selectedRowIds.length > 0 && selectedRowIds.length < rows.length;
@ -221,6 +225,7 @@
{#if batchSelection && !radio} {#if batchSelection && !radio}
<th scope="col" class:bx--table-column-checkbox="{true}"> <th scope="col" class:bx--table-column-checkbox="{true}">
<InlineCheckbox <InlineCheckbox
bind:ref="{refSelectAll}"
aria-label="Select all rows" aria-label="Select all rows"
checked="{selectAll}" checked="{selectAll}"
indeterminate="{indeterminate}" indeterminate="{indeterminate}"