Merge branch 'refactor-richtable' into 'dev'

Refactor RichTable

See merge request turris/reforis/foris-js!269

CHANGELOG.md

@@ -8,6 +8,12 @@ and this project adheres to
 
 ## [Unreleased]
 
+## [6.6.1] - 2025-02-17
+
+### Changed
+
+-   Refactored RichTable component to use forwardRef
+
 ## [6.6.0] - 2025-02-07
 
 ### Added
@@ -435,7 +441,8 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.0...dev
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.1...dev
+[6.6.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.0...v6.6.1
 [6.6.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.5.0...v6.6.0
 [6.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...v6.5.0
 [6.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...v6.4.0

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "foris",
-    "version": "6.6.0",
+    "version": "6.6.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "foris",
-            "version": "6.6.0",
+            "version": "6.6.1",
             "license": "GPL-3.0",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "^6.6.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.6.0",
+    "version": "6.6.1",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -70,4 +70,4 @@
         "docs": "npx styleguidist build ",
         "docs:watch": "styleguidist server"
     }
-}
+}

src/common/RichTable/RichTable.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -20,22 +20,20 @@ import RichTableBody from "./RichTableBody";
 import RichTableHeader from "./RichTableHeader";
 import RichTablePagination from "./RichTablePagination";
 
-const fallbackData = [];
-
 RichTable.propTypes = {
     /** Columns to be displayed in the table */
     columns: PropTypes.array.isRequired,
-    /** Data to be displayed in the table */
+    /** Data to be displayed in the table, must be passed as a stable reference, for example, useState */
     data: PropTypes.array.isRequired,
     /** Whether to display pagination */
     withPagination: PropTypes.bool,
-    /** Number of rows per page */
+    /** Number of rows per page, the default is 5 */
     pageSize: PropTypes.number,
     /** Index of the current page */
     pageIndex: PropTypes.number,
 };
 
-function RichTable({
+export default function RichTable({
     columns,
     data,
     withPagination,
@@ -43,7 +41,6 @@ function RichTable({
     pageIndex = 0,
 }) {
     const tableColumns = useMemo(() => columns, [columns]);
-    const [tableData] = useState(data ?? fallbackData);
     const [sorting, setSorting] = useState([]);
     const [pagination, setPagination] = useState({
         pageIndex,
@@ -51,7 +48,7 @@ function RichTable({
     });
 
     const table = useReactTable({
-        data: tableData,
+        data,
         columns: tableColumns,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
@@ -64,7 +61,7 @@ function RichTable({
         },
     });
 
-    const paginationIsNeeded = tableData.length > pageSize && withPagination;
+    const paginationIsNeeded = data.length > pageSize && withPagination;
 
     return (
         <div className="table-responsive">
@@ -76,11 +73,9 @@ function RichTable({
                 <RichTablePagination
                     table={table}
                     tablePageSize={pageSize}
-                    allRows={tableData.length}
+                    allRows={data.length}
                 />
             )}
         </div>
     );
 }
-
-export default RichTable;

src/form/components/SubmitButton.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -20,22 +20,25 @@ export const STATES = {
 SubmitButton.propTypes = {
     disabled: PropTypes.bool,
     state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
+    label: PropTypes.string,
 };
 
-export function SubmitButton({ disabled, state, ...props }) {
+export function SubmitButton({ disabled, state, label, ...props }) {
     const disableSubmitButton = disabled || state !== STATES.READY;
     const loadingSubmitButton = state !== STATES.READY;
 
-    let labelSubmitButton;
-    switch (state) {
-        case STATES.SAVING:
-            labelSubmitButton = _("Updating");
-            break;
-        case STATES.LOAD:
-            labelSubmitButton = _("Load settings");
-            break;
-        default:
-            labelSubmitButton = _("Save");
+    let labelSubmitButton = label;
+    if (!labelSubmitButton) {
+        switch (state) {
+            case STATES.SAVING:
+                labelSubmitButton = _("Updating");
+                break;
+            case STATES.LOAD:
+                labelSubmitButton = _("Load settings");
+                break;
+            default:
+                labelSubmitButton = _("Save");
+        }
     }
 
     return (