ATLUserListCard

Esta molécula é utilizada para listas relacionadas a um usuário.

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

Exemplo de Uso:

import { ATLUserListCard } from '@appsimples/atlantica-react-native'
...
<ATLUserListCard
    userAvatar={avatar}
    userNameText={'Sandy Jr.'}
    titleActionButton={'Seguir'}
    onPressActionButton={onPressActionButton}
/>

<ATLUserListCard
    userAvatar={avatar}
    userNameText={'Sandy Jr.'}
    titleActionButton={'Seguir'}
    onPressActionButton={onPressActionButton}
    isActionButtonOutlined
/>

<ATLUserListCard
    userAvatar={avatar}
    userNameText={'Sandy Jr.'}
    firstIconButtonImage={firstIcon}
    secondIconButtonImage={secondIcon}
    onPressFirstIconButton={onPressFirstIconButton}
    onPressSecondIconButton={onPressSecondIconButton}
/>

<ATLUserListCard
    userAvatar={avatar}
    userNameText={'Sandy Jr.'}
    checkboxValue={checkboxVal}
    checkboxOnChange={() => checkboxVal(!checkboxVal)}
/>

<ATLUserListCard
    userAvatar={avatar}
    userNameText={'Sandy Jr.'}
    rightStatusText={'amiga'}
/>

<ATLUserListCard
    userAvatar={avatar}
    userNameText={'Sandy Jr.'}
    avatarIcon={icon}
    isAvatarSquare
    bodyTextLine1={'Vegie es bonus vobis, proinde vos'}
    titleActionButton={'Seguir'}
    onPressActionButton={onPressButton}
    isActionButtonOutlined
    useTintColorIcon
/>

O código acima gera as seguintes moléculas:

Para renderizar a molécula com o botão de ação, é preciso passar as props titleActionButton e onPressActionButton

Para renderizar a molécula com os botões de ícone, é preciso passar as props: firstIconButtonImage, secondIconButtonImage, onPressFirstIconButton e onPressSecondIconButton

Para renderizar a molécula com a checkbox, é preciso passar as props checkboxValue e checkboxOnChange

Para renderizar a molécula com um texto simples à direita, é preciso passar a prop rightStatusText

Caso todas essas props sejam passadas ao mesmo tempo, serão renderizados apenas os botões de ícone.

Props

• checkboxValue
• checkboxOnChange
• avatarIcon
• bodyTextLine1
• bodyTextLine2
• firstIconButtonImage
• placeholderImage
• rigthStatusText
• secondIconButtonImage
• titleActionButton
• userAvatar
• userNameText
• onPressActionButton
• onPressFirstIconButton
• onPressOverflowButton
• onPressSecondIconButton
• onPressUser
• isActionButtonOutlined
• isAvatarSquare
• isOverflowIconVertical
• useTintColorIcon
• horizontalMargin
• horizontalPadding
• verticalMargin
• avatarBaseProps
• bodyLabelBaseProps
• buttonBaseProps
• dividerBaseProps
• iconButtonBaseProps
• overflowIconButtonBaseProps
• rightLabelBaseProps
• userNameLabelBaseProps

---

checkboxValue

Valor da checkbox que corresponde a ela estar tickada (true) ou não (false)

Tipo	Obrigatório
boolean	Não

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

---

checkboxOnChange

Handler que será chamado quando o usuário mudar o valor da checkbox.

Tipo	Obrigatório
function	Não

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

---

avatarIcon

Renderiza à direita do avatar um ícone relativo ao tipo de notificação.

Tipo	Obrigatório
image	Não

A prop não é obrigatória mas para renderizar o ícone é necessário preenchê-la.

---

bodyTextLine1

Primeira linha de texto que aparece abaixo do nome do usuário. Pode ser a única.

Tipo	Obrigatório
string	Não

A prop não é obrigatória mas para renderizar o texto é necessário preenchê-la.

---

bodyTextLine2

Segunda linha de texto que aparece abaixo do nome.

Tipo	Obrigatório
string	Não

A prop não é obrigatória mas para renderizar o texto é necessário preenchê-la.

---

firstIconButtonImage

Ícone que aparece dentro do primeiro iconButton.

Tipo	Obrigatório
ImageSourcePropType	Não

A prop não é obrigatória, mas para renderizar o par de botões, é necessário preenchê-la juntamente com secondIconButtonImage, onPressFirstIconButton e onPressSecondIconButton.

---

placeholderImage

Imagem de placeholder do avatar do usuário.

Tipo	Obrigatório
ImageSourcePropType	Não

---

rigthStatusText

Texto que aparece à direita da molécula.

Tipo	Obrigatório
string	Não

---

secondIconButtonImage

Ícone que aparece dentro do segundo botão.

Tipo	Obrigatório
ImageSourcePropType	Não

A prop não é obrigatória mas para renderizar o par de botões é necessário preenchê-la juntamente com firstIconButtonImage, onPressFirstIconButton e onPressSecondIconButton.

---

titleActionButton

Texto que aparece dentro do botão de açã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 onPressActionButton.

---

userAvatar

Imagem do usuário que irá aparecer dentro do círculo à esquerda.

Tipo	Obrigatório
ImageSourcePropType	Não

---

userNameText

Texto em destaque correspondente ao nome do usuário.

Tipo	Obrigatório
string	Sim

---

onPressActionButton

Handler que será chamado quando o usuário apertar o botão de ação.

Tipo	Obrigatório
function	Não

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

---

onPressFirstIconButton

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

Tipo	Obrigatório
function	Não

A prop não é obrigatória mas para renderizar o par de botões é necessário preenchê-la juntamente com firstIconButtonImage, secondIconButtonImage e onPressSecondIconButton.

---

onPressOverflowButton

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

Tipo	Obrigatório
function	Não

A prop não é obrigatória mas para renderizar o botão de overflow é necessário preenchê-la.

---

onPressSecondIconButton

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

Tipo	Obrigatório
function	Não

A prop não é obrigatória mas para renderizar o par de botões é necessário preenchê-la juntamente com firstIconButtonImage, secondIconButtonImage e onPressFirstIconButton.

---

onPressUser

Handler que será chamado quando for pressionado o avatar ou o nome do usuário.

Tipo	Obrigatório
function	Não

---

isActionButtonOutlined

Determina se o botão de ação é da variação outlined ou não.

Tipo	Obrigatório
boolean	Não

---

isAvatarSquare

Campo boleano que indica se o avatar irá utilizar tokens que o deixem arredondado ou quadrado.

Tipo	Obrigatório
boolean	Não

---

isOverflowIconVertical

Determina se a orientação do ícone de overflow é vertical ou horizontal.

Tipo	Obrigatório
boolean	Não

---

useTintColorIcon

Decide se o ícone usará sua cor natural ou se terá uma tint color.

Tipo	Obrigatório
number	Não

---

horizontalMargin

Essa propriedade deve ser modificada caso seja necessário alterar a margem horizontal externa aos elementos da molécula.

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

Prop	Token	Default Value
horizontalMargin	SpacingMarginal	16

---

horizontalPadding

Essa propriedade deve ser modificada caso seja necessário alterar o espaçamento entre os elementos da molécula.

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

Prop	Token	Default Value
horizontalPadding	SpacingMarginal	16

---

verticalMargin

Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical externa aos elementos da molécula.

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.

Props	Token	Default Value
avatarSize	SizeAvatarBase	64
borderColor	ColorPrimary	#A94CC9
borderRadius	BorderRadiusAvatar	32
borderWidth	BorderWidthAvatar	0
iconColor	ColorPrimary	#A94CC9
iconSize	SizeIconBase	24

Quando não há nenhuma linha de texto de corpo (bodyTextLine1 ou bodyTextLine2), as props avatarSize e borderRadius passam a referenciar outros tokens (SizeAvatarMediumList e BorderRadiusAvatarMediumList, respectivamente).

Para mais informações, acesse ATLAvatarBase.

---

bodyLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label correspondente aos corpos de texto da molécula, é possível através da modificação das bodyLabelBaseProps.

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	FontFamilyBase	undefined
fontSize	FontSizeBody	14
fontWeight	FontWeightNormal	Regular (400)
lineHeight	LineHeightBase	20
multilineLimit	MultilineLimitBody	undefined
opacity	(fixed)	1
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorDarkNeutral	#212121

Para mais informações, acesse ATLLabelBase.

---

buttonBaseProps

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

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	HeightButtonAuxiliary	32
disabledOpacity	OpacityDisabled	0.3
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeButton	12
fontWeight	FontWeightStrong	Bold (700)
iconPadding	SpacingBase	8
iconSize	SizeButtonIcon	24
textCase	TextCaseButton	Uppercase
textColorOutlined	ColorPrimary	#A94CC9
textColorRegular	ColorComplementary	#FFFFFF

Para mais informações, acesse ATLButtonBase.

---

dividerBaseProps

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

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

Props	Token	Default Value
color	ColorSurfaceLightNeutral	#9E9E9E
height	HeightDividerRegular	1

Para mais informações, acesse ATLDividerBase.

---

iconButtonBaseProps

Caso seja necessário mudar alguma propriedade base dos átomos de botão com ícone, é possível através da modificação das iconButtonBaseProps.

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

Props	Token	Default Value
buttonColor	ColorNone	transparent
buttonSize	HeightButtonBase	32
buttonBorderColor	ColorPrimary	#A94CC9
buttonBorderWidth	(fixed)	1
iconColor	ColorPrimary	#A94CC9
iconSize	SizeIconAuxiliary	16

Para mais informações, acesse ATLIconButtonBase.

---

overflowIconButtonBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de ícone correspondente ao overflow, é possível através da modificação das overflowIconButtonBaseProps.

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

Props	Token	Default Value
buttonBorderColor	ColorNone	transparent
buttonBorderWidth	(fixed)	0
buttonColor	ColorNone	transparent
buttonSize	HeightButtonBase	32
iconColor	ColorDarkNeutral	#212121
iconSize	SizeIconBase	24

Para mais informações, acesse ATLIconButtonBase.

---

rightLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label correspondente ao texto de status que fica à direita da molécula, é possível através da modificação das rightLabelBaseProps.

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	FontFamilyBase	undefined
fontSize	FontSizeBody	14
fontWeight	FontWeightNormal	Regular (400)
lineHeight	LineHeightBase	20
multilineLimit	MultilineLimitButton	1
opacity	(fixed)	1
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorDarkNeutral	#212121

Para mais informações, acesse ATLLabelBase.

---

userNameLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label relativo ao nome do usuário, é possível através da modificação das userNameLabelBaseProps.

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	FontFamilyBase	undefined
fontSize	FontSizeHeading	16
fontWeight	FontWeightStrong	Bold (700)
lineHeight	LineHeightTitle	24
multilineLimit	MultilineLimitTitle	1
opacity	(fixed)	1
textAlign	TextAlignmentHeading	left
textCase	TextCaseHighlight	none
textColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLLabelBase.