duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐟 We don't need to destructure the key in the child component at all

Browse Source
This commit is contained in:
DuckieTM 2025-03-06 21:04:11 +01:00
parent 5ffc133721
commit 10dd5c3f62
3 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/notification-center/views/bubble-layouts/GetBubbleLayout.tsx
View File

@ -11,12 +11,12 @@ export const GetBubbleLayout = (
) => {
if (!item) return null;
const props = { key: item.id, item, onClose };
const props = { item, onClose };
switch (item.notificationType) {
case NotificationBubbleType.CLUBGIFT:
return <NotificationClubGiftBubbleView {...props} />;
return <NotificationClubGiftBubbleView key={ item.id } {...props} />;
default:
return <NotificationDefaultBubbleView {...props} />;
return <NotificationDefaultBubbleView key={ item.id } {...props} />;
}
};

41
src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
View File

@ -2,25 +2,28 @@ import { FC } from 'react';
import { LocalizeText, NotificationBubbleItem, OpenUrl } from '../../../../api';
import { LayoutCurrencyIcon, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps } from '../../../../common';
export interface NotificationClubGiftBubbleViewProps extends LayoutNotificationBubbleViewProps
{
item: NotificationBubbleItem;
export interface NotificationClubGiftBubbleViewProps extends LayoutNotificationBubbleViewProps {
item: NotificationBubbleItem;
}
export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewProps> = props =>
{
const { item = null, onClose = null, ...rest } = props;
export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewProps> = props => {
// Don't try to destructure key from props!
const { item = null, onClose = null, ...restProps } = props;
return (
<LayoutNotificationBubbleView fadesOut={ false } className="flex-column club-gift" onClose={ onClose } { ...rest }>
<div className="d-flex align-items-center gap-2 mb-2">
<LayoutCurrencyIcon type="hc" className="flex-shrink-0" />
<span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
</div>
<div className="d-flex align-items-center justify-content-end gap-2">
<button type="button" className="btn btn-success w-100 btn-sm" onClick={ () => OpenUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
<span className="text-decoration-underline cursor-pointer text-nowrap" onClick={ onClose }>{ LocalizeText('notifications.button.later') }</span>
</div>
</LayoutNotificationBubbleView>
);
}
return (
<LayoutNotificationBubbleView fadesOut={ false } className="flex-column club-gift" onClose={ onClose } { ...restProps }>
<div className="d-flex align-items-center gap-2 mb-2">
<LayoutCurrencyIcon type="hc" className="flex-shrink-0" />
<span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
</div>
<div className="d-flex align-items-center justify-content-end gap-2">
<button type="button" className="btn btn-success w-100 btn-sm" onClick={ () => OpenUrl(item.linkUrl) }>
{ LocalizeText('notifications.button.show_gift_list') }
</button>
<span className="text-decoration-underline cursor-pointer text-nowrap" onClick={ onClose }>
{ LocalizeText('notifications.button.later') }
</span>
</div>
</LayoutNotificationBubbleView>
);
};

37
src/components/notification-center/views/bubble-layouts/NotificationDefaultBubbleView.tsx
View File

@ -2,24 +2,25 @@ import { FC } from 'react';
import { NotificationBubbleItem, OpenUrl } from '../../../../api';
import { Flex, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps, Text } from '../../../../common';
export interface NotificationDefaultBubbleViewProps extends LayoutNotificationBubbleViewProps
{
item: NotificationBubbleItem;
export interface NotificationDefaultBubbleViewProps extends LayoutNotificationBubbleViewProps {
item: NotificationBubbleItem;
}
export const NotificationDefaultBubbleView: FC<NotificationDefaultBubbleViewProps> = props =>
{
const { item = null, onClose = null, ...rest } = props;
const htmlText = item.message.replace(/\r\n|\r|\n/g, '<br />');
export const NotificationDefaultBubbleView: FC<NotificationDefaultBubbleViewProps> = props => {
// Do not destructure key!
const { item = null, onClose = null, ...restProps } = props;
const htmlText = item.message.replace(/\r\n|\r|\n/g, '<br />');
return (
<LayoutNotificationBubbleView onClose={ onClose } gap={ 2 } alignItems="center" onClick={ event => (item.linkUrl && item.linkUrl.length && OpenUrl(item.linkUrl)) } { ...rest }>
<Flex center className="bubble-image-container">
{ (item.iconUrl && item.iconUrl.length) &&
<img className="no-select" src={ item.iconUrl } alt="" /> }
</Flex>
<Text wrap variant="white" dangerouslySetInnerHTML={ { __html: htmlText } } />
</LayoutNotificationBubbleView>
);
}
return (
<LayoutNotificationBubbleView onClose={ onClose } gap={ 2 } alignItems="center"
onClick={ event => (item.linkUrl && item.linkUrl.length && OpenUrl(item.linkUrl)) }
{ ...restProps }>
<Flex center className="bubble-image-container">
{ (item.iconUrl && item.iconUrl.length) &&
<img className="no-select" src={ item.iconUrl } alt="" /> }
</Flex>
<Text wrap variant="white" dangerouslySetInnerHTML={ { __html: htmlText } } />
</LayoutNotificationBubbleView>
);
};