mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-02 06:07:06 +01:00
e72dfad21a
* added AvatarAccount component * updated avatar account component and README * updated lint errors * updated avatar account with types * updated Jazzicon lint errors * removed unused imports * updated type prop and Blockie * removed unused exports * updated jazzicon styles * fixed overflow in jazzicon * updated avatar account component * updated avatar account stories with types and size stories * updated test for avatar account * updated tests for avatar account * Adding `TextFieldBase` component (#16043) * Adding TextInputBase component * Removing keyup and keydown props, tests and docs * removing showClear from stories * removing unneeded css * simplifying uncontrolled vs controlled to work * Fortifying maxLength test * Lint fix for test * Doc, style and prop updates * Updating constant names with 'base' * Adding a background color * Adding a background color to input * Adding ast-types to resolutions (#16103) Co-authored-by: George Marshall <george.marshall@consensys.net>
55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import Jazzicon from '../../ui/jazzicon/jazzicon.component';
|
|
import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
|
|
import { BaseAvatar } from '../base-avatar';
|
|
|
|
import { SIZES } from '../../../helpers/constants/design-system';
|
|
import { DIAMETERS, TYPES } from './avatar-account.constants';
|
|
|
|
export const AvatarAccount = ({ size, address, className, type, ...props }) => {
|
|
return (
|
|
<BaseAvatar
|
|
size={size}
|
|
className={classnames('avatar-account', className)}
|
|
{...props}
|
|
>
|
|
{type === 'Jazzicon' ? (
|
|
<Jazzicon
|
|
className={classnames('avatar-account__jazzicon')}
|
|
address={address}
|
|
diameter={DIAMETERS[size]}
|
|
/>
|
|
) : (
|
|
<BlockieIdenticon
|
|
address={address}
|
|
diameter={DIAMETERS[size]}
|
|
borderRadius="50%"
|
|
/>
|
|
)}
|
|
</BaseAvatar>
|
|
);
|
|
};
|
|
|
|
AvatarAccount.propTypes = {
|
|
/**
|
|
* The size of the AvatarAccount.
|
|
* Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
|
|
* Defaults to SIZES.MD
|
|
*/
|
|
size: PropTypes.oneOf(Object.values(SIZES)),
|
|
/**
|
|
* The type of the avatar to be rendered, it can render either a Jazzicon or a Blockie
|
|
*/
|
|
type: PropTypes.oneOf(Object.values(TYPES)),
|
|
/**
|
|
* Address used for generating random image
|
|
*/
|
|
address: PropTypes.string,
|
|
/**
|
|
* Add custom css class
|
|
*/
|
|
className: PropTypes.string,
|
|
};
|