@ssplib/react-components 0.0.197 → 0.0.199
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.
|
@@ -76,6 +76,6 @@ function CustomModalProvider() {
|
|
|
76
76
|
react_1.default.createElement(CloseRounded_1.default, { sx: {
|
|
77
77
|
transform: 'scale(.9)',
|
|
78
78
|
} })),
|
|
79
|
-
react_1.default.createElement(material_1.Box, { overflow: 'auto', maxHeight: '90vh', p: 2, marginTop: 4, borderTop: 'solid 1px gray', bgcolor: '#F9F9F9' }, content))))));
|
|
79
|
+
react_1.default.createElement(material_1.Box, { overflow: 'auto', maxHeight: '90vh', p: 2, marginTop: 4, borderTop: 'solid 1px gray', bgcolor: '#F9F9F9', borderRadius: 2 }, content))))));
|
|
80
80
|
}
|
|
81
81
|
exports.CustomModalProvider = CustomModalProvider;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export default function TabNavBar({ links, title, img, pos, next, el, menuItems, color, route, paddingBottom, logoutMsg, ...props }: {
|
|
3
|
+
links: {
|
|
4
|
+
name: string;
|
|
5
|
+
path: string;
|
|
6
|
+
}[];
|
|
7
|
+
title: string;
|
|
8
|
+
img: string;
|
|
9
|
+
color?: string;
|
|
10
|
+
route?: string;
|
|
11
|
+
paddingBottom?: number;
|
|
12
|
+
menuItems: JSX.Element | JSX.Element[];
|
|
13
|
+
next?: boolean;
|
|
14
|
+
el?: JSX.Element;
|
|
15
|
+
logoutMsg?: string;
|
|
16
|
+
pos?: 'fixed' | 'inherit';
|
|
17
|
+
}): JSX.Element;
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
|
|
41
|
+
const LogoutOutlined_1 = __importDefault(require("@mui/icons-material/LogoutOutlined"));
|
|
42
|
+
const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
|
|
43
|
+
const Person_1 = __importDefault(require("@mui/icons-material/Person"));
|
|
44
|
+
const material_1 = require("@mui/material");
|
|
45
|
+
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
|
|
46
|
+
const image_1 = __importDefault(require("next/image"));
|
|
47
|
+
const link_1 = __importDefault(require("next/link"));
|
|
48
|
+
const router_1 = require("next/router");
|
|
49
|
+
const react_1 = __importStar(require("react"));
|
|
50
|
+
const auth_1 = require("../../context/auth");
|
|
51
|
+
function verificarRota(route, path) {
|
|
52
|
+
if (path === '/')
|
|
53
|
+
return route === path;
|
|
54
|
+
return route.startsWith(path);
|
|
55
|
+
}
|
|
56
|
+
function TabNavBar(_a) {
|
|
57
|
+
var { links, title, img, pos = 'fixed', next = true, el, menuItems, color = 'blue', route = '/teste/89', paddingBottom = 0, logoutMsg = 'Sair' } = _a, props = __rest(_a, ["links", "title", "img", "pos", "next", "el", "menuItems", "color", "route", "paddingBottom", "logoutMsg"]);
|
|
58
|
+
let router = undefined;
|
|
59
|
+
if (next)
|
|
60
|
+
router = (0, router_1.useRouter)();
|
|
61
|
+
const { user, login, logout, type } = (0, react_1.useContext)(auth_1.AuthContext);
|
|
62
|
+
const [anchor, setAnchor] = (0, react_1.useState)(null);
|
|
63
|
+
const [avatarAnchor, setAvatarAnchor] = (0, react_1.useState)(null);
|
|
64
|
+
const menuOpen = Boolean(anchor);
|
|
65
|
+
const avatarMenu = Boolean(avatarAnchor);
|
|
66
|
+
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
67
|
+
const onMenuClick = (0, react_1.useCallback)((e) => {
|
|
68
|
+
setAnchor(e.currentTarget);
|
|
69
|
+
}, []);
|
|
70
|
+
const closeMenu = (0, react_1.useCallback)(() => {
|
|
71
|
+
setAnchor(null);
|
|
72
|
+
}, []);
|
|
73
|
+
const onMenuItemClick = (0, react_1.useCallback)((e, link) => {
|
|
74
|
+
setLoading(true);
|
|
75
|
+
setAnchor(null);
|
|
76
|
+
if (router)
|
|
77
|
+
router
|
|
78
|
+
.push({
|
|
79
|
+
pathname: link,
|
|
80
|
+
})
|
|
81
|
+
.finally(() => setLoading(false));
|
|
82
|
+
else {
|
|
83
|
+
setLoading(false);
|
|
84
|
+
}
|
|
85
|
+
}, [router]);
|
|
86
|
+
function changeRoute(e, path) {
|
|
87
|
+
setLoading(true);
|
|
88
|
+
if (router) {
|
|
89
|
+
router
|
|
90
|
+
.push({
|
|
91
|
+
pathname: path,
|
|
92
|
+
})
|
|
93
|
+
.finally(() => setLoading(false));
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
setLoading(false);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
100
|
+
react_1.default.createElement(material_1.Box, { position: pos, sx: { width: '100%', zIndex: 100 } },
|
|
101
|
+
react_1.default.createElement(material_1.AppBar, { position: 'relative', elevation: 0, sx: { backgroundColor: 'white', color: 'black', paddingY: 1, paddingX: { xs: 1, md: 4 } } },
|
|
102
|
+
react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'space-between' },
|
|
103
|
+
react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', spacing: 2, marginRight: 2, sx: { display: { xs: 'none', md: 'flex' }, width: '100%' } },
|
|
104
|
+
react_1.default.createElement(link_1.default, { href: '/' }, next ? react_1.default.createElement(image_1.default, { src: img, alt: title, width: 40, height: 40 }) : react_1.default.createElement("img", { src: img, height: 35 })),
|
|
105
|
+
react_1.default.createElement(material_1.Box, null,
|
|
106
|
+
react_1.default.createElement(material_1.Typography, { variant: 'subtitle1', fontWeight: 600 }, title))),
|
|
107
|
+
react_1.default.createElement(material_1.Stack, { direction: 'row', width: '100%', justifyContent: 'center', alignItems: 'center', spacing: 2 }, links.map((x) => (react_1.default.createElement(material_1.Box
|
|
108
|
+
// borderBottom={next ? (router?.pathname.startsWith(x.path) ? `solid 2px ${color}` : '') : `solid 2px ${color}`}
|
|
109
|
+
, {
|
|
110
|
+
// borderBottom={next ? (router?.pathname.startsWith(x.path) ? `solid 2px ${color}` : '') : `solid 2px ${color}`}
|
|
111
|
+
borderBottom: next ? (verificarRota(route, x.path) ? `solid 4px ${color}` : '') : verificarRota(route, x.path) ? `solid 4px ${color}` : '', height: '100%', paddingX: 2, sx: {
|
|
112
|
+
':hover': {
|
|
113
|
+
backgroundColor: '#fcfcfc',
|
|
114
|
+
cursor: 'pointer',
|
|
115
|
+
userSelect: 'none',
|
|
116
|
+
},
|
|
117
|
+
}, onClick: (e) => {
|
|
118
|
+
next && console.log('pathname:', router === null || router === void 0 ? void 0 : router.pathname, ':=', x.path);
|
|
119
|
+
changeRoute(e, x.path);
|
|
120
|
+
} },
|
|
121
|
+
react_1.default.createElement(material_1.Stack, { height: '95%', justifyContent: 'center' }, x.name))))),
|
|
122
|
+
react_1.default.createElement(material_1.Box, { sx: {
|
|
123
|
+
display: {
|
|
124
|
+
xs: 'flex',
|
|
125
|
+
md: 'none',
|
|
126
|
+
},
|
|
127
|
+
} }, links.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
128
|
+
react_1.default.createElement(material_1.IconButton, { onClick: onMenuClick },
|
|
129
|
+
react_1.default.createElement(Menu_1.default, null)),
|
|
130
|
+
react_1.default.createElement(material_1.Menu, { open: menuOpen, onClose: closeMenu, anchorEl: anchor }, links.map((x) => (react_1.default.createElement(material_1.MenuItem, { key: `navmenu${x}`, onClick: (e) => onMenuItemClick(e, x.path) },
|
|
131
|
+
react_1.default.createElement(material_1.Typography, { textTransform: 'capitalize' }, x.name)))))))),
|
|
132
|
+
react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', alignItems: 'center', sx: { width: { md: '100%' } } },
|
|
133
|
+
react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 2 },
|
|
134
|
+
react_1.default.createElement(material_1.Box, null, el),
|
|
135
|
+
user ? (react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1, sx: {
|
|
136
|
+
'&:hover': {
|
|
137
|
+
backgroundColor: '#a9def9',
|
|
138
|
+
cursor: 'pointer',
|
|
139
|
+
},
|
|
140
|
+
padding: 0.5,
|
|
141
|
+
borderRadius: 60,
|
|
142
|
+
} },
|
|
143
|
+
react_1.default.createElement(material_1.Box, { sx: { display: 'flex', alignItems: 'center' } },
|
|
144
|
+
react_1.default.createElement(material_1.Avatar, { sx: { width: 30, height: 30 }, src: user.image }),
|
|
145
|
+
react_1.default.createElement(material_1.Menu, { open: avatarMenu, onClose: (e) => setAvatarAnchor(null), anchorEl: avatarAnchor, disableScrollLock: true, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, sx: { '.MuiMenu-paper': { borderRadius: 4 } } },
|
|
146
|
+
menuItems,
|
|
147
|
+
react_1.default.createElement(material_1.MenuItem, { onClick: (e) => {
|
|
148
|
+
setAvatarAnchor(null);
|
|
149
|
+
logout();
|
|
150
|
+
} },
|
|
151
|
+
react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1 },
|
|
152
|
+
react_1.default.createElement(LogoutOutlined_1.default, { sx: { fill: '#545454' } }),
|
|
153
|
+
react_1.default.createElement(material_1.Typography, { textTransform: 'capitalize' }, logoutMsg))))),
|
|
154
|
+
react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 0.4, alignItems: 'center', onClick: (e) => setAvatarAnchor(e.currentTarget), sx: { userSelect: 'none' } },
|
|
155
|
+
react_1.default.createElement(material_1.Typography, null, "Ol\u00E1,"),
|
|
156
|
+
react_1.default.createElement(material_1.Typography, { fontWeight: 600 }, user.given_name),
|
|
157
|
+
react_1.default.createElement(KeyboardArrowDown_1.default, null)))) : type === 'govbr' ? (react_1.default.createElement(material_1.Button, { variant: 'contained', size: 'small', startIcon: react_1.default.createElement(Person_1.default, null), onClick: login, sx: { color: 'white', textTransform: 'inherit', borderRadius: 50, paddingX: 2 } },
|
|
158
|
+
react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 15, padding: 0.4 }, "Entrar com o gov.br"))) : (react_1.default.createElement(material_1.Button, { variant: 'contained', size: 'small', startIcon: react_1.default.createElement(Person_1.default, null), onClick: login, sx: { color: 'white', textTransform: 'inherit', borderRadius: 50, paddingX: 2 } },
|
|
159
|
+
react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 15, padding: 0.4 }, "Entrar"))))))),
|
|
160
|
+
loading && react_1.default.createElement(LinearProgress_1.default, null)),
|
|
161
|
+
react_1.default.createElement(material_1.Box, { paddingBottom: paddingBottom })));
|
|
162
|
+
}
|
|
163
|
+
exports.default = TabNavBar;
|
|
@@ -79,6 +79,12 @@ function KeycloakAuthProvider({ url, realm, clientId, children, type = 'ad', res
|
|
|
79
79
|
}
|
|
80
80
|
}, []);
|
|
81
81
|
function login() {
|
|
82
|
+
console.log('Tentando logar...');
|
|
83
|
+
console.log('KC: ', {
|
|
84
|
+
instancia: kc,
|
|
85
|
+
logado: kc === null || kc === void 0 ? void 0 : kc.authenticated,
|
|
86
|
+
client_id: kc === null || kc === void 0 ? void 0 : kc.clientId,
|
|
87
|
+
});
|
|
82
88
|
kc === null || kc === void 0 ? void 0 : kc.login();
|
|
83
89
|
}
|
|
84
90
|
function logout() {
|
package/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ import Switch from './components/form/switch/Switch';
|
|
|
16
16
|
import { SwitchWatch, ToggleVisibility } from './components/form/switch/ToggleVisibility';
|
|
17
17
|
import Table from './components/form/table/Table';
|
|
18
18
|
import NavBar from './components/navbar/NavBar';
|
|
19
|
+
import TabNavBar from './components/navbar/TabNavBar';
|
|
19
20
|
import FormProvider from './components/providers/FormProvider';
|
|
20
21
|
import { OAuthProvider, cookieName as AUTH_COOKIE_NAME } from './components/providers/OAuthProvider';
|
|
21
22
|
import { AuthContext } from './context/auth';
|
|
@@ -31,4 +32,4 @@ import { FixedAutoComplete } from './components/form/input/FixedAutoComplete';
|
|
|
31
32
|
import DropFileUpload from './components/form/file/DropFileUpload';
|
|
32
33
|
import { MODAL } from './components/modal/Modal';
|
|
33
34
|
import { SspComponentsProvider } from './components/providers/SspComponentsProvider';
|
|
34
|
-
export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, KeycloakAuthProvider, CheckBoxAdditional, RequiredCheckBoxGroup, FixedAutoComplete, Category, Field, FieldLabel, File, DropFileUpload, MODAL, SspComponentsProvider };
|
|
35
|
+
export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, KeycloakAuthProvider, CheckBoxAdditional, RequiredCheckBoxGroup, FixedAutoComplete, Category, Field, FieldLabel, File, DropFileUpload, MODAL, SspComponentsProvider, TabNavBar };
|
package/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.SspComponentsProvider = exports.MODAL = exports.DropFileUpload = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.FixedAutoComplete = exports.RequiredCheckBoxGroup = exports.CheckBoxAdditional = exports.KeycloakAuthProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
|
|
6
|
+
exports.TabNavBar = exports.SspComponentsProvider = exports.MODAL = exports.DropFileUpload = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.FixedAutoComplete = exports.RequiredCheckBoxGroup = exports.CheckBoxAdditional = exports.KeycloakAuthProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
|
|
7
7
|
const CheckBox_1 = __importDefault(require("./components/form/checkbox/CheckBox"));
|
|
8
8
|
exports.CheckBox = CheckBox_1.default;
|
|
9
9
|
const CheckBoxWarning_1 = __importDefault(require("./components/form/checkbox/CheckBoxWarning"));
|
|
@@ -41,6 +41,8 @@ const Table_1 = __importDefault(require("./components/form/table/Table"));
|
|
|
41
41
|
exports.Table = Table_1.default;
|
|
42
42
|
const NavBar_1 = __importDefault(require("./components/navbar/NavBar"));
|
|
43
43
|
exports.NavBar = NavBar_1.default;
|
|
44
|
+
const TabNavBar_1 = __importDefault(require("./components/navbar/TabNavBar"));
|
|
45
|
+
exports.TabNavBar = TabNavBar_1.default;
|
|
44
46
|
const FormProvider_1 = __importDefault(require("./components/providers/FormProvider"));
|
|
45
47
|
exports.FormProvider = FormProvider_1.default;
|
|
46
48
|
const OAuthProvider_1 = require("./components/providers/OAuthProvider");
|