@openedx/paragon 22.20.5 → 22.20.6
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/dist/DataTable/filters/CheckboxFilter.js +1 -1
- package/dist/DataTable/filters/CheckboxFilter.js.map +1 -1
- package/package.json +1 -1
- package/src/DataTable/README.md +12 -12
- package/src/DataTable/filters/CheckboxFilter.jsx +1 -1
- package/src/DataTable/filters/tests/CheckboxFilter.test.jsx +31 -0
- package/src/DataTable/tablecontrolbar.mdx +4 -4
- package/src/DataTable/tablefilters.mdx +8 -8
|
@@ -43,7 +43,7 @@ function CheckboxFilter(_ref) {
|
|
|
43
43
|
} = _ref2;
|
|
44
44
|
return /*#__PURE__*/React.createElement(Form.Checkbox, {
|
|
45
45
|
key: `${headerBasedId}${name}`,
|
|
46
|
-
value:
|
|
46
|
+
value: value,
|
|
47
47
|
checked: checkedBoxes.includes(value),
|
|
48
48
|
onChange: () => changeCheckbox(value),
|
|
49
49
|
"aria-label": name
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxFilter.js","names":["React","useRef","useMemo","PropTypes","Form","FormLabel","Badge","Stack","newId","CheckboxFilter","_ref","column","filterValue","setFilter","Header","filterChoices","getHeaderProps","ariaLabel","key","checkedBoxes","changeCheckbox","value","includes","newCheckedBoxes","filter","val","push","headerBasedId","createElement","Group","role","current","id","className","CheckboxSet","name","map","_ref2","number","Checkbox","checked","onChange","direction","gap","undefined","variant","propTypes","shape","func","isRequired","oneOfType","elementType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/CheckboxFilter.jsx"],"sourcesContent":["import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Badge from '../../Badge';\nimport Stack from '../../Stack';\nimport { newId } from '../../utils';\n\nfunction CheckboxFilter({\n column: {\n filterValue, setFilter, Header, filterChoices, getHeaderProps,\n },\n}) {\n // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n const ariaLabel = useRef(newId(`checkbox-filter-label-${getHeaderProps().key}-`));\n\n const checkedBoxes = filterValue || [];\n const changeCheckbox = (value) => {\n if (checkedBoxes.includes(value)) {\n const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n return setFilter(newCheckedBoxes);\n }\n checkedBoxes.push(value);\n return setFilter(checkedBoxes);\n };\n const headerBasedId = useMemo(() => `checkbox-filter-check-${getHeaderProps().key}-`, [getHeaderProps]);\n\n return (\n <Form.Group role=\"group\" aria-labelledby={ariaLabel.current}>\n <FormLabel id={ariaLabel.current} className=\"pgn__checkbox-filter-label\">{Header}</FormLabel>\n <Form.CheckboxSet name={Header} value={checkedBoxes}>\n {filterChoices.map(({ name, number, value }) => (\n <Form.Checkbox\n key={`${headerBasedId}${name}`}\n value={
|
|
1
|
+
{"version":3,"file":"CheckboxFilter.js","names":["React","useRef","useMemo","PropTypes","Form","FormLabel","Badge","Stack","newId","CheckboxFilter","_ref","column","filterValue","setFilter","Header","filterChoices","getHeaderProps","ariaLabel","key","checkedBoxes","changeCheckbox","value","includes","newCheckedBoxes","filter","val","push","headerBasedId","createElement","Group","role","current","id","className","CheckboxSet","name","map","_ref2","number","Checkbox","checked","onChange","direction","gap","undefined","variant","propTypes","shape","func","isRequired","oneOfType","elementType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/CheckboxFilter.jsx"],"sourcesContent":["import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Badge from '../../Badge';\nimport Stack from '../../Stack';\nimport { newId } from '../../utils';\n\nfunction CheckboxFilter({\n column: {\n filterValue, setFilter, Header, filterChoices, getHeaderProps,\n },\n}) {\n // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n const ariaLabel = useRef(newId(`checkbox-filter-label-${getHeaderProps().key}-`));\n\n const checkedBoxes = filterValue || [];\n const changeCheckbox = (value) => {\n if (checkedBoxes.includes(value)) {\n const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n return setFilter(newCheckedBoxes);\n }\n checkedBoxes.push(value);\n return setFilter(checkedBoxes);\n };\n const headerBasedId = useMemo(() => `checkbox-filter-check-${getHeaderProps().key}-`, [getHeaderProps]);\n\n return (\n <Form.Group role=\"group\" aria-labelledby={ariaLabel.current}>\n <FormLabel id={ariaLabel.current} className=\"pgn__checkbox-filter-label\">{Header}</FormLabel>\n <Form.CheckboxSet name={Header} value={checkedBoxes}>\n {filterChoices.map(({ name, number, value }) => (\n <Form.Checkbox\n key={`${headerBasedId}${name}`}\n value={value}\n checked={checkedBoxes.includes(value)}\n onChange={() => changeCheckbox(value)}\n aria-label={name}\n >\n <Stack direction=\"horizontal\" gap={2}>\n {name} {number !== undefined && <Badge variant=\"light\">{number}</Badge>}\n </Stack>\n </Form.Checkbox>\n ))}\n </Form.CheckboxSet>\n </Form.Group>\n );\n}\n\nCheckboxFilter.propTypes = {\n /**\n * Specifies a column object.\n *\n * `setFilter`: Function to set the filter value.\n *\n * `Header`: Column header used for labels and placeholders.\n *\n * `filterChoices`: Specifies array of choices.\n *\n * `getHeaderProps`: Generates a key unique to the column being filtered.\n *\n * `filterValue`: Value for the filter input.\n */\n column: PropTypes.shape({\n setFilter: PropTypes.func.isRequired,\n Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n filterChoices: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n number: PropTypes.number,\n })).isRequired,\n getHeaderProps: PropTypes.func.isRequired,\n filterValue: PropTypes.arrayOf(PropTypes.string),\n }).isRequired,\n};\n\nexport default CheckboxFilter;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
package/src/DataTable/README.md
CHANGED
|
@@ -423,17 +423,17 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
|
|
|
423
423
|
Filter: CheckboxFilter,
|
|
424
424
|
filter: 'includesValue',
|
|
425
425
|
filterChoices: [{
|
|
426
|
-
name: '
|
|
426
|
+
name: 'Orange Tabby',
|
|
427
427
|
number: 1,
|
|
428
428
|
value: 'orange tabby',
|
|
429
429
|
},
|
|
430
430
|
{
|
|
431
|
-
name: '
|
|
431
|
+
name: 'Brown Tabby',
|
|
432
432
|
number: 1,
|
|
433
433
|
value: 'brown tabby',
|
|
434
434
|
},
|
|
435
435
|
{
|
|
436
|
-
name: '
|
|
436
|
+
name: 'Siamese',
|
|
437
437
|
number: 1,
|
|
438
438
|
value: 'siamese',
|
|
439
439
|
}],
|
|
@@ -503,17 +503,17 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
|
|
|
503
503
|
Filter: CheckboxFilter,
|
|
504
504
|
filter: 'includesValue',
|
|
505
505
|
filterChoices: [{
|
|
506
|
-
name: '
|
|
506
|
+
name: 'Orange Tabby',
|
|
507
507
|
number: 1,
|
|
508
508
|
value: 'orange tabby',
|
|
509
509
|
},
|
|
510
510
|
{
|
|
511
|
-
name: '
|
|
511
|
+
name: 'Brown Tabby',
|
|
512
512
|
number: 1,
|
|
513
513
|
value: 'brown tabby',
|
|
514
514
|
},
|
|
515
515
|
{
|
|
516
|
-
name: '
|
|
516
|
+
name: 'Siamese',
|
|
517
517
|
number: 1,
|
|
518
518
|
value: 'siamese',
|
|
519
519
|
}]
|
|
@@ -1306,17 +1306,17 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
|
|
|
1306
1306
|
Filter: CheckboxFilter,
|
|
1307
1307
|
filter: 'includesValue',
|
|
1308
1308
|
filterChoices: [{
|
|
1309
|
-
name: '
|
|
1309
|
+
name: 'Orange Tabby',
|
|
1310
1310
|
number: 2,
|
|
1311
1311
|
value: 'orange tabby',
|
|
1312
1312
|
},
|
|
1313
1313
|
{
|
|
1314
|
-
name: '
|
|
1314
|
+
name: 'Brown Tabby',
|
|
1315
1315
|
number: 2,
|
|
1316
1316
|
value: 'brown tabby',
|
|
1317
1317
|
},
|
|
1318
1318
|
{
|
|
1319
|
-
name: '
|
|
1319
|
+
name: 'Siamese',
|
|
1320
1320
|
number: 1,
|
|
1321
1321
|
value: 'siamese',
|
|
1322
1322
|
}]
|
|
@@ -1659,17 +1659,17 @@ After selecting the maximum possible number of rows, you can display an error me
|
|
|
1659
1659
|
filter: 'includesValue',
|
|
1660
1660
|
filterChoices: [
|
|
1661
1661
|
{
|
|
1662
|
-
name: '
|
|
1662
|
+
name: 'Russian white',
|
|
1663
1663
|
number: 1,
|
|
1664
1664
|
value: 'russian white',
|
|
1665
1665
|
},
|
|
1666
1666
|
{
|
|
1667
|
-
name: '
|
|
1667
|
+
name: 'Orange Tabby',
|
|
1668
1668
|
number: 2,
|
|
1669
1669
|
value: 'orange tabby',
|
|
1670
1670
|
},
|
|
1671
1671
|
{
|
|
1672
|
-
name: '
|
|
1672
|
+
name: 'Brown Tabby',
|
|
1673
1673
|
number: 3,
|
|
1674
1674
|
value: 'brown tabby',
|
|
1675
1675
|
},
|
|
@@ -31,7 +31,7 @@ function CheckboxFilter({
|
|
|
31
31
|
{filterChoices.map(({ name, number, value }) => (
|
|
32
32
|
<Form.Checkbox
|
|
33
33
|
key={`${headerBasedId}${name}`}
|
|
34
|
-
value={
|
|
34
|
+
value={value}
|
|
35
35
|
checked={checkedBoxes.includes(value)}
|
|
36
36
|
onChange={() => changeCheckbox(value)}
|
|
37
37
|
aria-label={name}
|
|
@@ -83,4 +83,35 @@ describe('<CheckboxFilter />', () => {
|
|
|
83
83
|
expect(checkbox).not.toBeChecked();
|
|
84
84
|
});
|
|
85
85
|
});
|
|
86
|
+
|
|
87
|
+
it('uses value for filtering when name and value differ', async () => {
|
|
88
|
+
const testChoice = { name: 'Test', value: 'test' };
|
|
89
|
+
const propsWithCaseDifference = {
|
|
90
|
+
column: {
|
|
91
|
+
...props.column,
|
|
92
|
+
filterChoices: [testChoice],
|
|
93
|
+
filterValue: [],
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
const { rerender } = render(<CheckboxFilter {...propsWithCaseDifference} />);
|
|
98
|
+
|
|
99
|
+
const checkbox = screen.getByLabelText(testChoice.name);
|
|
100
|
+
|
|
101
|
+
await userEvent.click(checkbox);
|
|
102
|
+
|
|
103
|
+
expect(setFilterMock).toHaveBeenCalledWith([testChoice.value]);
|
|
104
|
+
|
|
105
|
+
rerender(<CheckboxFilter column={{
|
|
106
|
+
...propsWithCaseDifference.column,
|
|
107
|
+
filterValue: [testChoice.value],
|
|
108
|
+
}}
|
|
109
|
+
/>);
|
|
110
|
+
|
|
111
|
+
expect(checkbox).toBeChecked();
|
|
112
|
+
|
|
113
|
+
await userEvent.click(checkbox);
|
|
114
|
+
|
|
115
|
+
expect(setFilterMock).toHaveBeenCalledWith([]);
|
|
116
|
+
});
|
|
86
117
|
});
|
|
@@ -73,22 +73,22 @@ It always shows the `SmartStatus` component. If applicable, it displays the `Dro
|
|
|
73
73
|
Filter: CheckboxFilter,
|
|
74
74
|
filter: 'includesValue',
|
|
75
75
|
filterChoices: [{
|
|
76
|
-
name: '
|
|
76
|
+
name: 'Russian white',
|
|
77
77
|
number: 1,
|
|
78
78
|
value: 'russian white',
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
|
-
name: '
|
|
81
|
+
name: 'Orange Tabby',
|
|
82
82
|
number: 2,
|
|
83
83
|
value: 'orange tabby',
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
name: '
|
|
86
|
+
name: 'Brown Tabby',
|
|
87
87
|
number: 3,
|
|
88
88
|
value: 'brown tabby',
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
name: '
|
|
91
|
+
name: 'Siamese',
|
|
92
92
|
number: 1,
|
|
93
93
|
value: 'siamese',
|
|
94
94
|
}]
|
|
@@ -104,22 +104,22 @@ all filters will be rendered in the dropdown.
|
|
|
104
104
|
Filter: CheckboxFilter,
|
|
105
105
|
filter: 'includesValue',
|
|
106
106
|
filterChoices: [{
|
|
107
|
-
name: '
|
|
107
|
+
name: 'Russian white',
|
|
108
108
|
number: 1,
|
|
109
109
|
value: 'russian white',
|
|
110
110
|
},
|
|
111
111
|
{
|
|
112
|
-
name: '
|
|
112
|
+
name: 'Orange Tabby',
|
|
113
113
|
number: 2,
|
|
114
114
|
value: 'orange tabby',
|
|
115
115
|
},
|
|
116
116
|
{
|
|
117
|
-
name: '
|
|
117
|
+
name: 'Brown Tabby',
|
|
118
118
|
number: 3,
|
|
119
119
|
value: 'brown tabby',
|
|
120
120
|
},
|
|
121
121
|
{
|
|
122
|
-
name: '
|
|
122
|
+
name: 'Siamese',
|
|
123
123
|
number: 1,
|
|
124
124
|
value: 'siamese',
|
|
125
125
|
}]
|
|
@@ -227,22 +227,22 @@ all filters will be rendered in the dropdown.
|
|
|
227
227
|
Filter: CheckboxFilter,
|
|
228
228
|
filter: 'includesValue',
|
|
229
229
|
filterChoices: [{
|
|
230
|
-
name: '
|
|
230
|
+
name: 'Russian white',
|
|
231
231
|
number: 1,
|
|
232
232
|
value: 'russian white',
|
|
233
233
|
},
|
|
234
234
|
{
|
|
235
|
-
name: '
|
|
235
|
+
name: 'Orange Tabby',
|
|
236
236
|
number: 2,
|
|
237
237
|
value: 'orange tabby',
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
|
-
name: '
|
|
240
|
+
name: 'Brown Tabby',
|
|
241
241
|
number: 3,
|
|
242
242
|
value: 'brown tabby',
|
|
243
243
|
},
|
|
244
244
|
{
|
|
245
|
-
name: '
|
|
245
|
+
name: 'Siamese',
|
|
246
246
|
number: 1,
|
|
247
247
|
value: 'siamese',
|
|
248
248
|
}]
|