1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-05-06 09:40:54 +02:00

Compare commits

..

No commits in common. "bf0b2ce70ce1a3a11135fae4b46db04f958b3910" and "31cb8e2ae02fc1e8ef34cdc2bc45c88917d7b667" have entirely different histories.

2 changed files with 74 additions and 64 deletions

View File

@ -1,11 +1,16 @@
/* /*
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/) * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
* *
* This is free software, licensed under the GNU General Public License v3. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useMemo, useState } from "react"; import React, {
useMemo,
useState,
useImperativeHandle,
forwardRef,
} from "react";
import { import {
flexRender, flexRender,
@ -20,35 +25,24 @@ import RichTableBody from "./RichTableBody";
import RichTableHeader from "./RichTableHeader"; import RichTableHeader from "./RichTableHeader";
import RichTablePagination from "./RichTablePagination"; import RichTablePagination from "./RichTablePagination";
RichTable.propTypes = { const fallbackData = [];
/** 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,
};
export default function RichTable({ const RichTable = forwardRef(
columns, ({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
data,
withPagination,
pageSize = 5,
pageIndex = 0,
}) {
const tableColumns = useMemo(() => columns, [columns]); const tableColumns = useMemo(() => columns, [columns]);
const [tableData, setTableData] = useState(data ?? fallbackData);
const [sorting, setSorting] = useState([]); const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
pageIndex, pageIndex,
pageSize, pageSize,
}); });
useImperativeHandle(ref, () => ({
setTableData,
}));
const table = useReactTable({ const table = useReactTable({
data, data: tableData,
columns: tableColumns, columns: tableColumns,
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
@ -61,7 +55,8 @@ export default function RichTable({
}, },
}); });
const paginationIsNeeded = data.length > pageSize && withPagination; const paginationIsNeeded =
tableData.length > pageSize && withPagination;
return ( return (
<div className="table-responsive"> <div className="table-responsive">
@ -73,9 +68,27 @@ export default function RichTable({
<RichTablePagination <RichTablePagination
table={table} table={table}
tablePageSize={pageSize} tablePageSize={pageSize}
allRows={data.length} allRows={tableData.length}
/> />
)} )}
</div> </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;

View File

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