From 186353111b2cd853fdac2f91fc17e7e33532c4d4 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Fri, 20 Jan 2017 13:23:52 +0000 Subject: [PATCH] refactoring, removing comments and unused files for new table --- ui/src/components/table-new/index.js | 52 +++++++++++++--- ui/src/components/table-new/story.js | 10 +--- ui/src/components/table-new/table-body.js | 50 +--------------- ui/src/components/table-new/table-cell.js | 0 .../table-new/{table.js => table-content.js} | 41 +------------ ui/src/components/table-new/table-head.js | 33 +---------- ui/src/components/table-new/table-item.js | 28 --------- ui/src/components/table-new/table-row.js | 59 +++++-------------- 8 files changed, 65 insertions(+), 208 deletions(-) delete mode 100644 ui/src/components/table-new/table-cell.js rename ui/src/components/table-new/{table.js => table-content.js} (52%) delete mode 100644 ui/src/components/table-new/table-item.js diff --git a/ui/src/components/table-new/index.js b/ui/src/components/table-new/index.js index 0a5e1d71..a665420b 100644 --- a/ui/src/components/table-new/index.js +++ b/ui/src/components/table-new/index.js @@ -1,8 +1,46 @@ -module.exports = { - Table: require('./table'), - TableHead: require('./table-head'), - TableBody: require('./table-body'), - TableCell: require('./table-cell'), - TableRow: require('./table-row'), - TableItem: require('./table-item'), +const React = require('react'); +const Styled = require('styled-components'); + +const TableContent = require('./table-content'); + +const { + default: styled +} = Styled; + +const StyledTitle = styled.h3` + text-align: center +`; + +const StyledTableWrapper = styled.section` + font-family: 'LibreFranklin', sans-serif; + font-style: normal; +`; + +const Table = ({ + children, + columns = [], + data = [], + title, +}) => { + + return ( + + + {title} + + + + ); }; + +Table.propTypes = { + children: React.PropTypes.node, + columns: React.PropTypes.array, + data: React.PropTypes.array, + title: React.PropTypes.string, +}; + +module.exports = Table; diff --git a/ui/src/components/table-new/story.js b/ui/src/components/table-new/story.js index 2e128b6a..da8f34ca 100644 --- a/ui/src/components/table-new/story.js +++ b/ui/src/components/table-new/story.js @@ -5,15 +5,7 @@ const { storiesOf } = require('@kadira/storybook'); -const _table = require('./'); - -const { - Table, - // TableHead, - // TableBody, - // TableRow, - // TableItem -} = _table; +const Table = require('./'); const columns = [{ title: 'Memeber', diff --git a/ui/src/components/table-new/table-body.js b/ui/src/components/table-new/table-body.js index 48c26c05..a1dbd7fd 100644 --- a/ui/src/components/table-new/table-body.js +++ b/ui/src/components/table-new/table-body.js @@ -1,43 +1,11 @@ -// const composers = require('../../shared/composers'); - const React = require('react'); -// const Styled = require('styled-components'); -// -// const { -// default: styled, -// } = Styled; -// const { -// clearfix -// } = composers; +const Row = require('./table-row'); -const Row = ({ - dataItem = {} -}) => { - const _dataItem = dataItem; - - const rowItems = Object.keys(_dataItem).map( (item, i) => { - const value = _dataItem[item]; - - return {value}; - }); - - return ( - - {rowItems} - - ); -}; - -Row.propTypes = { - dataItem: React.PropTypes.object -}; - -const TableRows = ({ +const TableBody = ({ columns, data }) => { - const rows = columns.map( (column, index) => { return ; }); @@ -49,20 +17,6 @@ const TableRows = ({ ); }; -TableRows.propTypes = { - columns: React.PropTypes.array, - data: React.PropTypes.array -}; - -const TableBody = ({ - columns, - data -}) => { - return ( - - ); -}; - TableBody.propTypes = { columns: React.PropTypes.array, data: React.PropTypes.array diff --git a/ui/src/components/table-new/table-cell.js b/ui/src/components/table-new/table-cell.js deleted file mode 100644 index e69de29b..00000000 diff --git a/ui/src/components/table-new/table.js b/ui/src/components/table-new/table-content.js similarity index 52% rename from ui/src/components/table-new/table.js rename to ui/src/components/table-new/table-content.js index a99c44cb..0bb3d16c 100644 --- a/ui/src/components/table-new/table.js +++ b/ui/src/components/table-new/table-content.js @@ -8,18 +8,6 @@ const { default: styled } = Styled; -const StyledTableWrapper = styled.section` - font-family: 'LibreFranklin', sans-serif; - font-style: normal; -`; - -// const StyledTableHead = styled.thead``; -// const StyledTableBody = styled.tbody``; - -const StyledTitle = styled.h3` - text-align: center -`; - const StyledTable = styled.table` width: 100%; `; @@ -48,31 +36,4 @@ TableContent.propTypes = { width: React.PropTypes.string, }; -const Table = ({ - children, - columns = [], - data = [], - title, -}) => { - - return ( - - - {title} - - - - ); -}; - -Table.propTypes = { - children: React.PropTypes.node, - columns: React.PropTypes.array, - data: React.PropTypes.array, - title: React.PropTypes.string, -}; - -module.exports = Table; +module.exports = TableContent; diff --git a/ui/src/components/table-new/table-head.js b/ui/src/components/table-new/table-head.js index 7bdc2531..2a46b547 100644 --- a/ui/src/components/table-new/table-head.js +++ b/ui/src/components/table-new/table-head.js @@ -1,41 +1,10 @@ -// const fns = require('../../shared/functions'); -// const composers = require('../../shared/composers'); - const React = require('react'); const Styled = require('styled-components'); -// const { -// remcalc -// } = fns; - const { - default: styled, - // css + default: styled } = Styled; -// 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 StyledTableHeadItem = styled.td` ${props => `width: ${props.width}`} `; diff --git a/ui/src/components/table-new/table-item.js b/ui/src/components/table-new/table-item.js deleted file mode 100644 index e43bc69b..00000000 --- a/ui/src/components/table-new/table-item.js +++ /dev/null @@ -1,28 +0,0 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const { - default: styled -} = Styled; - -const Item = styled.div` - display: inline-block; - float: left; -`; - -const TableItem = ({ - children -}) => { - - return ( - - {children} - - ); -}; - -TableItem.propTypes = { - children: React.PropTypes.node -}; - -module.exports = TableItem; \ No newline at end of file diff --git a/ui/src/components/table-new/table-row.js b/ui/src/components/table-new/table-row.js index 3817b656..226f38c5 100644 --- a/ui/src/components/table-new/table-row.js +++ b/ui/src/components/table-new/table-row.js @@ -1,54 +1,25 @@ -const fns = require('../../shared/functions'); -const composers = require('../../shared/composers'); - const React = require('react'); -const Styled = require('styled-components'); -const { - default: styled, - css -} = Styled; - -const { - clearfix -} = composers; - -const { - remcalc -} = fns; - -const StyledTableRow = styled.div` - ${clearfix} - - padding: ${remcalc(24)} 0; - border-bottom: solid 1px #d8d8d8; - - & > .table-item { - text-align: center; - - ${props => { - const width = 100 / props.itemCount; - return css` - width: ${width}%; - `; - }} - } -`; - -const TableRow = ({ - children +const Row = ({ + dataItem = {} }) => { - const itemCount = children.length; + const _dataItem = dataItem; + + const rowItems = Object.keys(_dataItem).map( (item, i) => { + const value = _dataItem[item]; + + return {value}; + }); return ( - - {children} - + + {rowItems} + ); }; -TableRow.propTypes = { - children: React.PropTypes.node +Row.propTypes = { + dataItem: React.PropTypes.object }; -module.exports = TableRow; \ No newline at end of file +module.export = Row; \ No newline at end of file