webmotors-cockpit-structure

Webmotors Cockpit Structure

Dependências

• React

• Axios

• Node Sass

• React Redux

• React Router

• React Router Dom

• Webmotors SVG

Instalando componente

Instale o componente webmotors-cockpit-structure

npm i webmotors-cockpit-structure

Usando os Componentes <Cockpit*>

Existem 4 componentes Cockpit (, , e ) e um js Utils do Cockpit

import CockpitHeader from 'webmotors-cockpit-structure/CockpitHeader';
import CockpitMenu from 'webmotors-cockpit-structure/CockpitMenu';
import CockpitFooter from 'webmotors-cockpit-structure/CockpitFooter';
import CockpitLoad from 'webmotors-cockpit-structure/CockpitLoad';
import CockpitUtils from 'webmotors-cockpit-structure/CockpitUtils';

...

<CockpitHeader
    UrlCockpit="url-config"
/>
<CockpitMenu
    UrlCockpit="url-config"
/>
<CockpitFooter
    UrlCockpit="url-config"
/>
<CockpitLoad
    UrlCockpit="url-config"
/>

Props do componente

logged (string)

Identifica o usuário logado no sistema, assim mudando a renderização do header logado ou deslogado

UrlCockpit (string)

Propriedade para trafegar a URI do Cockpit

UrlEstoque (string)

Propriedade para trafegar a URI do Estoque

Props do componente

logged (string)

Identifica o usuário logado no sistema, assim exibindo o menu quando o usuário estiver logado

UrlCockpit (string)

Propriedade para trafegar a URI do Cockpit

UrlEstoque (string)

Propriedade para trafegar a URI do Estoque

ApiCockpit (string)

Propriedade para trafegar a API Cockpit

Props do componente

logged (string)

Identifica o usuário logado no sistema, assim exibindo o footer expandido quando o usuário estiver logado

UrlCockpit (string)

Propriedade para trafegar a URI do Cockpit

Props do componente

text (string)

Altera o texto padrão (Carregando...) para um texto personalizado (incluindo jsx)

Funções CockpitUtils

WINDOW

Variável para facilitar em projetos se é o window do browser ou do node

if (WINDOW) {
    window.document.querySelector('.class');
    window.setTimeout(() => console.log('It\'s browser'), 1000);
}

reducerCreate

Função para na crição dos reducers com success e error status

import { reducerCreate } from 'webmotors-cockpit-structure/CockpitUtils';

const reducerKeyword = 'REDUCER_APP';
const reducer = (state = { fetched: false, result: [], error: null }, action) => reducerCreate(state, action, reducerKeyword);
export { reducer };
export default reducer;

dispatchGet

Função para fazer uma chamada de API usando dispatch

const fetchDefault = (url, data, method) => dispatchGet(reducerKeyword, url, data, method);

paramURL

Função para retornar um parâmetro de uma query string da URL

// browser url: https://webmotors.com.br/?tipo=carro&pagina=8
paramURL('tipo');
// 'carro' 
paramURL('pagina');
// '8' 

cookieSet

Função para setar um Cookie no domain .webmotors.com.br, normalmente utilizado para compartilhar informações entre sistemas Webmotors

cookieSet('CockpitKey', 'CockpitValue');

cookieGet

Função para retornar um Cookie no domain .webmotors.com.br

cookieGet('CockpitKey');

cookieRemove

Função para deletar um Cookie no domain .webmotors.com.br

cookieRemove('CockpitKey');

scrollSmooth

Função para fazer um scroll da página com uma leve animação

scrollSmooth(0, 300);

accordionAnimate

Função que simula a animação de accordion

accordionAnimate(testOpen, document.querySelector('.list--body'));

jwtGet

Função que retorna o jwt do Cookie já formatado como Objeto JSON

const jwt = jwtGet();

formatDate

Função que formata string date ou timestamp unix para o padrão de data pt-BR

formatDate('2019/06/10');
// 10/06/2019
formatDate('2019-06-10');
// 10/06/2019
formatDate(1560520134666);
// 10/06/2019

formatMoney

Função que formata valores decimais em valores valores de moedas pt-br

formatMoney(10);
// R$ 10,00
formatMoney(0.10);
// R$ 0,10
formatMoney(1000000.50);
// R$ 1.000.000,50