@eureca/eureca-ui
Version:
UI component library of Eureca's user and admin apps
194 lines (160 loc) • 5.07 kB
text/mdx
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';
<Meta title='Originals/CronogramTable' component={CronogramTable} decorators={[withKnobs]}/>
<Title>CronogramTable</Title>
<Description>
CronogramTable dos aplicativos Eureca. Utiliza a biblioteca [react-color](https://casesandberg.github.io/react-color/)
</Description>
<Preview>
<Story name="CronogramTable">
<CronogramTableStory />
</Story>
</Preview>
<Subtitle>Formato dos Dados</Subtitle>
- `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,
},
]
```
<Subtitle>Props</Subtitle>
| Nome | Descrição | Default |
|:-------:|:-------------------------------:|:-----------:|
| initialData | Dados de entrada da tabela <br /> '[object]' | [ ] |
| onChange | Função chamada ao se alterar um dado na tabela <br /> 'func' | () => { } |
<Subtitle>Opções de fases</Subtitle>
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',
},
]
```
<Subtitle>Providers</Subtitle>
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 `-io/date-fns`, e a localização de português do Brasil.
```jsx
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBR}>
<CronogramTable {...props}/>
</MuiPickersUtilsProvider>
```
No exemplo abaixo podemos ver seu uso com o utils do Moment, importado de `-io/moment`, e a localização inglês .
<Subtitle>Utilização com SSR</Subtitle>
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 (
<Html lang="en">
<Head>
<link
rel="stylesheet"
type="text/css"
charSet="UTF-8"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
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(<App {...props} />),
});
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
<MuiPickersUtilsProvider utils={MomentUtils} locale={en}>
<CronogramTable {...props}/>
</MuiPickersUtilsProvider>
```
<Subtitle>Exemplo de Aplicação</Subtitle>
```jsx
<CronogramTable
initialData={initialData}
phaseOptions={phaseOptions}
onChange={handleChange}
/>
```