@openedx/paragon 21.7.3 → 21.8.0

package/dist/DataTable/RowStatus.js

@@ -10,10 +10,15 @@ function RowStatus(_ref) {
   const {
     page,
     rows,
-    itemCount
+    itemCount,
+    state
   } = useContext(DataTableContext);
-  const pageSize = page?.length || rows?.length;
-  if (!pageSize) {
+  const rowCount = page?.length || rows?.length;
+  const pageSize = state?.pageSize || 0;
+  const pageIndex = state?.pageIndex || 0;
+  const firstRow = pageSize * pageIndex + 1;
+  const lastRow = firstRow + rowCount - 1;
+  if (!rowCount) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -21,11 +26,12 @@ function RowStatus(_ref) {
     "data-testid": "row-status"
   }, statusText || /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "pgn.DataTable.RowStatus.statusText",
-    defaultMessage: "Showing {pageSize} of {itemCount}.",
+    defaultMessage: "Showing {firstRow} - {lastRow} of {itemCount}.",
     description: "A text describing how many rows is shown in the table",
     values: {
       itemCount,
-      pageSize
+      firstRow,
+      lastRow
     }
   }));
 }

package/dist/DataTable/RowStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowStatus.js","names":["React","useContext","PropTypes","FormattedMessage","DataTableContext","RowStatus","_ref","className","statusText","page","rows","itemCount","pageSize","length","createElement","id","defaultMessage","description","values","propTypes","string","oneOfType","element","defaultProps","undefined"],"sources":["../../src/DataTable/RowStatus.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage } from 'react-intl';\nimport DataTableContext from './DataTableContext';\n\nfunction RowStatus({ className, statusText }) {\n  const { page, rows, itemCount } = useContext(DataTableContext);\n  const pageSize = page?.length || rows?.length;\n\n  if (!pageSize) {\n    return null;\n  }\n  return (\n    <div className={className} data-testid=\"row-status\">\n      {statusText || (\n        <FormattedMessage\n          id=\"pgn.DataTable.RowStatus.statusText\"\n          defaultMessage=\"Showing {pageSize} of {itemCount}.\"\n          description=\"A text describing how many rows is shown in the table\"\n          values={{ itemCount, pageSize }}\n        />\n      )}\n    </div>\n  );\n}\n\nRowStatus.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** A text describing how many rows is shown in the table. */\n  statusText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nRowStatus.defaultProps = {\n  className: undefined,\n  statusText: undefined,\n};\n\nexport default RowStatus;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,SAASC,SAASA,CAAAC,IAAA,EAA4B;EAAA,IAA3B;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAAF,IAAA;EAC1C,MAAM;IAAEG,IAAI;IAAEC,IAAI;IAAEC;EAAU,CAAC,GAAGV,UAAU,CAACG,gBAAgB,CAAC;EAC9D,MAAMQ,QAAQ,GAAGH,IAAI,EAAEI,MAAM,IAAIH,IAAI,EAAEG,MAAM;EAE7C,IAAI,CAACD,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EACA,oBACEZ,KAAA,CAAAc,aAAA;IAAKP,SAAS,EAAEA,SAAU;IAAC,eAAY;EAAY,GAChDC,UAAU,iBACTR,KAAA,CAAAc,aAAA,CAACX,gBAAgB;IACfY,EAAE,EAAC,oCAAoC;IACvCC,cAAc,EAAC,oCAAoC;IACnDC,WAAW,EAAC,uDAAuD;IACnEC,MAAM,EAAE;MAAEP,SAAS;MAAEC;IAAS;EAAE,CACjC,CAEA,CAAC;AAEV;AAEAP,SAAS,CAACc,SAAS,GAAG;EACpB;EACAZ,SAAS,EAAEL,SAAS,CAACkB,MAAM;EAC3B;EACAZ,UAAU,EAAEN,SAAS,CAACmB,SAAS,CAAC,CAACnB,SAAS,CAACkB,MAAM,EAAElB,SAAS,CAACoB,OAAO,CAAC;AACvE,CAAC;AAEDjB,SAAS,CAACkB,YAAY,GAAG;EACvBhB,SAAS,EAAEiB,SAAS;EACpBhB,UAAU,EAAEgB;AACd,CAAC;AAED,eAAenB,SAAS"}
+{"version":3,"file":"RowStatus.js","names":["React","useContext","PropTypes","FormattedMessage","DataTableContext","RowStatus","_ref","className","statusText","page","rows","itemCount","state","rowCount","length","pageSize","pageIndex","firstRow","lastRow","createElement","id","defaultMessage","description","values","propTypes","string","oneOfType","element","defaultProps","undefined"],"sources":["../../src/DataTable/RowStatus.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage } from 'react-intl';\nimport DataTableContext from './DataTableContext';\n\nfunction RowStatus({ className, statusText }) {\n  const {\n    page, rows, itemCount, state,\n  } = useContext(DataTableContext);\n  const rowCount = page?.length || rows?.length;\n  const pageSize = state?.pageSize || 0;\n  const pageIndex = state?.pageIndex || 0;\n  const firstRow = pageSize * pageIndex + 1;\n  const lastRow = firstRow + rowCount - 1;\n\n  if (!rowCount) {\n    return null;\n  }\n  return (\n    <div className={className} data-testid=\"row-status\">\n      {statusText || (\n        <FormattedMessage\n          id=\"pgn.DataTable.RowStatus.statusText\"\n          defaultMessage=\"Showing {firstRow} - {lastRow} of {itemCount}.\"\n          description=\"A text describing how many rows is shown in the table\"\n          values={{ itemCount, firstRow, lastRow }}\n        />\n      )}\n    </div>\n  );\n}\n\nRowStatus.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** A text describing how many rows is shown in the table. */\n  statusText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nRowStatus.defaultProps = {\n  className: undefined,\n  statusText: undefined,\n};\n\nexport default RowStatus;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,SAASC,SAASA,CAAAC,IAAA,EAA4B;EAAA,IAA3B;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAAF,IAAA;EAC1C,MAAM;IACJG,IAAI;IAAEC,IAAI;IAAEC,SAAS;IAAEC;EACzB,CAAC,GAAGX,UAAU,CAACG,gBAAgB,CAAC;EAChC,MAAMS,QAAQ,GAAGJ,IAAI,EAAEK,MAAM,IAAIJ,IAAI,EAAEI,MAAM;EAC7C,MAAMC,QAAQ,GAAGH,KAAK,EAAEG,QAAQ,IAAI,CAAC;EACrC,MAAMC,SAAS,GAAGJ,KAAK,EAAEI,SAAS,IAAI,CAAC;EACvC,MAAMC,QAAQ,GAAGF,QAAQ,GAAGC,SAAS,GAAG,CAAC;EACzC,MAAME,OAAO,GAAGD,QAAQ,GAAGJ,QAAQ,GAAG,CAAC;EAEvC,IAAI,CAACA,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EACA,oBACEb,KAAA,CAAAmB,aAAA;IAAKZ,SAAS,EAAEA,SAAU;IAAC,eAAY;EAAY,GAChDC,UAAU,iBACTR,KAAA,CAAAmB,aAAA,CAAChB,gBAAgB;IACfiB,EAAE,EAAC,oCAAoC;IACvCC,cAAc,EAAC,gDAAgD;IAC/DC,WAAW,EAAC,uDAAuD;IACnEC,MAAM,EAAE;MAAEZ,SAAS;MAAEM,QAAQ;MAAEC;IAAQ;EAAE,CAC1C,CAEA,CAAC;AAEV;AAEAb,SAAS,CAACmB,SAAS,GAAG;EACpB;EACAjB,SAAS,EAAEL,SAAS,CAACuB,MAAM;EAC3B;EACAjB,UAAU,EAAEN,SAAS,CAACwB,SAAS,CAAC,CAACxB,SAAS,CAACuB,MAAM,EAAEvB,SAAS,CAACyB,OAAO,CAAC;AACvE,CAAC;AAEDtB,SAAS,CAACuB,YAAY,GAAG;EACvBrB,SAAS,EAAEsB,SAAS;EACpBrB,UAAU,EAAEqB;AACd,CAAC;AAED,eAAexB,SAAS"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.7.3",
+  "version": "21.8.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/DataTable/RowStatus.jsx

@@ -4,10 +4,16 @@ import { FormattedMessage } from 'react-intl';
 import DataTableContext from './DataTableContext';
 
 function RowStatus({ className, statusText }) {
-  const { page, rows, itemCount } = useContext(DataTableContext);
-  const pageSize = page?.length || rows?.length;
+  const {
+    page, rows, itemCount, state,
+  } = useContext(DataTableContext);
+  const rowCount = page?.length || rows?.length;
+  const pageSize = state?.pageSize || 0;
+  const pageIndex = state?.pageIndex || 0;
+  const firstRow = pageSize * pageIndex + 1;
+  const lastRow = firstRow + rowCount - 1;
 
-  if (!pageSize) {
+  if (!rowCount) {
     return null;
   }
   return (
@@ -15,9 +21,9 @@ function RowStatus({ className, statusText }) {
       {statusText || (
         <FormattedMessage
           id="pgn.DataTable.RowStatus.statusText"
-          defaultMessage="Showing {pageSize} of {itemCount}."
+          defaultMessage="Showing {firstRow} - {lastRow} of {itemCount}."
           description="A text describing how many rows is shown in the table"
-          values={{ itemCount, pageSize }}
+          values={{ itemCount, firstRow, lastRow }}
         />
       )}
     </div>

package/src/DataTable/tests/DataTable.test.jsx

@@ -135,7 +135,7 @@ describe('<DataTable />', () => {
   it('displays a control bar', () => {
     render(<DataTableWrapper {...props} />);
     expect(screen.getByTestId('table-control-bar')).toBeInTheDocument();
-    expect(screen.getAllByText('Showing 7 of 7.')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Showing 1 - 7 of 7.')[0]).toBeInTheDocument();
   });
 
   it('displays a table', () => {

package/src/DataTable/tests/RowStatus.test.jsx

@@ -32,13 +32,13 @@ describe('<RowStatus />', () => {
   it('displays the row status with pagination', () => {
     const pageSize = 10;
     const { getByText } = render(<RowStatusWrapper value={{ ...instance, page: Array(pageSize) }} />);
-    const statusText = getByText(`Showing ${pageSize} of ${instance.itemCount}.`);
+    const statusText = getByText(`Showing 1 - ${pageSize} of ${instance.itemCount}.`);
     expect(statusText).toBeInTheDocument();
   });
   it('displays the row status without pagination', () => {
     const pageSize = 10;
     const { getByText } = render(<RowStatusWrapper value={{ ...instance, rows: Array(pageSize) }} />);
-    const statusText = getByText(`Showing ${pageSize} of ${instance.itemCount}.`);
+    const statusText = getByText(`Showing 1 - ${pageSize} of ${instance.itemCount}.`);
     expect(statusText).toBeInTheDocument();
   });
   it('sets class names on the parent', () => {

package/src/DataTable/tests/SmartStatus.test.jsx

@@ -67,13 +67,13 @@ describe('<SmartStatus />', () => {
     const { getByText } = render(
       <SmartStatusWrapper value={instance} />,
     );
-    expect(getByText(`Showing ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
+    expect(getByText(`Showing 1 - ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
   });
   it('Shows the number of items on the page if selection is off and there are no filters', () => {
     const { getByText } = render(
       <SmartStatusWrapper value={instance} />,
     );
-    expect(getByText(`Showing ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
+    expect(getByText(`Showing 1 - ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
   });
   it('shows an alternate selection status', () => {
     const altStatusText = 'horses R cool';