ame-miniapp-components

MiniApp Components

Consiste em um pacote de componentes para construção de mini-apps.

Instalação

Abra o seu terminal e execute o seguinte comando:

npm install miniapp-components

Os componentes precisam ser importados conforme a sua necessidade, veja o exemplo:

import { Image, Text } from 'miniapp-components'

Lista de componentes

Segue abaixo a lista de componentes, seu guia de utilização e documentação das propriedades.

Header

Utilizado sempre no topo da aplicação, facilita a composição de uma identidade visual padrão.

Exemplo de utilização

<Header
  title='Loja do Madeira'
  description='Uma loja de exemplo'
  displaySearch={true}
  searchButtonPlaceholder={'Busque o que quiser'}
  onSearchClick={this.handleSearchButton.bind(this)}
  backgroundImage={'http://lorempixel.com/550/300/food/'}
  backgroundColor={'#ff8d00'}
  imageLogo={'http://lorempixel.com/400/400/food/'}
/>

Parâmetros

title Uma string para o título do header | Tipo: String | Obrigatório: Sim

description Uma string para a descrição do header | Tipo: String | Obrigatório: Sim

displaySearch Exibição da barra de pesquisa

searchButtonPlaceholder Uma string para auxiliar o usuário com o campo de pesquisa displaySearch | Tipo: String

backgroundImage Uma imagem para o plano de fundo do header | Tipo: String

backgroundColor Uma cor para o plano de fundo do header | Tipo: String

A seguinte regra de background é utilizada no parâmetro neste componente: 1º backgroundImage, 2º backgroundColor e 3º backgroundImage default.

backgroundImage default é a imagem padrão da biblioteca caso nenhuma imagem ou cor seja definida.

Search

Assemelha-se à uma caixa de busca. Executa uma função de chamada de busca no superapp ao ser tocado. | Tipo: Function

Exemplo de utilização

<SearchButton placeholder='Pesquisar' />

Parâmetros

placeholder Uma string para auxiliar o usuário com o campo de pesquisa | Tipo: String

Grid

Utilizado para a divisão visual de conteúdo.

Exemplo de utilização

<Grid
  columns={[
    <Text>First Content</Text>,
    <View>
      <Text>Second Content</Text>
      <Text>Other content</Text>
    </View>
  ]}
  widths={[50, 50]}
/>

Parâmetros

columns Lista dos conteúdos em formato de Array | Tipo: Array | Obrigatório: Sim

widths Lista da largura percentual de cada item. | Tipo: Number

vertical Exibe o conteúdo na vertical | Tipo: Boolean

Image

Utilizado para a exibição de imagens.

Exemplo de utilização

<Image
  source={`http://lorempixel.com/300/300/food/`}
  round
  width={100}
  height={'200'}
/>

Parâmetros

source Link da imagem que será exibida

round Faz a imagem ter a caixa arredondada

width Largura da imagem | Obrigatório: Sim | Tipo: String (porcentagem) ou Number (pixel)

height Altura da imagem | Obrigatório: Sim | Tipo: String (porcentagem) ou Number (pixel)

TabNavigator

Utilizado sempre para a navegação. Os itens serão transformados em abas.

Exemplo de utilização

<TabNavigator
  styleButton={{ backgroundColor: '#d9defb' }}
  styleContent={{ backgroundColor: '#dce2fb' }}
  items={[
    {
      title: 'Food',
      content: <Image source='http://lorempixel.com/500/500/food/1/' />
    },
    {
      title: 'Transport',
      content: <Image source='http://lorempixel.com/500/500/transport/1/' />
    },
    {
      title: 'Sports',
      content: <Image source='http://lorempixel.com/500/500/sports/1/' />
    }
  ]}
/>

Parâmetros

items Lista de itens de conteúdos.

• title Botão para a navegação | Obrigatório: Sim
• content Conteúdo a ser exibido | Obrigatório: Sim

Mínimo de itens: 2 • Máximo de itens: 3

Sendo passado número de itens inferior a 2 ou superior a 3 o componente não é exibido.

Text

Utilizado sempre para exibir um texto.

Exemplo de utilização

<Text>"Lorem ipsum dolor sit amet, consectetur adipiscing."</Text>

Texto a ser exibido deverá ser passado dentro da tag | Tipo: String | Obrigatório: Sim

Parâmetros

color Cor do texto | Tipo: String

fontFamily Família de fonte do texto | Tipo: String

fontSize Tamanho do texto | Tipo: String

fontWeight Peso da fonte do texto | Tipo: Number

Separator

Utilizado para separar conteúdos.

Exemplo de utilização

<Separator
  style={{
    height: '2px',
    color: '#ca2405',
    height: '10px',
    width: '10px'
  }}
/>

Parâmetros

background-color Estilização do Separator. Cor definada através do BaseColor | Tipo: String

Title

Utilizado para exibir títulos (h1, h2, h3, h4, h5 e h6).

Exemplo de utilização

<Title
  size={2}
  fontSize={30}
  fontWeight={'bold'}
  lineHeight={32}
  fontFamily={'serif'}
  color={'#c4c4c4'}
  marginTop={4}
  marginBottom={8}
  marginLeft={3}
  marginRight={0}>
  Título do Title
</Title>

Parâmetros

Title extende o componente Text, herdando suas propriedades.

size Tamanho do título. Valores aceitos: 1, 2, 3, 4, 5 e 6. Caso nenhum tamanho (size) seja passado por parâmetro o valor padrão será 1. | Tipo: Number | Obrigatório: Sim

children Conteúdo do texto. | Tipo: String | Obrigatório: Sim

View

View padrão.

Exemplo de utilização

<View style={{ backgroundColor: '#e7e5e5' }} />

Parâmetros

View extende o componente BaseComponent, herdando suas propriedades.

style Estilização para a view

className Estilização pré-definida para a view

children Conteúdo. | Tipo: Any | Obrigatório: Sim

onClick Executa uma função | Tipo: Função

horizontal Altera a disposição da view para horizontal | Tipo: Boolean

Button

Botão que ao clicado executa uma ação.

Exemplo de utilização

<Button
  icon={<Image source="http://lorempixel.com/50/50/food/" />} text={"Texto do botão"}  onClick={() ={     console.log("clicou no botão");   }}   style={{ color: "red" }} />

Parâmetros

Button extende o componente Touchable, herdando suas propriedades.

disable Informação se o botão é inativo | Tipo: Boolean | Obrigatório: Não

block Botão com 100% de largura | Tipo: Boolean

size Tamanho do botão. | Tipo: Stirng

• small Tamanho: 30px - Fonte: 1em
• medium Tamanho: 40px - Fonte: 1.5em
• default Tamanho: 60px - Fonte: 2em

GhostButton

Botão que ao clicado executa uma ação.

Exemplo de utilização

<GhostButton
  icon={<Image source="http://lorempixel.com/50/50/food/" />} text={"Texto do botão"}  onClick={() ={     console.log("clicou no botão");   }}   style={{ color: "red" }} />

Parâmetros

GhostButton extende o componente Button, herdando suas propriedades.

SoftButton

Botão que ao clicado executa uma ação.

Exemplo de utilização

<SoftButton
  icon={<Image source="http://lorempixel.com/50/50/food/" />} text={"Texto do botão"}  onClick={() ={     console.log("clicou no botão");   }}   style={{ color: "red" }} />

Parâmetros

SoftButton extende o componente Button, herdando suas propriedades.

TextLink

Botão que ao clicado executa uma ação.

Exemplo de utilização

<TextLink onClick={() => {}}>Link</TextLink>

Parâmetros

TextLink extende o componente Text, herdando suas propriedades.

icon Ícone do botão

disable Informação se o botão é inativo | Tipo: Boolean | Obrigatório: Não

children Texto do botão | Obrigatório: Sim

onClick Executa uma função Tipo: Função | Obrigatório: Sim

SearchButton

Caixa de pesquisa

Exemplo de utilização

<GhostButton>Ghost</GhostButton>

Parâmetros

GhostButton extende o componente Button, herdando suas propriedades.

Repeater

Utilizado para listas de conteúdo.

Exemplo de utilização

<Repeater items={itemsForRepeater}>
  {
    (item = (
      <View>
        <Text>{item.text}</Text>
      </View>
    ))
  }
</Repeater>

Parâmetros

items Itens da lista de conteúdo | Tipo: Array Obrigatório: Sim

componentStyle Estilização da lista de conteúdo | Tipo: Object

If

Utilizado para exibir conteúdo, de acordo com a condição.

Exemplo de utilização

<If test={'algum tipo de dado'}>
  <Title size={2}>Título do Title</Title>
</If>

Parâmetros

test Tipo de condição a ser testada | Tipo: Any | Obrigatório: Sim

Realiza a validação do resultado em true ou false e, caso verdadeiro o conteúdo é exibido.

Tipos de dados aceitos neste componente: String, Number, Array, Object e Boolean.

Toggle

Utilizado para exibir um input de alternância.

Exemplo de utilização

<Toggle items={tShirtList}
        value={tShirtList[0]}
        onChange={(e) ={ console.log("Elemento escolhido", e); }}
/>

Parâmetros

items Lista de elementos | Tipo: Array | Obrigatório: Sim

value Texto a ser exibido

onChange Função executada quando o cliente escolhe uma das opções | Tipo: Function | Obrigatório: Sim

ProductCard

Utilizado para a exposição de produtos.

<ProductCard
  productName={'Smart TV LED 49" Philco PTV49e68dSWN Full HD...'}
  price={1499.32}
  conditionPayment={'10x sem juros'}
  imageProduct={'http://lorempixel.com/400/400/food/'}
  onProuctCardClick={() => console.log('ProductCard test click')}
  cardOrientation={'horizontal'}
  isDisabled={false}
/>

Parâmetros

productName Identifica e/ou descreve o produto | Tipo: String

price Exibe o preço do produto | Tipo: Number

conditionPayment Condição de pagamento | Tipo: String

imageProduct Endereço onde uma imagem está armazenada | Tipo: String

onProuctCardClick Recebe uma função para ser executada, em um evento de click sobre o ProductCard | Tipo: Function

cardOrientation Define a orientação do ProductCard | Tipo: String

• vertical Exibe o ProductCard na vertical
• horizontal Exibe o ProductCard na horizontal

isDisabled Define se o ProductCard está ativo | Tipo: Boolean

componentStyle Estilização do componente | Tipo: Object

Grid

Utilizado para dividir conteúdo em 1 ou mais colunas.

Exemplo de utilização

<Grid
  columns={[
    <Text>First Content</Text>,
    <View>
      <Text>Second Content</Text>
      <Text>Other content</Text>
    </View>
  ]}
  widths={[50, 50]}
/>

Parâmetros

columns Conteúdo das colunas | Tipo: Array

widths Largura de cada coluna | Tipo: Array

vertical Altera a exibição para vertical | Tipo: Boolean

Card

Utilizado para emoldurar algum elemento.

Exemplo de utilização

<Card bordered weight={2} isDisabled={false}>
  <SomeElement>
    Segue abaixo a lista de componentes e como utilizálos.
  </SomeElement>
</Card>

Parâmetros

Card extende o componente BaseComponent, herdando suas propriedades.

weight Densidade da borda | Tipo: Number

isDisabled Define se o Card está ativo | Tipo: Boolean

shadow Adiciona sombra | Tipo: Boolean

bordered Adiciona borda | Tipo: Boolean

backgroundColor Insere cor de fundo | Tipo: Boolean

DatePicker

Utilizado como calendário.

constructor() {
    super()
    this.state = { date: '' }
    this.getValue = this.getValue.bind(this)
}

getValue = (value) => {
  this.setState({ date: valor })
}

<DatePicker minDate={"YYYY-MM-DD"}
    maxDate={"YYYY-MM-DD"}
    isDisabled={false}
    getValue={this.getValue}
    value={this.state.date}
/>

Parâmetros

minDate A menor data aceitável | Tipo: String

maxDate A maior data aceitável | Tipo: String

isDisabled Define se o DatePicker está ativo | Tipo: Boolean

value Perimite definir uma data, pelo componente pai | Tipo: String

getValue A data definida pelo DatePicker pode ser devolvida ao componente pai, através da função getValue. | Tipo: Function

Formatos de data aceitos:

• YYYY-MM-DD
• YYYYMMDD

PriceFormat

Exemplo de utilização

Utilizado para formatação de preços.

<PriceFormat amount={3298.0} currency={'r$'} size={30} />

Parâmetros

PriceFormat extende o componente Text, herdando suas propriedades.

amount Define a quantia | Tipo: Number

currency Define a moeda da quantia | Tipo: String

TableDetails

Exemplo de utilização

Utilizado para criar uma linha de detalhes.

<TableDetails
  contents={[
    {
      content: <CustomText title={'entrega'} content={'convencional'} />
    },
    {
      content: <CustomText title={'frete'} content={'R$ 5,99'} />
    },
    {
      content: <CustomText title={'prazo'} content={'7 dias'} />
    }
  ]}
/>

Parâmetros

contents É um array de objetos, onde em cada objeto existe uma key content e o seu valor é o elemento a ser exibido em uma coluna. | Tipo: Array