@openedx/paragon 23.12.0 → 23.12.1
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.
|
@@ -33,7 +33,8 @@ function CheckboxFilter(_ref) {
|
|
|
33
33
|
id: ariaLabel.current,
|
|
34
34
|
className: "pgn__checkbox-filter-label"
|
|
35
35
|
}, Header), /*#__PURE__*/React.createElement(Form.CheckboxSet, {
|
|
36
|
-
name: Header
|
|
36
|
+
name: Header,
|
|
37
|
+
value: checkedBoxes
|
|
37
38
|
}, filterChoices.map(_ref2 => {
|
|
38
39
|
let {
|
|
39
40
|
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}>\n {filterChoices.map(({ name, number, value }) => (\n <Form.Checkbox\n key={`${headerBasedId}${name}`}\n value={name}\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":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,OAAO,QAAQ,OAAO;AAC9C,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,IAAIC,SAAS,QAAQ,YAAY;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAASC,KAAK,QAAQ,aAAa;AAEnC,SAASC,cAAcA,CAAAC,IAAA,EAIpB;EAAA,IAJqB;IACtBC,MAAM,EAAE;MACNC,WAAW;MAAEC,SAAS;MAAEC,MAAM;MAAEC,aAAa;MAAEC;IACjD;EACF,CAAC,GAAAN,IAAA;EACC;EACA,MAAMO,SAAS,GAAGhB,MAAM,CAACO,KAAK,CAAC,yBAAyBQ,cAAc,CAAC,CAAC,CAACE,GAAG,GAAG,CAAC,CAAC;EAEjF,MAAMC,YAAY,GAAGP,WAAW,IAAI,EAAE;EACtC,MAAMQ,cAAc,GAAIC,KAAK,IAAK;IAChC,IAAIF,YAAY,CAACG,QAAQ,CAACD,KAAK,CAAC,EAAE;MAChC,MAAME,eAAe,GAAGJ,YAAY,CAACK,MAAM,CAAEC,GAAG,IAAKA,GAAG,KAAKJ,KAAK,CAAC;MACnE,OAAOR,SAAS,CAACU,eAAe,CAAC;IACnC;IACAJ,YAAY,CAACO,IAAI,CAACL,KAAK,CAAC;IACxB,OAAOR,SAAS,CAACM,YAAY,CAAC;EAChC,CAAC;EACD,MAAMQ,aAAa,GAAGzB,OAAO,CAAC,MAAM,yBAAyBc,cAAc,CAAC,CAAC,CAACE,GAAG,GAAG,EAAE,CAACF,cAAc,CAAC,CAAC;EAEvG,oBACEhB,KAAA,CAAA4B,aAAA,CAACxB,IAAI,CAACyB,KAAK;IAACC,IAAI,EAAC,OAAO;IAAC,mBAAiBb,SAAS,CAACc;EAAQ,gBAC1D/B,KAAA,CAAA4B,aAAA,CAACvB,SAAS;IAAC2B,EAAE,EAAEf,SAAS,CAACc,OAAQ;IAACE,SAAS,EAAC;EAA4B,GAAEnB,MAAkB,CAAC,eAC7Fd,KAAA,CAAA4B,aAAA,CAACxB,IAAI,CAAC8B,WAAW;IAACC,IAAI,EAAErB;
|
|
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={name}\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
|
@@ -27,7 +27,7 @@ function CheckboxFilter({
|
|
|
27
27
|
return (
|
|
28
28
|
<Form.Group role="group" aria-labelledby={ariaLabel.current}>
|
|
29
29
|
<FormLabel id={ariaLabel.current} className="pgn__checkbox-filter-label">{Header}</FormLabel>
|
|
30
|
-
<Form.CheckboxSet name={Header}>
|
|
30
|
+
<Form.CheckboxSet name={Header} value={checkedBoxes}>
|
|
31
31
|
{filterChoices.map(({ name, number, value }) => (
|
|
32
32
|
<Form.Checkbox
|
|
33
33
|
key={`${headerBasedId}${name}`}
|
|
@@ -75,4 +75,12 @@ describe('<CheckboxFilter />', () => {
|
|
|
75
75
|
const badge = screen.queryByText(String(palomino.number));
|
|
76
76
|
expect(badge).toBeNull();
|
|
77
77
|
});
|
|
78
|
+
|
|
79
|
+
it('renders unchecked checkboxes when filterValue is null', () => {
|
|
80
|
+
render(<CheckboxFilter column={{ ...props.column, filterValue: null }} />);
|
|
81
|
+
const checkboxes = screen.getAllByRole('checkbox');
|
|
82
|
+
checkboxes.forEach(checkbox => {
|
|
83
|
+
expect(checkbox).not.toBeChecked();
|
|
84
|
+
});
|
|
85
|
+
});
|
|
78
86
|
});
|