nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update BadgeImageView

Browse Source
This commit is contained in:
Bill 2021-09-29 22:30:01 -04:00
parent c9e64c83dc
commit f69b40bbfe
2 changed files with 53 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/shared/badge-image/BadgeImageView.tsx
View File

@ -1,16 +1,53 @@
import { BadgeImageReadyEvent, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
import { NitroLayoutBase } from '../../../layout/base';
import { BadgeInformationView } from './badge-info/BadgeInformationView';
import { BadgeImageViewProps } from './BadgeImageView.types';
export const BadgeImageView: FC<BadgeImageViewProps> = props =>
{
const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null } = props;
const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, className = '', style = null, children = null, ...rest } = props;
const [ badgeUrl, setBadgeUrl ] = useState<string>('');
const [ isListening, setIsListening ] = useState<boolean>(true);
const getScaleClass = useMemo(() =>
{
let scaleName = scale.toString();
if(scale === .5) scaleName = '0-5';
else if(scale === .75) scaleName = '0-75';
else if(scale === 1.25) scaleName = '1-25';
else if(scale === 1.50) scaleName = '1-50';
return `scale-${ scaleName }`;
}, [ scale ]);
const getClassName = useMemo(() =>
{
let newClassName = 'badge-image';
if(isGrayscale) newClassName += ' grayscale';
if((scale !== 1) && getScaleClass.length) newClassName += ` ${ getScaleClass }`;
if(className && className.length) newClassName += ' ' + className;
return newClassName;
}, [ className, isGrayscale, scale, getScaleClass ]);
const getStyle = useMemo(() =>
{
const newStyle = { ...style };
if(badgeUrl && badgeUrl.length) newStyle.backgroundImage = `url(${ badgeUrl })`;
return newStyle;
}, [ style, badgeUrl ]);
const onBadgeImageReadyEvent = useCallback((event: BadgeImageReadyEvent) =>
{
if(event.badgeId !== badgeCode) return;
@ -27,6 +64,8 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
useEffect(() =>
{
if(!badgeCode || !badgeCode.length) return;
const existing = (isGroup) ? GetSessionDataManager().loadGroupBadgeImage(badgeCode) : GetSessionDataManager().loadBadgeImage(badgeCode);
if(!existing)
@ -51,7 +90,10 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
const url = `url('${ badgeUrl }')`;
return <div className="badge-image" style={ (url && url.length) ? { backgroundImage: url } : {} }>
{ showInfo && <BadgeInformationView title={ isGroup ? customTitle : LocalizeBadgeName(badgeCode) } description={ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) } /> }
</div>;
return (
<NitroLayoutBase className={ getClassName } style={ getStyle }>
{ showInfo && <BadgeInformationView title={ isGroup ? customTitle : LocalizeBadgeName(badgeCode) } description={ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) } /> }
{ children }
</NitroLayoutBase>
);
}

6
src/views/shared/badge-image/BadgeImageView.types.ts
View File

@ -1,7 +1,11 @@
export interface BadgeImageViewProps
import { NitroLayoutBaseProps } from '../../../layout/base';
export interface BadgeImageViewProps extends NitroLayoutBaseProps
{
badgeCode: string;
isGroup?: boolean;
showInfo?: boolean;
customTitle?: string;
isGrayscale?: boolean;
scale?: number;
}