m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Updating Avatar components to forward refs (#18678)

Browse Source 
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
George Marshall 2023-04-21 08:51:34 -07:00 committed by GitHub
parent 7617a44a57
commit d2779c9ef1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 217 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
ui/components/component-library/avatar-account/avatar-account.js
View File

@ -13,32 +13,38 @@ import {
AvatarAccountSize,
} from './avatar-account.types';
export const AvatarAccount = ({
size = AvatarAccountSize.Md,
address,
className,
variant = AvatarAccountVariant.Jazzicon,
...props
}) => (
<AvatarBase
size={size}
className={classnames('mm-avatar-account', className)}
{...props}
>
{variant === AvatarAccountVariant.Jazzicon ? (
<Jazzicon
className={classnames('mm-avatar-account__jazzicon')}
address={address}
diameter={AvatarAccountDiameter[size]}
/>
) : (
<BlockieIdenticon
address={address}
diameter={AvatarAccountDiameter[size]}
borderRadius="50%"
/>
)}
</AvatarBase>
export const AvatarAccount = React.forwardRef(
(
{
size = AvatarAccountSize.Md,
address,
className,
variant = AvatarAccountVariant.Jazzicon,
...props
},
ref,
) => (
<AvatarBase
ref={ref}
size={size}
className={classnames('mm-avatar-account', className)}
{...props}
>
{variant === AvatarAccountVariant.Jazzicon ? (
<Jazzicon
className={classnames('mm-avatar-account__jazzicon')}
address={address}
diameter={AvatarAccountDiameter[size]}
/>
) : (
<BlockieIdenticon
address={address}
diameter={AvatarAccountDiameter[size]}
borderRadius="50%"
/>
)}
</AvatarBase>
),
);
AvatarAccount.propTypes = {
@ -66,3 +72,5 @@ AvatarAccount.propTypes = {
*/
...Box.propTypes,
};
AvatarAccount.displayName = 'AvatarAccount';

11
ui/components/component-library/avatar-account/avatar-account.test.js
View File

@ -112,4 +112,15 @@ describe('AvatarAccount', () => {
'mm-avatar-base--size-xl',
);
});
it('should forward a ref to the root html element', () => {
const ref = React.createRef();
render(
<AvatarAccount
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
ref={ref}
/>,
);
expect(ref.current).not.toBeNull();
expect(ref.current.nodeName).toBe('DIV');
});
});

6
ui/components/component-library/avatar-base/avatar-base.test.js
View File

@ -121,4 +121,10 @@ describe('AvatarBase', () => {
`box--border-color-${Color.errorDefault}`,
);
});
it('should forward a ref to the root html element', () => {
const ref = React.createRef();
render(<AvatarBase ref={ref}>A</AvatarBase>);
expect(ref.current).not.toBeNull();
expect(ref.current.nodeName).toBe('DIV');
});
});

81
ui/components/component-library/avatar-favicon/avatar-favicon.js
View File

@ -15,43 +15,48 @@ import {
import { useI18nContext } from '../../../hooks/useI18nContext';
import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
export const AvatarFavicon = ({
size = Size.MD,
src,
name = 'avatar-favicon',
className,
fallbackIconProps,
borderColor = BorderColor.transparent,
...props
}) => {
const t = useI18nContext();
return (
<AvatarBase
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames('mm-avatar-favicon', className)}
{...{ borderColor, ...props }}
>
{src ? (
<img
className="mm-avatar-favicon__image"
src={src}
alt={t('logo', [name])}
/>
) : (
<Icon
name={IconName.Global}
color={IconColor.iconDefault}
size={size}
{...fallbackIconProps}
/>
)}
</AvatarBase>
);
};
export const AvatarFavicon = React.forwardRef(
(
{
size = Size.MD,
src,
name = 'avatar-favicon',
className,
fallbackIconProps,
borderColor = BorderColor.transparent,
...props
},
ref,
) => {
const t = useI18nContext();
return (
<AvatarBase
ref={ref}
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames('mm-avatar-favicon', className)}
{...{ borderColor, ...props }}
>
{src ? (
<img
className="mm-avatar-favicon__image"
src={src}
alt={t('logo', [name])}
/>
) : (
<Icon
name={IconName.Global}
color={IconColor.iconDefault}
size={size}
{...fallbackIconProps}
/>
)}
</AvatarBase>
);
},
);
AvatarFavicon.propTypes = {
/**
@ -87,3 +92,5 @@ AvatarFavicon.propTypes = {
*/
...Box.propTypes,
};
AvatarFavicon.displayName = 'AvatarFavicon';

6
ui/components/component-library/avatar-favicon/avatar-favicon.test.js
View File

@ -105,4 +105,10 @@ describe('AvatarFavicon', () => {
);
expect(getByTestId('classname')).toHaveClass('mm-avatar-favicon--test');
});
it('should forward a ref to the root html element', () => {
const ref = React.createRef();
render(<AvatarFavicon name="test" ref={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current.nodeName).toBe('DIV');
});
});

60
ui/components/component-library/avatar-icon/avatar-icon.js
View File

@ -19,33 +19,39 @@ import { AvatarBase } from '../avatar-base';
import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
export const AvatarIcon = ({
size = Size.MD,
color = TextColor.primaryDefault,
backgroundColor = BackgroundColor.primaryMuted,
className,
iconProps,
iconName,
...props
}) => (
<AvatarBase
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
color={color}
backgroundColor={backgroundColor}
borderColor={BorderColor.transparent}
className={classnames('mm-avatar-icon', className)}
{...props}
>
<Icon
color={IconColor.inherit}
name={iconName}
export const AvatarIcon = React.forwardRef(
(
{
size = Size.MD,
color = TextColor.primaryDefault,
backgroundColor = BackgroundColor.primaryMuted,
className,
iconProps,
iconName,
...props
},
ref,
) => (
<AvatarBase
ref={ref}
size={size}
{...iconProps}
/>
</AvatarBase>
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
color={color}
backgroundColor={backgroundColor}
borderColor={BorderColor.transparent}
className={classnames('mm-avatar-icon', className)}
{...props}
>
<Icon
color={IconColor.inherit}
name={iconName}
size={size}
{...iconProps}
/>
</AvatarBase>
),
);
AvatarIcon.propTypes = {
@ -87,3 +93,5 @@ AvatarIcon.propTypes = {
*/
...Box.propTypes,
};
AvatarIcon.displayName = 'AvatarIcon';

6
ui/components/component-library/avatar-icon/avatar-icon.test.js
View File

@ -105,4 +105,10 @@ describe('AvatarIcon', () => {
'box--background-color-success-muted',
);
});
it('should forward a ref to the root html element', () => {
const ref = React.createRef();
render(<AvatarIcon iconName={IconName.SwapHorizontal} ref={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current.nodeName).toBe('DIV');
});
});

6
ui/components/component-library/avatar-network/avatar-network.test.js
View File

@ -123,4 +123,10 @@ describe('AvatarNetwork', () => {
`box--border-color-${BorderColor.errorDefault}`,
);
});
it('should forward a ref to the root html element', () => {
const ref = React.createRef();
render(<AvatarNetwork ref={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current.nodeName).toBe('DIV');
});
});

120
ui/components/component-library/avatar-token/avatar-token.js
View File

@ -14,70 +14,76 @@ import {
} from '../../../helpers/constants/design-system';
import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
export const AvatarToken = ({
size = Size.MD,
name,
src,
showHalo,
color = TextColor.textDefault,
backgroundColor = BackgroundColor.backgroundAlternative,
borderColor = BorderColor.transparent,
className,
...props
}) => {
const [showFallback, setShowFallback] = useState(false);
export const AvatarToken = React.forwardRef(
(
{
size = Size.MD,
name,
src,
showHalo,
color = TextColor.textDefault,
backgroundColor = BackgroundColor.backgroundAlternative,
borderColor = BorderColor.transparent,
className,
...props
},
ref,
) => {
const [showFallback, setShowFallback] = useState(false);
useEffect(() => {
setShowFallback(!src);
}, [src]);
useEffect(() => {
setShowFallback(!src);
}, [src]);
const handleOnError = () => {
setShowFallback(true);
};
const handleOnError = () => {
setShowFallback(true);
};
const fallbackString = name && name[0] ? name[0] : '?';
const fallbackString = name && name[0] ? name[0] : '?';
return (
<AvatarBase
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames(
'mm-avatar-token',
showHalo && 'mm-avatar-token--with-halo',
className,
)}
{...{ backgroundColor, borderColor, color, ...props }}
>
{showFallback ? (
fallbackString
) : (
<>
{showHalo && (
return (
<AvatarBase
ref={ref}
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames(
'mm-avatar-token',
showHalo && 'mm-avatar-token--with-halo',
className,
)}
{...{ backgroundColor, borderColor, color, ...props }}
>
{showFallback ? (
fallbackString
) : (
<>
{showHalo && (
<img
src={src}
className={
showHalo ? 'mm-avatar-token__token-image--blurred' : ''
}
aria-hidden="true"
/>
)}
<img
src={src}
className={
showHalo ? 'mm-avatar-token__token-image--blurred' : ''
showHalo
? 'mm-avatar-token__token-image--size-reduced'
: 'mm-avatar-token__token-image'
}
aria-hidden="true"
onError={handleOnError}
src={src}
alt={`${name} logo` || 'token logo'}
/>
)}
<img
className={
showHalo
? 'mm-avatar-token__token-image--size-reduced'
: 'mm-avatar-token__token-image'
}
onError={handleOnError}
src={src}
alt={`${name} logo` || 'token logo'}
/>
</>
)}
</AvatarBase>
);
};
</>
)}
</AvatarBase>
);
},
);
AvatarToken.propTypes = {
/**
@ -123,3 +129,5 @@ AvatarToken.propTypes = {
*/
...Box.propTypes,
};
AvatarToken.displayName = 'AvatarToken';

6
ui/components/component-library/avatar-token/avatar-token.test.js
View File

@ -121,4 +121,10 @@ describe('AvatarToken', () => {
`box--border-color-${BorderColor.errorDefault}`,
);
});
it('should forward a ref to the root html element', () => {
const ref = React.createRef();
render(<AvatarToken ref={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current.nodeName).toBe('DIV');
});
});