mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 11:43:07 +02:00
112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
|
import { AdvancedMap } from 'nitro-renderer';
|
||
|
import { AvatarScaleType } from 'nitro-renderer/src/nitro/avatar/enum/AvatarScaleType';
|
||
|
import { AvatarSetType } from 'nitro-renderer/src/nitro/avatar/enum/AvatarSetType';
|
||
|
import { IAvatarImageListener } from 'nitro-renderer/src/nitro/avatar/IAvatarImageListener';
|
||
|
import { Nitro } from 'nitro-renderer/src/nitro/Nitro';
|
||
|
import { Component } from 'react';
|
||
|
import { AvatarImageViewProps, AvatarImageViewState } from './AvatarImageView.types';
|
||
|
|
||
|
export class AvatarImageView extends Component<AvatarImageViewProps, AvatarImageViewState> implements IAvatarImageListener
|
||
|
{
|
||
|
private static _maxAvatarCacheSize = 10;
|
||
|
private static _avatarCache: AdvancedMap<string, string> = new AdvancedMap();
|
||
|
|
||
|
private static defaultProps: AvatarImageViewProps = {
|
||
|
figure: '',
|
||
|
gender: 'M',
|
||
|
headOnly: false,
|
||
|
direction: 0,
|
||
|
scale: 1
|
||
|
};
|
||
|
|
||
|
constructor(props: AvatarImageViewProps)
|
||
|
{;
|
||
|
super(props);
|
||
|
|
||
|
this.state = {
|
||
|
avatarUrl: null
|
||
|
};
|
||
|
}
|
||
|
|
||
|
public dispose(): void
|
||
|
{
|
||
|
|
||
|
}
|
||
|
|
||
|
public componentDidMount(): void
|
||
|
{
|
||
|
this.buildAvatar();
|
||
|
}
|
||
|
|
||
|
private buildAvatar(): void
|
||
|
{
|
||
|
const imageUrl = this.getUserImageUrl();
|
||
|
|
||
|
if(imageUrl && imageUrl.length) this.setState({ avatarUrl: imageUrl });
|
||
|
}
|
||
|
|
||
|
private getUserImageUrl(): string
|
||
|
{
|
||
|
const build = this.getAvatarBuildString();
|
||
|
|
||
|
let existing = AvatarImageView._avatarCache.getValue(build);
|
||
|
|
||
|
if(!existing)
|
||
|
{
|
||
|
const avatarImage = Nitro.instance.avatar.createAvatarImage(this.props.figure, AvatarScaleType.LARGE, this.props.gender, this, null);
|
||
|
|
||
|
if(avatarImage)
|
||
|
{
|
||
|
let setType = AvatarSetType.FULL;
|
||
|
|
||
|
if(this.props.headOnly) setType = AvatarSetType.HEAD;
|
||
|
|
||
|
avatarImage.setDirection(setType, this.props.direction);
|
||
|
|
||
|
const image = avatarImage.getCroppedImage(setType);
|
||
|
|
||
|
if(image) existing = image.src;
|
||
|
|
||
|
avatarImage.dispose();
|
||
|
}
|
||
|
|
||
|
if(existing) this.putInCache(build, existing);
|
||
|
}
|
||
|
|
||
|
return existing;
|
||
|
}
|
||
|
|
||
|
public resetFigure(figure: string): void
|
||
|
{
|
||
|
AvatarImageView._avatarCache.remove(this.getAvatarBuildString());
|
||
|
|
||
|
this.buildAvatar();
|
||
|
}
|
||
|
|
||
|
public getAvatarBuildString(): string
|
||
|
{
|
||
|
return (`${ this.props.figure }:${ this.props.gender }:${ this.props.direction }:${ this.props.headOnly }`);
|
||
|
}
|
||
|
|
||
|
private putInCache(build: string, url: string): void
|
||
|
{
|
||
|
if(AvatarImageView._avatarCache.length === AvatarImageView._maxAvatarCacheSize) AvatarImageView._avatarCache.remove(AvatarImageView._avatarCache.getKey(0));
|
||
|
|
||
|
AvatarImageView._avatarCache.add(build, url);
|
||
|
}
|
||
|
|
||
|
public render(): JSX.Element
|
||
|
{
|
||
|
const url = `url('${ this.state.avatarUrl }')`;
|
||
|
|
||
|
return (
|
||
|
<div className="avatar-image" style={ (url && url.length) ? { backgroundImage: url } : {} }></div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
public get disposed(): boolean
|
||
|
{
|
||
|
return false;
|
||
|
}
|
||
|
}
|