mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 03:13:06 +02:00
add notification search view
This commit is contained in:
parent
60ed7087a1
commit
bb7351a560
@ -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';
|
||||
}
|
||||
|
@ -83,7 +83,7 @@ export class NotificationUtilities
|
||||
}
|
||||
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'));
|
||||
|
@ -193,7 +193,7 @@
|
||||
.nitro-alert {
|
||||
width: 350px;
|
||||
min-height: 150px;
|
||||
max-height: 550px;
|
||||
max-height: 350px;
|
||||
}
|
||||
|
||||
.nitro-notification-bubble {
|
||||
|
@ -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) =>
|
||||
{
|
||||
@ -12,6 +13,8 @@ export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =
|
||||
{
|
||||
case NotificationAlertType.NITRO:
|
||||
return <NitroSystemAlertView {...props} />
|
||||
case NotificationAlertType.SEARCH:
|
||||
return <NotificationSeachAlertView { ...props } />
|
||||
default:
|
||||
return <NotificationDefaultAlertView { ...props } />
|
||||
}
|
||||
|
@ -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,6 +11,8 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
|
||||
{
|
||||
const { item = null, title = ((props.item && props.item.title) || ''), close = null, ...rest } = props;
|
||||
|
||||
const [imageFailed, setImageFailed] = useState<boolean>(false)
|
||||
|
||||
const visitUrl = useCallback(() =>
|
||||
{
|
||||
NotificationUtilities.openUrl(item.clickUrl);
|
||||
@ -18,6 +20,7 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
|
||||
close();
|
||||
}, [ item, close ]);
|
||||
|
||||
|
||||
const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
|
||||
|
||||
const hasFrank = item.alertType === NotificationAlertType.DEFAULT || item.alertType === NotificationAlertType.MODERATION;
|
||||
@ -25,7 +28,8 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
|
||||
return (
|
||||
<LayoutNotificationAlertView title={title} close={close} {...rest}>
|
||||
<Flex fullHeight overflow="auto" gap={2}>
|
||||
{ hasFrank && <Base className="notification-frank flex-shrink-0" /> }
|
||||
{hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
|
||||
{item.imageUrl && !imageFailed && <img src={item.imageUrl} alt={ item.title } onError={() => { setImageFailed(true) } } /> }
|
||||
{ (item.messages.length > 0) && item.messages.map((message, index) =>
|
||||
{
|
||||
const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
|
||||
|
@ -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<NotificationDefaultAlertViewProps> = props =>
|
||||
{
|
||||
const { item = null, title = ((props.item && props.item.title) || ''), close = null, ...rest } = props;
|
||||
|
||||
const [ searchValue, setSearchValue ] = useState('');
|
||||
const [ results, setResults] = useState<string[]>([]);
|
||||
|
||||
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 (
|
||||
<LayoutNotificationAlertView title={title} close={close} {...rest}>
|
||||
<Flex fullWidth alignItems="center" position="relative">
|
||||
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => updateSearchValue(event.target.value) } />
|
||||
</Flex>
|
||||
<Column fullHeight className="py-1" overflow="hidden">
|
||||
<AutoGrid gap={1} columnCount={1}>
|
||||
{results && results.map((n, index) =>
|
||||
{
|
||||
return <span key={ index }>{ n }</span>
|
||||
})}
|
||||
</AutoGrid>
|
||||
</Column>
|
||||
<hr className="my-2"/>
|
||||
<Column alignItems="center" center gap={ 1 }>
|
||||
{ !isAction && !item.clickUrl &&
|
||||
<Button onClick={ close }>{ LocalizeText('generic.close') }</Button> }
|
||||
{ item.clickUrl && (item.clickUrl.length > 0) &&
|
||||
<Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
|
||||
</Column>
|
||||
</LayoutNotificationAlertView>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user