ATLPost

Essa molécula é utilizada para exibir posts de interação social que podem conter textos, imagens e vídeos.

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

Exemplo de Uso:

import { ATLPost } from '@appsimples/atlantica-react-native'
...
const userJoinedGroup: ActionPostText[] = [
    { text: 'Amanda ', onPress: onPressUser },
    { text: 'entrou no grupo ' },
    { text: 'Cachorros Fofinhos', onPress: onPressGroup }
]
...
<View style={{ backgroundColor: 'white', flex: 1, margin: 8 }}>
  <ATLPost
    actionText={userJoinedGroup}
    postText={'Quero compartilhar essa ideia com o mundo!'}
    imagesList={[dogImage1, dogImage2, dogImage3]}
    userAvatar={avatar}
    timestampText={'Há 10 dias'}
    likedByMe={liked}
    answerButtonText={'Responder'}
    editedText={'Editado'}
    likeButtonText={'Curtir'}
    readMoreText={'Ver mais'}
    onPressAnswer={onPressAnswer}
    onPressLike={onPressLike}
    onPressOverflowButton={onPressOverflow}
    onPressUser={onPressUser}
  />
</View>

Obs: O componente de post em si possui um fundo transparente. Para colocar ele dentro de um card branco, utilizou-se neste exemplo uma view de fundo branco e margem 8.

Props

• actionText
• answerButtonText
• editedText
• imagesList
• likeButtonText
• placeholderImage
• postText
• readMoreText
• shareText
• timestampText
• userAvatar
• videoThumbImage
• onPressAnswer
• onPressLike
• onPressOverflowButton
• onPressShare
• onPressUser
• onPressVideo
• hasBeenEdited
• isAvatarSquare
• isOverflowIconVertical
• likedByMe
• horizontalMargin
• horizontalPadding
• verticalMargin
• verticalPadding
• actionLinkLabelBaseProps
• actionRegularLabelBaseProps
• avatarBaseProps
• carouselBaseProps
• labelButtonBaseProps
• likeButtonToggleBaseProps
• overflowIconButtonBaseProps
• postLabelBaseProps
• timestampLabelBaseProps

---

actionText

Texto que aparece ao lado do avatar do usuário.

Esses textos são passados em um array de objetos ActionPostText. Um objeto deste tipo possui duas propriedades: text (obrigatória) e onPress (opcional).

Caso a propriedade onPress seja passada, o texto será renderizado como um link. Caso contrário, como um texto comum.

Tipo	Obrigatório
ActionPostText[]	Não

---

answerButtonText

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

Tipo	Obrigatório
string	Sim

---

editedText

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

Tipo	Obrigatório
string	Sim

---

imagesList

Lista de imagens que podem aparecer no post, caso sejam passadas. Se este array possuir apenas um elemeto, uma imagem será mostrada. Caso possua mais, o componente ATLCarouselBase contém essas imagens.

Tipo	Obrigatório
ImageSourcePropType[]	Não

---

likeButtonText

Texto que aparece no botão de curtir o comentário, à direita do ícone de coração.

Tipo	Obrigatório
string	Sim

---

placeholderImage

Imagem de placeholder do avatar do usuário.

Tipo	Obrigatório
ImageSourcePropType	Não

---

postText

Texto principal que exibe o conteúdo feito pelo usuário.

Tipo	Obrigatório
string	Não

---

readMoreText

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

Tipo	Obrigatório
string	Sim

---

shareText

Texto que aparece no botão de compartilhar.

Tipo	Obrigatório
string	Não

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

---

timestampText

Segunda linha de texto que corresponde ao timestamp do post.

Tipo	Obrigatório
string	Sim

---

userAvatar

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

Tipo	Obrigatório
ImageSourcePropType	Não

---

videoThumbImage

Imagem de thumbnail de um vídeo que é exibida com um ícone indicativo.

Tipo	Obrigatório
ImageSourcePropType	Não

---

onPressAnswer

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

Tipo	Obrigatório
function	Sim

---

onPressLike

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

Tipo	Obrigatório
function	Sim

---

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.

---

onPressShare

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

Tipo	Obrigatório
string	Não

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

---

onPressUser

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

Tipo	Obrigatório
function	Não

---

onPressVideo

Handler que será chamado quando for pressionada a imagem em um post de vídeo.

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

---

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

---

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	SpacingMarginal	16

---

verticalPadding

Essa propriedade deve ser modificada caso seja necessário alterar o espaçamento vertical 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
verticalPadding	SpacingMarginal	16

---

actionLinkLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label relativo aos links do actionText, é possível através da modificação das actionLinkLabelBaseProps.

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	FontWeightBold	Bold (700)
lineHeight	LineHeightNotification	18
multilineLimit	MultilineLimitBody	undefined
opacity	(fixed)	1
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLLabelBase.

---

actionRegularLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label relativo aos textos comuns do actionText, é possível através da modificação das actionRegularLabelBaseProps.

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	LineHeightNotification	18
multilineLimit	MultilineLimitBody	undefined
opacity	(fixed)	1
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorDarkNeutral	#212121

Para mais informações, acesse ATLLabelBase.

---

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	SizeAvatarPost	48
borderColor	ColorPrimary	#A94CC9
borderRadius	BorderRadiusAvatarPost	24
borderWidth	BorderWidthAvatar	0
iconColor	ColorPrimary	#A94CC9
iconSize	SizeIconBase	24

Para mais informações, acesse ATLAvatarBase.

---

carouselBaseProps

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

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

Props	Token	Default Value
indicatorColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLCarouselBase.

---

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 button toggle correspondente ao coração do like, é 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	(fixed)	16
tintColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLButtonToggleBase.

---

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.

---

postLabelBaseProps

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

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
opacity	(fixed)	1
readMoreLimit	MultilineLimitPost	5
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorDarkNeutral	#212121

Para mais informações, acesse ATLLabelBase.

---

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	Bold (700)
lineHeight	LineHeightNotification	18
multilineLimit	(fixed)	1
opacity	(fixed)	1
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorLightNeutral	#9E9E9E

Para mais informações, acesse ATLLabelBase.