funuicss 2.5.0 → 2.5.1
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.
- package/css/fun.css +3 -9
- package/index.d.ts +35 -0
- package/index.js +76 -0
- package/index.tsx +35 -0
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/ui/alert/Alert.d.ts +5 -3
- package/ui/alert/Alert.js +27 -23
- package/ui/alert/Alert.tsx +71 -86
- package/ui/modal/Modal.d.ts +8 -2
- package/ui/modal/Modal.js +33 -21
- package/ui/modal/Modal.tsx +99 -52
- package/ui/page/NotFound.js +5 -5
- package/ui/page/NotFound.tsx +6 -7
- package/ui/page/UnAuthorized.js +4 -2
- package/ui/page/UnAuthorized.tsx +7 -5
- package/ui/snackbar/SnackBar.d.ts +4 -1
- package/ui/snackbar/SnackBar.js +16 -14
- package/ui/snackbar/SnackBar.tsx +41 -25
- package/ui/specials/Circle.js +1 -1
- package/ui/specials/Circle.tsx +1 -1
package/ui/alert/Alert.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import * as React from 'react'
|
|
3
|
-
import { TfiCheck, TfiInfoAlt } from "react-icons/tfi";
|
|
1
|
+
'use client'
|
|
4
2
|
import { PiInfo , PiCheckCircleDuotone , PiWarning , PiX , PiSpinner } from "react-icons/pi";
|
|
3
|
+
import React, { ReactNode, useEffect, useState } from 'react';
|
|
4
|
+
|
|
5
5
|
interface AlertProps {
|
|
6
6
|
message?: string;
|
|
7
7
|
funcss?: string;
|
|
@@ -11,14 +11,17 @@ interface AlertProps {
|
|
|
11
11
|
fullWidth?: boolean;
|
|
12
12
|
isLoading?: boolean;
|
|
13
13
|
children?: ReactNode;
|
|
14
|
-
animation?:string
|
|
15
|
-
duration?:string
|
|
16
|
-
raised?:boolean
|
|
17
|
-
card?:boolean
|
|
18
|
-
variant?:string
|
|
19
|
-
flat?:boolean
|
|
20
|
-
standard?:boolean
|
|
21
|
-
style?:React.CSSProperties
|
|
14
|
+
animation?: string;
|
|
15
|
+
duration?: string;
|
|
16
|
+
raised?: boolean;
|
|
17
|
+
card?: boolean;
|
|
18
|
+
variant?: string;
|
|
19
|
+
flat?: boolean;
|
|
20
|
+
standard?: boolean;
|
|
21
|
+
style?: React.CSSProperties;
|
|
22
|
+
autoHide?: boolean;
|
|
23
|
+
autoHideDuration?: number;
|
|
24
|
+
onClose?: () => void;
|
|
22
25
|
}
|
|
23
26
|
|
|
24
27
|
export default function Alert({
|
|
@@ -30,92 +33,74 @@ export default function Alert({
|
|
|
30
33
|
raised,
|
|
31
34
|
fullWidth,
|
|
32
35
|
isLoading,
|
|
33
|
-
children,
|
|
36
|
+
children,
|
|
34
37
|
animation,
|
|
35
|
-
duration
|
|
38
|
+
duration,
|
|
36
39
|
variant,
|
|
37
40
|
flat,
|
|
38
41
|
standard,
|
|
39
42
|
card,
|
|
40
43
|
style,
|
|
44
|
+
autoHide = false,
|
|
45
|
+
autoHideDuration = 3000,
|
|
46
|
+
onClose,
|
|
41
47
|
...rest
|
|
42
48
|
}: AlertProps) {
|
|
43
|
-
|
|
44
|
-
<div className={
|
|
45
|
-
`
|
|
46
|
-
${fixed ? 'alert-container ' : ''}
|
|
47
|
-
${fixed === "top-left" ? "top-left" : ""}
|
|
48
|
-
${fixed === "top-right" ? "top-right" : ""}
|
|
49
|
-
${fixed === "bottom-left" ? "bottom-left" : ""}
|
|
50
|
-
${fixed === "bottom-right" ? "bottom-right" : ""}
|
|
51
|
-
${fixed === "middle" ? "middle-alert" : ""}
|
|
52
|
-
${fixed === "top-middle" ? "top-middle" : ""}
|
|
53
|
-
${fixed === "bottom-middle" ? "bottom-middle" : ""}`
|
|
54
|
-
}>
|
|
55
|
-
{outlined ? (
|
|
56
|
-
<div
|
|
57
|
-
style={{
|
|
58
|
-
animation: `${duration ? duration : "0.3"}s ${animation ? animation : "ScaleUp"}`,
|
|
59
|
-
...style
|
|
60
|
-
}}
|
|
61
|
-
className={`alert ${card ? "card" : ""} ${flat ? "flat" : ""} ${raised ? 'raised' : ''} ${type}-outline
|
|
49
|
+
const [visible, setVisible] = useState(true);
|
|
62
50
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
{
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
{type === "danger" && <PiX />}
|
|
74
|
-
</div>
|
|
75
|
-
) : (
|
|
76
|
-
<span className='rotate'> <PiSpinner /> </span>
|
|
77
|
-
)}
|
|
78
|
-
</div>
|
|
79
|
-
<div className="alert-text">
|
|
80
|
-
{message ? message : children ? children : ""}
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
) : (
|
|
84
|
-
""
|
|
85
|
-
)}
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
let timeout: NodeJS.Timeout;
|
|
53
|
+
if (autoHide) {
|
|
54
|
+
timeout = setTimeout(() => {
|
|
55
|
+
setVisible(false);
|
|
56
|
+
onClose?.();
|
|
57
|
+
}, autoHideDuration);
|
|
58
|
+
}
|
|
59
|
+
return () => clearTimeout(timeout);
|
|
60
|
+
}, [autoHide, autoHideDuration, onClose]);
|
|
86
61
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
62
|
+
if (!visible) return null;
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<div
|
|
66
|
+
className={`${
|
|
67
|
+
fixed ? 'alert-container ' : ''
|
|
68
|
+
} ${fixed === 'top-left' ? 'top-left' : ''}
|
|
69
|
+
${fixed === 'top-right' ? 'top-right' : ''}
|
|
70
|
+
${fixed === 'bottom-left' ? 'bottom-left' : ''}
|
|
71
|
+
${fixed === 'bottom-right' ? 'bottom-right' : ''}
|
|
72
|
+
${fixed === 'middle' ? 'middle-alert' : ''}
|
|
73
|
+
${fixed === 'top-middle' ? 'top-middle' : ''}
|
|
74
|
+
${fixed === 'bottom-middle' ? 'bottom-middle' : ''}`}
|
|
75
|
+
>
|
|
76
|
+
<div
|
|
77
|
+
style={{
|
|
78
|
+
animation: `${duration || '0.3'}s ${animation || 'ScaleUp'}`,
|
|
79
|
+
...style,
|
|
80
|
+
}}
|
|
81
|
+
className={`alert ${card ? 'card' : ''} ${flat ? 'flat' : ''} ${raised ? 'raised' : ''} ${
|
|
82
|
+
outlined
|
|
83
|
+
? `${type}-outline`
|
|
84
|
+
: `${variant || (standard ? `top-${type}` : type)}`
|
|
85
|
+
} ${funcss || ''} ${fullWidth ? 'width-100-p' : ''}`}
|
|
86
|
+
{...rest}
|
|
87
|
+
>
|
|
88
|
+
<div className="alert-icon">
|
|
89
|
+
{!isLoading ? (
|
|
90
|
+
<div className={`text-${type}`}>
|
|
91
|
+
{type === 'success' && <PiCheckCircleDuotone />}
|
|
92
|
+
{type === 'info' && <PiInfo />}
|
|
93
|
+
{type === 'warning' && <PiWarning />}
|
|
94
|
+
{type === 'danger' && <PiX />}
|
|
95
|
+
</div>
|
|
96
|
+
) : (
|
|
97
|
+
<span className="rotate">
|
|
98
|
+
<PiSpinner />
|
|
99
|
+
</span>
|
|
100
|
+
)}
|
|
115
101
|
</div>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
)}
|
|
102
|
+
<div className="alert-text">{message || children}</div>
|
|
103
|
+
</div>
|
|
119
104
|
</div>
|
|
120
105
|
);
|
|
121
106
|
}
|
package/ui/modal/Modal.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
interface ModalProps {
|
|
3
|
-
children
|
|
3
|
+
children?: React.ReactNode;
|
|
4
4
|
funcss?: string;
|
|
5
5
|
animation?: string;
|
|
6
6
|
duration?: number;
|
|
7
7
|
open: boolean;
|
|
8
|
+
setOpen: (val: boolean) => void;
|
|
8
9
|
maxWidth?: string;
|
|
9
10
|
maxHeight?: string;
|
|
10
11
|
height?: string;
|
|
@@ -13,6 +14,7 @@ interface ModalProps {
|
|
|
13
14
|
body?: React.ReactNode;
|
|
14
15
|
bodycss?: string;
|
|
15
16
|
title?: React.ReactNode;
|
|
17
|
+
okIcon?: React.ReactNode;
|
|
16
18
|
titlecss?: string;
|
|
17
19
|
footer?: React.ReactNode;
|
|
18
20
|
footercss?: string;
|
|
@@ -21,6 +23,10 @@ interface ModalProps {
|
|
|
21
23
|
id?: string;
|
|
22
24
|
position?: string;
|
|
23
25
|
flat?: boolean;
|
|
26
|
+
onOk?: () => void;
|
|
27
|
+
onOkText?: string;
|
|
24
28
|
}
|
|
25
|
-
export default function Modal({ children, funcss, animation, duration, open, maxWidth, maxHeight, height, width, backdrop, title, titlecss, body, bodycss, footer, footercss, close, closecss, position, id, flat,
|
|
29
|
+
export default function Modal({ children, funcss, animation, duration, open, setOpen, maxWidth, maxHeight, okIcon, height, width, backdrop, title, titlecss, body, bodycss, footer, footercss, close, closecss, position, id, flat, onOk, // 👈 added
|
|
30
|
+
onOkText, // 👈 added
|
|
31
|
+
...rest }: ModalProps): React.JSX.Element;
|
|
26
32
|
export {};
|
package/ui/modal/Modal.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
var __assign = (this && this.__assign) || function () {
|
|
3
4
|
__assign = Object.assign || function(t) {
|
|
@@ -52,27 +53,38 @@ var React = __importStar(require("react"));
|
|
|
52
53
|
var Header_1 = __importDefault(require("./Header"));
|
|
53
54
|
var Content_1 = __importDefault(require("./Content"));
|
|
54
55
|
var Action_1 = __importDefault(require("./Action"));
|
|
56
|
+
var pi_1 = require("react-icons/pi");
|
|
57
|
+
var Button_1 = __importDefault(require("../button/Button"));
|
|
55
58
|
function Modal(_a) {
|
|
56
|
-
var children = _a.children, funcss = _a.funcss, animation = _a.animation, duration = _a.duration, open = _a.open, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, height = _a.height, width = _a.width,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
59
|
+
var children = _a.children, funcss = _a.funcss, animation = _a.animation, duration = _a.duration, open = _a.open, setOpen = _a.setOpen, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, okIcon = _a.okIcon, height = _a.height, width = _a.width, _b = _a.backdrop, backdrop = _b === void 0 ? false : _b, title = _a.title, titlecss = _a.titlecss, body = _a.body, bodycss = _a.bodycss, footer = _a.footer, footercss = _a.footercss, close = _a.close, closecss = _a.closecss, position = _a.position, id = _a.id, flat = _a.flat, onOk = _a.onOk, // 👈 added
|
|
60
|
+
onOkText = _a.onOkText, // 👈 added
|
|
61
|
+
rest = __rest(_a, ["children", "funcss", "animation", "duration", "open", "setOpen", "maxWidth", "maxHeight", "okIcon", "height", "width", "backdrop", "title", "titlecss", "body", "bodycss", "footer", "footercss", "close", "closecss", "position", "id", "flat", "onOk", "onOkText"]);
|
|
62
|
+
var modalId = id || '_mymodal';
|
|
63
|
+
var handleClickOutside = function (e) {
|
|
64
|
+
if (e.target && e.target.id === modalId) {
|
|
65
|
+
setOpen(false);
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
var handleOkClick = function () {
|
|
69
|
+
if (onOk)
|
|
70
|
+
onOk();
|
|
71
|
+
else
|
|
72
|
+
setOpen(false); // default behavior if no onOk is provided
|
|
73
|
+
};
|
|
74
|
+
if (!open)
|
|
75
|
+
return null;
|
|
76
|
+
return (React.createElement("div", { className: "modal ".concat(backdrop ? 'backdrop' : '', " ").concat(position || ''), id: modalId, onClick: handleClickOutside },
|
|
77
|
+
React.createElement("div", __assign({ className: "modal-content ".concat(funcss || '', " ").concat(flat ? 'flat' : ''), style: {
|
|
78
|
+
animation: "".concat(duration || 0.2, "s ").concat(animation || 'ScaleUp'),
|
|
79
|
+
maxWidth: maxWidth || undefined,
|
|
80
|
+
maxHeight: maxHeight || undefined,
|
|
81
|
+
width: width || undefined,
|
|
82
|
+
height: height || undefined,
|
|
83
|
+
} }, rest),
|
|
84
|
+
title && (React.createElement(Header_1.default, { funcss: titlecss || '', title: title, close: React.createElement("div", { onClick: function () { return setOpen(false); }, className: "".concat(closecss || '', " pointer hover-text-error") }, close || React.createElement(pi_1.PiX, { size: 30 })) })),
|
|
85
|
+
body && (React.createElement(Content_1.default, { funcss: bodycss || '' }, body)),
|
|
86
|
+
footer ? (React.createElement(Action_1.default, { funcss: footercss || '' }, footer)) : (React.createElement(Action_1.default, { funcss: 'text-right' },
|
|
87
|
+
React.createElement(Button_1.default, { bg: 'success800', endIcon: okIcon || React.createElement(pi_1.PiPaperPlaneRight, null), raised: true, onClick: handleOkClick }, onOkText || 'OK'))),
|
|
88
|
+
children)));
|
|
77
89
|
}
|
|
78
90
|
exports.default = Modal;
|
package/ui/modal/Modal.tsx
CHANGED
|
@@ -1,31 +1,37 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import ModalHeader from './Header';
|
|
3
4
|
import ModalContent from './Content';
|
|
4
5
|
import ModalAction from './Action';
|
|
5
|
-
import
|
|
6
|
+
import { PiX , PiPaperPlaneRight} from 'react-icons/pi';
|
|
7
|
+
import Button from '../button/Button';
|
|
6
8
|
|
|
7
9
|
interface ModalProps {
|
|
8
|
-
children
|
|
10
|
+
children?: React.ReactNode;
|
|
9
11
|
funcss?: string;
|
|
10
12
|
animation?: string;
|
|
11
13
|
duration?: number;
|
|
12
14
|
open: boolean;
|
|
15
|
+
setOpen: (val: boolean) => void;
|
|
13
16
|
maxWidth?: string;
|
|
14
17
|
maxHeight?: string;
|
|
15
18
|
height?: string;
|
|
16
19
|
width?: string;
|
|
17
20
|
backdrop?: boolean;
|
|
18
|
-
body?:React.ReactNode
|
|
19
|
-
bodycss?:string
|
|
20
|
-
title?:React.ReactNode
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
body?: React.ReactNode;
|
|
22
|
+
bodycss?: string;
|
|
23
|
+
title?: React.ReactNode;
|
|
24
|
+
okIcon?: React.ReactNode;
|
|
25
|
+
titlecss?: string;
|
|
26
|
+
footer?: React.ReactNode;
|
|
27
|
+
footercss?: string;
|
|
28
|
+
close?: React.ReactNode;
|
|
29
|
+
closecss?: string;
|
|
30
|
+
id?: string;
|
|
31
|
+
position?: string;
|
|
32
|
+
flat?: boolean;
|
|
33
|
+
onOk?: () => void; // 👈 new
|
|
34
|
+
onOkText?: string; // 👈 new
|
|
29
35
|
}
|
|
30
36
|
|
|
31
37
|
export default function Modal({
|
|
@@ -34,11 +40,13 @@ export default function Modal({
|
|
|
34
40
|
animation,
|
|
35
41
|
duration,
|
|
36
42
|
open,
|
|
43
|
+
setOpen,
|
|
37
44
|
maxWidth,
|
|
38
45
|
maxHeight,
|
|
46
|
+
okIcon,
|
|
39
47
|
height,
|
|
40
48
|
width,
|
|
41
|
-
backdrop,
|
|
49
|
+
backdrop = false,
|
|
42
50
|
title,
|
|
43
51
|
titlecss,
|
|
44
52
|
body,
|
|
@@ -49,45 +57,84 @@ export default function Modal({
|
|
|
49
57
|
closecss,
|
|
50
58
|
position,
|
|
51
59
|
id,
|
|
52
|
-
flat
|
|
60
|
+
flat,
|
|
61
|
+
onOk, // 👈 added
|
|
62
|
+
onOkText, // 👈 added
|
|
53
63
|
...rest
|
|
54
64
|
}: ModalProps) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
65
|
+
const modalId = id || '_mymodal';
|
|
66
|
+
|
|
67
|
+
const handleClickOutside = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
68
|
+
if (e.target && (e.target as HTMLElement).id === modalId) {
|
|
69
|
+
setOpen(false);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
const handleOkClick = () => {
|
|
74
|
+
if (onOk) onOk();
|
|
75
|
+
else setOpen(false); // default behavior if no onOk is provided
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
if (!open) return null;
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<div
|
|
82
|
+
className={`modal ${backdrop ? 'backdrop' : ''} ${position || ''}`}
|
|
83
|
+
id={modalId}
|
|
84
|
+
onClick={handleClickOutside}
|
|
85
|
+
>
|
|
86
|
+
<div
|
|
87
|
+
className={`modal-content ${funcss || ''} ${flat ? 'flat' : ''}`}
|
|
88
|
+
style={{
|
|
89
|
+
animation: `${duration || 0.2}s ${animation || 'ScaleUp'}`,
|
|
90
|
+
maxWidth: maxWidth || undefined,
|
|
91
|
+
maxHeight: maxHeight || undefined,
|
|
92
|
+
width: width || undefined,
|
|
93
|
+
height: height || undefined,
|
|
94
|
+
}}
|
|
95
|
+
{...rest}
|
|
96
|
+
>
|
|
97
|
+
{title && (
|
|
98
|
+
<ModalHeader
|
|
99
|
+
funcss={titlecss || ''}
|
|
100
|
+
title={title}
|
|
101
|
+
close={
|
|
102
|
+
<div
|
|
103
|
+
onClick={() => setOpen(false)}
|
|
104
|
+
className={`${closecss || ''} pointer hover-text-error`}
|
|
105
|
+
>
|
|
106
|
+
{close || <PiX size={30} />}
|
|
107
|
+
</div>
|
|
108
|
+
}
|
|
109
|
+
/>
|
|
110
|
+
)}
|
|
111
|
+
|
|
112
|
+
{body && (
|
|
113
|
+
<ModalContent funcss={bodycss || ''}>
|
|
114
|
+
{body}
|
|
115
|
+
</ModalContent>
|
|
116
|
+
)}
|
|
117
|
+
|
|
118
|
+
{/* Show default Ok button if no custom footer */}
|
|
119
|
+
{footer ? (
|
|
120
|
+
<ModalAction funcss={footercss || ''}>
|
|
121
|
+
{footer}
|
|
122
|
+
</ModalAction>
|
|
123
|
+
) : (
|
|
124
|
+
<ModalAction funcss='text-right'>
|
|
125
|
+
<Button
|
|
126
|
+
bg='success800'
|
|
127
|
+
endIcon={okIcon || <PiPaperPlaneRight />}
|
|
128
|
+
raised
|
|
129
|
+
onClick={handleOkClick}
|
|
130
|
+
>
|
|
131
|
+
{onOkText || 'OK'}
|
|
132
|
+
</Button>
|
|
133
|
+
</ModalAction>
|
|
134
|
+
)}
|
|
135
|
+
|
|
136
|
+
{children}
|
|
88
137
|
</div>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
return <div></div>;
|
|
92
|
-
}
|
|
138
|
+
</div>
|
|
139
|
+
);
|
|
93
140
|
}
|
package/ui/page/NotFound.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
4
|
if (k2 === undefined) k2 = k;
|
|
@@ -41,15 +42,14 @@ function NotFound(_a) {
|
|
|
41
42
|
React.createElement("div", { className: "h2 text-warning round-edge" }, "404"),
|
|
42
43
|
React.createElement("div", { style: { margin: "1.4rem 0px" } }, header ? header
|
|
43
44
|
:
|
|
44
|
-
React.createElement("div", { className: "text-
|
|
45
|
+
React.createElement("div", { className: "text-big text-bold text-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "Page Not Found")),
|
|
45
46
|
content ? content :
|
|
46
47
|
React.createElement("div", { className: "article" },
|
|
47
48
|
React.createElement(Text_1.default, { article: true, text: "Sorry, we couldn't find the page you're looking for.", color: "dark300", block: true })),
|
|
48
49
|
React.createElement("div", { style: { margin: "2rem 0px" } }, action ? action :
|
|
49
50
|
React.createElement("div", { className: "row-flex gap", style: { justifyContent: "center", gap: "0.4rem" } },
|
|
50
|
-
React.createElement(Button_1.default, { raised: true, rounded: true, startIcon: React.createElement(pi_1.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
} }, "Back To Home"))))))));
|
|
51
|
+
React.createElement(Button_1.default, { raised: true, rounded: true, startIcon: React.createElement(pi_1.PiArrowLeft, null), bg: 'primary', onClick: function () {
|
|
52
|
+
window.history.back();
|
|
53
|
+
} }, "Go Back"))))))));
|
|
54
54
|
}
|
|
55
55
|
exports.default = NotFound;
|
package/ui/page/NotFound.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
'use client'
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import Button from '../button/Button';
|
|
3
|
-
import {
|
|
4
|
+
import {PiArrowLeft} from 'react-icons/pi'
|
|
4
5
|
import Text from '../text/Text';
|
|
5
6
|
|
|
6
7
|
interface NotFoundProps {
|
|
@@ -34,7 +35,7 @@ export default function NotFound(
|
|
|
34
35
|
{
|
|
35
36
|
header ? header
|
|
36
37
|
:
|
|
37
|
-
<div className="text-
|
|
38
|
+
<div className="text-big text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
|
|
38
39
|
Page Not Found
|
|
39
40
|
</div>
|
|
40
41
|
}
|
|
@@ -49,12 +50,10 @@ export default function NotFound(
|
|
|
49
50
|
{
|
|
50
51
|
action ? action :
|
|
51
52
|
<div className="row-flex gap" style={{ justifyContent: "center", gap: "0.4rem" }}>
|
|
52
|
-
<Button raised rounded startIcon={<
|
|
53
|
-
|
|
54
|
-
window.location.assign(previousUrl)
|
|
55
|
-
|
|
53
|
+
<Button raised rounded startIcon={<PiArrowLeft />} bg='primary' onClick={() => {
|
|
54
|
+
window.history.back()
|
|
56
55
|
}}>
|
|
57
|
-
Back
|
|
56
|
+
Go Back
|
|
58
57
|
</Button>
|
|
59
58
|
</div>
|
|
60
59
|
}
|
package/ui/page/UnAuthorized.js
CHANGED
|
@@ -40,11 +40,13 @@ function UnAuthorized(_a) {
|
|
|
40
40
|
React.createElement("div", { className: "h2 text-warning round-edge" }, "401"),
|
|
41
41
|
React.createElement("div", { style: { margin: "1.4rem 0px" } }, header ? header
|
|
42
42
|
:
|
|
43
|
-
React.createElement("div", { className: "text-bigger text-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "Unauthorized Access")),
|
|
43
|
+
React.createElement("div", { className: "text-bigger text-bold text-dark300", style: { display: "block", transition: "all 0.2s linear 0s" } }, "Unauthorized Access")),
|
|
44
44
|
content ? content :
|
|
45
45
|
React.createElement("div", { className: "article" }, "Sorry! You do not have access to this resource."),
|
|
46
46
|
React.createElement("div", { style: { margin: "2rem 0px" } }, action ? action :
|
|
47
47
|
React.createElement("div", { className: "row-flex gap", style: { justifyContent: "center", gap: "0.4rem" } },
|
|
48
|
-
React.createElement(Button_1.default, { raised: true, startIcon: React.createElement(pi_1.
|
|
48
|
+
React.createElement(Button_1.default, { raised: true, rounded: true, startIcon: React.createElement(pi_1.PiArrowLeft, null), bg: 'primary', onClick: function () {
|
|
49
|
+
window.history.back();
|
|
50
|
+
} }, "Go Back"))))))));
|
|
49
51
|
}
|
|
50
52
|
exports.default = UnAuthorized;
|
package/ui/page/UnAuthorized.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import Button from '../button/Button';
|
|
3
|
-
import {
|
|
3
|
+
import {PiArrowLeft} from 'react-icons/pi'
|
|
4
4
|
|
|
5
5
|
interface UnAuthorizedProps {
|
|
6
6
|
header?:React.ReactNode
|
|
@@ -33,7 +33,7 @@ export default function UnAuthorized(
|
|
|
33
33
|
{
|
|
34
34
|
header ? header
|
|
35
35
|
:
|
|
36
|
-
<div className="text-bigger text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
|
|
36
|
+
<div className="text-bigger text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
|
|
37
37
|
Unauthorized Access
|
|
38
38
|
</div>
|
|
39
39
|
}
|
|
@@ -48,9 +48,11 @@ export default function UnAuthorized(
|
|
|
48
48
|
{
|
|
49
49
|
action ? action :
|
|
50
50
|
<div className="row-flex gap" style={{ justifyContent: "center", gap: "0.4rem" }}>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
<Button raised rounded startIcon={<PiArrowLeft />} bg='primary' onClick={() => {
|
|
52
|
+
window.history.back()
|
|
53
|
+
}}>
|
|
54
|
+
Go Back
|
|
55
|
+
</Button>
|
|
54
56
|
</div>
|
|
55
57
|
}
|
|
56
58
|
</div>
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
interface SnackbarProps {
|
|
3
3
|
message: string;
|
|
4
|
-
close
|
|
4
|
+
close?: React.ReactNode;
|
|
5
5
|
open: boolean;
|
|
6
|
+
setOpen: (val: boolean) => void;
|
|
6
7
|
position: string;
|
|
7
8
|
funcss?: string;
|
|
8
9
|
animation?: string;
|
|
9
10
|
duration?: number;
|
|
11
|
+
autoHide?: boolean;
|
|
12
|
+
autoHideDuration?: number;
|
|
10
13
|
flat?: boolean;
|
|
11
14
|
}
|
|
12
15
|
declare const SnackBar: React.FC<SnackbarProps>;
|
package/ui/snackbar/SnackBar.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
4
|
if (k2 === undefined) k2 = k;
|
|
@@ -25,19 +26,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
25
26
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
27
|
var React = __importStar(require("react"));
|
|
27
28
|
var SnackBar = function (_a) {
|
|
28
|
-
var message = _a.message, close = _a.close, open = _a.open, position = _a.position, funcss = _a.funcss, animation = _a.animation,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
29
|
+
var message = _a.message, close = _a.close, open = _a.open, setOpen = _a.setOpen, position = _a.position, funcss = _a.funcss, animation = _a.animation, _b = _a.duration, duration = _b === void 0 ? 0.3 : _b, _c = _a.autoHide, autoHide = _c === void 0 ? false : _c, _d = _a.autoHideDuration, autoHideDuration = _d === void 0 ? 3000 : _d, flat = _a.flat;
|
|
30
|
+
React.useEffect(function () {
|
|
31
|
+
if (open && autoHide) {
|
|
32
|
+
var timer_1 = setTimeout(function () {
|
|
33
|
+
setOpen(false);
|
|
34
|
+
}, autoHideDuration);
|
|
35
|
+
return function () { return clearTimeout(timer_1); };
|
|
36
|
+
}
|
|
37
|
+
}, [open, autoHide, autoHideDuration, setOpen]);
|
|
38
|
+
if (!open)
|
|
39
|
+
return null;
|
|
40
|
+
return (React.createElement("div", { className: "snackbar ".concat(position, " ").concat(funcss || '', " ").concat(flat ? 'flat' : ''), style: { animation: "".concat(duration, "s ").concat(animation || 'SlideUp') } },
|
|
41
|
+
React.createElement("div", { className: "snackbar-content" },
|
|
42
|
+
React.createElement("div", { className: "snackbar-body" }, message),
|
|
43
|
+
close && (React.createElement("div", { className: "close-snackbar pointer", onClick: function () { return setOpen ? setOpen(false) : null; } }, close)))));
|
|
42
44
|
};
|
|
43
45
|
exports.default = SnackBar;
|