@codacy/ui-components 0.61.8 → 0.61.9
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/lib/Toast/Toast.js +37 -90
- package/package.json +5 -5
package/lib/Toast/Toast.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
|
-
import
|
|
4
|
-
import _styled from "@emotion/styled-base";
|
|
5
|
-
import React, { useEffect, useMemo } from 'react';
|
|
6
|
-
import { css } from '@emotion/core';
|
|
7
|
-
import { Box } from '../Flexbox';
|
|
8
|
-
import { hash } from '../utils/hash';
|
|
2
|
+
import React, { useMemo } from 'react';
|
|
9
3
|
import { StyledToastContainer } from './styles';
|
|
10
4
|
import { ErrorIcon, WarningIcon, InfoIcon, SuccessIcon } from '../Icons';
|
|
11
5
|
import { toast as launchToast, ToastContainer as ToastifyContainer } from 'react-toastify';
|
|
12
6
|
import { Subheader, Paragraph } from '../Typography';
|
|
7
|
+
import { hash } from '../utils/hash';
|
|
13
8
|
import { reactNodeToText } from '../utils/reactNodeToText';
|
|
14
9
|
var DEFAULT_TOAST_TYPE = 'success';
|
|
15
10
|
var TypeIcons = {
|
|
@@ -20,23 +15,34 @@ var TypeIcons = {
|
|
|
20
15
|
warning: /*#__PURE__*/React.createElement(WarningIcon, null)
|
|
21
16
|
};
|
|
22
17
|
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
18
|
+
var getInnerToastText = function getInnerToastText(content) {
|
|
19
|
+
if (!content) return '';
|
|
20
|
+
|
|
21
|
+
switch (typeof content) {
|
|
22
|
+
case 'string':
|
|
23
|
+
return content;
|
|
24
|
+
|
|
25
|
+
case 'object':
|
|
26
|
+
if ('title' in content || 'description' in content) {
|
|
27
|
+
if (typeof content.description === 'object') {
|
|
28
|
+
return "".concat(content.title || '', " ").concat(reactNodeToText(content.description));
|
|
29
|
+
} else {
|
|
30
|
+
return "".concat(content.title || '', " ").concat(content.description);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return reactNodeToText(content);
|
|
30
35
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
36
|
+
default:
|
|
37
|
+
return '';
|
|
38
|
+
}
|
|
39
|
+
};
|
|
35
40
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
var ToastContentWrapper = function ToastContentWrapper(_ref) {
|
|
42
|
+
var content = _ref.content;
|
|
43
|
+
|
|
44
|
+
if (content && typeof content === 'object' && 'description' in content) {
|
|
45
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, content.title && /*#__PURE__*/React.createElement(Subheader, {
|
|
40
46
|
size: "lg",
|
|
41
47
|
mb: 2
|
|
42
48
|
}, content.title), /*#__PURE__*/React.createElement(Paragraph, {
|
|
@@ -45,88 +51,29 @@ var ToastContentWrapper = function ToastContentWrapper(_ref2) {
|
|
|
45
51
|
}, content.description));
|
|
46
52
|
}
|
|
47
53
|
|
|
48
|
-
return /*#__PURE__*/React.createElement(
|
|
49
|
-
instances: instances
|
|
50
|
-
}, /*#__PURE__*/React.createElement(Paragraph, {
|
|
54
|
+
return /*#__PURE__*/React.createElement(Paragraph, {
|
|
51
55
|
color: "secondary",
|
|
52
56
|
as: "div"
|
|
53
|
-
}, content)
|
|
57
|
+
}, content);
|
|
54
58
|
};
|
|
55
59
|
|
|
56
60
|
var useToast = function useToast(defaultOptions) {
|
|
57
|
-
var _React$useState = React.useState({}),
|
|
58
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
59
|
-
activeToasts = _React$useState2[0],
|
|
60
|
-
setActiveToasts = _React$useState2[1];
|
|
61
|
-
|
|
62
|
-
useEffect(function () {
|
|
63
|
-
var unsubscribe = launchToast.onChange(function (payload) {
|
|
64
|
-
if (payload.status === 'removed') {
|
|
65
|
-
setActiveToasts(function (prev) {
|
|
66
|
-
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, payload.id, 0));
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
return function () {
|
|
71
|
-
return unsubscribe();
|
|
72
|
-
};
|
|
73
|
-
}, [activeToasts]);
|
|
74
61
|
var showToastFn = useMemo(function () {
|
|
75
62
|
return function (content, options) {
|
|
76
63
|
var ops = _objectSpread(_objectSpread({}, defaultOptions), options);
|
|
77
64
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
autoClose: (ops === null || ops === void 0 ? void 0 : ops.duration) === null ? false : ops === null || ops === void 0 ? void 0 : ops.duration,
|
|
86
|
-
toastId: innerTextHash
|
|
87
|
-
}));
|
|
88
|
-
setActiveToasts(function (prev) {
|
|
89
|
-
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, innerTextHash, 1));
|
|
90
|
-
});
|
|
91
|
-
} else {
|
|
92
|
-
setActiveToasts(function (prev) {
|
|
93
|
-
launchToast.update(innerTextHash, {
|
|
94
|
-
render: /*#__PURE__*/React.createElement(ToastContentWrapper, {
|
|
95
|
-
content: content,
|
|
96
|
-
instances: prev[innerTextHash] + 1
|
|
97
|
-
})
|
|
98
|
-
});
|
|
99
|
-
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, innerTextHash, prev[innerTextHash] + 1));
|
|
100
|
-
});
|
|
101
|
-
}
|
|
65
|
+
launchToast( /*#__PURE__*/React.createElement(ToastContentWrapper, {
|
|
66
|
+
content: content
|
|
67
|
+
}), _objectSpread(_objectSpread({}, ops), {}, {
|
|
68
|
+
toastId: hash(getInnerToastText(content)),
|
|
69
|
+
icon: TypeIcons[(ops === null || ops === void 0 ? void 0 : ops.type) || DEFAULT_TOAST_TYPE],
|
|
70
|
+
autoClose: (ops === null || ops === void 0 ? void 0 : ops.duration) === null ? false : ops === null || ops === void 0 ? void 0 : ops.duration
|
|
71
|
+
}));
|
|
102
72
|
};
|
|
103
73
|
}, [defaultOptions]);
|
|
104
74
|
return showToastFn;
|
|
105
75
|
};
|
|
106
76
|
|
|
107
|
-
var getInnerToastText = function getInnerToastText(content) {
|
|
108
|
-
if (!content) return '';
|
|
109
|
-
|
|
110
|
-
switch (typeof content) {
|
|
111
|
-
case 'string':
|
|
112
|
-
return content;
|
|
113
|
-
|
|
114
|
-
case 'object':
|
|
115
|
-
if ('title' in content || 'description' in content) {
|
|
116
|
-
if (typeof content.description === 'object') {
|
|
117
|
-
return "".concat(content.title || '', " ").concat(reactNodeToText(content.description));
|
|
118
|
-
} else {
|
|
119
|
-
return "".concat(content.title || '', " ").concat(content.description);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
return reactNodeToText(content);
|
|
124
|
-
|
|
125
|
-
default:
|
|
126
|
-
return '';
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
|
|
130
77
|
var ToastContainer = function ToastContainer() {
|
|
131
78
|
return /*#__PURE__*/React.createElement(StyledToastContainer, null, /*#__PURE__*/React.createElement(ToastifyContainer, {
|
|
132
79
|
position: "bottom-right",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codacy/ui-components",
|
|
3
|
-
"version": "0.61.
|
|
3
|
+
"version": "0.61.9",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"react": "^18.2.0",
|
|
95
95
|
"react-docgen-typescript-loader": "^3.7.2",
|
|
96
96
|
"react-dom": "^18.2.0",
|
|
97
|
-
"react-toastify": "
|
|
97
|
+
"react-toastify": "8.0.2",
|
|
98
98
|
"reakit": "^1.3.11",
|
|
99
99
|
"rimraf": "^3.0.2",
|
|
100
100
|
"styled-system": "^5.1.5",
|
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
"@popperjs/core": "^2.5.4",
|
|
109
109
|
"lodash": "^4.17.20",
|
|
110
110
|
"numeral": "^2.0.6",
|
|
111
|
-
"react": "^17.0.
|
|
112
|
-
"react-dom": "^17.0.
|
|
113
|
-
"react-toastify": "
|
|
111
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
112
|
+
"react-dom": "^17.0.0 || ^18.0.0",
|
|
113
|
+
"react-toastify": "8.0.2",
|
|
114
114
|
"reakit": "^1.3.11",
|
|
115
115
|
"styled-system": "^5.1.5",
|
|
116
116
|
"typeface-clear-sans": "0.0.44"
|