@firedesktop/react-base 1.16.1 → 1.17.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/dist/components/Toaster.d.ts +13 -0
- package/dist/components/Toaster.js +32 -0
- package/dist/components/Toaster.js.map +1 -0
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.js +2 -1
- package/dist/components/index.js.map +1 -1
- package/dist/styles/toaster.css +50 -0
- package/package.json +2 -1
- package/src/App.tsx +1 -29
- package/src/lib/components/Toaster.tsx +61 -0
- package/src/lib/components/index.ts +2 -1
- package/src/lib/styles/toaster.css +50 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import '../styles/toaster.css';
|
|
3
|
+
export declare type Toaster_Type = 'Error' | 'Information' | 'Success' | 'Warning';
|
|
4
|
+
export declare type Toaster_Prop_Type = {
|
|
5
|
+
content: string;
|
|
6
|
+
title: string;
|
|
7
|
+
type: Toaster_Type;
|
|
8
|
+
};
|
|
9
|
+
declare type Toaster_Props = {
|
|
10
|
+
propertiesObject: Toaster_Prop_Type;
|
|
11
|
+
};
|
|
12
|
+
declare const Toaster: ({ propertiesObject }: Toaster_Props) => JSX.Element;
|
|
13
|
+
export default Toaster;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
|
|
2
|
+
import React, { createRef, useEffect } from 'react';
|
|
3
|
+
import '../styles/toaster.css';
|
|
4
|
+
var Toaster = function (_a) {
|
|
5
|
+
var propertiesObject = _a.propertiesObject;
|
|
6
|
+
var toastObj = createRef();
|
|
7
|
+
var position = { X: 'Right' };
|
|
8
|
+
useEffect(function () {
|
|
9
|
+
var _a, _b, _c, _d;
|
|
10
|
+
if (propertiesObject && propertiesObject.title && propertiesObject.title !== '') {
|
|
11
|
+
toastObj.current.showCloseButton = true;
|
|
12
|
+
toastObj.current.showProgressBar = true;
|
|
13
|
+
if (propertiesObject.type === 'Information')
|
|
14
|
+
toastObj.current.show({ title: propertiesObject.title, content: (_a = propertiesObject.content) !== null && _a !== void 0 ? _a : '', cssClass: 'e-toast-info', icon: 'e-info toast-icons' });
|
|
15
|
+
else if (propertiesObject.type === 'Error')
|
|
16
|
+
toastObj.current.show({
|
|
17
|
+
title: propertiesObject.title,
|
|
18
|
+
content: (_b = propertiesObject.content) !== null && _b !== void 0 ? _b : '',
|
|
19
|
+
cssClass: 'e-toast-danger', icon: 'e-error toast-icons',
|
|
20
|
+
timeOut: 4000
|
|
21
|
+
});
|
|
22
|
+
else if (propertiesObject.type === 'Success')
|
|
23
|
+
toastObj.current.show({ title: propertiesObject.title, content: (_c = propertiesObject.content) !== null && _c !== void 0 ? _c : '', cssClass: 'e-toast-success', icon: 'e-success toast-icons' });
|
|
24
|
+
else if (propertiesObject.type === 'Warning')
|
|
25
|
+
toastObj.current.show({ title: propertiesObject.title, content: (_d = propertiesObject.content) !== null && _d !== void 0 ? _d : '', cssClass: 'e-toast-warning', icon: 'e-warning toast-icons' });
|
|
26
|
+
}
|
|
27
|
+
}, [propertiesObject]);
|
|
28
|
+
return (React.createElement(React.Fragment, null,
|
|
29
|
+
React.createElement(ToastComponent, { ref: toastObj, id: 'toast_default', position: position })));
|
|
30
|
+
};
|
|
31
|
+
export default Toaster;
|
|
32
|
+
//# sourceMappingURL=Toaster.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../src/lib/components/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAErE,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,uBAAuB,CAAC;AAsB/B,IAAM,OAAO,GAAG,UAAC,EAAmC;QAAjC,gBAAgB,sBAAA;IAC/B,IAAM,QAAQ,GAAG,SAAS,EAAO,CAAC;IAClC,IAAM,QAAQ,GAAsB,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC;IAEnD,SAAS,CAAC;;QACN,IAAI,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,IAAI,gBAAgB,CAAC,KAAK,KAAK,EAAE,EAAE;YAC7E,QAAQ,CAAC,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;YACxC,QAAQ,CAAC,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;YAExC,IAAI,gBAAgB,CAAC,IAAI,KAAK,aAAa;gBACvC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,OAAO,QAAE,gBAAgB,CAAC,OAAO,mCAAI,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,oBAAoB,EAAE,CAAC,CAAC;iBACvJ,IAAI,gBAAgB,CAAC,IAAI,KAAK,OAAO;gBACtC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;oBAClB,KAAK,EAAE,gBAAgB,CAAC,KAAK;oBAAE,OAAO,QAAE,gBAAgB,CAAC,OAAO,mCAAI,EAAE;oBAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,qBAAqB;oBAC/H,OAAO,EAAE,IAAI;iBAChB,CAAC,CAAC;iBACF,IAAI,gBAAgB,CAAC,IAAI,KAAK,SAAS;gBACxC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,OAAO,QAAE,gBAAgB,CAAC,OAAO,mCAAI,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC,CAAC;iBAC7J,IAAI,gBAAgB,CAAC,IAAI,KAAK,SAAS;gBACxC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,OAAO,QAAE,gBAAgB,CAAC,OAAO,mCAAI,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC,CAAC;SACrK;IAEL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACH,oBAAC,KAAK,CAAC,QAAQ;QACX,oBAAC,cAAc,IACX,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,eAAe,EAClB,QAAQ,EAAE,QAAQ,GAAmB,CAC5B,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,IAAI,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'Toast_icons';
|
|
3
|
+
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
|
|
4
|
+
font-weight: normal;
|
|
5
|
+
font-style: normal;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
#toast_types button {
|
|
9
|
+
margin: 5px;
|
|
10
|
+
min-width: 160px;
|
|
11
|
+
max-width: 160px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
#toast_types {
|
|
15
|
+
text-align: center;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.toast-icons {
|
|
19
|
+
font-family: 'Toast_icons' !important;
|
|
20
|
+
speak: none;
|
|
21
|
+
font-size: 55px;
|
|
22
|
+
font-style: normal;
|
|
23
|
+
font-weight: normal;
|
|
24
|
+
font-variant: normal;
|
|
25
|
+
text-transform: none;
|
|
26
|
+
line-height: 1;
|
|
27
|
+
-webkit-font-smoothing: antialiased;
|
|
28
|
+
-moz-osx-font-smoothing: grayscale;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
#toast_type .e-toast-icon.e-icons {
|
|
32
|
+
height: auto;
|
|
33
|
+
font-size: 30px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.toast-icons.e-success::before {
|
|
37
|
+
content: "\e701";
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.toast-icons.e-error::before {
|
|
41
|
+
content: "\e700";
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.toast-icons.e-info::before {
|
|
45
|
+
content: "\e704";
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.toast-icons.e-warning::before {
|
|
49
|
+
content: "\e703";
|
|
50
|
+
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@firedesktop/react-base",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.17.1",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"description": "This is the FireDesktop base package used to support every React Project in this Company.",
|
|
7
7
|
"author": "alessandro.gambaro",
|
|
8
8
|
"repository": "https://firedesktopDevOps@dev.azure.com/firedesktopDevOps/baseFEComponents/_git/baseFEComponents",
|
|
9
9
|
"dependencies": {
|
|
10
|
+
"@syncfusion/ej2-react-notifications": "18.3.47",
|
|
10
11
|
"@syncfusion/ej2-popups": "^18.3.50",
|
|
11
12
|
"react": "^16.14.0",
|
|
12
13
|
"react-dom": "^16.14.0",
|
package/src/App.tsx
CHANGED
|
@@ -50,7 +50,7 @@ function App() {
|
|
|
50
50
|
const runner = new Utils.Fetch.FetchWrapper(null, labels, status_401, status_403);
|
|
51
51
|
|
|
52
52
|
setSpinning(true);
|
|
53
|
-
runner.get('https://my-json-server.typicode.com/typicode/demo/posts', null, null, false, false).then(response => {
|
|
53
|
+
runner.get('https://my-json-server.typicode.com/typicode/demo/posts', null, onGenericServerError, null, false, false).then(response => {
|
|
54
54
|
// @ts-ignore
|
|
55
55
|
const values = response.map(x => {
|
|
56
56
|
return { value: x.id, label: x.title };
|
|
@@ -62,34 +62,6 @@ function App() {
|
|
|
62
62
|
if (errorMessage)
|
|
63
63
|
console.log(errorMessage);
|
|
64
64
|
});
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
// setSpinning(true);
|
|
68
|
-
|
|
69
|
-
// 401
|
|
70
|
-
// runner.get('https://gammafd1.northeurope.cloudapp.azure.com:9136/flowbot/CustomCode', null, null, false, false).then(response => {
|
|
71
|
-
// setSpinning(false);
|
|
72
|
-
// debugger;
|
|
73
|
-
// alert('OK');
|
|
74
|
-
// }).catch(errorMessage => {
|
|
75
|
-
// debugger;
|
|
76
|
-
// if (errorMessage && errorMessage.message)
|
|
77
|
-
// alert(errorMessage.message);
|
|
78
|
-
// setSpinning(false);
|
|
79
|
-
// });
|
|
80
|
-
|
|
81
|
-
// 400
|
|
82
|
-
// runner.delete('https://gammafd1.northeurope.cloudapp.azure.com:9126/flowbot/Dossier/24/Procedure/78', null, onGenericServerError, null, false, false).then(response => {
|
|
83
|
-
// setSpinning(false);
|
|
84
|
-
// debugger;
|
|
85
|
-
// alert('Ok');
|
|
86
|
-
// }).catch(errorMessage => {
|
|
87
|
-
// debugger;
|
|
88
|
-
// if (errorMessage && errorMessage.message)
|
|
89
|
-
// alert(errorMessage.message);
|
|
90
|
-
// setSpinning(false);
|
|
91
|
-
// });
|
|
92
|
-
|
|
93
65
|
};
|
|
94
66
|
|
|
95
67
|
const updateAppState = (name: string, value: object) => {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
|
|
2
|
+
import { PositionDataModel } from '@syncfusion/ej2-popups';
|
|
3
|
+
import React, { createRef, useEffect } from 'react';
|
|
4
|
+
|
|
5
|
+
import '../styles/toaster.css';
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
export type Toaster_Type =
|
|
9
|
+
| 'Error'
|
|
10
|
+
| 'Information'
|
|
11
|
+
| 'Success'
|
|
12
|
+
| 'Warning';
|
|
13
|
+
|
|
14
|
+
export type Toaster_Prop_Type = {
|
|
15
|
+
content: string,
|
|
16
|
+
title: string,
|
|
17
|
+
type: Toaster_Type
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
type Toaster_Props = {
|
|
21
|
+
propertiesObject: Toaster_Prop_Type
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* https://ej2.syncfusion.com/react/demos/?_ga=2.216203862.1349101002.1605820787-2080297629.1605485687#/material/toast/default
|
|
26
|
+
*/
|
|
27
|
+
const Toaster = ({ propertiesObject }: Toaster_Props) => {
|
|
28
|
+
const toastObj = createRef<any>();
|
|
29
|
+
const position: PositionDataModel = { X: 'Right' };
|
|
30
|
+
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (propertiesObject && propertiesObject.title && propertiesObject.title !== '') {
|
|
33
|
+
toastObj.current.showCloseButton = true;
|
|
34
|
+
toastObj.current.showProgressBar = true;
|
|
35
|
+
|
|
36
|
+
if (propertiesObject.type === 'Information')
|
|
37
|
+
toastObj.current.show({ title: propertiesObject.title, content: propertiesObject.content ?? '', cssClass: 'e-toast-info', icon: 'e-info toast-icons' });
|
|
38
|
+
else if (propertiesObject.type === 'Error')
|
|
39
|
+
toastObj.current.show({
|
|
40
|
+
title: propertiesObject.title, content: propertiesObject.content ?? '', cssClass: 'e-toast-danger', icon: 'e-error toast-icons',
|
|
41
|
+
timeOut: 4000
|
|
42
|
+
});
|
|
43
|
+
else if (propertiesObject.type === 'Success')
|
|
44
|
+
toastObj.current.show({ title: propertiesObject.title, content: propertiesObject.content ?? '', cssClass: 'e-toast-success', icon: 'e-success toast-icons' });
|
|
45
|
+
else if (propertiesObject.type === 'Warning')
|
|
46
|
+
toastObj.current.show({ title: propertiesObject.title, content: propertiesObject.content ?? '', cssClass: 'e-toast-warning', icon: 'e-warning toast-icons' });
|
|
47
|
+
}
|
|
48
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49
|
+
}, [propertiesObject]);
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<React.Fragment>
|
|
53
|
+
<ToastComponent
|
|
54
|
+
ref={toastObj}
|
|
55
|
+
id='toast_default'
|
|
56
|
+
position={position}></ToastComponent>
|
|
57
|
+
</React.Fragment>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export default Toaster;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'Toast_icons';
|
|
3
|
+
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
|
|
4
|
+
font-weight: normal;
|
|
5
|
+
font-style: normal;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
#toast_types button {
|
|
9
|
+
margin: 5px;
|
|
10
|
+
min-width: 160px;
|
|
11
|
+
max-width: 160px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
#toast_types {
|
|
15
|
+
text-align: center;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.toast-icons {
|
|
19
|
+
font-family: 'Toast_icons' !important;
|
|
20
|
+
speak: none;
|
|
21
|
+
font-size: 55px;
|
|
22
|
+
font-style: normal;
|
|
23
|
+
font-weight: normal;
|
|
24
|
+
font-variant: normal;
|
|
25
|
+
text-transform: none;
|
|
26
|
+
line-height: 1;
|
|
27
|
+
-webkit-font-smoothing: antialiased;
|
|
28
|
+
-moz-osx-font-smoothing: grayscale;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
#toast_type .e-toast-icon.e-icons {
|
|
32
|
+
height: auto;
|
|
33
|
+
font-size: 30px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.toast-icons.e-success::before {
|
|
37
|
+
content: "\e701";
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.toast-icons.e-error::before {
|
|
41
|
+
content: "\e700";
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.toast-icons.e-info::before {
|
|
45
|
+
content: "\e704";
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.toast-icons.e-warning::before {
|
|
49
|
+
content: "\e703";
|
|
50
|
+
}
|