Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

ame-miniapp-components

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ame-miniapp-components

Components for Ame Miniapp Development

0.0.32
npm

Version published: 5 years ago

Weekly downloads: 1; decreased by-96.15%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

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.

BaseComponent

Componente com a função de carregar propriedades padrões.

marginVertical [ Number ] Configura um mesmo valor para as margens superior e inferior.

marginHorizontal [ Number ] Configura um mesmo valor para as margens esquerda e direita.

marginTop [ Number ] Configura um valor para margem superior.

marginBottom [ Number ] Configura um valor para margem inferior.

marginLeft [ Number ] Configura um valor para margem à esquerda.

marginRight [ Number ] Configura um valor para margem à direita.

width [ Number ] Configura um valor para a propiedade width.

height [ Number ] Configura um valor para a propiedade height.

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

Header extende o componente BaseComponent, herdando suas propriedades.

title [ String | Obrigatório ] Uma string para o título do header

description [ String | Obrigatório ] Uma string para a descrição do header

displaySearch [ Boolean ] Exibição da barra de pesquisa

searchButtonPlaceholder [ String | Obrigatório] Uma string para auxiliar o usuário com o campo de pesquisa displaySearch

backgroundImage [ String ] Uma imagem para o plano de fundo do header

backgroundColor [ String ] 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.

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

Grid extende o componente BaseComponent, herdando suas propriedades.

columns [ Array ][ obrigatório ] Lista dos conteúdos em formato de Array.

widths [ Number ] Lista da largura percentual de cada item.

vertical [ Boolean ] Exibe o conteúdo na vertical

Image

Utilizado para a exibição de imagens.

Exemplo de utilização

<Image source={`http://lorempixel.com/300/300/food/`} round />

Parâmetros

Image extende o componente BaseComponent, herdando suas propriedades.

source[ String ] Link da imagem que será exibida

round Faz a imagem ter a caixa arredondada

ImageBackground

Utilizado para imagem de fundo.

Exemplo de utilização

<ImageBackground
  source={'http://lorempixel.com/250/70/food/'}
  width={250}
  height={70}
  backgroundSize={'cover'}
/>

Parâmtros

ImageBackground extende o componente BaseComponent, herdando suas propriedades.

source [ String | obrigatório ] Caminho da imagem de fundo.

backgroundSize [ String | obrigatório ] Especifica o tamanho da imagem de fundo.

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

TabNavigator extende o componente BaseComponent, herdando suas propriedades.

items Lista de itens de conteúdos.

title Título para a aba de navegação | Obrigatório:
content Conteúdo a ser exibido | Obrigatório:

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.

Parâmetros

color [ String ] Cor do texto

fontFamily [ String ] Família de fonte do texto.

fontSize [ String ] Tamanho do texto.

fontWeight [ Number ] Peso da fonte do texto.

[ Children ] string | Obrigatório ]

Separator

Utilizado para separar conteúdos.

Exemplo de utilização

<Separator />

Parâmetros

Separator extende o componente BaseComponent, herdando suas propriedades.

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 [ Number ][ obrigatorio ] 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.

fontSize [ Number] Tamanho do texto

fontWeight [ String ] Peso da fonte do texto

lineHeight [ Number ] Espaçamento de linhas

fontFamily [ String ] Família de fonte do texto

color [ Any ] Cor do texto

marginTop [ Number ] Margem superior do texto

marginBotton [ Number ] Margem Inferior do texto

marginLeft [ Number ] Margem esquerda do texto

marginRight [ Number ] Margem direita do texto

children [ String | obrigatório ] Conteúdo do texto.

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 [Any | obrigatório ] Conteúdo.

onClick [ Function ] Executa uma função

horizontal [ Boolean ] Altera a disposição da view para horizontal

Touchable

Exemplo de utilização

<Touchable />

Parâmetros

Touchable extende o componente BaseComponent, herdando suas propriedades.

onClick Touchable possui a função onClick em sua implementação e poderá ser utilizado de duas formas:

1 - Envolvendo outro componente

<Touchable onClick={this.onClickHandle}>
  <InnerText>{children}</InnerText>
</Touchable>

2 - Sendo extendido por outro componente

class Button extends Touchable

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 [ Boolean | obrigatório ] Informação se o botão é inativo

block [ Boolean ] Botão com 100% de largura

size [ String ] Tamanho do botão.

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 [ Boolean ] Informação se o botão é inativo

children [ Obrigatório ] Texto do botão

onClick [ Function | obrigatório ] Executa uma função

SearchButton

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

Exemplo de utilização

<SearchButton>Ghost</SearchButton>

Parâmetros

SearchButton extende o componente Touchable, herdando suas propriedades.

placeholder [String] Texto padrão exibido no SearchButton.

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 [ Array | obrigatório ] Itens 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 [ Array | obrigatório] Tipo de condição a ser testada

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 [ Array | obrigatório ] Lista de elementos.

value Texto a ser exibido

onChange [ Function | obrigatório ] 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 [ String ] Identifica e/ou descreve o produto

price [ Number ] Exibe o preço do produto

conditionPayment [ String ] Condição de pagamento

imageProduct [ String ] Endereço onde uma imagem está armazenada

onProuctCardClick [ Function ] Recebe uma função para ser executada, em um evento de click sobre o ProductCard

cardOrientation [ String ] Define a orientação do ProductCard

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

isDisabled [ 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 [ Array ] Conteúdo das colunas.

widths [ Array ] Largura de cada coluna.

vertical [ Boolean ] Altera a exibição para vertical.

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 [ Number ] Densidade da borda

isDisabled [ Boolean ] Define se o Card está ativo.

shadow [ Boolean] Adiciona sombra.

bordered [ Boolean ] Adiciona borda.

backgroundColor [ 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 [ String ] A menor data aceitável

maxDate [ String ] A maior data aceitável

isDisabled [ Boolean ] Define se o DatePicker está ativo.

value [ String ] Perimite definir uma data, pelo componente pai.

getValue [ 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

PriceFormat extende o componente Text, herdando suas propriedades.

amount [ Number ] Define a quantia

currency [ String ] Define a moeda da quantia

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 [ 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.

StyleResolver

É um conjunto de métodos estáticos, que tem como objetivo ajudar no manuseio e configuração do estilo dos componentes.

Métodos set

setPrimaryFont(font) : Altera o estilo de fonte padrão utilizado pelo navegador. É necessário passar uma string, definindo o estilo da font.

setPrimaryColor(color) : Altera a definição de cor primária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor primária do navegador.

setSecondaryColor(color) : Altera a definição de cor secundária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor secundária do navegador.

setTertiaryColor(color) : Altera a definição de cor terciária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor terciária do navegador.

setTextColor(color) : Altera a definição de cor de texto padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de texto padrão do navegador.

setBorderColor(color) : Altera a definição de cor de borda padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de borda padrão do navegador.

setBackgroundColor(color) : Altera a definição de cor de background padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de background padrão do navegador.

Métodos get

getPrimaryFont() : Retorna o estilo de fonte padrão, do navegador.

getPrimaryColor() : Retorna a cor definida como cor primária do navegador.

getSecondaryColor() : Retorna a cor definida como cor secundária do navegador.

getTertiaryColor() : Retorna a cor definida como cor terciária do navegador.

getTextColor() : Retorna a cor definida como cor de texto padrão do navegador.

getBorderColor : Retorna a cor definida como cor de borda padrão do navegador.

getBackgroundColor : Retorna a cor definida como cor de background padrão do navegador.

getDisabledColor() : Retorna a cor padronizada para elementos que assumem a propriedade disabled.

Outros Métodos

brightness(color, percent) : Recebe dois parâmetros color(String) e percent(Number), os quais são utilizados para determinar o grau de brilho da cor passada.

darken(color, percent) : Recebe dois parâmetros color(String) e percent(Number), os quais são utilizados para determinar o grau de contraste da cor passada.

parseUnit(unit) : Recebe um parâmetro unit(Number) e retorna a unidade passada em px.

getColors() : Retorna um objeto com os atributos primaryColor, secondaryColor, tertiaryColor, textColor, borderColor e backgroundColor. O valor de cada propriedade é o valor que foi definido como padrão para o navegador, utilizando as funções set. Se o valor padrão do atributo não for definido através das funções set, serão utilizados valores padrões definidos internamente. é o elemento a ser exibido em uma coluna.

Warning

Utilizado para exibir uma mensagem de alerta.

Exemplo de utilização

<Warning type={'success'}>
  text={'Lorem ipsum dolor sit amet, consectetur adipiscing.'}
</Warning>

Parâmetros

type [ String ] Identifica e/ou determina o tipo de alert a ser exibido(error, success, info, warning).

type={"error"} Exibe uma tarja vermelha ao fundo do texto.
type={"success"} Exibe uma tarja verde ao fundo do texto.
type={"info"} Exibe uma tarja azul ao fundo do texto.
type={"warning"} Exibe uma tarja amarela ao fundo do texto

text [ String ] Conteúdo da mensagem, de acordo com o ** type **.

FAQs

What is ame-miniapp-components?

Is ame-miniapp-components popular?

Is ame-miniapp-components well maintained?

Package last updated on 06 Aug 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install