@qoretechnologies/reqore 0.74.11-pr.665.g862ab9d → 0.74.11
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/Notifications/index.d.ts.map +1 -1
- package/dist/components/Notifications/index.js +8 -1
- package/dist/components/Notifications/index.js.map +1 -1
- package/dist/components/Notifications/notification.d.ts +50 -45
- package/dist/components/Notifications/notification.d.ts.map +1 -1
- package/dist/components/Notifications/notification.js +116 -109
- package/dist/components/Notifications/notification.js.map +1 -1
- package/dist/hooks/usePaging.d.ts.map +1 -1
- package/dist/hooks/usePaging.js +29 -2
- package/dist/hooks/usePaging.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/tests.json +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,4BAA4B,CAAC;CACzC;AAED,MAAM,MAAM,4BAA4B,GACpC,KAAK,GACL,QAAQ,GACR,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,4BAA4B,CAAC;CACzC;AAED,MAAM,MAAM,4BAA4B,GACpC,KAAK,GACL,QAAQ,GACR,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAkCD,QAAA,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAYzE,CAAC;AAEH,eAAe,0BAA0B,CAAC"}
|
|
@@ -40,7 +40,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
40
40
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
41
|
var react_1 = require("react");
|
|
42
42
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
43
|
-
var StyledNotificationsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: fixed;\n z-index: 10000;\n padding: 0 20px 20px 20px;\n\n ", "\n"], ["\n position: fixed;\n z-index: 10000;\n padding: 0 20px 20px 20px;\n\n ", "\n"])), function (_a) {
|
|
43
|
+
var StyledNotificationsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: fixed;\n z-index: 10000;\n padding: 0 20px 20px 20px;\n display: flex;\n flex-flow: column;\n /* Notifications of different widths (a pill under a card) line up with\n the corner they are in; centred on the plain top / bottom positions. */\n align-items: ", ";\n\n ", "\n"], ["\n position: fixed;\n z-index: 10000;\n padding: 0 20px 20px 20px;\n display: flex;\n flex-flow: column;\n /* Notifications of different widths (a pill under a card) line up with\n the corner they are in; centred on the plain top / bottom positions. */\n align-items: ", ";\n\n ", "\n"])), function (_a) {
|
|
44
|
+
var positions = _a.positions;
|
|
45
|
+
return positions.includes('left')
|
|
46
|
+
? 'flex-start'
|
|
47
|
+
: positions.includes('right')
|
|
48
|
+
? 'flex-end'
|
|
49
|
+
: 'center';
|
|
50
|
+
}, function (_a) {
|
|
44
51
|
var positions = _a.positions;
|
|
45
52
|
var hasTwoPositions = positions.length > 1;
|
|
46
53
|
if (hasTwoPositions) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Notifications/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA0C;AAC1C,qEAAgD;AAkBhD,IAAM,0BAA0B,GAAG,2BAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Notifications/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA0C;AAC1C,qEAAgD;AAkBhD,IAAM,0BAA0B,GAAG,2BAAM,CAAC,GAAG,6WAA2B,yRAQvD,EAKD,SAEZ,EAeD,IACF,KAvBgB,UAAC,EAAa;QAAX,SAAS,eAAA;IACzB,OAAA,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC;QACxB,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC7B,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,QAAQ;AAJZ,CAIY,EAEZ,UAAC,EAAa;QAAX,SAAS,eAAA;IACZ,IAAM,eAAe,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IAE7C,IAAI,eAAe,EAAE,CAAC;QACpB,WAAO,uBAAG,wHAAA,YACN,EAAY,mBACZ,EAAY,iBACf,KAFG,SAAS,CAAC,CAAC,CAAC,EACZ,SAAS,CAAC,CAAC,CAAC,EACd;IACJ,CAAC;IAED,WAAO,uBAAG,qJAAA,UACN,EAAY,qEAGf,KAHG,SAAS,CAAC,CAAC,CAAC,EAGd;AACJ,CAAC,CACF,CAAC;AAEF,IAAM,0BAA0B,GAA+C,IAAA,kBAAU,EAGvF,UAAC,EAA8B,EAAE,GAAQ;QAAtC,QAAQ,cAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;IAAiB,OAAA,CAC9C,uBAAC,0BAA0B,IACzB,SAAS,EAAE,QAAQ;aAChB,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,UAAC,CAAwC,IAAa,OAAA,CAAC,CAAC,WAAW,EAAE,EAAf,CAAe,CAAC,EAC7E,GAAG,EAAE,GAAG,YAEP,QAAQ,GACkB,CAC9B;AAT+C,CAS/C,CAAC,CAAC;AAEH,kBAAe,0BAA0B,CAAC"}
|
|
@@ -4,96 +4,101 @@ import { TReqoreIntent } from '../../constants/theme';
|
|
|
4
4
|
import { TReqorePadded } from '../../helpers/utils';
|
|
5
5
|
import { IWithReqoreCustomTheme, IWithReqoreEffect, IWithReqoreMinimal, IWithReqoreOpaque } from '../../types/global';
|
|
6
6
|
import { IReqoreIconName } from '../../types/icons';
|
|
7
|
-
import { TReqoreEffectColor } from '../Effect';
|
|
8
7
|
import { IReqoreButtonProps } from '../Button';
|
|
8
|
+
import { TReqoreEffectColor } from '../Effect';
|
|
9
9
|
import { IReqoreNotificationsPosition } from './index';
|
|
10
10
|
import { IReqoreNotificationType } from './styles';
|
|
11
|
-
export type { IReqoreNotificationStyle, IReqoreNotificationType } from './styles';
|
|
12
|
-
export { StyledIconWrapper, StyledNotificationContent, StyledNotificationContentWrapper, StyledNotificationInnerContent, StyledNotificationTitle, StyledReqoreNotification, typeToIcon, } from './styles';
|
|
13
11
|
/**
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
12
|
+
* A notification: frosted glass over whatever is behind it, the intent as a
|
|
13
|
+
* soft bloom behind the icon and a thin line along the bottom that drains as
|
|
14
|
+
* the duration runs out. The surface stays neutral, so a stack of mixed
|
|
17
15
|
* intents reads as one family.
|
|
18
16
|
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
17
|
+
* `compact` is the one-line form — a pill with the icon and a sentence — for
|
|
18
|
+
* acknowledgements ("Saved", "Copied"). It keeps the bloom and drops the
|
|
19
|
+
* timer line and the action buttons: a pill answers to a click on itself and
|
|
20
|
+
* to its close, nothing more. Something with a next step is the long form.
|
|
21
|
+
*
|
|
22
|
+
* Every surface floats on a drop shadow. By default it is `flat` (no border)
|
|
23
|
+
* and `raised` (an inset highlight along the top edge). `flat={false}` adds a
|
|
24
|
+
* hairline border and a faint intent ring; `minimal` removes the surface
|
|
25
|
+
* altogether; `opaque` makes it solid.
|
|
26
|
+
*
|
|
27
|
+
* The classic message-styled surface lives in `./styles` and is used by
|
|
28
|
+
* `ReqoreMessage`; it is re-exported here for anyone who imported it from
|
|
29
|
+
* this module.
|
|
29
30
|
*/
|
|
30
|
-
export type
|
|
31
|
+
export type { IReqoreNotificationStyle, IReqoreNotificationType } from './styles';
|
|
32
|
+
export { StyledIconWrapper, StyledNotificationContent, StyledNotificationContentWrapper, StyledNotificationInnerContent, StyledNotificationTitle, StyledReqoreNotification, typeToIcon, } from './styles';
|
|
31
33
|
export interface IReqoreNotificationAction extends Omit<IReqoreButtonProps, 'onClick' | 'label' | 'children'> {
|
|
32
34
|
label: string;
|
|
33
35
|
onClick?: () => void;
|
|
34
36
|
/** Close the notification once the action ran. Default `true`. */
|
|
35
37
|
closeOnClick?: boolean;
|
|
36
38
|
}
|
|
37
|
-
/**
|
|
38
|
-
* Defaults every notification added through the provider starts from — set
|
|
39
|
-
* once on `ReqoreUIProvider` (`options.notifications`) to give the whole app
|
|
40
|
-
* one look. A notification's own props win.
|
|
41
|
-
*/
|
|
42
|
-
export interface IReqoreNotificationDefaults extends Partial<Pick<IReqoreNotificationProps, 'variant' | 'size' | 'pauseOnHover' | 'showProgress' | 'iconHasBackground' | 'flat' | 'minimal' | 'opaque' | 'blur' | 'effect' | 'duration' | 'closeLabel'>> {
|
|
43
|
-
position?: IReqoreNotificationsPosition;
|
|
44
|
-
}
|
|
45
39
|
export interface IReqoreNotificationProps extends IWithReqoreEffect, IWithReqoreMinimal, IWithReqoreOpaque, IWithReqoreCustomTheme {
|
|
40
|
+
/** The intent, under its older name. `intent` wins when both are given. */
|
|
46
41
|
type?: IReqoreNotificationType;
|
|
47
42
|
intent?: TReqoreIntent;
|
|
48
43
|
title?: string;
|
|
49
|
-
content
|
|
44
|
+
content?: string | React.ReactNode;
|
|
45
|
+
/** Replaces the intent's icon. */
|
|
50
46
|
icon?: IReqoreIconName;
|
|
47
|
+
iconColor?: TReqoreEffectColor;
|
|
48
|
+
/**
|
|
49
|
+
* Draws the icon on a round, intent-tinted tile. Default `true`; `compact`
|
|
50
|
+
* shows the bare icon unless this is set.
|
|
51
|
+
*/
|
|
52
|
+
iconHasBackground?: boolean;
|
|
51
53
|
onClose?: () => any;
|
|
52
54
|
onClick?: () => any;
|
|
55
|
+
/** Milliseconds until `onFinish`; nothing when unset. */
|
|
53
56
|
duration?: number;
|
|
54
57
|
onFinish?: () => any;
|
|
55
58
|
fluid?: boolean;
|
|
59
|
+
/** No border. Default `true`; `false` adds a hairline border and a faint intent ring. */
|
|
56
60
|
flat?: boolean;
|
|
61
|
+
/** An inset highlight along the top edge. Default `true`; only on a `flat` surface. */
|
|
62
|
+
raised?: boolean;
|
|
57
63
|
size?: TSizes;
|
|
64
|
+
/** Backdrop blur radius in px. Default `18`; `0` turns the frost off. */
|
|
58
65
|
blur?: number;
|
|
59
66
|
/**
|
|
60
|
-
* Controls which axes receive the notification's
|
|
67
|
+
* Controls which axes receive the notification's padding.
|
|
61
68
|
* - `true` (default): padding on both axes
|
|
62
69
|
* - `false`: no padding
|
|
63
70
|
* - `'horizontal'`: only left/right padding
|
|
64
71
|
* - `'vertical'`: only top/bottom padding
|
|
65
72
|
*/
|
|
66
73
|
padded?: TReqorePadded;
|
|
67
|
-
/**
|
|
68
|
-
* Size of the notification's outer padding. Defaults to `size`.
|
|
69
|
-
*/
|
|
74
|
+
/** Size of the notification's padding. Defaults to `size`. */
|
|
70
75
|
paddingSize?: TSizes;
|
|
71
|
-
/** The
|
|
72
|
-
|
|
73
|
-
/** Buttons under the content
|
|
76
|
+
/** The one-line pill form. It shows no `actions`: a pill answers to `onClick` and its close. */
|
|
77
|
+
compact?: boolean;
|
|
78
|
+
/** Buttons under the content, `minimal flat raised compact` by default. Not shown when `compact`. */
|
|
74
79
|
actions?: IReqoreNotificationAction[];
|
|
75
|
-
/**
|
|
76
|
-
* Draws the icon on an intent-tinted tile. `card`, `filled` and `glass`
|
|
77
|
-
* do this on their own; pass `false` to turn it off, `true` to get it on
|
|
78
|
-
* `accent`.
|
|
79
|
-
*/
|
|
80
|
-
iconHasBackground?: boolean;
|
|
81
|
-
iconColor?: TReqoreEffectColor;
|
|
82
80
|
/**
|
|
83
81
|
* Holds the auto-dismiss timer while the pointer is over the notification,
|
|
84
|
-
* so a reader gets to finish the sentence. Default `true
|
|
85
|
-
* `false` for the classic box (which never did).
|
|
82
|
+
* so a reader gets to finish the sentence. Default `true`.
|
|
86
83
|
*/
|
|
87
84
|
pauseOnHover?: boolean;
|
|
88
85
|
/**
|
|
89
|
-
* The thin line that drains as the duration runs out.
|
|
90
|
-
*
|
|
86
|
+
* The thin line along the bottom that drains as the duration runs out.
|
|
87
|
+
* Default `true` with a duration; `compact` has none unless this is set.
|
|
91
88
|
*/
|
|
92
89
|
showProgress?: boolean;
|
|
93
90
|
/** Accessible name of the close button. */
|
|
94
91
|
closeLabel?: string;
|
|
95
92
|
}
|
|
96
|
-
|
|
93
|
+
/**
|
|
94
|
+
* Defaults every notification added through the provider starts from — set
|
|
95
|
+
* once on `ReqoreUIProvider` (`options.notifications`) to give the whole app
|
|
96
|
+
* one look and one corner. A notification's own props win.
|
|
97
|
+
*/
|
|
98
|
+
export interface IReqoreNotificationDefaults extends Partial<Pick<IReqoreNotificationProps, 'compact' | 'size' | 'flat' | 'raised' | 'minimal' | 'opaque' | 'blur' | 'effect' | 'duration' | 'pauseOnHover' | 'showProgress' | 'iconHasBackground' | 'closeLabel'>> {
|
|
99
|
+
position?: IReqoreNotificationsPosition;
|
|
100
|
+
}
|
|
101
|
+
export declare const StyledNotification: any;
|
|
97
102
|
declare const ReqoreNotification: (props: IReqoreNotificationProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
|
98
103
|
export default ReqoreNotification;
|
|
99
104
|
//# sourceMappingURL=notification.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/notification.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAG7F,OAAO,
|
|
1
|
+
{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/notification.tsx"],"names":[],"mappings":"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"}
|
|
@@ -62,7 +62,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
62
62
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
63
63
|
};
|
|
64
64
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
65
|
-
exports.
|
|
65
|
+
exports.StyledNotification = exports.typeToIcon = exports.StyledReqoreNotification = exports.StyledNotificationTitle = exports.StyledNotificationInnerContent = exports.StyledNotificationContentWrapper = exports.StyledNotificationContent = exports.StyledIconWrapper = void 0;
|
|
66
66
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
67
67
|
var web_1 = require("@react-spring/web");
|
|
68
68
|
var polished_1 = require("polished");
|
|
@@ -72,80 +72,99 @@ var animations_1 = require("../../constants/animations");
|
|
|
72
72
|
var sizes_1 = require("../../constants/sizes");
|
|
73
73
|
var ThemeProvider_1 = __importDefault(require("../../containers/ThemeProvider"));
|
|
74
74
|
var colors_1 = require("../../helpers/colors");
|
|
75
|
-
var useTheme_1 = require("../../hooks/useTheme");
|
|
76
75
|
var utils_1 = require("../../helpers/utils");
|
|
76
|
+
var useTheme_1 = require("../../hooks/useTheme");
|
|
77
|
+
var styles_1 = require("../../styles");
|
|
77
78
|
var Button_1 = __importDefault(require("../Button"));
|
|
78
79
|
var ControlGroup_1 = __importDefault(require("../ControlGroup"));
|
|
79
80
|
var Effect_1 = require("../Effect");
|
|
80
81
|
var EntityRow_1 = require("../EntityRow");
|
|
81
|
-
var Header_1 = require("../Header");
|
|
82
82
|
var Icon_1 = __importDefault(require("../Icon"));
|
|
83
83
|
var Paragraph_1 = require("../Paragraph");
|
|
84
84
|
var Span_1 = require("../Span");
|
|
85
85
|
var Spinner_1 = require("../Spinner");
|
|
86
|
-
var styles_1 = require("./styles");
|
|
87
86
|
var styles_2 = require("./styles");
|
|
88
|
-
|
|
89
|
-
Object.defineProperty(exports, "
|
|
90
|
-
Object.defineProperty(exports, "
|
|
91
|
-
Object.defineProperty(exports, "
|
|
92
|
-
Object.defineProperty(exports, "
|
|
93
|
-
Object.defineProperty(exports, "
|
|
94
|
-
Object.defineProperty(exports, "
|
|
87
|
+
var styles_3 = require("./styles");
|
|
88
|
+
Object.defineProperty(exports, "StyledIconWrapper", { enumerable: true, get: function () { return styles_3.StyledIconWrapper; } });
|
|
89
|
+
Object.defineProperty(exports, "StyledNotificationContent", { enumerable: true, get: function () { return styles_3.StyledNotificationContent; } });
|
|
90
|
+
Object.defineProperty(exports, "StyledNotificationContentWrapper", { enumerable: true, get: function () { return styles_3.StyledNotificationContentWrapper; } });
|
|
91
|
+
Object.defineProperty(exports, "StyledNotificationInnerContent", { enumerable: true, get: function () { return styles_3.StyledNotificationInnerContent; } });
|
|
92
|
+
Object.defineProperty(exports, "StyledNotificationTitle", { enumerable: true, get: function () { return styles_3.StyledNotificationTitle; } });
|
|
93
|
+
Object.defineProperty(exports, "StyledReqoreNotification", { enumerable: true, get: function () { return styles_3.StyledReqoreNotification; } });
|
|
94
|
+
Object.defineProperty(exports, "typeToIcon", { enumerable: true, get: function () { return styles_3.typeToIcon; } });
|
|
95
|
+
/* ---------------------------------------------------------------------------
|
|
96
|
+
* Styles
|
|
97
|
+
* ------------------------------------------------------------------------ */
|
|
95
98
|
var DARK = '#000000';
|
|
96
99
|
var LIGHT = '#ffffff';
|
|
97
|
-
|
|
98
|
-
var $
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
100
|
+
exports.StyledNotification = (0, styled_components_1.default)(Effect_1.StyledEffect)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n transition:\n filter 0.2s ease-out,\n box-shadow 0.2s ease-out;\n color: ", ";\n\n /* ---- shape ---- */\n ", "\n\n /* ---- surface ---- */\n ", "\n\n &:not(:first-child) {\n margin-top: ", "px;\n }\n\n ", "\n"], ["\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n transition:\n filter 0.2s ease-out,\n box-shadow 0.2s ease-out;\n color: ", ";\n\n /* ---- shape ---- */\n ", "\n\n /* ---- surface ---- */\n ", "\n\n &:not(:first-child) {\n margin-top: ", "px;\n }\n\n ", "\n"])), function (_a) {
|
|
101
|
+
var $text = _a.$text;
|
|
102
|
+
return $text;
|
|
103
|
+
}, function (_a) {
|
|
104
|
+
var $compact = _a.$compact, $size = _a.$size, $fluid = _a.$fluid, $hasIcon = _a.$hasIcon, $hasClose = _a.$hasClose, $padded = _a.$padded, $paddingSize = _a.$paddingSize;
|
|
105
|
+
var gap = Math.round(sizes_1.PADDING_FROM_SIZE[$size] * 0.8);
|
|
106
|
+
if ($compact) {
|
|
107
|
+
// A pill is symmetric by construction: the icon sits in a box the size
|
|
108
|
+
// of the close button, so both ends carry the same padding; an end
|
|
109
|
+
// without a control gives the text the same inset instead.
|
|
110
|
+
var pad = sizes_1.PADDING_FROM_SIZE[$paddingSize];
|
|
111
|
+
var vertical = $padded === false || $padded === 'horizontal' ? 0 : Math.round(pad * 0.5);
|
|
112
|
+
var horizontal = $padded === false || $padded === 'vertical' ? 0 : Math.round(pad * 0.8);
|
|
113
|
+
var inset = $padded === false || $padded === 'vertical' ? 0 : pad * 2;
|
|
114
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n min-height: ", "px;\n padding: ", "px ", "px ", "px\n ", "px;\n border-radius: 999px;\n width: ", ";\n max-width: ", ";\n "], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n min-height: ", "px;\n padding: ", "px ", "px ", "px\n ", "px;\n border-radius: 999px;\n width: ", ";\n max-width: ", ";\n "])), Math.round(gap * 0.75), sizes_1.SIZE_TO_PX[(0, utils_1.getOneLessSize)($size)] + vertical * 2, vertical, $hasClose ? horizontal : inset, vertical, $hasIcon ? horizontal : inset, $fluid ? '100%' : 'fit-content', $fluid ? 'none' : 'min(520px, calc(100vw - 60px))');
|
|
112
115
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
116
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n column-gap: ", "px;\n align-items: start;\n padding: ", ";\n border-radius: ", "px;\n width: ", ";\n "], ["\n display: grid;\n grid-template-columns: ", ";\n column-gap: ", "px;\n align-items: start;\n padding: ", ";\n border-radius: ", "px;\n width: ", ";\n "])), $hasIcon ? 'auto minmax(0, 1fr) auto' : 'minmax(0, 1fr) auto', gap, (0, utils_1.resolvePadding)({
|
|
117
|
+
padded: $padded,
|
|
118
|
+
paddingSize: $paddingSize,
|
|
119
|
+
verticalMultiplier: 1,
|
|
120
|
+
horizontalMultiplier: 1,
|
|
121
|
+
}), sizes_1.RADIUS_FROM_SIZE[$size] + 4, $fluid ? '100%' : 'min(400px, calc(100vw - 60px))');
|
|
122
|
+
}, function (_a) {
|
|
123
|
+
var $minimal = _a.$minimal, $opaque = _a.$opaque, $blur = _a.$blur, $flat = _a.$flat, $raised = _a.$raised, $surface = _a.$surface, $accent = _a.$accent, $hasIntent = _a.$hasIntent;
|
|
124
|
+
if ($minimal) {
|
|
125
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: transparent;\n border: 0;\n "], ["\n background: transparent;\n border: 0;\n "])));
|
|
126
|
+
}
|
|
127
|
+
// Every surface floats; `flat` only decides the border and the ring, and the
|
|
128
|
+
// raised highlight sits on a flat surface only (as on a button).
|
|
129
|
+
var shadows = ["0 20px 44px -16px ".concat((0, polished_1.rgba)(DARK, 0.65))];
|
|
130
|
+
if (!$flat && $hasIntent) {
|
|
131
|
+
shadows.push("0 0 0 1px ".concat((0, polished_1.rgba)($accent, 0.28)));
|
|
119
132
|
}
|
|
120
|
-
|
|
121
|
-
|
|
133
|
+
if ($flat && $raised) {
|
|
134
|
+
shadows.push(styles_1.RAISED_SHADOWS);
|
|
135
|
+
}
|
|
136
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", ";\n ", "\n border: ", ";\n box-shadow: ", ";\n "], ["\n background: ", ";\n ", "\n border: ", ";\n box-shadow: ", ";\n "])), (0, polished_1.rgba)($surface, $opaque ? 1 : 0.74), !$opaque &&
|
|
137
|
+
$blur > 0 && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n backdrop-filter: blur(", "px) saturate(1.5);\n -webkit-backdrop-filter: blur(", "px) saturate(1.5);\n "], ["\n backdrop-filter: blur(", "px) saturate(1.5);\n -webkit-backdrop-filter: blur(", "px) saturate(1.5);\n "])), $blur, $blur), $flat ? 0 : "1px solid ".concat((0, polished_1.rgba)(LIGHT, 0.12)), shadows.join(', '));
|
|
138
|
+
}, function (_a) {
|
|
122
139
|
var $size = _a.$size;
|
|
123
140
|
return sizes_1.PADDING_FROM_SIZE[$size];
|
|
124
141
|
}, function (_a) {
|
|
125
142
|
var $clickable = _a.$clickable;
|
|
126
|
-
return $clickable && (0, styled_components_1.css)(
|
|
143
|
+
return $clickable && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n cursor: pointer;\n\n &:hover {\n filter: brightness(1.08);\n }\n "], ["\n cursor: pointer;\n\n &:hover {\n filter: brightness(1.08);\n }\n "])));
|
|
127
144
|
});
|
|
128
|
-
|
|
145
|
+
/** The intent, as a soft glow behind the icon. */
|
|
146
|
+
var StyledNotificationBloom = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n pointer-events: none;\n border-radius: 50%;\n filter: blur(6px);\n ", "\n background: radial-gradient(\n circle at center,\n ", " 0%,\n ", " 70%\n );\n"], ["\n position: absolute;\n pointer-events: none;\n border-radius: 50%;\n filter: blur(6px);\n ", "\n background: radial-gradient(\n circle at center,\n ", " 0%,\n ", " 70%\n );\n"])), function (_a) {
|
|
147
|
+
var $compact = _a.$compact;
|
|
148
|
+
return $compact
|
|
149
|
+
? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n left: -45px;\n top: -60px;\n "], ["\n width: 120px;\n height: 120px;\n left: -45px;\n top: -60px;\n "]))) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: 170px;\n height: 170px;\n left: -60px;\n top: -80px;\n "], ["\n width: 170px;\n height: 170px;\n left: -60px;\n top: -80px;\n "])));
|
|
150
|
+
}, function (_a) {
|
|
129
151
|
var $color = _a.$color;
|
|
130
152
|
return (0, polished_1.rgba)($color, 0.55);
|
|
131
153
|
}, function (_a) {
|
|
132
154
|
var $color = _a.$color;
|
|
133
155
|
return (0, polished_1.rgba)($color, 0);
|
|
134
156
|
});
|
|
135
|
-
var StyledNotificationIconTile = styled_components_1.default.div(
|
|
136
|
-
var $size = _a.$size;
|
|
137
|
-
return EntityRow_1.ICON_TILE_SIZE_FROM_SIZE[$size];
|
|
157
|
+
var StyledNotificationIconTile = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: relative;\n z-index: 1;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n background: ", ";\n"], ["\n position: relative;\n z-index: 1;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n background: ", ";\n"])), function (_a) {
|
|
158
|
+
var $size = _a.$size, $boxPx = _a.$boxPx;
|
|
159
|
+
return $boxPx !== null && $boxPx !== void 0 ? $boxPx : EntityRow_1.ICON_TILE_SIZE_FROM_SIZE[$size];
|
|
138
160
|
}, function (_a) {
|
|
139
|
-
var $size = _a.$size;
|
|
140
|
-
return EntityRow_1.ICON_TILE_SIZE_FROM_SIZE[$size];
|
|
161
|
+
var $size = _a.$size, $boxPx = _a.$boxPx;
|
|
162
|
+
return $boxPx !== null && $boxPx !== void 0 ? $boxPx : EntityRow_1.ICON_TILE_SIZE_FROM_SIZE[$size];
|
|
141
163
|
}, function (_a) {
|
|
142
|
-
var $
|
|
143
|
-
return ($
|
|
144
|
-
}, function (_a) {
|
|
145
|
-
var $tinted = _a.$tinted, $onFilled = _a.$onFilled, $color = _a.$color;
|
|
146
|
-
return !$tinted ? 'transparent' : $onFilled ? (0, polished_1.rgba)(LIGHT, 0.18) : (0, polished_1.rgba)($color, 0.2);
|
|
164
|
+
var $tinted = _a.$tinted, $color = _a.$color;
|
|
165
|
+
return ($tinted ? (0, polished_1.rgba)($color, 0.2) : 'transparent');
|
|
147
166
|
});
|
|
148
|
-
var StyledNotificationBody = styled_components_1.default.div(
|
|
167
|
+
var StyledNotificationBody = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: relative;\n z-index: 1;\n min-width: 0;\n display: flex;\n flex-flow: ", ";\n align-items: ", ";\n justify-content: center;\n gap: ", ";\n align-self: center;\n overflow-wrap: anywhere;\n"], ["\n position: relative;\n z-index: 1;\n min-width: 0;\n display: flex;\n flex-flow: ", ";\n align-items: ", ";\n justify-content: center;\n gap: ", ";\n align-self: center;\n overflow-wrap: anywhere;\n"])), function (_a) {
|
|
149
168
|
var $compact = _a.$compact;
|
|
150
169
|
return ($compact ? 'row wrap' : 'column');
|
|
151
170
|
}, function (_a) {
|
|
@@ -155,16 +174,16 @@ var StyledNotificationBody = styled_components_1.default.div(templateObject_11 |
|
|
|
155
174
|
var $compact = _a.$compact;
|
|
156
175
|
return ($compact ? '0 6px' : '2px');
|
|
157
176
|
});
|
|
158
|
-
var StyledNotificationText = styled_components_1.default.div(
|
|
177
|
+
var StyledNotificationText = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n font-size: ", "px;\n line-height: 1.4;\n opacity: ", ";\n"], ["\n font-size: ", "px;\n line-height: 1.4;\n opacity: ", ";\n"])), function (_a) {
|
|
159
178
|
var $size = _a.$size;
|
|
160
179
|
return sizes_1.TEXT_FROM_SIZE[(0, utils_1.getOneLessSize)($size)];
|
|
161
180
|
}, function (_a) {
|
|
162
181
|
var $dim = _a.$dim;
|
|
163
182
|
return ($dim ? 0.78 : 1);
|
|
164
183
|
});
|
|
165
|
-
var StyledNotificationTrailing = styled_components_1.default.div(
|
|
166
|
-
var drain = (0, styled_components_1.keyframes)(
|
|
167
|
-
var StyledNotificationProgress = styled_components_1.default.div(
|
|
184
|
+
var StyledNotificationTrailing = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n position: relative;\n z-index: 1;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: 2px;\n align-self: start;\n"], ["\n position: relative;\n z-index: 1;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: 2px;\n align-self: start;\n"])));
|
|
185
|
+
var drain = (0, styled_components_1.keyframes)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n from { transform: scaleX(1); }\n to { transform: scaleX(0); }\n"], ["\n from { transform: scaleX(1); }\n to { transform: scaleX(0); }\n"])));
|
|
186
|
+
var StyledNotificationProgress = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: ", "px;\n transform-origin: left center;\n background: ", ";\n animation: ", " ", "ms linear forwards;\n animation-play-state: ", ";\n"], ["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: ", "px;\n transform-origin: left center;\n background: ", ";\n animation: ", " ", "ms linear forwards;\n animation-play-state: ", ";\n"])), function (_a) {
|
|
168
187
|
var $height = _a.$height;
|
|
169
188
|
return $height;
|
|
170
189
|
}, function (_a) {
|
|
@@ -177,15 +196,8 @@ var StyledNotificationProgress = styled_components_1.default.div(templateObject_
|
|
|
177
196
|
var $paused = _a.$paused;
|
|
178
197
|
return ($paused ? 'paused' : 'running');
|
|
179
198
|
});
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
accent: { hasBackground: false, round: false },
|
|
183
|
-
filled: { hasBackground: true, round: false },
|
|
184
|
-
glass: { hasBackground: true, round: true },
|
|
185
|
-
compact: { hasBackground: false, round: false },
|
|
186
|
-
};
|
|
187
|
-
/** Filled glyphs: on a tile or a pill a hairline check reads as a smudge. */
|
|
188
|
-
var VARIANT_TYPE_ICON = {
|
|
199
|
+
/** Filled glyphs: on a tile a hairline check reads as a smudge. */
|
|
200
|
+
var INTENT_ICON = {
|
|
189
201
|
info: 'InformationFill',
|
|
190
202
|
success: 'CheckboxCircleFill',
|
|
191
203
|
warning: 'AlertFill',
|
|
@@ -196,28 +208,29 @@ var VARIANT_TYPE_ICON = {
|
|
|
196
208
|
var sixDigits = function (color) {
|
|
197
209
|
return (color.length > 7 ? color.slice(0, 7) : color);
|
|
198
210
|
};
|
|
211
|
+
var BIG_SIZES = ['big', 'huge', 'massive'];
|
|
212
|
+
/* ---------------------------------------------------------------------------
|
|
213
|
+
* Component
|
|
214
|
+
* ------------------------------------------------------------------------ */
|
|
199
215
|
var ReqoreNotification = (0, react_1.forwardRef)(function (_a, ref) {
|
|
200
|
-
var type = _a.type, intent = _a.intent, icon = _a.icon, iconColor = _a.iconColor, title = _a.title, content = _a.content, onClose = _a.onClose, onClick = _a.onClick, duration = _a.duration, onFinish = _a.onFinish,
|
|
216
|
+
var type = _a.type, intent = _a.intent, icon = _a.icon, iconColor = _a.iconColor, iconHasBackground = _a.iconHasBackground, title = _a.title, content = _a.content, onClose = _a.onClose, onClick = _a.onClick, duration = _a.duration, onFinish = _a.onFinish, _b = _a.flat, flat = _b === void 0 ? true : _b, _c = _a.raised, raised = _c === void 0 ? true : _c, minimal = _a.minimal, _d = _a.opaque, opaque = _d === void 0 ? false : _d, _e = _a.blur, blur = _e === void 0 ? 18 : _e, _f = _a.size, size = _f === void 0 ? 'normal' : _f, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, _g = _a.padded, padded = _g === void 0 ? true : _g, paddingSize = _a.paddingSize, compact = _a.compact, actions = _a.actions, _h = _a.pauseOnHover, pauseOnHover = _h === void 0 ? true : _h, showProgress = _a.showProgress, _j = _a.closeLabel, closeLabel = _j === void 0 ? 'Close' : _j, effect = _a.effect, fluid = _a.fluid;
|
|
201
217
|
var resolvedIntent = intent || type;
|
|
202
|
-
// The
|
|
203
|
-
//
|
|
204
|
-
|
|
205
|
-
var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, resolvedIntent, 'notifications', inheritCustomTheme);
|
|
206
|
-
var surfaceTheme = (0, useTheme_1.useReqoreTheme)('main', customTheme, undefined, 'notifications', inheritCustomTheme);
|
|
218
|
+
// The app's surface, not the intent's: the intent is painted on the icon,
|
|
219
|
+
// the bloom and the timer line.
|
|
220
|
+
var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, undefined, 'notifications', inheritCustomTheme);
|
|
207
221
|
var transitions = (0, web_1.useTransition)(true, {
|
|
208
222
|
from: { opacity: 0, transform: 'scale(0.9)' },
|
|
209
223
|
enter: { opacity: 1, transform: 'scale(1)' },
|
|
210
224
|
leave: { opacity: 0, transform: 'scale(0.9)' },
|
|
211
225
|
config: animations_1.SPRING_CONFIG,
|
|
212
226
|
});
|
|
213
|
-
/* ---- auto-dismiss timer,
|
|
214
|
-
var shouldPause = pauseOnHover !== null && pauseOnHover !== void 0 ? pauseOnHover : !!variant;
|
|
227
|
+
/* ---- auto-dismiss timer, held while hovered ---- */
|
|
215
228
|
var timerRef = (0, react_1.useRef)(undefined);
|
|
216
229
|
var remainingRef = (0, react_1.useRef)(duration);
|
|
217
230
|
var startedAtRef = (0, react_1.useRef)(0);
|
|
218
231
|
var onFinishRef = (0, react_1.useRef)(onFinish);
|
|
219
232
|
onFinishRef.current = onFinish;
|
|
220
|
-
var
|
|
233
|
+
var _k = (0, react_1.useState)(false), paused = _k[0], setPaused = _k[1];
|
|
221
234
|
var clearTimer = (0, react_1.useCallback)(function () {
|
|
222
235
|
if (timerRef.current) {
|
|
223
236
|
clearTimeout(timerRef.current);
|
|
@@ -243,69 +256,63 @@ var ReqoreNotification = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
243
256
|
}, [duration, type, intent, content, title, startTimer, clearTimer]);
|
|
244
257
|
var handleMouseEnter = (0, react_1.useCallback)(function () {
|
|
245
258
|
var _a;
|
|
246
|
-
if (!
|
|
259
|
+
if (!pauseOnHover || !duration || !timerRef.current) {
|
|
247
260
|
return;
|
|
248
261
|
}
|
|
249
262
|
remainingRef.current = Math.max(((_a = remainingRef.current) !== null && _a !== void 0 ? _a : duration) - (Date.now() - startedAtRef.current), 0);
|
|
250
263
|
clearTimer();
|
|
251
264
|
setPaused(true);
|
|
252
|
-
}, [
|
|
265
|
+
}, [pauseOnHover, duration, clearTimer]);
|
|
253
266
|
var handleMouseLeave = (0, react_1.useCallback)(function () {
|
|
254
267
|
var _a;
|
|
255
|
-
if (!
|
|
268
|
+
if (!pauseOnHover || !duration) {
|
|
256
269
|
return;
|
|
257
270
|
}
|
|
258
271
|
setPaused(false);
|
|
259
272
|
// A reader who hovered at the very end still gets a beat to click.
|
|
260
273
|
startTimer(Math.max((_a = remainingRef.current) !== null && _a !== void 0 ? _a : 0, 400));
|
|
261
|
-
}, [
|
|
262
|
-
/* ----
|
|
274
|
+
}, [pauseOnHover, duration, startTimer]);
|
|
275
|
+
/* ---- colours ---- */
|
|
263
276
|
var palette = (0, react_1.useMemo)(function () {
|
|
264
|
-
var surface = (0, colors_1.changeLightness)(
|
|
265
|
-
var text = (0, colors_1.getReadableColor)(
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
277
|
+
var surface = (0, colors_1.changeLightness)(theme.main, 0.05);
|
|
278
|
+
var text = (0, colors_1.getReadableColor)(theme, undefined, undefined, true);
|
|
279
|
+
// `muted` is the readable colour at 30% alpha — as a bloom or a line it
|
|
280
|
+
// would paint white — so it takes the neutral grey a notification
|
|
281
|
+
// without an intent gets.
|
|
282
|
+
var accent = resolvedIntent && resolvedIntent !== 'muted'
|
|
283
|
+
? sixDigits((0, colors_1.getNotificationIntent)(theme, resolvedIntent))
|
|
284
|
+
: (0, colors_1.changeLightness)(theme.main, 0.3);
|
|
269
285
|
// The intents are mid-dark colours; on a dark surface an icon painted in
|
|
270
286
|
// one, on a tile tinted with the same one, loses its edge. Lift it there,
|
|
271
287
|
// deepen it on a light surface.
|
|
272
288
|
var glyph = (0, polished_1.getLuminance)(surface) < 0.4 ? (0, colors_1.changeLightness)(accent, 0.18) : (0, colors_1.changeDarkness)(accent, 0.1);
|
|
273
|
-
return { surface: surface, text: text, accent: accent, glyph: glyph,
|
|
274
|
-
}, [
|
|
289
|
+
return { surface: surface, text: text, accent: accent, glyph: glyph, onAccent: (0, colors_1.getReadableColorFrom)(accent, false) };
|
|
290
|
+
}, [theme, resolvedIntent]);
|
|
275
291
|
var handleClose = (0, react_1.useCallback)(function (event) {
|
|
276
292
|
event === null || event === void 0 ? void 0 : event.stopPropagation();
|
|
277
293
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
278
294
|
}, [onClose]);
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
297
|
-
}
|
|
298
|
-
}, children: label }), "".concat(label, "-").concat(index)));
|
|
299
|
-
})
|
|
300
|
-
: null;
|
|
301
|
-
return transitions(function (styles, item) {
|
|
302
|
-
return item ? ((0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { children: (0, jsx_runtime_1.jsxs)(exports.StyledReqoreNotificationVariant, { as: web_1.animated.div, ref: ref, style: styles, theme: surfaceTheme, effect: effect, role: resolvedIntent === 'danger' || resolvedIntent === 'warning' ? 'alert' : 'status', className: "reqore-notification reqore-notification-".concat(variant), "$variant": variant, "$size": size, "$fluid": fluid, "$clickable": !!onClick, "$hasIcon": hasIcon_1, "$hasIntent": !!resolvedIntent, "$surface": palette.surface, "$text": palette.text, "$accent": palette.accent, "$filledText": palette.filledText, onClick: onClick ? function () { return onClick(); } : undefined, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [variant === 'glass' && resolvedIntent ? ((0, jsx_runtime_1.jsx)(StyledNotificationBloom, { "$color": palette.accent })) : null, hasIcon_1 ? (isCompact_1 ? (iconNode_1) : ((0, jsx_runtime_1.jsx)(StyledNotificationIconTile, { "$size": size, "$color": palette.accent, "$tinted": tinted_1, "$round": VARIANT_ICON[variant].round, "$onFilled": isFilled_1, className: 'reqore-notification-icon', children: iconNode_1 }))) : null, (0, jsx_runtime_1.jsxs)(StyledNotificationBody, { "$compact": isCompact_1, children: [title ? (isCompact_1 ? ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, { size: (0, utils_1.getOneLessSize)(size), effect: { weight: 'bold', color: textColor_1 }, className: 'reqore-notification-title', children: title })) : ((0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, { size: size, effect: { weight: 'bold', color: textColor_1 }, className: 'reqore-notification-title', children: title }))) : null, content ? ((0, jsx_runtime_1.jsx)(StyledNotificationText, { "$size": size, "$dim": !!title, className: 'reqore-notification-content', children: content })) : null, actionButtons_1 && !isCompact_1 ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: controlSize_1, gapSize: 'small', wrap: true, style: { marginTop: sizes_1.PADDING_FROM_SIZE[controlSize_1] }, className: 'reqore-notification-actions', children: actionButtons_1 })) : null] }), actionButtons_1 && isCompact_1 ? ((0, jsx_runtime_1.jsx)(StyledNotificationTrailing, { className: 'reqore-notification-actions', children: actionButtons_1 })) : null, onClose ? ((0, jsx_runtime_1.jsx)(StyledNotificationTrailing, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { icon: 'CloseLine', size: controlSize_1, minimal: true, flat: true, compact: true, customTheme: buttonTheme_1, className: 'reqore-notification-close', "aria-label": closeLabel, onClick: handleClose }) })) : null, progressVisible_1 ? ((0, jsx_runtime_1.jsx)(StyledNotificationProgress, { className: 'reqore-notification-progress', "$color": isFilled_1 ? (0, polished_1.rgba)(LIGHT, 0.55) : palette.accent, "$duration": duration, "$paused": paused, "$height": size === 'big' || size === 'huge' || size === 'massive' ? 3 : 2 }, "".concat(duration).concat(resolvedIntent).concat(title).concat(content))) : null] }) })) : null;
|
|
303
|
-
});
|
|
304
|
-
}
|
|
295
|
+
var hasIcon = !!(icon || resolvedIntent);
|
|
296
|
+
var tinted = iconHasBackground !== null && iconHasBackground !== void 0 ? iconHasBackground : !compact;
|
|
297
|
+
var controlSize = (0, utils_1.getOneLessSize)(size);
|
|
298
|
+
var progressVisible = !!duration && (showProgress !== null && showProgress !== void 0 ? showProgress : !compact);
|
|
299
|
+
var iconNode = resolvedIntent === 'pending' && !icon ? ((0, jsx_runtime_1.jsx)(Spinner_1.ReqoreSpinner, { size: compact ? controlSize : size, type: 5, intent: 'pending' })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { icon: icon || INTENT_ICON[resolvedIntent] || styles_2.typeToIcon[resolvedIntent], size: compact ? controlSize : size, color: iconColor !== null && iconColor !== void 0 ? iconColor : palette.glyph }));
|
|
300
|
+
var actionButtons = (actions === null || actions === void 0 ? void 0 : actions.length) && !compact
|
|
301
|
+
? actions.map(function (_a, index) {
|
|
302
|
+
var label = _a.label, onActionClick = _a.onClick, closeOnClick = _a.closeOnClick, rest = __rest(_a, ["label", "onClick", "closeOnClick"]);
|
|
303
|
+
return ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: controlSize, minimal: true, flat: true, raised: true, compact: true, intent: index === 0 ? resolvedIntent : undefined }, rest, { onClick: function (event) {
|
|
304
|
+
event.stopPropagation();
|
|
305
|
+
onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick();
|
|
306
|
+
if (closeOnClick !== false) {
|
|
307
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
308
|
+
}
|
|
309
|
+
}, children: label }), "".concat(label, "-").concat(index)));
|
|
310
|
+
})
|
|
311
|
+
: null;
|
|
305
312
|
return transitions(function (styles, item) {
|
|
306
|
-
return item ? ((0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { children: (0, jsx_runtime_1.jsxs)(
|
|
313
|
+
return item ? ((0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { children: (0, jsx_runtime_1.jsxs)(exports.StyledNotification, { as: web_1.animated.div, ref: ref, style: styles, theme: theme, effect: effect, role: resolvedIntent === 'danger' || resolvedIntent === 'warning' ? 'alert' : 'status', className: "reqore-notification".concat(compact ? ' reqore-notification-compact' : ''), "$size": size, "$compact": compact, "$fluid": fluid, "$flat": flat, "$raised": raised, "$minimal": minimal, "$opaque": opaque, "$blur": blur, "$clickable": !!onClick, "$hasIcon": hasIcon, "$hasClose": !!onClose, "$hasIntent": !!resolvedIntent, "$padded": padded, "$paddingSize": paddingSize !== null && paddingSize !== void 0 ? paddingSize : size, "$surface": palette.surface, "$text": palette.text, "$accent": palette.accent, onClick: onClick ? function () { return onClick(); } : undefined, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [resolvedIntent && !minimal ? ((0, jsx_runtime_1.jsx)(StyledNotificationBloom, { "$color": palette.accent, "$compact": compact })) : null, hasIcon ? ((0, jsx_runtime_1.jsx)(StyledNotificationIconTile, { "$size": compact ? controlSize : size, "$boxPx": compact ? sizes_1.SIZE_TO_PX[controlSize] : undefined, "$color": palette.accent, "$tinted": tinted, className: 'reqore-notification-icon', children: iconNode })) : null, (0, jsx_runtime_1.jsxs)(StyledNotificationBody, { "$compact": compact, children: [title ? (compact ? ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, { size: controlSize, effect: { weight: 'bold', color: palette.text }, className: 'reqore-notification-title', children: title })) : ((0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, { size: size, effect: { weight: 'bold', color: palette.text }, className: 'reqore-notification-title', children: title }))) : null, content ? ((0, jsx_runtime_1.jsx)(StyledNotificationText, { "$size": size, "$dim": !!title, className: 'reqore-notification-content', children: content })) : null, actionButtons ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: controlSize, gapSize: 'small', wrap: true, style: { marginTop: sizes_1.PADDING_FROM_SIZE[controlSize] }, className: 'reqore-notification-actions', children: actionButtons })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(StyledNotificationTrailing, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { icon: 'CloseLine', size: controlSize, minimal: true, flat: true, compact: true, circle: compact, className: 'reqore-notification-close', "aria-label": closeLabel, onClick: handleClose }) })) : null, progressVisible ? ((0, jsx_runtime_1.jsx)(StyledNotificationProgress, { className: 'reqore-notification-progress', "data-paused": paused || undefined, "$color": palette.accent, "$duration": duration, "$paused": paused, "$height": BIG_SIZES.includes(size) ? 3 : 2 }, "".concat(duration).concat(resolvedIntent).concat(title).concat(content))) : null] }) })) : null;
|
|
307
314
|
});
|
|
308
315
|
});
|
|
309
316
|
exports.default = ReqoreNotification;
|
|
310
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
317
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
|
|
311
318
|
//# sourceMappingURL=notification.js.map
|