tycho-components 0.9.2 → 0.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
.app-table-pagination {
|
|
2
2
|
display: flex;
|
|
3
|
-
border-top: none;
|
|
4
3
|
justify-content: right;
|
|
5
4
|
padding: var(--spacing-150) var(--spacing-100);
|
|
6
5
|
border-top: 1px solid var(--border-subtle-2);
|
|
@@ -35,7 +34,7 @@
|
|
|
35
34
|
|
|
36
35
|
.MuiInputBase-root {
|
|
37
36
|
border-radius: 0px;
|
|
38
|
-
font-family:
|
|
37
|
+
font-family: "Work Sans" !important;
|
|
39
38
|
|
|
40
39
|
> .MuiSelect-select {
|
|
41
40
|
display: flex;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { PaginationState, SortingState } from
|
|
2
|
-
import
|
|
3
|
-
import { AppPage } from
|
|
1
|
+
import { PaginationState, SortingState } from "@tanstack/react-table";
|
|
2
|
+
import "./styles.scss";
|
|
3
|
+
import { AppPage } from "./types/AppPage";
|
|
4
4
|
type Props = {
|
|
5
5
|
columns: any;
|
|
6
6
|
data: AppPage<any>;
|
|
@@ -13,6 +13,7 @@ type Props = {
|
|
|
13
13
|
onMouseEnter?: (row: any) => void;
|
|
14
14
|
onMouseLeave?: (row: any) => void;
|
|
15
15
|
hiddenColumns?: string[];
|
|
16
|
+
numItens?: number[];
|
|
16
17
|
};
|
|
17
|
-
export default function AppTable({ columns, data, pagination, setPagination, sorting, setSorting, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export default function AppTable({ columns, data, pagination, setPagination, sorting, setSorting, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, numItens, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import cx from
|
|
3
|
-
import { ThemeProvider } from
|
|
4
|
-
import Table from
|
|
5
|
-
import TableBody from
|
|
6
|
-
import TableCell from
|
|
7
|
-
import TableContainer from
|
|
8
|
-
import TableHead from
|
|
9
|
-
import TableRow from
|
|
10
|
-
import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from
|
|
11
|
-
import AppPagination from
|
|
12
|
-
import { tableTheme } from
|
|
13
|
-
import
|
|
14
|
-
export default function AppTable({ columns, data, pagination, setPagination, sorting, setSorting, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, }) {
|
|
2
|
+
import cx from "classnames";
|
|
3
|
+
import { ThemeProvider } from "@emotion/react";
|
|
4
|
+
import Table from "@mui/material/Table";
|
|
5
|
+
import TableBody from "@mui/material/TableBody";
|
|
6
|
+
import TableCell from "@mui/material/TableCell";
|
|
7
|
+
import TableContainer from "@mui/material/TableContainer";
|
|
8
|
+
import TableHead from "@mui/material/TableHead";
|
|
9
|
+
import TableRow from "@mui/material/TableRow";
|
|
10
|
+
import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
|
|
11
|
+
import AppPagination from "../AppPagination";
|
|
12
|
+
import { tableTheme } from "./AppTableTheme";
|
|
13
|
+
import "./styles.scss";
|
|
14
|
+
export default function AppTable({ columns, data, pagination, setPagination, sorting, setSorting, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, numItens, }) {
|
|
15
15
|
const { content, totalPages, totalElements } = data;
|
|
16
16
|
const columnVisibility = hiddenColumns?.reduce((acc, col) => {
|
|
17
17
|
acc[col] = false;
|
|
@@ -31,7 +31,7 @@ export default function AppTable({ columns, data, pagination, setPagination, sor
|
|
|
31
31
|
getPaginationRowModel: getPaginationRowModel(),
|
|
32
32
|
getSortedRowModel: getSortedRowModel(),
|
|
33
33
|
onSortingChange: (updaterOrValue) => {
|
|
34
|
-
const newSorting = typeof updaterOrValue ===
|
|
34
|
+
const newSorting = typeof updaterOrValue === "function"
|
|
35
35
|
? updaterOrValue(sorting)
|
|
36
36
|
: updaterOrValue;
|
|
37
37
|
if (newSorting &&
|
|
@@ -41,8 +41,8 @@ export default function AppTable({ columns, data, pagination, setPagination, sor
|
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
});
|
|
44
|
-
const tableClass = cx(
|
|
45
|
-
[className ||
|
|
44
|
+
const tableClass = cx("ds-table", {
|
|
45
|
+
[className || ""]: className || "",
|
|
46
46
|
});
|
|
47
47
|
return (_jsx(ThemeProvider, { theme: tableTheme, children: _jsxs("div", { className: tableClass, children: [_jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
|
|
48
48
|
const toggleSortingHandler = header.column.getToggleSortingHandler();
|
|
@@ -51,12 +51,12 @@ export default function AppTable({ columns, data, pagination, setPagination, sor
|
|
|
51
51
|
toggleSortingHandler(event);
|
|
52
52
|
}
|
|
53
53
|
}, style: {
|
|
54
|
-
cursor:
|
|
54
|
+
cursor: "pointer",
|
|
55
55
|
width: `${header.column.columnDef.size}%`,
|
|
56
56
|
}, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted()
|
|
57
|
-
? header.column.getIsSorted() ===
|
|
58
|
-
?
|
|
59
|
-
:
|
|
57
|
+
? header.column.getIsSorted() === "desc"
|
|
58
|
+
? " 🔽"
|
|
59
|
+
: " 🔼"
|
|
60
60
|
: null] }, header.id));
|
|
61
|
-
}) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { onMouseEnter: () => onMouseEnter && onMouseEnter(row), onMouseLeave: () => onMouseLeave && onMouseLeave(row), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { onClick: () => onClickRow && onClickRow(row.original, cell.column), className: cell.id.includes(
|
|
61
|
+
}) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { onMouseEnter: () => onMouseEnter && onMouseEnter(row), onMouseLeave: () => onMouseLeave && onMouseLeave(row), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { onClick: () => onClickRow && onClickRow(row.original, cell.column), className: cell.id.includes("__") ? cell.id.split("__")[1] : "", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }), _jsx(AppPagination, { totalElements: totalElements, pagination: pagination, setPagination: setPagination, numItens: numItens })] }) }));
|
|
62
62
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useTranslation } from
|
|
3
|
-
import { Button } from
|
|
4
|
-
import AppModal from
|
|
5
|
-
import Storage from
|
|
6
|
-
import { useTourUtils } from
|
|
7
|
-
import
|
|
2
|
+
import { useTranslation } from "react-i18next";
|
|
3
|
+
import { Button } from "tycho-storybook";
|
|
4
|
+
import AppModal from "../../AppModal/AppModal";
|
|
5
|
+
import Storage from "../../configs/Storage";
|
|
6
|
+
import { useTourUtils } from "../../configs/useTourUtils";
|
|
7
|
+
import "./style.scss";
|
|
8
8
|
export default function HelpModal({ onClose, helpActions = [] }) {
|
|
9
|
-
const { t } = useTranslation(
|
|
9
|
+
const { t } = useTranslation("help");
|
|
10
10
|
const { turnOn, turnOff, status } = useTourUtils();
|
|
11
11
|
const isTourActive = status();
|
|
12
12
|
const isAutoOpenEnabled = Storage.getTourAutoOpen();
|
|
13
13
|
const handleTutorials = () => {
|
|
14
|
-
window.open(
|
|
14
|
+
window.open("https://www.tycho.iel.unicamp.br/home/tutorials", "_blank");
|
|
15
15
|
onClose();
|
|
16
16
|
};
|
|
17
17
|
const handleTourToggle = () => {
|
|
@@ -30,5 +30,5 @@ export default function HelpModal({ onClose, helpActions = [] }) {
|
|
|
30
30
|
const handleAutoOpenToggle = (event) => {
|
|
31
31
|
Storage.setTourAutoOpen(event.target.checked);
|
|
32
32
|
};
|
|
33
|
-
return (_jsxs(AppModal, { title: t(
|
|
33
|
+
return (_jsxs(AppModal, { title: t("modal.title") || "Help Center", close: onClose, hideFooter: true, className: "help-modal", children: [_jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: t("title.tutorials") }), _jsx("div", { className: "desc", children: t("description.tutorials") }), _jsx(Button, { text: t("button.open", { title: t("title.tutorials") }), size: "small", mode: "outlined", icon: "keyboard_arrow_right", onClick: handleTutorials })] }), _jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: t("title.tour") }), _jsx("div", { className: "desc", children: t("description.tour") }), _jsxs("label", { className: "help-checkbox-label", children: [_jsx("input", { type: "checkbox", checked: isAutoOpenEnabled, onChange: handleAutoOpenToggle, className: "help-checkbox" }), _jsx("span", { children: t("checkbox.autoOpen") })] }), _jsx(Button, { text: t("button.open", { title: t("title.tour") }), size: "small", mode: "outlined", icon: "keyboard_arrow_right", onClick: handleTourToggle })] }), helpActions.map((item, idx) => (_jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: item.title }), _jsx("div", { className: "desc", children: item.desc }), _jsx(Button, { text: t("button.open", { title: item.title }), size: "small", mode: "outlined", icon: "keyboard_arrow_right", onClick: () => handleCustomAction(item) })] }, idx)))] }));
|
|
34
34
|
}
|