ATLSurveyPost

Essa molécula é utilizada para exibir posts de interação social que contêm uma enquete.

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

Exemplo de uso com resposta única:

import { ATLSurveyPost, OptionItem } from '@appsimples/atlantica-react-native'
...
const alternatives: OptionItem[] = useMemo(() => [
    { id: 1, text: 'Azul' },
    { id: 2, text: 'Amarelo' },
    { id: 3, text: 'Vermelho' }
], [])
...

const [value, setValue] = useState(0)

<ATLSurveyPost
    singleValue={value}
    onChange={setValue}
    alternativesList={alternatives}
    questionText={'Qual é sua cor primária falsa favorita?'}
    actionText={actionText}
    postText={'Só estou curiosa mesmo'}
    onPressUser={onPressUser}
    userAvatar={avatar}
    timestampText={'Há 10 dias'}
    onPressOverflowButton={onPressOverflow}
    answerButtonText={'Responder'}
    likeButtonText={'Curtir'}
    likedByMe={liked}
    editedText={'Editado'}
    onPressLike={onPressLike}
    onPressAnswer={onPressAnswer}
    readMoreText={'Ver mais'}
    hasBeenEdited
    onPressShare={onPressVideo}
    shareText={'Compartilhar'}
/>

Exemplo de uso com respostas múltiplas:

import { ATLSurveyPost, OptionItem } from '@appsimples/atlantica-react-native'
...
const alternatives: OptionItem[] = useMemo(() => [
    { id: 1, text: 'Azul' },
    { id: 2, text: 'Amarelo' },
    { id: 3, text: 'Vermelho' }
], [])
...

const [values, setValues] = useState<number[]>([])

// Exemplo de função que adiciona ou retira um item do array de opções
const onChangeValues = useCallback((item: any) => {
    let index = values.indexOf(item.id)
    const newVal = values
    if (index > -1) {
      newVal.splice(index, 1)
    } else {
      newVal.push(item.id)
    }
    newVal.sort()
    setValues([...newVal])
}, [])

<ATLSurveyPost
    singleValue={values}
    onChange={onChangeValues}
    alternativesList={alternatives}
    questionText={'Qual é sua cor primária falsa favorita?'}
    actionText={actionText}
    postText={'Só estou curiosa mesmo'}
    onPressUser={onPressUser}
    userAvatar={avatar}
    timestampText={'Há 10 dias'}
    onPressOverflowButton={onPressOverflow}
    answerButtonText={'Responder'}
    likeButtonText={'Curtir'}
    likedByMe={liked}
    editedText={'Editado'}
    onPressLike={onPressLike}
    onPressAnswer={onPressAnswer}
    readMoreText={'Ver mais'}
    hasBeenEdited
    onPressShare={onPressVideo}
    shareText={'Compartilhar'}
/>

Props

• multipleValues
• singleValue
• onChange
• actionText
• alternativesLisr
• answerButtonText
• editedText
• likeButtonText
• placeholderImage
• postText
• questionText
• readMoreText
• shareText
• timestampText
• userAvatar
• onPressAnswer
• onPressLike
• onPressOverflowButton
• onPressShare
• onPressUser
• hasBeenEdited
• isAvatarSquare
• isOverflowIconVertical
• likedByMe
• horizontalMargin
• horizontalPadding
• verticalMargin
• verticalPadding
• actionLinkLabelBaseProps
• actionRegularLabelBaseProps
• avatarBaseProps
• dividerBaseProps
• labelButtonBaseProps
• likeButtonToggleBaseProps
• overflowIconButtonBaseProps
• postLabelBaseProps
• questionLabelBaseProps
• timestampLabelBaseProps

---

multipleValues

Lista de valores selecionados pelo usuário, controlada fora do componente. Quando preenchida, renderiza os itens da lista com um ícone de checkbox e múltiplas alternativas podem ser selecionadas pelo usuário.

Tipo	Obrigatório
number[]	Não

---

singleValue

Opção única selecionada pelo usuário, controlada fora do componente. Quando preenchida, renderiza os itens da lista com um ícone de radio option e uma única alternativa pode ser selecionada por vez.

Tipo	Obrigatório
number[]	Não

---

onChange

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

Tipo	Obrigatório
function	Não

---

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

---

alternativesLisr

Texto que aparece ao lado de cada um dos radio buttons.

Esses textos são passados em um array de objetos RadioButtonItem. Um objeto deste tipo possui três propriedades: id (number), text (string) e rightText (string, opcional).

Tipo	Obrigatório
OptionItem[]	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

---

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

---

questionText

Texto da pergunta da enquete.

Tipo	Obrigatório
string	Sim

---

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 da notificação.

Tipo	Obrigatório
string	Sim

---

userAvatar

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

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

---

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.

---

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	#C4C4C4
height	HeightDividerRegular	1

Para mais informações, acesse ATLDividerBase.

---

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.

---

questionLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label relativo à pergunta da enquete, é possível através da modificação das questionLabelBaseProps.

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	(fixed)	undefined
opacity	(fixed)	1
textAlign	TextAlignmentHeading	Left
textCase	TextCaseHighlight	None
textColor	ColorPrimary	#A94CC9

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.