mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-25 00:11:36 +01:00
Add RebootButton and RichTable components to documentation
This commit is contained in:
parent
babdf92ddd
commit
e57722caa0
|
@ -16,6 +16,11 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
|
||||||
import { useAlert } from "../context/alertContext/AlertContext";
|
import { useAlert } from "../context/alertContext/AlertContext";
|
||||||
import { ForisURLs } from "../utils/forisUrls";
|
import { ForisURLs } from "../utils/forisUrls";
|
||||||
|
|
||||||
|
RebootButton.propTypes = {
|
||||||
|
/** Additional props to be passed to the button */
|
||||||
|
props: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
function RebootButton(props) {
|
function RebootButton(props) {
|
||||||
const [triggered, setTriggered] = useState(false);
|
const [triggered, setTriggered] = useState(false);
|
||||||
const [modalShown, setModalShown] = useState(false);
|
const [modalShown, setModalShown] = useState(false);
|
||||||
|
@ -68,7 +73,12 @@ function RebootModal({ shown, setShown, onReboot }) {
|
||||||
<p>{_("Are you sure you want to restart the router?")}</p>
|
<p>{_("Are you sure you want to restart the router?")}</p>
|
||||||
</ModalBody>
|
</ModalBody>
|
||||||
<ModalFooter>
|
<ModalFooter>
|
||||||
<Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
|
<Button
|
||||||
|
className="btn-secondary"
|
||||||
|
onClick={() => setShown(false)}
|
||||||
|
>
|
||||||
|
{_("Cancel")}
|
||||||
|
</Button>
|
||||||
<Button className="btn-danger" onClick={onReboot}>
|
<Button className="btn-danger" onClick={onReboot}>
|
||||||
{_("Confirm reboot")}
|
{_("Confirm reboot")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
24
src/common/RebootButton.md
Normal file
24
src/common/RebootButton.md
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
RebootButton component is a button that opens a modal dialog to confirm the
|
||||||
|
reboot of the device.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React, { useEffect, createContext } from "react";
|
||||||
|
import RebootButton from "./RebootButton";
|
||||||
|
import { AlertContextProvider } from "../context/alertContext/AlertContext";
|
||||||
|
|
||||||
|
window.AlertContext = React.createContext();
|
||||||
|
|
||||||
|
const RebootButtonExample = () => {
|
||||||
|
return (
|
||||||
|
<AlertContextProvider>
|
||||||
|
<div id="modal-container" />
|
||||||
|
<div id="alert-container" />
|
||||||
|
<RebootButton />
|
||||||
|
</AlertContextProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
<RebootButtonExample />;
|
||||||
|
```
|
|
@ -14,6 +14,7 @@ import {
|
||||||
getPaginationRowModel,
|
getPaginationRowModel,
|
||||||
useReactTable,
|
useReactTable,
|
||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
import RichTableBody from "./RichTableBody";
|
import RichTableBody from "./RichTableBody";
|
||||||
import RichTableHeader from "./RichTableHeader";
|
import RichTableHeader from "./RichTableHeader";
|
||||||
|
@ -21,7 +22,20 @@ import RichTablePagination from "./RichTablePagination";
|
||||||
|
|
||||||
const fallbackData = [];
|
const fallbackData = [];
|
||||||
|
|
||||||
const RichTable = ({
|
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,
|
||||||
|
};
|
||||||
|
|
||||||
|
function RichTable({
|
||||||
columns,
|
columns,
|
||||||
data,
|
data,
|
||||||
withPagination,
|
withPagination,
|
||||||
|
@ -65,6 +79,6 @@ const RichTable = ({
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default RichTable;
|
export default RichTable;
|
||||||
|
|
135
src/common/RichTable/RichTable.md
Normal file
135
src/common/RichTable/RichTable.md
Normal file
|
@ -0,0 +1,135 @@
|
||||||
|
### Description
|
||||||
|
|
||||||
|
Rich Table is a table component based on
|
||||||
|
[Tanstack React Table](https://tanstack.com/table/). It adds some features to
|
||||||
|
the table component, such as:
|
||||||
|
|
||||||
|
- **Pagination**: The table can be paginated.
|
||||||
|
- **Sorting**: The table can be sorted by columns.
|
||||||
|
- **Row Expansion**: The table rows can be expanded. (To be implemented)
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```js
|
||||||
|
import RichTable from "./RichTable";
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
header: "Name",
|
||||||
|
accessorKey: "name",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: "Surname",
|
||||||
|
accessorKey: "surname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: "Age",
|
||||||
|
accessorKey: "age",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: "Phone",
|
||||||
|
accessorKey: "phone",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
name: "John",
|
||||||
|
surname: "Coltrane",
|
||||||
|
age: 30,
|
||||||
|
phone: "123456789",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Jane",
|
||||||
|
surname: "Doe",
|
||||||
|
age: 25,
|
||||||
|
phone: "987654321",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Alice",
|
||||||
|
surname: "Smith",
|
||||||
|
age: 35,
|
||||||
|
phone: "123456789",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bob",
|
||||||
|
surname: "Smith",
|
||||||
|
age: 40,
|
||||||
|
phone: "987654321",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Charlie",
|
||||||
|
surname: "Brown",
|
||||||
|
age: 45,
|
||||||
|
phone: "123456789",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Daisy",
|
||||||
|
surname: "Brown",
|
||||||
|
age: 50,
|
||||||
|
phone: "987654321",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Eve",
|
||||||
|
surname: "Johnson",
|
||||||
|
age: 55,
|
||||||
|
phone: "123456789",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Frank",
|
||||||
|
surname: "Johnson",
|
||||||
|
age: 60,
|
||||||
|
phone: "987654321",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Grace",
|
||||||
|
surname: "Williams",
|
||||||
|
age: 65,
|
||||||
|
phone: "123456789",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Henry",
|
||||||
|
surname: "Williams",
|
||||||
|
age: 70,
|
||||||
|
phone: "987654321",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Ivy",
|
||||||
|
surname: "Brown",
|
||||||
|
age: 75,
|
||||||
|
phone: "123456789",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Jack",
|
||||||
|
surname: "Brown",
|
||||||
|
age: 80,
|
||||||
|
phone: "987654321",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Kelly",
|
||||||
|
surname: "Johnson",
|
||||||
|
age: 85,
|
||||||
|
phone: "123456789",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Liam",
|
||||||
|
surname: "Johnson",
|
||||||
|
age: 90,
|
||||||
|
phone: "987654321",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Mia",
|
||||||
|
surname: "Williams",
|
||||||
|
age: 95,
|
||||||
|
phone: "123456789",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Nathan",
|
||||||
|
surname: "Williams",
|
||||||
|
age: 100,
|
||||||
|
phone: "987654321",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
<RichTable columns={columns} data={data} withPagination />;
|
||||||
|
```
|
|
@ -28,11 +28,11 @@ module.exports = {
|
||||||
content: "docs/development.md",
|
content: "docs/development.md",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Components",
|
name: "Common Components",
|
||||||
description: "Set of main components.",
|
description: "Set of main components.",
|
||||||
sections: [
|
sections: [
|
||||||
{
|
{
|
||||||
name: "Foris forms",
|
name: "Foris Form",
|
||||||
components: [
|
components: [
|
||||||
"src/form/components/ForisForm.js",
|
"src/form/components/ForisForm.js",
|
||||||
"src/form/components/alerts.js",
|
"src/form/components/alerts.js",
|
||||||
|
@ -42,25 +42,22 @@ module.exports = {
|
||||||
usageMode: "expand",
|
usageMode: "expand",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Alert Context",
|
name: "Rich Table",
|
||||||
components: ["src/context/alertContext/AlertContext.js"],
|
components: ["src/common/RichTable/RichTable.js"],
|
||||||
|
exampleMode: "expand",
|
||||||
|
usageMode: "expand",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Reboot Button",
|
||||||
|
components: ["src/common/RebootButton.js"],
|
||||||
exampleMode: "expand",
|
exampleMode: "expand",
|
||||||
usageMode: "expand",
|
usageMode: "expand",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
sectionDepth: 1,
|
sectionDepth: 1,
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "Customization Context",
|
name: "Bootstrap Components",
|
||||||
components: [
|
|
||||||
"src/context/customizationContext/CustomizationContext.js",
|
|
||||||
],
|
|
||||||
exampleMode: "expand",
|
|
||||||
usageMode: "expand",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Bootstrap components",
|
|
||||||
description: "Set of bootstrap components.",
|
description: "Set of bootstrap components.",
|
||||||
components: "src/bootstrap/*.js",
|
components: "src/bootstrap/*.js",
|
||||||
exampleMode: "expand",
|
exampleMode: "expand",
|
||||||
|
@ -68,13 +65,22 @@ module.exports = {
|
||||||
ignore: ["src/bootstrap/constants.js", "src/bootstrap/Radio.js"],
|
ignore: ["src/bootstrap/constants.js", "src/bootstrap/Radio.js"],
|
||||||
sectionDepth: 0,
|
sectionDepth: 0,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "Contexts",
|
||||||
|
components: [
|
||||||
|
"src/context/alertContext/AlertContext.js",
|
||||||
|
"src/context/customizationContext/CustomizationContext.js",
|
||||||
|
],
|
||||||
|
exampleMode: "expand",
|
||||||
|
usageMode: "expand",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
template: {
|
template: {
|
||||||
favicon: "/docs/components/logo.svg",
|
favicon: "/docs/components/logo.svg",
|
||||||
},
|
},
|
||||||
require: [
|
require: [
|
||||||
"babel-polyfill",
|
"babel-polyfill",
|
||||||
path.join(__dirname, "src/testUtils/mockGlobals"),
|
path.join(__dirname, "src/testUtils/mockGlobals.js"),
|
||||||
path.join(
|
path.join(
|
||||||
__dirname,
|
__dirname,
|
||||||
"node_modules/bootstrap/dist/css/bootstrap.min.css"
|
"node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user