Feat: New styleguide, table component and screen

This commit is contained in:
Rafael Taranto 2019-11-11 15:34:14 +00:00
parent c100c11a2f
commit 8b4a1ff23f
20 changed files with 309 additions and 287 deletions

View file

@ -1,4 +1,4 @@
import React from 'react'
import React, { memo } from 'react'
import { startCase } from 'lodash/fp'
import {
@ -10,23 +10,20 @@ import {
import ERow from './Row'
const ETable = ({ elements = [], data = [], cancel, save, components = {} }) => {
const { row } = components
const Row = row || ERow
const ETable = memo(({ elements = [], data = [], save, validationSchema }) => {
return (
<Table>
<THead>
{elements.map(({ name, size, header }, idx) => (
<Td header key={idx} size={size}>{header || startCase(name)}</Td>
{elements.map(({ name, size, header, textAlign }, idx) => (
<Td header key={idx} size={size} textAlign={textAlign}>{header || startCase(name)}</Td>
))}
<Td header size={175} />
</THead>
<TBody>
{data.map((it, idx) => <Row key={idx} value={it} elements={elements} cancel={cancel} save={save} />)}
{data.map((it, idx) => <ERow key={idx} value={it} elements={elements} save={save} validationSchema={validationSchema} />)}
</TBody>
</Table>
)
}
})
export default ETable