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) && + } + +
+ ); +}