pixelize-design-library 2.2.36 → 2.2.38
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { NotificationProps } from "./NotificationProps";
|
|
3
|
-
declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, }: NotificationProps) => React.JSX.Element;
|
|
3
|
+
declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, colors, }: NotificationProps) => React.JSX.Element;
|
|
4
4
|
export default Notification;
|
|
@@ -28,15 +28,15 @@ var react_2 = require("@chakra-ui/react");
|
|
|
28
28
|
var lucide_react_1 = require("lucide-react");
|
|
29
29
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
30
30
|
var Notification = function (_a) {
|
|
31
|
-
var notification = _a.notification, onClose = _a.onClose, showStatus = _a.showStatus, onClick = _a.onClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b;
|
|
31
|
+
var notification = _a.notification, onClose = _a.onClose, showStatus = _a.showStatus, onClick = _a.onClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, colors = _a.colors;
|
|
32
32
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
33
|
-
var bgColor = theme.colors.white;
|
|
34
|
-
var borderColor = theme.colors.gray[200];
|
|
35
|
-
var textColor = theme.colors.gray[700];
|
|
36
|
-
var titleColor = theme.colors.gray[800];
|
|
37
|
-
var warningColor = theme.colors.semantic.warning;
|
|
38
|
-
var errorColor = theme.colors.semantic.error;
|
|
39
|
-
var successColor = theme.colors.semantic.success;
|
|
33
|
+
var bgColor = (colors === null || colors === void 0 ? void 0 : colors.bgColor) || theme.colors.white;
|
|
34
|
+
var borderColor = (colors === null || colors === void 0 ? void 0 : colors.borderColor) || theme.colors.gray[200];
|
|
35
|
+
var textColor = (colors === null || colors === void 0 ? void 0 : colors.textColor) || theme.colors.gray[700];
|
|
36
|
+
var titleColor = (colors === null || colors === void 0 ? void 0 : colors.titleColor) || theme.colors.gray[800];
|
|
37
|
+
var warningColor = (colors === null || colors === void 0 ? void 0 : colors.warningColor) || theme.colors.semantic.warning;
|
|
38
|
+
var errorColor = (colors === null || colors === void 0 ? void 0 : colors.errorColor) || theme.colors.semantic.error;
|
|
39
|
+
var successColor = (colors === null || colors === void 0 ? void 0 : colors.successColor) || theme.colors.semantic.success;
|
|
40
40
|
var startDate = notification.startDate
|
|
41
41
|
? new Date(notification.startDate)
|
|
42
42
|
: null;
|
|
@@ -145,7 +145,7 @@ var Notification = function (_a) {
|
|
|
145
145
|
react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
|
|
146
146
|
react_1.default.createElement(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }),
|
|
147
147
|
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
|
|
148
|
-
react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type); } }, notification.title),
|
|
148
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.primary[500] }, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type); } }, notification.title),
|
|
149
149
|
notification.description && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: textColor }, notification.description)))),
|
|
150
150
|
react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
|
|
151
151
|
react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
|
|
@@ -15,4 +15,14 @@ export type NotificationProps = {
|
|
|
15
15
|
showStatus?: boolean;
|
|
16
16
|
onClick?: (id: number, type: "task" | "meeting" | "call") => void;
|
|
17
17
|
isLoading?: boolean;
|
|
18
|
+
colors?: NotificationColor;
|
|
19
|
+
};
|
|
20
|
+
export type NotificationColor = {
|
|
21
|
+
bgColor?: string;
|
|
22
|
+
borderColor?: string;
|
|
23
|
+
textColor?: string;
|
|
24
|
+
titleColor?: string;
|
|
25
|
+
warningColor?: string;
|
|
26
|
+
errorColor?: string;
|
|
27
|
+
successColor?: string;
|
|
18
28
|
};
|