tycho-components 0.0.17-SNAPSHOT-7 → 0.0.17-SNAPSHOT-10
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.
|
@@ -8,6 +8,7 @@ type Props = {
|
|
|
8
8
|
onMouseEnter?: (row: any) => void;
|
|
9
9
|
onMouseLeave?: (row: any) => void;
|
|
10
10
|
hiddenColumns?: string[];
|
|
11
|
+
filter?: [string, string];
|
|
11
12
|
};
|
|
12
|
-
export default function AppListTable({ columns, data, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default function AppListTable({ columns, data, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, filter, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export {};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Paper, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
|
|
3
|
-
import { flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
|
|
3
|
+
import { flexRender, getCoreRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
|
|
4
4
|
import { Table, ThemeProvider } from 'react-bootstrap';
|
|
5
5
|
import { tableTheme } from './AppTableTheme';
|
|
6
6
|
import './styles.scss';
|
|
7
|
-
|
|
7
|
+
import { useEffect } from 'react';
|
|
8
|
+
export default function AppListTable({ columns, data, className = '', onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, filter, }) {
|
|
8
9
|
const columnVisibility = hiddenColumns?.reduce((acc, key) => {
|
|
9
10
|
acc[key] = false;
|
|
10
11
|
return acc;
|
|
@@ -16,11 +17,22 @@ export default function AppListTable({ columns, data, className = '', onClickRow
|
|
|
16
17
|
columnVisibility,
|
|
17
18
|
},
|
|
18
19
|
getCoreRowModel: getCoreRowModel(),
|
|
20
|
+
getFilteredRowModel: getFilteredRowModel(),
|
|
19
21
|
});
|
|
20
22
|
const handleClickRow = (row) => {
|
|
21
23
|
if (onClickRow)
|
|
22
24
|
onClickRow(row.original);
|
|
23
25
|
};
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (!filter)
|
|
28
|
+
return;
|
|
29
|
+
if (filter[1]) {
|
|
30
|
+
table.getColumn(filter[0])?.setFilterValue(filter[1]);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
table.getColumn(filter[0])?.setFilterValue(undefined);
|
|
34
|
+
}
|
|
35
|
+
}, [filter]);
|
|
24
36
|
return (_jsx(ThemeProvider, { theme: tableTheme, children: _jsx(Paper, { className: `ds-table ${className}`, children: _jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableCell, { style: { width: header.getSize() }, children: header.isPlaceholder
|
|
25
37
|
? null
|
|
26
38
|
: flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { onClick: () => handleClickRow(row), onMouseEnter: () => onMouseEnter?.(row), onMouseLeave: () => onMouseLeave?.(row), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }) }) }));
|
|
@@ -4,13 +4,15 @@ import { useTranslation } from 'react-i18next';
|
|
|
4
4
|
import { Avatar, Icon, ProfileDropdown } from 'tycho-storybook';
|
|
5
5
|
import { useLoggedUtils } from '../../configs/useLoggedUtils';
|
|
6
6
|
import './style.scss';
|
|
7
|
+
import { useNavigate } from 'react-router-dom';
|
|
7
8
|
export default function HeaderUser({ navigateLogout }) {
|
|
8
9
|
const { t } = useTranslation('header');
|
|
9
10
|
const { isLogged, getLogged } = useLoggedUtils();
|
|
11
|
+
const navigate = useNavigate();
|
|
10
12
|
const [open, setOpen] = useState(false);
|
|
11
13
|
const handleProfile = () => {
|
|
12
14
|
setOpen(false);
|
|
13
15
|
window.open(import.meta.env.VITE_APP_PROFILE_URL, '_blank');
|
|
14
16
|
};
|
|
15
|
-
return (_jsxs("div", { className: "header-user-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name, onClick: (b) => setOpen(b) })) : (_jsx(Avatar, { size: "small" })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: navigateLogout, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));
|
|
17
|
+
return (_jsxs("div", { className: "header-user-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name, onClick: (b) => setOpen(b) })) : (_jsx(Avatar, { size: "small", onClick: () => navigate('/auth') })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: navigateLogout, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));
|
|
16
18
|
}
|
package/dist/Header/styles.scss
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tycho-components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.17-SNAPSHOT-
|
|
4
|
+
"version": "0.0.17-SNAPSHOT-10",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"exports": {
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"react-hook-form": "^7.45.2",
|
|
50
50
|
"react-i18next": "^13.0.2",
|
|
51
51
|
"react-router-dom": "^6.14.2",
|
|
52
|
-
"tycho-storybook": "0.1.7-
|
|
52
|
+
"tycho-storybook": "0.1.7-r4",
|
|
53
53
|
"yup": "^1.2.0"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|