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; if (!item) return null;
const props = { key: item.id, item, onClose }; const props = { item, onClose };
switch (item.notificationType) { switch (item.notificationType) {
case NotificationBubbleType.CLUBGIFT: case NotificationBubbleType.CLUBGIFT:
return <NotificationClubGiftBubbleView {...props} />; return <NotificationClubGiftBubbleView key={ item.id } {...props} />;
default: default:
return <NotificationDefaultBubbleView {...props} />; return <NotificationDefaultBubbleView key={ item.id } {...props} />;
} }
}; };

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

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

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