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

description Uma string para a descrição do header

displaySearch Exibição da barra de pesquisa

searchButtonPlaceholder Uma string para auxiliar o usuário com o campo de pesquisa displaySearch

backgroundImage Uma imagem para o plano de fundo do header

backgroundColor Uma cor para o plano de fundo do header

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.

Exemplo de utilização

<SearchButton placeholder='Pesquisar' />

Parâmetros

placeholder Uma string para auxiliar o usuário com o campo de pesquisa

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

widths opcional Lista da largura percentual de cada item.

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

styleButton Estilização do botão do componente TabNavigator

styleContent Estilização do conteúdo do componente TabNavigator

items Lista de itens de conteúdos.

• title Botão para a navegação | Obrigatório: Sim
• isDisable Recebe um boleano e informa se o conteúdo não será exibido | Obrigatório: Não
• 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 Obrigatório: Sim

Parâmetros

color | Tipo: String Cor do texto

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

fontSize | Tipo: String Tamanho do texto

fontWeight | Tipo: Number Peso da fonte do texto

marginTop Define margin-top do elemento | Tipo: Number

marginBottom Define margin-bottom do elemento | Tipo: Number

marginLeft Define margin-left do elemento | Tipo: Number

marginRight Define margin-right do elemento | Tipo: Number

Separator

Utilizado para separar conteúdos.

Exemplo de utilização

<Separator
  style={{
    height: '2px',
    background: '#ca2405',
    marginTop: '10px',
    marginBottom: '10px'
  }}
/>

Parâmetros

style Estilização do Separator

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

size Tamanho do título. Caso nenhum tamanho (size) seja passado por parâmetro o valor padrão será h1.

fontSize Tamanho do texto. | Tipo: Number

fontWeight Densidade do texto. | Tipo: String

lineHeight Espaçamento de linha. | Tipo: Number

fontFamily Estilo da fonte | Tipo: String

color Cor da fonte | Tipo: String

marginTop Define margin-top do elemento | Tipo: Number

marginBottom Define margin-bottom do elemento | Tipo: Number

marginLeft Define margin-left do elemento | Tipo: Number

marginRight Define margin-right do elemento | Tipo: Number

A seguinte regra de arredondamento é utilizada no parâmetro size deste componente:

Menor ou igual a x.4 o componente é arredondado para a casa inteira anterior. Exemplo: 3.2 é arredondado para 3.0

Maior ou igual a x.5 o componente é arredondado para a casa inteira posterior. Exemplo: 4.7 é arredondado para 5.0

View

View padrão.

Exemplo de utilização

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

Parâmetros

style Estilização para a view

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

disable Desativa o componente, inserindo opacidade e removendo as ações | Obrigatório: Não | 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

icon Ícone do botão

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

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

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

style Estilização do botão

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

icon Ícone do botão

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

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

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

style Estilização do botão

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

icon Ícone do botão

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

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

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

style Estilização do botão

TextButton

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

Exemplo de utilização

<TextButton
  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

icon Ícone do botão

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

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

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

style Estilização do botão

SearchButton

Caixa de pesquisa

Exemplo de utilização

<SearchButton
  placeholder='Pesquisar'
  handleClick={this.handleSearchButton.bind(this)}
/>

Parâmetros

placeholder Texto de auxílio ao usuário

handleClick Ação a ser realizada após o termo da pesquisa ser inserido Obrigatório: Sim

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 Obrigatório: Sim

style Estilização da lista de conteúdo

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

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

value Texto a ser exibido

onChange Função executada quando o cliente escolhe uma das opções

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 | Tipo: Boolean Define se o ProductCard está ativo

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

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

weight | Tipo: Number Densidade da borda

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

shadow | Tipo: Boolean Adiciona sombra

bordered | Tipo: Boolean Adiciona borda

backgroundColor | Tipo: Boolean Insere cor de fundo

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 | Tipo: String A menor data aceitável

maxDate | Tipo: String A maior data aceitável

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

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

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

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

amount | Tipo: Number Define a quantia

currency | Tipo: String Define a moeda da quantia

size | Tipo: Number Define o tamanho da font

TableDetails

Exemplo de utilização

Utilizado para criar uma linha de detalhes.

const CustomText = ({ title, content }) => (
      <View>
        <Text fontWeight="bold">{title}</Text>
        <Text>{content}</Text>
      </View>
    )

<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 | Tipo: Array É um array de objetos, onde em cada objeto existe uma key content e o seu valor é o elemento a ser exibido em uma coluna.