import {
Meta,
Story,
Preview,
Title,
Subtitle,
Description,
Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { CronogramTable } from '../';
import { CronogramTableStory } from './cronogram-table.stories.js';
CronogramTable
CronogramTable dos aplicativos Eureca. Utiliza a biblioteca [react-color](https://casesandberg.github.io/react-color/)
Formato dos Dados
- `description`: string
- `deadline`: date
- `phase`: string
- `show`: bool
- `id`: string ou number
```jsx
[
{
description: 'Início das inscrições',
deadline: new Date(21, 4, 25),
phase: 'Online',
show: true,
id: 1,
},
{
description: 'Presencial em SP',
deadline: new Date(22, 0, 25),
phase: 'Presencial',
show: true,
id: 2,
},
{
description: 'Início do estágio',
deadline: new Date(22, 1, 14),
phase: 'Geral',
show: true,
id: 3,
},
]
```
Props
| Nome | Descrição | Default |
|:-------:|:-------------------------------:|:-----------:|
| initialData | Dados de entrada da tabela '[object]' | [ ] |
| onChange | Função chamada ao se alterar um dado na tabela 'func' | () => { } |
Opções de fases
As fases podem ser customizadas através da prop phaseOptions deve seguir o formato abaixo.
```jsx
[
{
id: 1,
label: 'Online',
value: 'Online',
},
{
id: 2,
label: 'Presencial',
value: 'Presencial',
},
{
id: 3,
label: 'Geral',
value: 'Geral',
},
]
```
Providers
O `Cronogram` deve ser usado em conjunto com o provider `MuiPickersUtilsProvider` pois possui seletores de data internamente.
É necessário passar o utils de uma biblioteca de manipulação de datas escolhida além
do locale da biblioteca de tempo sendo utilizada.
O provider deve ser adicionado ao root do app.
No caso do Next.JS podem ser incluídos no _app.js.
No exemplo abaixo podemos ver seu uso com o utils do DateFn, importado de `@date-io/date-fns`, e a localização de português do Brasil.
```jsx
```
No exemplo abaixo podemos ver seu uso com o utils do Moment, importado de `@date-io/moment`, e a localização inglês .
Utilização com SSR
Para que o componente funcione corretamente é necessário importar e executar no root do app (no caso do Next dentro do `getInitialProps` do `_document.js`)
a função `resetServerContext` exportada por essa biblioteca. Essa função sincroniza o estado da biblioteca `react-beautiful-dnd`, utilizada pelo componente,
no servidor e cliente.
Segue abaixo um exemplo de configuração do `_document.js` com a função. Repare no uso da função logo no início do `getInitialProps`.
```jsx
import React from 'react';
import Document, {
Html, Head, Main, NextScript,
} from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import { resetServerContext } from '@eureca/eureca-ui';
class MyDocument extends Document {
render() {
return (
);
}
}
MyDocument.getInitialProps = async (ctx) => {
resetServerContext(); // Função que habilita uso com SSR
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => originalRenderPage({
// eslint-disable-next-line react/jsx-props-no-spreading
enhanceApp: (App) => (props) => sheets.collect(),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
export default MyDocument;
```
```jsx
```
Exemplo de Aplicação
```jsx
```