@openedx/paragon 22.15.0 → 22.15.2
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/TablePagination.js +4 -0
- package/dist/DataTable/TablePagination.js.map +1 -1
- package/dist/DataTable/TablePaginationMinimal.js +4 -1
- package/dist/DataTable/TablePaginationMinimal.js.map +1 -1
- package/dist/DataTable/messages.js +11 -0
- package/dist/Form/_index.scss +2 -0
- package/dist/paragon.css +1 -1
- package/package.json +1 -1
- package/src/DataTable/TablePagination.jsx +5 -0
- package/src/DataTable/TablePaginationMinimal.jsx +5 -1
- package/src/DataTable/messages.js +11 -0
- package/src/DataTable/tests/TableFooter.test.jsx +5 -1
- package/src/DataTable/tests/TablePagination.test.jsx +6 -3
- package/src/Form/_index.scss +2 -0
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
2
3
|
import DataTableContext from './DataTableContext';
|
|
3
4
|
import Pagination from '../Pagination';
|
|
5
|
+
import messages from './messages';
|
|
4
6
|
function TablePagination() {
|
|
7
|
+
const intl = useIntl();
|
|
5
8
|
const {
|
|
6
9
|
pageCount,
|
|
7
10
|
state,
|
|
@@ -16,6 +19,7 @@ function TablePagination() {
|
|
|
16
19
|
currentPage: pageIndex + 1,
|
|
17
20
|
onPageSelect: pageNum => gotoPage(pageNum - 1),
|
|
18
21
|
pageCount: pageCount,
|
|
22
|
+
paginationLabel: intl.formatMessage(messages.paginationLabel),
|
|
19
23
|
icons: {
|
|
20
24
|
leftIcon: null,
|
|
21
25
|
rightIcon: null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePagination.js","names":["React","useContext","DataTableContext","Pagination","TablePagination","pageCount","state","gotoPage","pageIndex","createElement","variant","currentPage","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePagination.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\n\nfunction TablePagination() {\n const {\n pageCount, state, gotoPage,\n } = useContext(DataTableContext);\n\n if (!pageCount || pageCount < 2) {\n return null;\n }\n\n const pageIndex = state?.pageIndex;\n\n return (\n <Pagination\n variant=\"reduced\"\n currentPage={pageIndex + 1}\n onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n pageCount={pageCount}\n icons={{\n leftIcon: null,\n rightIcon: null,\n }}\n />\n );\n}\n\nexport default TablePagination;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;
|
|
1
|
+
{"version":3,"file":"TablePagination.js","names":["React","useContext","useIntl","DataTableContext","Pagination","messages","TablePagination","intl","pageCount","state","gotoPage","pageIndex","createElement","variant","currentPage","onPageSelect","pageNum","paginationLabel","formatMessage","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePagination.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useIntl } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport messages from './messages';\n\nfunction TablePagination() {\n const intl = useIntl();\n\n const {\n pageCount, state, gotoPage,\n } = useContext(DataTableContext);\n\n if (!pageCount || pageCount < 2) {\n return null;\n }\n\n const pageIndex = state?.pageIndex;\n\n return (\n <Pagination\n variant=\"reduced\"\n currentPage={pageIndex + 1}\n onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n pageCount={pageCount}\n paginationLabel={intl.formatMessage(messages.paginationLabel)}\n icons={{\n leftIcon: null,\n rightIcon: null,\n }}\n />\n );\n}\n\nexport default TablePagination;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,eAAeA,CAAA,EAAG;EACzB,MAAMC,IAAI,GAAGL,OAAO,CAAC,CAAC;EAEtB,MAAM;IACJM,SAAS;IAAEC,KAAK;IAAEC;EACpB,CAAC,GAAGT,UAAU,CAACE,gBAAgB,CAAC;EAEhC,IAAI,CAACK,SAAS,IAAIA,SAAS,GAAG,CAAC,EAAE;IAC/B,OAAO,IAAI;EACb;EAEA,MAAMG,SAAS,GAAGF,KAAK,EAAEE,SAAS;EAElC,oBACEX,KAAA,CAAAY,aAAA,CAACR,UAAU;IACTS,OAAO,EAAC,SAAS;IACjBC,WAAW,EAAEH,SAAS,GAAG,CAAE;IAC3BI,YAAY,EAAGC,OAAO,IAAKN,QAAQ,CAACM,OAAO,GAAG,CAAC,CAAE;IACjDR,SAAS,EAAEA,SAAU;IACrBS,eAAe,EAAEV,IAAI,CAACW,aAAa,CAACb,QAAQ,CAACY,eAAe,CAAE;IAC9DE,KAAK,EAAE;MACLC,QAAQ,EAAE,IAAI;MACdC,SAAS,EAAE;IACb;EAAE,CACH,CAAC;AAEN;AAEA,eAAef,eAAe","ignoreList":[]}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
2
3
|
import DataTableContext from './DataTableContext';
|
|
3
4
|
import Pagination from '../Pagination';
|
|
4
5
|
import { ArrowBackIos, ArrowForwardIos } from '../../icons';
|
|
6
|
+
import messages from './messages';
|
|
5
7
|
function TablePaginationMinimal() {
|
|
8
|
+
const intl = useIntl();
|
|
6
9
|
const {
|
|
7
10
|
nextPage,
|
|
8
11
|
pageCount,
|
|
@@ -19,7 +22,7 @@ function TablePaginationMinimal() {
|
|
|
19
22
|
variant: "minimal",
|
|
20
23
|
currentPage: pageIndex + 1,
|
|
21
24
|
pageCount: pageCount,
|
|
22
|
-
paginationLabel:
|
|
25
|
+
paginationLabel: intl.formatMessage(messages.paginationLabel),
|
|
23
26
|
onPageSelect: pageNum => gotoPage(pageNum - 1),
|
|
24
27
|
icons: {
|
|
25
28
|
leftIcon: ArrowBackIos,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePaginationMinimal.js","names":["React","useContext","DataTableContext","Pagination","ArrowBackIos","ArrowForwardIos","TablePaginationMinimal","nextPage","pageCount","gotoPage","state","pageIndex","createElement","variant","currentPage","paginationLabel","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePaginationMinimal.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport { ArrowBackIos, ArrowForwardIos } from '../../icons';\n\nfunction TablePaginationMinimal() {\n const {\n nextPage, pageCount, gotoPage, state,\n } = useContext(DataTableContext);\n\n // Use nextPage as a proxy for whether or not the table is paginated\n if (!nextPage) {\n return null;\n }\n\n const pageIndex = state?.pageIndex;\n\n return (\n <Pagination\n variant=\"minimal\"\n currentPage={pageIndex + 1}\n pageCount={pageCount}\n paginationLabel
|
|
1
|
+
{"version":3,"file":"TablePaginationMinimal.js","names":["React","useContext","useIntl","DataTableContext","Pagination","ArrowBackIos","ArrowForwardIos","messages","TablePaginationMinimal","intl","nextPage","pageCount","gotoPage","state","pageIndex","createElement","variant","currentPage","paginationLabel","formatMessage","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePaginationMinimal.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useIntl } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport { ArrowBackIos, ArrowForwardIos } from '../../icons';\nimport messages from './messages';\n\nfunction TablePaginationMinimal() {\n const intl = useIntl();\n\n const {\n nextPage, pageCount, gotoPage, state,\n } = useContext(DataTableContext);\n\n // Use nextPage as a proxy for whether or not the table is paginated\n if (!nextPage) {\n return null;\n }\n\n const pageIndex = state?.pageIndex;\n\n return (\n <Pagination\n variant=\"minimal\"\n currentPage={pageIndex + 1}\n pageCount={pageCount}\n paginationLabel={intl.formatMessage(messages.paginationLabel)}\n onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n icons={{\n leftIcon: ArrowBackIos,\n rightIcon: ArrowForwardIos,\n }}\n />\n );\n}\n\nexport default TablePaginationMinimal;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,YAAY,EAAEC,eAAe,QAAQ,aAAa;AAC3D,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,sBAAsBA,CAAA,EAAG;EAChC,MAAMC,IAAI,GAAGP,OAAO,CAAC,CAAC;EAEtB,MAAM;IACJQ,QAAQ;IAAEC,SAAS;IAAEC,QAAQ;IAAEC;EACjC,CAAC,GAAGZ,UAAU,CAACE,gBAAgB,CAAC;;EAEhC;EACA,IAAI,CAACO,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,MAAMI,SAAS,GAAGD,KAAK,EAAEC,SAAS;EAElC,oBACEd,KAAA,CAAAe,aAAA,CAACX,UAAU;IACTY,OAAO,EAAC,SAAS;IACjBC,WAAW,EAAEH,SAAS,GAAG,CAAE;IAC3BH,SAAS,EAAEA,SAAU;IACrBO,eAAe,EAAET,IAAI,CAACU,aAAa,CAACZ,QAAQ,CAACW,eAAe,CAAE;IAC9DE,YAAY,EAAGC,OAAO,IAAKT,QAAQ,CAACS,OAAO,GAAG,CAAC,CAAE;IACjDC,KAAK,EAAE;MACLC,QAAQ,EAAElB,YAAY;MACtBmB,SAAS,EAAElB;IACb;EAAE,CACH,CAAC;AAEN;AAEA,eAAeE,sBAAsB","ignoreList":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { defineMessages } from 'react-intl';
|
|
2
|
+
|
|
3
|
+
const messages = defineMessages({
|
|
4
|
+
paginationLabel: {
|
|
5
|
+
id: 'pgn.DataTable.paginationLabel',
|
|
6
|
+
defaultMessage: 'table pagination',
|
|
7
|
+
description: 'Accessibile name for the navigation element of a pagination component',
|
|
8
|
+
},
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
export default messages;
|
package/dist/Form/_index.scss
CHANGED
|
@@ -380,6 +380,7 @@ select.form-control {
|
|
|
380
380
|
appearance: none;
|
|
381
381
|
height: $custom-control-indicator-size;
|
|
382
382
|
width: $custom-control-indicator-size;
|
|
383
|
+
min-width: $custom-control-indicator-size;
|
|
383
384
|
background-color: $custom-control-indicator-bg;
|
|
384
385
|
border: solid $custom-control-indicator-border-width $custom-control-indicator-border-color;
|
|
385
386
|
border-radius: $custom-checkbox-indicator-border-radius;
|
|
@@ -437,6 +438,7 @@ select.form-control {
|
|
|
437
438
|
|
|
438
439
|
.pgn__form-switch-input {
|
|
439
440
|
width: $custom-switch-width;
|
|
441
|
+
min-width: $custom-switch-width;
|
|
440
442
|
border-radius: $custom-switch-indicator-border-radius;
|
|
441
443
|
background-image: escape-svg($custom-switch-indicator-icon-off);
|
|
442
444
|
background-position: left center;
|