ATLAvatarEditor

Esta molécula é composta por um avatar, dois botões e um botão de label.

Para visitar a documentação de design desta molécula, clique aqui.

IPvaria

Exemplo de Uso:

import { ATLAvatarEditor } from '@appsimples/atlantica-react-native'
...
<ATLAvatarEditor
    image={minhaImagem}
    firstButtonText={'Botão 1'}
    firstButtonOnPress={onPressButton1}
    secondButtonText={'Botão 2'}
    secondButtonOnPress={onPressButton2}
    labelButtonText={'Label Button'}
    labelButtonOnPress={onPressLabelButton}
/>

Props

image
firstButtonText
firstButtonIcon
labelButtonText
placeholderImage
secondButtonText
secondButtonIcon
firstButtonOnPress
labelButtonOnPress
secondButtonOnPress
horizontalMargin
verticalMargin
avatarBaseProps
firstButtonBaseProps
labelButtonBaseProps
secondButtonBaseProps

`image`

Imagem de avatar do usuário que aparece dentro do círculo.

Tipo	Obrigatório
ImageSourcePropType	Sim

`firstButtonText`

Texto do primeiro botão do componente.

Tipo	Obrigatório
string	Não

A prop não é obrigatória, mas para renderizar o botão, é necessário preenchê-la juntamente com firstButtonOnPress

`firstButtonIcon`

Ícone do primeiro botão do componente. Aparece à esquerda do texto.

Tipo	Obrigatório
ImageSourcePropType	Não

`labelButtonText`

Texto do último do componente, que é um labelButton.

Tipo	Obrigatório
string	Não

A prop não é obrigatória, mas para renderizar o botão, é necessário preenchê-la juntamente com labelButtonOnPress

`placeholderImage`

Imagem de placeholder do avatar do usuário.

Tipo	Obrigatório
ImageSourcePropType	Não

`secondButtonText`

Texto do segundo botão do componente, que é um botão com a propriedade outlined.

Tipo	Obrigatório
string	Não

A prop não é obrigatória, mas para renderizar o botão, é necessário preenchê-la juntamente com secondButtonOnPress

`secondButtonIcon`

Ícone do segundo botão do componente. Aparece à esquerda do texto.

Tipo	Obrigatório
ImageSourcePropType	Não

`firstButtonOnPress`

Handler que será chamado quando o usuário apertar o primeiro botão.

Tipo	Obrigatório
string	Não

A prop não é obrigatória, mas para renderizar o botão, é necessário preenchê-la juntamente com firstButtonText

`labelButtonOnPress`

Handler que será chamado quando o usuário apertar o labelButton.

Tipo	Obrigatório
string	Não

A prop não é obrigatória, mas para renderizar o botão, é necessário preenchê-la juntamente com labelButtonText

`secondButtonOnPress`

Handler que será chamado quando o usuário apertar o segundo botão.

Tipo	Obrigatório
string	Não

A prop não é obrigatória, mas para renderizar o botão, é necessário preenchê-la juntamente com secondButtonText

`horizontalMargin`

Essa propriedade deve ser modificada caso seja necessário alterar a margem horizontal externa aos botões.

Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.

Prop	Token	Default Value
horizontalMargin	SpacingWide	64

`verticalMargin`

Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical externa aos botões.

Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.

Prop	Token	Default Value
verticalMargin	SpacingBase	8

`avatarBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo de avatar, é possível através da modificação das avatarBaseProps.

Abaixo temos uma tabela com todas as props do avatar, os tokens aos quais estão relacionadas e o seu valor padrão.

Prop	Token	Default Value
size	SizeAvatarListLarge	64
borderColor	ColorPrimary	#A94CC9
borderRadius	BorderRadiusAvatar	32
borderWidth	BorderWidthAvatar	0

Para mais informações, acesse ATLAvatarBase.

`firstButtonBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo do primeiro botão, é possível através da modificação das firstButtonBaseProps.

Abaixo temos uma tabela com todas as props do botão, os tokens aos quais estão relacionadas e o seu valor padrão.

Props	Token	Default Value
borderColor	ColorPrimary	#A94CC9
borderRadius	BorderRadiusButton	10
borderWidth	BorderWidthButton	1
buttonColor	ColorPrimary	#A94CC9
buttonHeight	HeightButtonBase	32
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeButton	12
fontWeight	FontWeightStrong	Bold (700)
textCase	TextCaseButton	Uppercase
textColorRegular	ColorComplementary	#FFFFFF
textColorOutlined	ColorPrimary	#A94CC9
disabledOpacity	OpacityDisabled	0.3
iconSize	SizeButtonIcon	24
iconPadding	SpacingBase	8

Para mais informações, acesse ATLButtonBase.

`labelButtonBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo do labelButton, é possível através da modificação das labelButtonBaseProps.

Abaixo temos uma tabela com todas as props da label, os tokens aos quais estão relacionadas e o seu valor padrão.

Props	Token	Default Value
fontFamily	FontFamilyButton	SF Pro Display / Robot
fontSize	FontSizeButton	12
fontWeight	FontWeightBold	Bold (700)
lineHeight	LineHeightBase	20
multilineLimit	MultilineLimitButton	1
textAlign	TextAlignmentButton	Center
textCase	TextCaseButton	Uppercase
textColor	ColorPrimary	#A94CC9
opacity	-	1

Para mais informações, acesse ATLLabelBase.

`secondButtonBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo do segundo botão, é possível através da modificação das secondButtonBaseProps.