diff --git a/ui/src/components/table-new/story.js b/ui/src/components/table-new/story.js index 9b1c0207..9555e22e 100644 --- a/ui/src/components/table-new/story.js +++ b/ui/src/components/table-new/story.js @@ -9,10 +9,10 @@ const _table = require('./'); const { Table, - TableHead, - TableBody, - TableRow, - TableItem + // TableHead, + // TableBody, + // TableRow, + // TableItem } = _table; const columns = [{ @@ -48,9 +48,9 @@ storiesOf('Table New', module) .add('Table New', () => ( )); diff --git a/ui/src/components/table-new/table-body.js b/ui/src/components/table-new/table-body.js index 6d0916da..48c26c05 100644 --- a/ui/src/components/table-new/table-body.js +++ b/ui/src/components/table-new/table-body.js @@ -1,27 +1,36 @@ -const composers = require('../../shared/composers'); +// const composers = require('../../shared/composers'); const React = require('react'); -const Styled = require('styled-components'); +// const Styled = require('styled-components'); +// +// const { +// default: styled, +// } = Styled; -const { - default: styled, -} = Styled; +// const { +// clearfix +// } = composers; -const { - clearfix -} = composers; - -const Row = ({st - dataItem +const Row = ({ + dataItem = {} }) => { const _dataItem = dataItem; - - Object.keys(_dataItem).forEach( (item, i) => { + const rowItems = Object.keys(_dataItem).map( (item, i) => { const value = _dataItem[item]; return ; }); + + return ( + + {rowItems} + + ); +}; + +Row.propTypes = { + dataItem: React.PropTypes.object }; const TableRows = ({ @@ -30,7 +39,7 @@ const TableRows = ({ }) => { const rows = columns.map( (column, index) => { - return + return ; }); return ( @@ -40,12 +49,17 @@ const TableRows = ({ ); }; +TableRows.propTypes = { + columns: React.PropTypes.array, + data: React.PropTypes.array +}; + const TableBody = ({ columns, data }) => { return ( - + ); }; diff --git a/ui/src/components/table-new/table-head.js b/ui/src/components/table-new/table-head.js index 85bb50ae..1faf44bc 100644 --- a/ui/src/components/table-new/table-head.js +++ b/ui/src/components/table-new/table-head.js @@ -1,56 +1,52 @@ -const fns = require('../../shared/functions'); -const composers = require('../../shared/composers'); +// const fns = require('../../shared/functions'); +// const composers = require('../../shared/composers'); const React = require('react'); -const Styled = require('styled-components'); +// const Styled = require('styled-components'); -const { - remcalc -} = fns; +// const { +// remcalc +// } = fns; -const { - default: styled, - css -} = Styled; +// const { +// default: styled, +// css +// } = Styled; -const { - clearfix -} = composers; +// const { +// clearfix +// } = composers; -const StyledTableHead = styled.header` - background: #fafafa; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); - padding: ${remcalc(24)} 0; - - ${clearfix} - - & > .table-item { - text-align: center; - - ${props => { - const width = 100 / props.itemCount; - return css` - width: ${width}%; - `; - }} - } -`; +// const StyledTableHead = styled.header` +// background: #fafafa; +// box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); +// padding: ${remcalc(24)} 0; +// +// ${clearfix} +// +// & > .table-item { +// text-align: center; +// +// ${props => { +// const width = 100 / props.itemCount; +// return css` +// width: ${width}%; +// `; +// }} +// } +// `; const TableHeader = (columns) => { - columns.map( (column) => { + columns.map( (column, i) => { return ( - - ) + + ); }); return ( - + ); }; -TableHeader.propTypes = { - children: React.PropTypes.node -}; - module.exports = TableHeader; \ No newline at end of file diff --git a/ui/src/components/table-new/table.js b/ui/src/components/table-new/table.js index ee67ac7b..560073f0 100644 --- a/ui/src/components/table-new/table.js +++ b/ui/src/components/table-new/table.js @@ -13,8 +13,8 @@ const StyledTableWrapper = styled.section` font-style: normal; `; -const StyledTableHead = styled.thead``; -const StyledTableBody = styled.tbody``; +// const StyledTableHead = styled.thead``; +// const StyledTableBody = styled.tbody``; const StyledTitle = styled.h3` text-align: center @@ -31,9 +31,17 @@ const TableContent = ({ return (
{value}
{column.title}{column.title}
{hasHeader ? : null} - {hasBody ? : null} + {hasBody ? : null}
- ) + ); +}; + +TableContent.propTypes = { + columns: React.PropTypes.array, + data: React.PropTypes.array, + hasBody: React.PropTypes.bool, + hasHeader: React.PropTypes.bool, + width: React.PropTypes.string, }; const Table = ({ diff --git a/ui/src/components/table/table.js b/ui/src/components/table/table.js index dca22a41..434b0e3a 100644 --- a/ui/src/components/table/table.js +++ b/ui/src/components/table/table.js @@ -11,23 +11,23 @@ const StyledTableWrapper = styled.section` font-style: normal; `; -const StyledTableHead = styled.thead``; -const StyledTableBody = styled.tbody``; +// const StyledTableHead = styled.thead``; +// const StyledTableBody = styled.tbody``; -const renderTable = ({ - hasHeader = false, - hasBody = true, - width = '100%' -}) => { - - const tableBody = () => { - - return ( - - ) - } - -} +// const renderTable = ({ +// hasHeader = false, +// hasBody = true, +// width = '100%' +// }) => { +// +// const tableBody = () => { +// +// return ( +// +// ) +// } +// +// } const Table = ({ children,