ale-ng2-utils v0.1.3

Utils

pacote com componentes comuns entre projetos e necessários em algum momento da vida.

NPM

npm i ale-ng2-utils

Dependências

Os componentes de load dependem do fontawesome.

<!-- index.html -->
<link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css"/>

Componentes Implementados

load-input

Este componente insere um icone de carregamento em ut-load-input no canto esquerdo e desabilita o input até que o callback em call retorne algo. Se a promise retornar um erro na execução o icone se tornará um X, caso contrário ao final será um icone de check.

Como usar

<!-- template -->
<ut-load-input [input]="input1" [watch]="['blur', 'enter']" [call]="someAction()">
   <input type="text" #input1>
</ut-load-input>
<ut-load-input [input]="input2" [watch]="['blur', 'enter']" [call]="someAction()">
   <input type="text">
</ut-load-input>

// typescript
someAction(): Promise<any> {
   return (() => {
      return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('someVelue'); }, 3000);
      })
    }).bind(this);
 }

 someActionError(): Promise<any> {
   return (() => {
      return new Promise((resolve, reject) => {
        setTimeout(() => { reject('someVelue'); }, 3000);
      })
    }).bind(this);
 }

Passe para o componente ut-load-input em input a templateRef da tag input que deve ser assistida nos eventos informados no array watch. O atributo watch suporta todos os evento providos pela DOM com exceção dos eventos de keupress/up mas suporta o valor especial 'enter' para quando se deseja escutar o evento de keypress.enter.

O atributo call recebe a referência para a função que deve ser chamada quando qualquer um dos eventos es watch ocorrer.

A função de callback deve retornar um promise ou um boolean. Note que a função retorna uma função envolvida em ( () => { } ).bind(this) isso porque a função de callback será chamada em um contexto que não é o do componente atual.

load-directive

Está diretiva subistitui temporariamento o conteúdo da tag por um ícone de loading. Foi projetada para ser usada em botões que chamam funções assíncronas ou esperam por promises. A função de callback deve retornar uma promise. Se a promise retornar um erro na execução o ícone se tornará um X, caso contrário ao final será um ícone de check.

Como usar

<!-- template -->
<button [utLoad]="someAction" >foo</button>
<button [utLoad]="someActionError" >foo error</button>
<button #btn1 [utLoad]="someAction" [group]="[btn1, btn2]">btn foo</button>
<button #btn2 [utLoad]="someActionError"  [group]="[btn1, btn2]">btn foo error </button>

// typescript
someAction(): Promise<any> {
   return new Promise(((resolve, reject) => {
     setTimeout(() => {
       resolve('someVelue');
     }, 3000);
   }).bind(this))
 }

 someActionError(): Promise<any> {
   return new Promise(((resolve, reject) => {
     setTimeout(() => {
       reject('someError');
     }, 3000);
   }).bind(this))
 }

Note que a função retorna uma função envolvida em ( () => { } ).bind(this) isso porque a função de callback será chamada em um contexto que não é o do componente atual.

Componentes Futuros

• Pipe: Formatação de telefones de xxxxxxxxxxx para (xx) x xxxx-xxxx;
• HttpItercepter: Intercepter para habilotar o CORS para uma lista de endereços especificados;
• Service: EnderecoResolverService, traduz o cep para um endereço completo;
• Diretiva para mascaras de input;
• ReactiveForm Validator: Validador de CPF de acordo com as regras de composição do mesmo;
• ReactiveForm Validator: Validador que obriga o usuário a informar apenas um de varios campos;
• Directive: Diretiva para renderizar na tela uma imagem selecionada em um input file;
• outros.