firebox-components

Componentes do firebox

Install

npm install --save firebox-components or yarn add firebox-components

Usage

1 - Crie variaveis de ambiente no seu projeto react

  REACT_APP_ICON=/src/assets/logo.png # Url do icone do projeto
  REACT_APP_NAME=Gestão de Contratos # Nome da aplicação

2 - Implemente o contexto de rotas, passando para ele o objeto que será as rotas da sua aplicação

import { lazy } from 'react'
import AppRoutes from './AppRoutes'
import { RoutesProvider, useRoutes } from 'firebox-components'

const routesConfig = [
  {
    component: lazy(() => import('./pages/Dashboard')),
    icon: <Icon />,
    label: 'Dashboard',
    path: '/dashboard',
    isAdmin: true,
    visibleInMenu: true,
    color: '#000'
  }
]

export function App() {
  return (
    <div>
      <RoutesProvider initialRouteConfig={routesConfig}>
        <AppRoutes />
      </RoutesProvider>
    </div>
  )
}

Usage component FireboxDataGrid

1 - Import Dentro do component onde deseja utilizar:

2 - Recebe 3 props OBRIGATÓRIAS são elas columns, rows & processRowUpdate segue exemplo abaixo:

3 - As columns podem renderizar JSX utilize a props renderCell:

import { FireboxDataGrid } from 'firebox-components'

export const app = () => {
  const columns = [
    {
      field: 'id',
      headerName: 'ID', // Título da coluna
      width: 90 // Largura da coluna
    },
    {
      field: 'firstName',
      headerName: 'First name',
      width: 200,
      editable: true, // Pode ser editável
      sortable: true, // Pode ser ordenável
      type: 'text', // Tipo do dado
      align: 'left', // Alinhamento / Lado
      headerAlign: 'left' // Alinhamento / Lado do cabeçalho
    },
    {
      field: 'age',
      headerName: 'Age',
      width: 200,
      editable: true,
      sortable: false,
      type: 'number',
      align: 'left',
      headerAlign: 'left',
      renderCell: (data) => (
        <span style={{ textAlign: 'center', color: '#FF0' }}>{data.age}</span>
      )
    }
  ]

  const rows = [
    {
      id: 1,
      firstName: 'Jon',
      age: 35
    },
    {
      id: 2,
      firstName: 'Mary',
      age: 42
    },
    {
      id: 3,
      firstName: 'Jaime',
      age: 45
    }
  ]

  // Função para processar a atualização de uma linha
  const processRowUpdate = async (newRow, oldRow) => {
    // Encontrar o índice da linha que está sendo atualizada
    const rowIndex = table.findIndex((row) => {
      return row?.id === newRow?.id
    })

    // Criar uma cópia atualizada das linhas de dados
    const updatedRow = [...missingHours]
    updatedRow[rowIndex] = newRow

    // Montar o object de dados para ser enviado a API
    const sendData = {
      id: newRow.id,
      firstName: newRow.firstName,
      age: newRow.age
    }

    // Verificar se a linha foi realmente modificada antes de enviar para a API
    if (newRow !== oldRow) {
      await backendAPI.post(newRow.id, sendData)
    }

    // Atualizar o estado
    setState(updateRow)

    // Retornar a nova linha após a atualização
    return newRow
  }

  return (
    <>
      <FireboxDataGrid
        columns={columns}
        rows={rows}
        processRowUpdate={processRowUpdate}
      />
    </>
  )
}