@stack-spot/portal-layout 0.0.14 → 0.0.16
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/LayoutOverlayManager.d.ts.map +1 -1
- package/dist/LayoutOverlayManager.js +32 -9
- package/dist/LayoutOverlayManager.js.map +1 -1
- package/dist/components/Dialog.d.ts +7 -1
- package/dist/components/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog.js +2 -2
- package/dist/components/Dialog.js.map +1 -1
- package/dist/toaster.d.ts +1 -1
- package/dist/toaster.d.ts.map +1 -1
- package/dist/toaster.js +13 -8
- package/dist/toaster.js.map +1 -1
- package/package.json +5 -5
- package/src/LayoutOverlayManager.tsx +29 -7
- package/src/components/Dialog.tsx +8 -1
- package/src/toaster.tsx +14 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAU,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAoC,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAInG,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG3D,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AACvD,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/C,KAAK,SAAS,GAAG,aAAa,GAAG,WAAW,CAAA;AAS5C,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;
|
|
1
|
+
{"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAU,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAoC,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAInG,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG3D,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AACvD,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/C,KAAK,SAAS,GAAG,aAAa,GAAG,WAAW,CAAA;AAS5C,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,cAAM,oBAAoB;IACxB,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAA;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,QAAQ,CAAC,CAAgB;IACjC,OAAO,CAAC,YAAY,CAAC,CAAY;IAEjC,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAMnB,WAAW;IAIX,gBAAgB;IAIhB,kBAAkB;IAIlB,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,kBAAuB;IAQlG,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE;IAIxE,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAKnE,KAAK,CAAC,EAAE,OAAO,EAAE,UAAiB,EAAE,GAAG,OAAO,EAAE,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAKpF,gBAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,GAAG,OAAO,CAAC,OAAO,CAAC;IAiBrF,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,uBAA4B;IAWtG,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE;IAO/E,UAAU,CAAC,gBAAgB,UAAO;IAsBlC,eAAe,CAAC,gBAAgB,UAAO;IAsBvC,iBAAiB;IAIjB,aAAa,CAAC,OAAO,EAAE,WAAW;IAIlC,kBAAkB,CAAC,OAAO,EAAE,WAAW;IAIvC,WAAW,0BAAmB;CAC/B;AAED,eAAO,MAAM,OAAO,sBAA6B,CAAA"}
|
|
@@ -9,6 +9,14 @@ import { elementIds, getLayoutElements } from './elements';
|
|
|
9
9
|
import { ElementNotFound, LayoutError } from './errors';
|
|
10
10
|
import { showToaster as showReactToaster } from './toaster';
|
|
11
11
|
import { focusFirstChild, valueOfLayoutVar } from './utils';
|
|
12
|
+
function multipleCallsWarning(type, timeMS) {
|
|
13
|
+
return `
|
|
14
|
+
Attempted to show a modal or rightPanel while a ${type} was still being closed. Closing a ${type} takes only ${timeMS}ms, so this action
|
|
15
|
+
is unlikely to have been triggered by the user and may point to errors in your code. Please check.\nTip: showModal and showRightPanel
|
|
16
|
+
are sideEffects and should never be called during the render of a component. Try to use "useEffect" or link it to an event, like
|
|
17
|
+
"onClick".
|
|
18
|
+
`.replace(/\s*\n\s+/g, ' ');
|
|
19
|
+
}
|
|
12
20
|
class LayoutOverlayManager {
|
|
13
21
|
constructor() {
|
|
14
22
|
Object.defineProperty(this, "setContent", {
|
|
@@ -38,11 +46,13 @@ class LayoutOverlayManager {
|
|
|
38
46
|
}
|
|
39
47
|
setupElements() {
|
|
40
48
|
this.elements = getLayoutElements();
|
|
41
|
-
this.elements.backdrop?.addEventListener('
|
|
42
|
-
if (this.isModalOpen()
|
|
43
|
-
this.closeModal();
|
|
44
|
-
if (this.isRightPanelOpen()
|
|
45
|
-
this.closeRightPanel();
|
|
49
|
+
this.elements.backdrop?.addEventListener('mousedown', (event) => {
|
|
50
|
+
if (this.isModalOpen())
|
|
51
|
+
!this.elements?.modal?.contains?.(event.target) && this.closeModal();
|
|
52
|
+
else if (this.isRightPanelOpen())
|
|
53
|
+
!this.elements?.rightPanel?.contains?.(event.target) && this.closeRightPanel();
|
|
54
|
+
else
|
|
55
|
+
this.setMainContentInteractivity(true);
|
|
46
56
|
});
|
|
47
57
|
this.elements.backdrop?.addEventListener('keydown', (event) => {
|
|
48
58
|
if (event.key !== 'Escape')
|
|
@@ -51,6 +61,8 @@ class LayoutOverlayManager {
|
|
|
51
61
|
this.closeModal();
|
|
52
62
|
if (this.isRightPanelOpen())
|
|
53
63
|
this.closeRightPanel();
|
|
64
|
+
else
|
|
65
|
+
this.setMainContentInteractivity(true);
|
|
54
66
|
event.preventDefault();
|
|
55
67
|
});
|
|
56
68
|
this.setInteractivity(this.elements?.modal, false);
|
|
@@ -86,6 +98,7 @@ class LayoutOverlayManager {
|
|
|
86
98
|
this.setInteractivity(this.elements?.page, interactive);
|
|
87
99
|
this.setInteractivity(this.elements?.header, interactive);
|
|
88
100
|
this.setInteractivity(this.elements?.menu, interactive);
|
|
101
|
+
this.elements?.backdrop?.setAttribute('class', interactive ? '' : 'visible');
|
|
89
102
|
}
|
|
90
103
|
showOverlay(element, extraClasses = []) {
|
|
91
104
|
element?.classList.add('visible', ...extraClasses);
|
|
@@ -114,7 +127,6 @@ class LayoutOverlayManager {
|
|
|
114
127
|
throw new LayoutError('unable to show modal, because it has not been setup yet.');
|
|
115
128
|
this.onModalClose = onClose;
|
|
116
129
|
this.setContent.modal(content);
|
|
117
|
-
this.elements.backdrop?.setAttribute('class', 'visible');
|
|
118
130
|
this.showOverlay(this.elements.modal, [size]);
|
|
119
131
|
}
|
|
120
132
|
showModal({ size, ...props }) {
|
|
@@ -161,7 +173,6 @@ class LayoutOverlayManager {
|
|
|
161
173
|
this.setContent.rightPanel(content);
|
|
162
174
|
this.elements?.rightPanel.classList.add(size);
|
|
163
175
|
setTimeout(() => {
|
|
164
|
-
this.elements?.backdrop?.setAttribute('class', 'visible');
|
|
165
176
|
this.showOverlay(this.elements?.rightPanel);
|
|
166
177
|
});
|
|
167
178
|
}
|
|
@@ -175,11 +186,17 @@ class LayoutOverlayManager {
|
|
|
175
186
|
this.onModalClose();
|
|
176
187
|
this.onModalClose = undefined;
|
|
177
188
|
}
|
|
189
|
+
const animationMS = parseFloat(valueOfLayoutVar('--modal-animation-duration')) * 1000;
|
|
178
190
|
setTimeout(() => {
|
|
191
|
+
if (this.elements?.backdrop?.classList.contains('visible')) {
|
|
192
|
+
// eslint-disable-next-line no-console
|
|
193
|
+
console.warn(multipleCallsWarning('modal', animationMS));
|
|
194
|
+
this.elements?.modal?.classList.remove('visible');
|
|
195
|
+
}
|
|
179
196
|
if (this.setContent.modal)
|
|
180
197
|
this.setContent.modal(undefined);
|
|
181
198
|
this.hideOverlay(this.elements?.modal);
|
|
182
|
-
},
|
|
199
|
+
}, animationMS);
|
|
183
200
|
}
|
|
184
201
|
closeRightPanel(runCloseListener = true) {
|
|
185
202
|
this.elements?.rightPanel?.classList.remove('visible');
|
|
@@ -188,11 +205,17 @@ class LayoutOverlayManager {
|
|
|
188
205
|
this.onModalClose();
|
|
189
206
|
this.onModalClose = undefined;
|
|
190
207
|
}
|
|
208
|
+
const animationMS = parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000;
|
|
191
209
|
setTimeout(() => {
|
|
210
|
+
if (this.elements?.backdrop?.classList.contains('visible')) {
|
|
211
|
+
// eslint-disable-next-line no-console
|
|
212
|
+
console.warn(multipleCallsWarning('rightPanel', animationMS));
|
|
213
|
+
this.elements?.rightPanel?.classList.remove('visible');
|
|
214
|
+
}
|
|
192
215
|
if (this.setContent.rightPanel)
|
|
193
216
|
this.setContent.rightPanel(undefined);
|
|
194
217
|
this.hideOverlay(this.elements?.rightPanel);
|
|
195
|
-
},
|
|
218
|
+
}, animationMS);
|
|
196
219
|
}
|
|
197
220
|
closeBottomDialog() {
|
|
198
221
|
this.hideOverlay(this.elements?.bottomDialog);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutOverlayManager.js","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":";AAAA,+CAA+C;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAgB,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAiB,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAuB,MAAM,6BAA6B,CAAA;AACnG,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAkB,UAAU,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AA2B3D,MAAM,oBAAoB;IAA1B;QAEU;;;;mBAAmC,EAAE;WAAA;QACrC;;;;;WAAyB;QACzB;;;;;WAAyB;
|
|
1
|
+
{"version":3,"file":"LayoutOverlayManager.js","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ColorSchemeName } from '@stack-spot/portal-theme';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
3
|
interface Validation {
|
|
3
4
|
value: string;
|
|
@@ -19,11 +20,16 @@ export interface DialogOptions {
|
|
|
19
20
|
* @default right if type is "panel", "right" otherwise.
|
|
20
21
|
*/
|
|
21
22
|
buttonPlacement?: 'left' | 'center' | 'right';
|
|
23
|
+
/**
|
|
24
|
+
* The color of the primary button.
|
|
25
|
+
* @default primary
|
|
26
|
+
*/
|
|
27
|
+
buttonColor?: ColorSchemeName;
|
|
22
28
|
}
|
|
23
29
|
interface Props extends DialogOptions {
|
|
24
30
|
onConfirm: () => void;
|
|
25
31
|
onCancel: () => void;
|
|
26
32
|
}
|
|
27
|
-
export declare const Dialog: ({ message, title, subtitle, cancel, confirm, validation, onConfirm, onCancel, type, buttonPlacement, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare const Dialog: ({ message, title, subtitle, cancel, confirm, validation, onConfirm, onCancel, type, buttonPlacement, buttonColor, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
28
34
|
export {};
|
|
29
35
|
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAI3C,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9C;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,UAAU,KAAM,SAAQ,aAAa;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAQD,eAAO,MAAM,MAAM,wHAYhB,KAAK,4CAkCP,CAAA"}
|
|
@@ -9,7 +9,7 @@ const justifyButtons = {
|
|
|
9
9
|
left: 'start',
|
|
10
10
|
right: 'end',
|
|
11
11
|
};
|
|
12
|
-
export const Dialog = ({ message, title, subtitle, cancel, confirm, validation, onConfirm, onCancel, type = 'modal', buttonPlacement = type === 'panel' ? 'left' : 'right', }) => {
|
|
12
|
+
export const Dialog = ({ message, title, subtitle, cancel, confirm, validation, onConfirm, onCancel, type = 'modal', buttonPlacement = type === 'panel' ? 'left' : 'right', buttonColor = 'primary', }) => {
|
|
13
13
|
const t = useDictionary();
|
|
14
14
|
const [enabled, setEnabled] = useState(!validation);
|
|
15
15
|
function renderValidation() {
|
|
@@ -22,6 +22,6 @@ export const Dialog = ({ message, title, subtitle, cancel, confirm, validation,
|
|
|
22
22
|
const placeholder = typeof validation === 'object' ? validation.placeholder : undefined;
|
|
23
23
|
return (_jsxs("div", { style: { margin: '16px 0' }, children: [_jsx(Text, { children: label }), _jsx(Input, { placeholder: placeholder, onChange: e => setEnabled(e.target.value === value), style: { marginTop: '10px' } })] }));
|
|
24
24
|
}
|
|
25
|
-
return (_jsxs(OverlayContent, { title: title, subtitle: subtitle, onClose: onCancel, type: type, children: [_jsxs(Flex, { flexDirection: "column", flex: 1, children: [message, renderValidation()] }), (cancel || confirm) && _jsxs(Flex, { gap: true, justifyContent: justifyButtons[buttonPlacement], alignItems: "center", sx: { mt: 6 }, children: [cancel && _jsx(Button, { appearance: "outlined", colorScheme: "inverse", onClick: onCancel, children: cancel }), confirm && _jsx(Button, { colorScheme:
|
|
25
|
+
return (_jsxs(OverlayContent, { title: title, subtitle: subtitle, onClose: onCancel, type: type, children: [_jsxs(Flex, { flexDirection: "column", flex: 1, children: [message, renderValidation()] }), (cancel || confirm) && _jsxs(Flex, { gap: true, justifyContent: justifyButtons[buttonPlacement], alignItems: "center", sx: { mt: 6 }, children: [cancel && _jsx(Button, { appearance: "outlined", colorScheme: "inverse", onClick: onCancel, children: cancel }), confirm && _jsx(Button, { colorScheme: buttonColor, onClick: onConfirm, disabled: !enabled, children: confirm })] })] }));
|
|
26
26
|
};
|
|
27
27
|
//# sourceMappingURL=Dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAmCjD,MAAM,cAAc,GAA8F;IAChH,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,eAAe,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACrD,WAAW,GAAG,SAAS,GACjB,EACN,EAAE;IACF,MAAM,CAAC,GAAG,aAAa,EAAE,CAAA;IACzB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IAEnD,SAAS,gBAAgB;QACvB,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAA;QAC5B,MAAM,KAAK,GAAG,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAA;QAC5E,MAAM,KAAK,GAAG,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,CAAC,KAAK;YAC9D,CAAC,CAAC,UAAU,CAAC,KAAK;YAClB,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,EAAE,KAAK,CAAC,CAAA;QACzC,MAAM,WAAW,GAAG,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAA;QACvF,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAC9B,KAAC,IAAI,cAAE,KAAK,GAAQ,EACpB,KAAC,KAAK,IAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAI,IAClH,CACP,CAAA;IACH,CAAC;IAED,OAAO,CACL,MAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,aAC7E,MAAC,IAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,aACjC,OAAO,EACP,gBAAgB,EAAE,IACd,EACN,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,MAAC,IAAI,IAAC,GAAG,QAAC,cAAc,EAAE,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,aACjH,MAAM,IAAI,KAAC,MAAM,IAAC,UAAU,EAAC,UAAU,EAAC,WAAW,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,YAAG,MAAM,GAAU,EAClG,OAAO,IAAI,KAAC,MAAM,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,OAAO,YACjF,OAAO,GACD,IACJ,IACQ,CAClB,CAAA;AACH,CAAC,CAAA"}
|
package/dist/toaster.d.ts
CHANGED
package/dist/toaster.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":";AAGA,OAAO,uCAAuC,CAAA;AAE9C,KAAK,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAEzD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":";AAGA,OAAO,uCAAuC,CAAA;AAE9C,KAAK,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAEzD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAyBjD,wBAAgB,WAAW,CAAC,EAAE,IAAa,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,QAwBxE"}
|
package/dist/toaster.js
CHANGED
|
@@ -3,39 +3,44 @@ import { IconBox } from '@citric/core';
|
|
|
3
3
|
import { CheckCircleFill, ExclamationTriangleFill, InfoCircleFill, TimesCircleFill } from '@citric/icons';
|
|
4
4
|
import { toast } from 'react-toastify';
|
|
5
5
|
import 'react-toastify/dist/ReactToastify.css';
|
|
6
|
-
const
|
|
6
|
+
const toasterConfig = {
|
|
7
7
|
error: {
|
|
8
8
|
element: _jsx(TimesCircleFill, {}),
|
|
9
9
|
color: 'danger',
|
|
10
|
+
duration: 10,
|
|
10
11
|
},
|
|
11
12
|
success: {
|
|
12
13
|
element: _jsx(CheckCircleFill, {}),
|
|
13
14
|
color: 'success',
|
|
15
|
+
duration: 3,
|
|
14
16
|
},
|
|
15
17
|
warning: {
|
|
16
18
|
element: _jsx(ExclamationTriangleFill, {}),
|
|
17
19
|
color: 'warning',
|
|
20
|
+
duration: 10,
|
|
18
21
|
},
|
|
19
22
|
info: {
|
|
20
23
|
element: _jsx(InfoCircleFill, {}),
|
|
21
24
|
color: 'inverse',
|
|
25
|
+
duration: 10,
|
|
22
26
|
},
|
|
23
27
|
};
|
|
24
|
-
export function showToaster({ type = 'info', autoClose
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
28
|
+
export function showToaster({ type = 'info', autoClose, ...props }) {
|
|
29
|
+
const config = toasterConfig[type];
|
|
30
|
+
const closeTime = autoClose ? autoClose : config.duration;
|
|
31
|
+
const bg = `var(--${config.color}-500)`;
|
|
32
|
+
const bgDark = `var(--${config.color}-600)`;
|
|
33
|
+
const fg = `var(--${config.color}-contrastText)`;
|
|
29
34
|
toast('message' in props
|
|
30
35
|
? _jsxs("div", { onClick: props.onClick, children: [_jsx("h1", { style: { textTransform: 'capitalize' }, children: props.title ?? type }), _jsx("p", { children: props.message })] })
|
|
31
36
|
: props.content, {
|
|
32
37
|
type,
|
|
33
|
-
autoClose: autoClose === false ? false :
|
|
38
|
+
autoClose: autoClose === false ? false : closeTime * 1000,
|
|
34
39
|
className: 'main-toaster',
|
|
35
40
|
style: { backgroundColor: bg, color: fg },
|
|
36
41
|
progressStyle: { background: bgDark },
|
|
37
42
|
bodyClassName: 'toast-body',
|
|
38
|
-
icon: 'message' in props ? () => (_jsx(IconBox, { colorScheme: fg, children:
|
|
43
|
+
icon: 'message' in props ? () => (_jsx(IconBox, { colorScheme: fg, children: config.element })) : undefined,
|
|
39
44
|
});
|
|
40
45
|
}
|
|
41
46
|
//# sourceMappingURL=toaster.js.map
|
package/dist/toaster.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAiC,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACzG,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,uCAAuC,CAAA;AAyB9C,MAAM,
|
|
1
|
+
{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAiC,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACzG,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,uCAAuC,CAAA;AAyB9C,MAAM,aAAa,GAAwF;IACzG,KAAK,EAAE;QACL,OAAO,EAAE,KAAC,eAAe,KAAG;QAC5B,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,EAAE;KACb;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAC,eAAe,KAAG;QAC5B,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,CAAC;KACZ;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAC,uBAAuB,KAAG;QACpC,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;KACb;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,KAAC,cAAc,KAAG;QAC3B,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;KACb;CACF,CAAA;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IACvE,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;IAClC,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAA;IACzD,MAAM,EAAE,GAAG,SAAS,MAAM,CAAC,KAAK,OAAO,CAAA;IACvC,MAAM,MAAM,GAAG,SAAS,MAAM,CAAC,KAAK,OAAO,CAAA;IAC3C,MAAM,EAAE,GAAG,SAAS,MAAM,CAAC,KAAK,gBAAgB,CAAA;IAChD,KAAK,CACH,SAAS,IAAI,KAAK;QAChB,CAAC,CAAC,eAAK,OAAO,EAAE,KAAK,CAAC,OAAO,aAAE,aAAI,KAAK,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,YAAG,KAAK,CAAC,KAAK,IAAI,IAAI,GAAM,EAAA,sBAAI,KAAK,CAAC,OAAO,GAAK,IAAM;QACjI,CAAC,CAAC,KAAK,CAAC,OAAO,EACjB;QACE,IAAI;QACJ,SAAS,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI;QACzD,SAAS,EAAC,cAAc;QACxB,KAAK,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACzC,aAAa,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;QACrC,aAAa,EAAE,YAAY;QAC3B,IAAI,EAAE,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAC/B,KAAC,OAAO,IAAC,WAAW,EAAE,EAAmC,YACtD,MAAM,CAAC,OAAO,GACP,CACX,CAAC,CAAC,CAAC,SAAS;KACd,CACF,CAAA;AACH,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-layout",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.16",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "tsc && cpy src/layout.css dist --flat",
|
|
9
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
10
|
-
},
|
|
11
7
|
"peerDependencies": {
|
|
12
8
|
"@citric/core": ">=5.4.0",
|
|
13
9
|
"@citric/icons": ">=5.4.0",
|
|
@@ -36,5 +32,9 @@
|
|
|
36
32
|
},
|
|
37
33
|
"dependencies": {
|
|
38
34
|
"react-toastify": "^9.1.3"
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "tsc && cpy src/layout.css dist --flat",
|
|
38
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
39
39
|
}
|
|
40
40
|
}
|
|
@@ -35,6 +35,15 @@ interface CustomRightPanelOptions {
|
|
|
35
35
|
onClose?: () => void,
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
function multipleCallsWarning(type: 'modal' | 'rightPanel', timeMS: number) {
|
|
39
|
+
return `
|
|
40
|
+
Attempted to show a modal or rightPanel while a ${type} was still being closed. Closing a ${type} takes only ${timeMS}ms, so this action
|
|
41
|
+
is unlikely to have been triggered by the user and may point to errors in your code. Please check.\nTip: showModal and showRightPanel
|
|
42
|
+
are sideEffects and should never be called during the render of a component. Try to use "useEffect" or link it to an event, like
|
|
43
|
+
"onClick".
|
|
44
|
+
`.replace(/\s*\n\s+/g, ' ')
|
|
45
|
+
}
|
|
46
|
+
|
|
38
47
|
class LayoutOverlayManager {
|
|
39
48
|
static readonly instance?: LayoutOverlayManager
|
|
40
49
|
private setContent: OverlayContentSetter = {}
|
|
@@ -43,14 +52,16 @@ class LayoutOverlayManager {
|
|
|
43
52
|
|
|
44
53
|
private setupElements() {
|
|
45
54
|
this.elements = getLayoutElements()
|
|
46
|
-
this.elements.backdrop?.addEventListener('
|
|
47
|
-
if (this.isModalOpen()
|
|
48
|
-
if (this.isRightPanelOpen()
|
|
55
|
+
this.elements.backdrop?.addEventListener('mousedown', (event) => {
|
|
56
|
+
if (this.isModalOpen()) !this.elements?.modal?.contains?.(event.target as Node) && this.closeModal()
|
|
57
|
+
else if (this.isRightPanelOpen()) !this.elements?.rightPanel?.contains?.(event.target as Node) && this.closeRightPanel()
|
|
58
|
+
else this.setMainContentInteractivity(true)
|
|
49
59
|
})
|
|
50
60
|
this.elements.backdrop?.addEventListener('keydown', (event) => {
|
|
51
61
|
if (event.key !== 'Escape') return
|
|
52
62
|
if (this.isModalOpen()) this.closeModal()
|
|
53
63
|
if (this.isRightPanelOpen()) this.closeRightPanel()
|
|
64
|
+
else this.setMainContentInteractivity(true)
|
|
54
65
|
event.preventDefault()
|
|
55
66
|
})
|
|
56
67
|
this.setInteractivity(this.elements?.modal, false)
|
|
@@ -87,6 +98,7 @@ class LayoutOverlayManager {
|
|
|
87
98
|
this.setInteractivity(this.elements?.page, interactive)
|
|
88
99
|
this.setInteractivity(this.elements?.header, interactive)
|
|
89
100
|
this.setInteractivity(this.elements?.menu, interactive)
|
|
101
|
+
this.elements?.backdrop?.setAttribute('class', interactive ? '' : 'visible')
|
|
90
102
|
}
|
|
91
103
|
|
|
92
104
|
private showOverlay(element: HTMLElement | null | undefined, extraClasses: string[] = []) {
|
|
@@ -122,7 +134,6 @@ class LayoutOverlayManager {
|
|
|
122
134
|
if (!this.setContent.modal) throw new LayoutError('unable to show modal, because it has not been setup yet.')
|
|
123
135
|
this.onModalClose = onClose
|
|
124
136
|
this.setContent.modal(content)
|
|
125
|
-
this.elements.backdrop?.setAttribute('class', 'visible')
|
|
126
137
|
this.showOverlay(this.elements.modal, [size])
|
|
127
138
|
}
|
|
128
139
|
|
|
@@ -185,7 +196,6 @@ class LayoutOverlayManager {
|
|
|
185
196
|
this.setContent.rightPanel(content)
|
|
186
197
|
this.elements?.rightPanel.classList.add(size)
|
|
187
198
|
setTimeout(() => {
|
|
188
|
-
this.elements?.backdrop?.setAttribute('class', 'visible')
|
|
189
199
|
this.showOverlay(this.elements?.rightPanel)
|
|
190
200
|
})
|
|
191
201
|
}
|
|
@@ -204,12 +214,18 @@ class LayoutOverlayManager {
|
|
|
204
214
|
this.onModalClose()
|
|
205
215
|
this.onModalClose = undefined
|
|
206
216
|
}
|
|
217
|
+
const animationMS = parseFloat(valueOfLayoutVar('--modal-animation-duration')) * 1000
|
|
207
218
|
setTimeout(
|
|
208
219
|
() => {
|
|
220
|
+
if (this.elements?.backdrop?.classList.contains('visible')) {
|
|
221
|
+
// eslint-disable-next-line no-console
|
|
222
|
+
console.warn(multipleCallsWarning('modal', animationMS))
|
|
223
|
+
this.elements?.modal?.classList.remove('visible')
|
|
224
|
+
}
|
|
209
225
|
if (this.setContent.modal) this.setContent.modal(undefined)
|
|
210
226
|
this.hideOverlay(this.elements?.modal)
|
|
211
227
|
},
|
|
212
|
-
|
|
228
|
+
animationMS,
|
|
213
229
|
)
|
|
214
230
|
}
|
|
215
231
|
|
|
@@ -220,12 +236,18 @@ class LayoutOverlayManager {
|
|
|
220
236
|
this.onModalClose()
|
|
221
237
|
this.onModalClose = undefined
|
|
222
238
|
}
|
|
239
|
+
const animationMS = parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000
|
|
223
240
|
setTimeout(
|
|
224
241
|
() => {
|
|
242
|
+
if (this.elements?.backdrop?.classList.contains('visible')) {
|
|
243
|
+
// eslint-disable-next-line no-console
|
|
244
|
+
console.warn(multipleCallsWarning('rightPanel', animationMS))
|
|
245
|
+
this.elements?.rightPanel?.classList.remove('visible')
|
|
246
|
+
}
|
|
225
247
|
if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
|
|
226
248
|
this.hideOverlay(this.elements?.rightPanel)
|
|
227
249
|
},
|
|
228
|
-
|
|
250
|
+
animationMS,
|
|
229
251
|
)
|
|
230
252
|
}
|
|
231
253
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Button, Flex, Input, Text } from '@citric/core'
|
|
2
|
+
import { ColorSchemeName } from '@stack-spot/portal-theme'
|
|
2
3
|
import { interpolate } from '@stack-spot/portal-translate'
|
|
3
4
|
import { ReactNode, useState } from 'react'
|
|
4
5
|
import { useDictionary } from '../dictionary'
|
|
@@ -25,6 +26,11 @@ export interface DialogOptions {
|
|
|
25
26
|
* @default right if type is "panel", "right" otherwise.
|
|
26
27
|
*/
|
|
27
28
|
buttonPlacement?: 'left' | 'center' | 'right',
|
|
29
|
+
/**
|
|
30
|
+
* The color of the primary button.
|
|
31
|
+
* @default primary
|
|
32
|
+
*/
|
|
33
|
+
buttonColor?: ColorSchemeName,
|
|
28
34
|
}
|
|
29
35
|
|
|
30
36
|
interface Props extends DialogOptions {
|
|
@@ -49,6 +55,7 @@ export const Dialog = ({
|
|
|
49
55
|
onCancel,
|
|
50
56
|
type = 'modal',
|
|
51
57
|
buttonPlacement = type === 'panel' ? 'left' : 'right',
|
|
58
|
+
buttonColor = 'primary',
|
|
52
59
|
}: Props,
|
|
53
60
|
) => {
|
|
54
61
|
const t = useDictionary()
|
|
@@ -77,7 +84,7 @@ export const Dialog = ({
|
|
|
77
84
|
</Flex>
|
|
78
85
|
{(cancel || confirm) && <Flex gap justifyContent={justifyButtons[buttonPlacement]} alignItems="center" sx={{ mt: 6 }}>
|
|
79
86
|
{cancel && <Button appearance="outlined" colorScheme="inverse" onClick={onCancel}>{cancel}</Button>}
|
|
80
|
-
{confirm && <Button colorScheme=
|
|
87
|
+
{confirm && <Button colorScheme={buttonColor} onClick={onConfirm} disabled={!enabled}>
|
|
81
88
|
{confirm}
|
|
82
89
|
</Button>}
|
|
83
90
|
</Flex>}
|
package/src/toaster.tsx
CHANGED
|
@@ -9,7 +9,7 @@ interface BaseProps {
|
|
|
9
9
|
type?: ToastType,
|
|
10
10
|
/**
|
|
11
11
|
* Seconds until auto-close or false to not auto-close.
|
|
12
|
-
* @default 10
|
|
12
|
+
* @default 3 for success toast and 10 for the others
|
|
13
13
|
*/
|
|
14
14
|
autoClose?: number | false,
|
|
15
15
|
}
|
|
@@ -26,44 +26,49 @@ interface RichMessageProps extends BaseProps {
|
|
|
26
26
|
|
|
27
27
|
type Props = BasicMessageProps | RichMessageProps
|
|
28
28
|
|
|
29
|
-
const
|
|
29
|
+
const toasterConfig: Record<ToastType, { element: React.ReactElement, color: string, duration: number }> = {
|
|
30
30
|
error: {
|
|
31
31
|
element: <TimesCircleFill />,
|
|
32
32
|
color: 'danger',
|
|
33
|
+
duration: 10,
|
|
33
34
|
},
|
|
34
35
|
success: {
|
|
35
36
|
element: <CheckCircleFill />,
|
|
36
37
|
color: 'success',
|
|
38
|
+
duration: 3,
|
|
37
39
|
},
|
|
38
40
|
warning: {
|
|
39
41
|
element: <ExclamationTriangleFill />,
|
|
40
42
|
color: 'warning',
|
|
43
|
+
duration: 10,
|
|
41
44
|
},
|
|
42
45
|
info: {
|
|
43
46
|
element: <InfoCircleFill />,
|
|
44
47
|
color: 'inverse',
|
|
48
|
+
duration: 10,
|
|
45
49
|
},
|
|
46
50
|
}
|
|
47
51
|
|
|
48
|
-
export function showToaster({ type = 'info', autoClose
|
|
49
|
-
const
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
const
|
|
52
|
+
export function showToaster({ type = 'info', autoClose, ...props }: Props) {
|
|
53
|
+
const config = toasterConfig[type]
|
|
54
|
+
const closeTime = autoClose ? autoClose : config.duration
|
|
55
|
+
const bg = `var(--${config.color}-500)`
|
|
56
|
+
const bgDark = `var(--${config.color}-600)`
|
|
57
|
+
const fg = `var(--${config.color}-contrastText)`
|
|
53
58
|
toast(
|
|
54
59
|
'message' in props
|
|
55
60
|
? <div onClick={props.onClick}><h1 style={{ textTransform: 'capitalize' }}>{props.title ?? type}</h1><p>{props.message}</p></div>
|
|
56
61
|
: props.content,
|
|
57
62
|
{
|
|
58
63
|
type,
|
|
59
|
-
autoClose: autoClose === false ? false :
|
|
64
|
+
autoClose: autoClose === false ? false : closeTime * 1000,
|
|
60
65
|
className:'main-toaster',
|
|
61
66
|
style: { backgroundColor: bg, color: fg },
|
|
62
67
|
progressStyle: { background: bgDark },
|
|
63
68
|
bodyClassName: 'toast-body',
|
|
64
69
|
icon: 'message' in props ? () => (
|
|
65
70
|
<IconBox colorScheme={fg as OneOfColorSchemesWithVariants}>
|
|
66
|
-
{
|
|
71
|
+
{config.element}
|
|
67
72
|
</IconBox>
|
|
68
73
|
) : undefined,
|
|
69
74
|
},
|