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} />;
} }
}; };

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 { 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') }
</div> </button>
</LayoutNotificationBubbleView> <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 { 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"
<Flex center className="bubble-image-container"> onClick={ event => (item.linkUrl && item.linkUrl.length && OpenUrl(item.linkUrl)) }
{ (item.iconUrl && item.iconUrl.length) && { ...restProps }>
<img className="no-select" src={ item.iconUrl } alt="" /> } <Flex center className="bubble-image-container">
</Flex> { (item.iconUrl && item.iconUrl.length) &&
<Text wrap variant="white" dangerouslySetInnerHTML={ { __html: htmlText } } /> <img className="no-select" src={ item.iconUrl } alt="" /> }
</LayoutNotificationBubbleView> </Flex>
); <Text wrap variant="white" dangerouslySetInnerHTML={ { __html: htmlText } } />
} </LayoutNotificationBubbleView>
);
};