mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 11:23:05 +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 MODERATION: string = 'moderation';
|
||||||
public static EVENT: string = 'event';
|
public static EVENT: string = 'event';
|
||||||
public static NITRO: string = 'nitro';
|
public static NITRO: string = 'nitro';
|
||||||
|
public static SEARCH: string = 'search';
|
||||||
}
|
}
|
||||||
|
@ -83,7 +83,7 @@ export class NotificationUtilities
|
|||||||
}
|
}
|
||||||
else
|
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'));
|
if(options.get('sound')) PlaySound(options.get('sound'));
|
||||||
|
@ -193,7 +193,7 @@
|
|||||||
.nitro-alert {
|
.nitro-alert {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
max-height: 550px;
|
max-height: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nitro-notification-bubble {
|
.nitro-notification-bubble {
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { NotificationAlertItem, NotificationAlertType } from '../../../../api';
|
import { NotificationAlertItem, NotificationAlertType } from '../../../../api';
|
||||||
import { NitroSystemAlertView } from './NitroSystemAlertView';
|
import { NitroSystemAlertView } from './NitroSystemAlertView';
|
||||||
import { NotificationDefaultAlertView } from './NotificationDefaultAlertView';
|
import { NotificationDefaultAlertView } from './NotificationDefaultAlertView';
|
||||||
|
import { NotificationSeachAlertView } from './NotificationSearchAlertView';
|
||||||
|
|
||||||
export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =>
|
export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =>
|
||||||
{
|
{
|
||||||
@ -12,6 +13,8 @@ export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =
|
|||||||
{
|
{
|
||||||
case NotificationAlertType.NITRO:
|
case NotificationAlertType.NITRO:
|
||||||
return <NitroSystemAlertView {...props} />
|
return <NitroSystemAlertView {...props} />
|
||||||
|
case NotificationAlertType.SEARCH:
|
||||||
|
return <NotificationSeachAlertView { ...props } />
|
||||||
default:
|
default:
|
||||||
return <NotificationDefaultAlertView { ...props } />
|
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 { LocalizeText, NotificationAlertItem, NotificationAlertType, NotificationUtilities } from '../../../../api';
|
||||||
import { Base, Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
|
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 { item = null, title = ((props.item && props.item.title) || ''), close = null, ...rest } = props;
|
||||||
|
|
||||||
|
const [imageFailed, setImageFailed] = useState<boolean>(false)
|
||||||
|
|
||||||
const visitUrl = useCallback(() =>
|
const visitUrl = useCallback(() =>
|
||||||
{
|
{
|
||||||
NotificationUtilities.openUrl(item.clickUrl);
|
NotificationUtilities.openUrl(item.clickUrl);
|
||||||
@ -18,6 +20,7 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
|
|||||||
close();
|
close();
|
||||||
}, [ item, close ]);
|
}, [ item, close ]);
|
||||||
|
|
||||||
|
|
||||||
const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
|
const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
|
||||||
|
|
||||||
const hasFrank = item.alertType === NotificationAlertType.DEFAULT || item.alertType === NotificationAlertType.MODERATION;
|
const hasFrank = item.alertType === NotificationAlertType.DEFAULT || item.alertType === NotificationAlertType.MODERATION;
|
||||||
@ -25,7 +28,8 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
|
|||||||
return (
|
return (
|
||||||
<LayoutNotificationAlertView title={title} close={close} {...rest}>
|
<LayoutNotificationAlertView title={title} close={close} {...rest}>
|
||||||
<Flex fullHeight overflow="auto" gap={2}>
|
<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) =>
|
{ (item.messages.length > 0) && item.messages.map((message, index) =>
|
||||||
{
|
{
|
||||||
const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
|
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