mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Update AvatarImageView
This commit is contained in:
parent
9787857fd9
commit
56961a448c
@ -1,21 +1,23 @@
|
|||||||
import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer';
|
import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer';
|
||||||
import { FC, useEffect, useState } from 'react';
|
import { FC, useEffect, useRef, useState } from 'react';
|
||||||
import { GetAvatarRenderManager } from '../../../api';
|
import { GetAvatarRenderManager } from '../../../api';
|
||||||
import { AvatarImageViewProps } from './AvatarImageView.types';
|
import { AvatarImageViewProps } from './AvatarImageView.types';
|
||||||
|
|
||||||
export const AvatarImageView: FC<AvatarImageViewProps> = props =>
|
export const AvatarImageView: FC<AvatarImageViewProps> = props =>
|
||||||
{
|
{
|
||||||
const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1 } = props;
|
const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1 } = props;
|
||||||
|
|
||||||
const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
|
const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
|
||||||
const [ randomValue, setRandomValue ] = useState(-1);
|
const [ randomValue, setRandomValue ] = useState(-1);
|
||||||
|
const isDisposed = useRef(false);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
if(randomValue) {}
|
|
||||||
|
|
||||||
const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
|
const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
|
||||||
resetFigure: figure => setRandomValue(Math.random()),
|
resetFigure: figure => {
|
||||||
|
if(isDisposed.current) return;
|
||||||
|
|
||||||
|
setRandomValue(Math.random());
|
||||||
|
},
|
||||||
dispose: () => {},
|
dispose: () => {},
|
||||||
disposed: false
|
disposed: false
|
||||||
}, null);
|
}, null);
|
||||||
@ -35,6 +37,16 @@ export const AvatarImageView: FC<AvatarImageViewProps> = props =>
|
|||||||
avatarImage.dispose();
|
avatarImage.dispose();
|
||||||
}, [ figure, gender, direction, headOnly, randomValue ]);
|
}, [ figure, gender, direction, headOnly, randomValue ]);
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
isDisposed.current = false;
|
||||||
|
|
||||||
|
return () =>
|
||||||
|
{
|
||||||
|
isDisposed.current = true;
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
const url = `url('${ avatarUrl }')`;
|
const url = `url('${ avatarUrl }')`;
|
||||||
|
|
||||||
return <div className={ 'avatar-image scale-' + scale } style={ (avatarUrl && url.length) ? { backgroundImage: url } : {} }></div>;
|
return <div className={ 'avatar-image scale-' + scale } style={ (avatarUrl && url.length) ? { backgroundImage: url } : {} }></div>;
|
||||||
|
Loading…
Reference in New Issue
Block a user