diff --git a/src/api/notification/NotificationAlertType.ts b/src/api/notification/NotificationAlertType.ts
index 1ff90ebe..6732c598 100644
--- a/src/api/notification/NotificationAlertType.ts
+++ b/src/api/notification/NotificationAlertType.ts
@@ -5,4 +5,5 @@ export class NotificationAlertType
public static MODERATION: string = 'moderation';
public static EVENT: string = 'event';
public static NITRO: string = 'nitro';
+ public static SEARCH: string = 'search';
}
diff --git a/src/api/notification/NotificationUtilities.ts b/src/api/notification/NotificationUtilities.ts
index 5ca4100e..48c3082f 100644
--- a/src/api/notification/NotificationUtilities.ts
+++ b/src/api/notification/NotificationUtilities.ts
@@ -76,14 +76,14 @@ export class NotificationUtilities
const linkTitle = this.getNotificationPart(options, type, 'linkTitle', false);
const linkUrl = this.getNotificationPart(options, type, 'linkUrl', false);
const image = this.getNotificationImageUrl(options, type);
-
+
if(options.get('display') === 'BUBBLE')
{
this.showSingleBubble(LocalizeText(message), NotificationBubbleType.INFO, image, linkUrl);
}
else
{
- this.simpleAlert(message, NotificationAlertType.EVENT, linkUrl, linkTitle, title, image);
+ this.simpleAlert(message, type, linkUrl, linkTitle, title, image);
}
if(options.get('sound')) PlaySound(options.get('sound'));
diff --git a/src/common/index.scss b/src/common/index.scss
index e6db4503..acaa81d4 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -193,7 +193,7 @@
.nitro-alert {
width: 350px;
min-height: 150px;
- max-height: 550px;
+ max-height: 350px;
}
.nitro-notification-bubble {
diff --git a/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx b/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx
index 844686d0..129852cc 100644
--- a/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx
+++ b/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx
@@ -1,6 +1,7 @@
import { NotificationAlertItem, NotificationAlertType } from '../../../../api';
import { NitroSystemAlertView } from './NitroSystemAlertView';
import { NotificationDefaultAlertView } from './NotificationDefaultAlertView';
+import { NotificationSeachAlertView } from './NotificationSearchAlertView';
export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =>
{
@@ -11,7 +12,9 @@ export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =
switch(item.alertType)
{
case NotificationAlertType.NITRO:
- return
+ return
+ case NotificationAlertType.SEARCH:
+ return
default:
return
}
diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
index d56f21b2..de740652 100644
--- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
+++ b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useState } from 'react';
import { LocalizeText, NotificationAlertItem, NotificationAlertType, NotificationUtilities } from '../../../../api';
import { Base, Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
@@ -11,12 +11,15 @@ export const NotificationDefaultAlertView: FC
{
const { item = null, title = ((props.item && props.item.title) || ''), close = null, ...rest } = props;
+ const [imageFailed, setImageFailed] = useState(false)
+
const visitUrl = useCallback(() =>
{
NotificationUtilities.openUrl(item.clickUrl);
close();
}, [ item, close ]);
+
const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
@@ -24,8 +27,9 @@ export const NotificationDefaultAlertView: FC
return (
-
- { hasFrank && }
+
+ {hasFrank && !item.imageUrl && }
+ {item.imageUrl && !imageFailed && { setImageFailed(true) } } /> }
{ (item.messages.length > 0) && item.messages.map((message, index) =>
{
const htmlText = message.replace(/\r\n|\r|\n/g, '
');
diff --git a/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx
new file mode 100644
index 00000000..0e1dabfb
--- /dev/null
+++ b/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx
@@ -0,0 +1,60 @@
+import { FC, useCallback, useEffect, useState } from 'react';
+import { LocalizeText, NotificationAlertItem, NotificationUtilities } from '../../../../api';
+import { AutoGrid, Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
+
+interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
+{
+ item: NotificationAlertItem;
+}
+
+export const NotificationSeachAlertView: FC = props =>
+{
+ const { item = null, title = ((props.item && props.item.title) || ''), close = null, ...rest } = props;
+
+ const [ searchValue, setSearchValue ] = useState('');
+ const [ results, setResults] = useState([]);
+
+ const visitUrl = useCallback(() =>
+ {
+ NotificationUtilities.openUrl(item.clickUrl);
+
+ close();
+ }, [item, close]);
+
+ useEffect(() =>
+ {
+ setResults(JSON.parse(item.messages[0]));
+ }, [item])
+
+ const updateSearchValue = useCallback((value: string) =>
+ {
+ let res = JSON.parse(item.messages[0]);
+ setResults(res.filter((val: string) => val.includes(value)));
+ setSearchValue(value);
+ },[item])
+
+ const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
+
+ return (
+
+
+ updateSearchValue(event.target.value) } />
+
+
+
+ {results && results.map((n, index) =>
+ {
+ return { n }
+ })}
+
+
+
+
+ { !isAction && !item.clickUrl &&
+ }
+ { item.clickUrl && (item.clickUrl.length > 0) &&
+ }
+
+
+ );
+}