GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-02-21 09:34:19 +01:00
Code Issues Releases Activity

Merge branch 'refactor-richtable' into 'dev'

Browse Source 
Refactor RichTable

See merge request turris/reforis/foris-js!269
This commit is contained in:
Aleksandr Gumroian 2025-02-19 16:20:47 +01:00
commit bf0b2ce70c
2 changed files with 64 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/common/RichTable/RichTable.js
View File

@ -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, {
useMemo,
useState,
useImperativeHandle,
forwardRef,
} from "react";
import React, { useMemo, useState } from "react";
import {
flexRender,
@ -25,70 +20,62 @@ import RichTableBody from "./RichTableBody";
import RichTableHeader from "./RichTableHeader";
import RichTablePagination from "./RichTablePagination";
const fallbackData = [];
const RichTable = forwardRef(
({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
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,
columns: tableColumns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination,
onSortingChange: setSorting,
state: {
sorting,
pagination,
},
});
const paginationIsNeeded =
tableData.length > pageSize && withPagination;
return (
<div className="table-responsive">
<table className="table table-hover text-nowrap">
<RichTableHeader table={table} flexRender={flexRender} />
<RichTableBody table={table} flexRender={flexRender} />
</table>
{paginationIsNeeded && (
<RichTablePagination
table={table}
tablePageSize={pageSize}
allRows={tableData.length}
/>
)}
</div>
);
}
);
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,
};
RichTable.displayName = "RichTable";
export default function RichTable({
columns,
data,
withPagination,
pageSize = 5,
pageIndex = 0,
}) {
const tableColumns = useMemo(() => columns, [columns]);
const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({
pageIndex,
pageSize,
});
export default RichTable;
const table = useReactTable({
data,
columns: tableColumns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination,
onSortingChange: setSorting,
state: {
sorting,
pagination,
},
});
const paginationIsNeeded = data.length > pageSize && withPagination;
return (
<div className="table-responsive">
<table className="table table-hover text-nowrap">
<RichTableHeader table={table} flexRender={flexRender} />
<RichTableBody table={table} flexRender={flexRender} />
</table>
{paginationIsNeeded && (
<RichTablePagination
table={table}
tablePageSize={pageSize}
allRows={data.length}
/>
)}
</div>
);
}

27
src/form/components/SubmitButton.js
View File

@ -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 (