ATLComment

Essa molécula é utilizada para exibir comentários de usuários e suas respostas, bem como interagir com eles.

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

Exemplo de uso:

import { ATLComment } from '@appsimples/atlantica-react-native'
...
<ATLComment
    userAvatar={avatar}
    userNameText={'User Name'}
    timestampText={'Há 10 dias'}
    commentText={'Eu gostei muito desse vídeo!'}
    answerButtonText={'Responder'}
    likeButtonText={'Curtir'}
    likedByMe={liked}
    onPressAnswer={onPressAnswer}
    onPressLike={onPressLike}
    onPressOverflowButton={onPressOverflow}
/>

Props

• answerButtonText
• commentText
• editedText
• likeButtonText
• placeholderImage
• readMoreText
• timestampText
• userAvatar
• userNameText
• onPressAnswer
• onPressLike
• onPressOverflowButton
• onPressUser
• hasBeenEdited
• isAnswer
• isAvatarSquare
• isOverflowIconVertical
• likedByMe
• horizontalMargin
• horizontalPadding
• horizontalPaddingAvatar
• verticalBottomMargin
• verticalUpperMargin
• avatarBaseProps
• commentLabelBaseProps
• labelButtonBaseProps
• likeButtonToggleBaseProps
• overflowButtonBaseProps
• threadBaseProps
• timestampLabelBaseProps
• userNameLabelBaseProps

---

answerButtonText

Texto que aparece no botão de responder o comentário.

Tipo	Obrigatório
string	Não

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

---

commentText

Texto principal que exibe o comentário feito pelo usuário.

Tipo	Obrigatório
string	Não

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

---

editedText

Caso o comentário tenha sido editado, aparece esse texto ao lado do timestamp.

Tipo	Obrigatório
string	Não

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

---

likeButtonText

Texto que aparece no botão de curtir o comentário, à direita do ícone de coraçã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 onPressLike.

---

placeholderImage

Imagem de placeholder do avatar do usuário.

Tipo	Obrigatório
ImageSourcePropType	Não

---

readMoreText

Texto que aparece quando a opção de ler mais é ativada.

Tipo	Obrigatório
string	Não

A prop não é obrigatória mas para que haja a opção de ler mais na molécula, é necessário preenchê-la.

---

timestampText

Segunda linha de texto que corresponde ao timestamp da notificação.

Tipo	Obrigatório
string	Não

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

---

userAvatar

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

Tipo	Obrigatório
ImageSourcePropType	Não

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

---

userNameText

Texto em destaque correspondente ao nome do usuário.

Tipo	Obrigatório
string	Sim

---

onPressAnswer

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

Tipo	Obrigatório
function	Sim

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

---

onPressLike

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

Tipo	Obrigatório
function	Sim

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

---

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.

---

onPressUser

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

Tipo	Obrigatório
function	Não

---

hasBeenEdited

Campo boleano que indica se o comentário foi editado (true) ou não (false).

Tipo	Obrigatório
boolean	Não

---

isAnswer

Campo boleano que indica se o comentário é uma resposta (true) ou não (false). Caso seja, será renderizado deslocado para a direita e com o avatar reduzido.

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

---

likedByMe

Campo boleano que indica se o comentário foi curtido pelo usuário (true) ou não (false).

Tipo	Obrigatório
boolean	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 horizontal 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

---

horizontalPaddingAvatar

Essa propriedade deve ser modificada caso seja necessário alterar o espaçamento horizontal entre o avatar e os demais 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
verticalPadding	SpacingBase	8

---

verticalBottomMargin

Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical inferior 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	SpacingMarginal	16

---

verticalUpperMargin

Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical superior 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.

Prop	Token	Default Value
avatarSize	SizeAvatarComment	48
borderColor	ColorPrimary	#A94CC9
borderRadius	BorderRadiusAvatarComment	24
borderWidth	BorderWidthAvatar	0

Para mais informações, acesse ATLAvatarBase.

---

commentLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label correspondente ao corpo de texto do comentário, é possível através da modificação das commentLabelBaseProps.

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.

---

labelButtonBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label correspondente aos botões de Responder e Curtir, é 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	FontFamilyBase	undefined
fontSize	FontSizeButton	12
fontWeight	FontWeightStrong	Bold (700)
lineHeight	LineHeightBase	20
multilineLimit	MultilineLimitButton	1
opacity	(fixed)	1
textAlign	TextAlignmentButton	Center
textCase	TextCaseButton	Uppercase
textColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLLabelBase.

---

likeButtonToggleBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de toggle correspondente aos botão de curtir, é possível através da modificação das likeButtonToggleBaseProps.

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
size	SizeIconAuxiliary	16
tintColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLButtonToggleBase.

---

overflowButtonBaseProps

aso 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	SizeIconBase	24
iconColor	ColorDarkNeutral	#212121
iconSize	SizeIconBase	24

Para mais informações, acesse ATLIconButtonBase.

---

threadBaseProps

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

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	#C4C4C4
width	WidthThreadRegular	1

Para mais informações, acesse ATLThreadBase.

---

timestampLabelBaseProps

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

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	FontSizeTimestamp	12
fontWeight	FontWeightStrong	Strong (600)
lineHeight	LineHeightBase	20
multilineLimit	MultilineLimitTitle	1
opacity	(fixed)	1
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorLightNeutral	#9E9E9E

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	FontFamilyBrand	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.