ATLImagePicker

Esta molécula é utilizada para mostrar, selecionar e editar uma imagem que o usuário seleciona.

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

Exemplo de Uso:

import { ATLImagePicker } from '@appsimples/atlantica-react-native'
...
<ATLImagePicker
    source={image}
    type={ImagePickerTypeEnum.video}
    buttonText={'editar'}
    onPressButton={onPressButton}
/>

Props

• buttonText
• placeholderImage
• source
• type
• hasMargin
• isButtonDisabled
• onPressButton
• horizontalMargin
• verticalMargin
• buttonBaseProps
• imageBaseProps

---

buttonText

Texto do botão de ação encontrado no canto direito inferior do picker.

Tipo	Obrigatório
string	Sim

---

placeholderImage

Imagem de placeholder do picker.

Tipo	Obrigatório
ImageSourcePropType	Não

---

source

Imagem que foi selecionada pelo usuário. Caso não seja fornecida, o componente mostra o placeholder cinza.

Tipo	Obrigatório
ImageSourcePropType	Não

---

type

Tipo de picker. O que varia em cada um dos tipos é o tamanho.

Tipo	Obrigatório
ImagePickerTypeEnum	Não

Os possíveis tipos são:

• cover (token ProportionCover, valor padrão: '12:5')
• image (token ProportionImage, valor padrão: '1:1')
• video (token ProportionVideo, valor padrão: '16:9')

O valor padrão é image

---

hasMargin

Determina se a molécula possui todas as margens ou apenas a inferior.

Tipo	Obrigatório
boolean	Não

---

isButtonDisabled

Se for true, desabilita todas as interações com o componente.

Tipo	Obrigatório
boolean	Não

---

onPressButton

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

Tipo	Obrigatório
function	Sim

---

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

---

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

---

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	ColorComplementary	#FFFFFF
borderRadius	BorderRadiusButton	10
borderWidth	BorderWidthButton	1
buttonColor	ColorComplementary	#FFFFFF
buttonHeight	HeightButtonBase	32
disabledOpacity	OpacityDisabled	0.3
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeButton	12
fontWeight	FontWeightStrong	Bold (700)
textCase	TextCaseButton	Uppercase
textColorRegular	ColorPrimary	#A94CC9

Para mais informações, acesse ATLButtonBase.

No caso desta molécula, também temos um valor fixo para a largura do botão que é determinada pelo token WidthImageButton

---

imageBaseProps

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

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

Prop	Token	Default Value
borderColor	ColorNone	'transparent'
borderRadius	(fixed)	0
borderWidth	(fixed)	0
height	SCREEN_WIDTH * ProportionImage	'1:1'
opacity	OpacityLogo	1
resizeMode	ResizeModeLogo	cover

Para mais informações, acesse ATLImageBase.