Merge branch 'refactor-richtable' into 'dev'

Refactor RichTable

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

src/common/RichTable/RichTable.js

@@ -1,16 +1,11 @@
 /*
- * 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.
  */
 
-import React, {
+import React, { useMemo, useState } from "react";
-    useMemo,
-    useState,
-    useImperativeHandle,
-    forwardRef,
-} from "react";
 
 import {
     flexRender,
@@ -25,24 +20,35 @@ 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, 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, the default is 5 */
+    pageSize: PropTypes.number,
+    /** Index of the current page */
+    pageIndex: PropTypes.number,
+};
 
-const RichTable = forwardRef(
+export default function RichTable({
-    ({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
+    columns,
+    data,
+    withPagination,
+    pageSize = 5,
+    pageIndex = 0,
+}) {
     const tableColumns = useMemo(() => columns, [columns]);
-        const [tableData, setTableData] = useState(data ?? fallbackData);
     const [sorting, setSorting] = useState([]);
     const [pagination, setPagination] = useState({
         pageIndex,
         pageSize,
     });
 
-        useImperativeHandle(ref, () => ({
-            setTableData,
-        }));
-
     const table = useReactTable({
-            data: tableData,
+        data,
         columns: tableColumns,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
@@ -55,8 +61,7 @@ const RichTable = forwardRef(
         },
     });
 
-        const paginationIsNeeded =
+    const paginationIsNeeded = data.length > pageSize && withPagination;
-            tableData.length > pageSize && withPagination;
 
     return (
         <div className="table-responsive">
@@ -68,27 +73,9 @@ const RichTable = forwardRef(
                 <RichTablePagination
                     table={table}
                     tablePageSize={pageSize}
-                        allRows={tableData.length}
+                    allRows={data.length}
                 />
             )}
         </div>
     );
 }
-);
-
-RichTable.propTypes = {
-    /** Columns to be displayed in the table */
-    columns: PropTypes.array.isRequired,
-    /** Data to be displayed in the table */
-    data: PropTypes.array.isRequired,
-    /** Whether to display pagination */
-    withPagination: PropTypes.bool,
-    /** Number of rows per page */
-    pageSize: PropTypes.number,
-    /** Index of the current page */
-    pageIndex: PropTypes.number,
-};
-
-RichTable.displayName = "RichTable";
-
-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,13 +20,15 @@ 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;
+    let labelSubmitButton = label;
+    if (!labelSubmitButton) {
         switch (state) {
             case STATES.SAVING:
                 labelSubmitButton = _("Updating");
@@ -37,6 +39,7 @@ export function SubmitButton({ disabled, state, ...props }) {
             default:
                 labelSubmitButton = _("Save");
         }
+    }
 
     return (
         <Button