diff --git a/ui/src/components/table-new/index.js b/ui/src/components/table-new/index.js new file mode 100644 index 00000000..0a5e1d71 --- /dev/null +++ b/ui/src/components/table-new/index.js @@ -0,0 +1,8 @@ +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'), +}; diff --git a/ui/src/components/table-new/readme.md b/ui/src/components/table-new/readme.md new file mode 100644 index 00000000..13c2ad83 --- /dev/null +++ b/ui/src/components/table-new/readme.md @@ -0,0 +1,41 @@ +# `` + +## demo + +```embed +const React = require('react'); +const ReactDOM = require('react-dom/server'); +const Base = require('../base'); +const Container = require('../container'); +const Row = require('../row'); +const Column = require('../column'); +const Avatar = require('./index.js'); +const styles = require('./style.css'); + +nmodule.exports = ReactDOM.renderToString( + + + + + + + + + + +); +``` + +## usage + +```js +const React = require('react'); +const Avatar = require('ui/avatar'); + +module.exports = () => { + return ( + + + ); +} +``` diff --git a/ui/src/components/table-new/story.js b/ui/src/components/table-new/story.js new file mode 100644 index 00000000..9b1c0207 --- /dev/null +++ b/ui/src/components/table-new/story.js @@ -0,0 +1,56 @@ +const React = require('react'); +const Base = require('../base'); + +const { + storiesOf +} = require('@kadira/storybook'); + +const _table = require('./'); + +const { + Table, + TableHead, + TableBody, + TableRow, + TableItem +} = _table; + +const columns = [{ + title: 'Memeber', + dataID: 'member', + dataKey: 'member', + width: '' +}, { + title: 'Status', + dataID: 'status', + dataKey: 'status', + width: '' +}, { + title: 'Role', + dataID: 'role', + dataKey: 'role', + width: '' +}, { + title: '', + dataID: 'delete', + dataKey: 'delete', + width: '' +}]; + +const data = [{ + name: 'Nicola', + status: 'Active', + role: 'Owner', + key: 1 +}]; + +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 new file mode 100644 index 00000000..6d0916da --- /dev/null +++ b/ui/src/components/table-new/table-body.js @@ -0,0 +1,57 @@ +const composers = require('../../shared/composers'); + +const React = require('react'); +const Styled = require('styled-components'); + +const { + default: styled, +} = Styled; + +const { + clearfix +} = composers; + +const Row = ({st + dataItem +}) => { + const _dataItem = dataItem; + + + Object.keys(_dataItem).forEach( (item, i) => { + const value = _dataItem[item]; + + return ; + }); +}; + +const TableRows = ({ + columns, + data +}) => { + + const rows = columns.map( (column, index) => { + return + }); + + return ( + + {rows} + + ); +}; + +const TableBody = ({ + columns, + data +}) => { + return ( + + ); +}; + +TableBody.propTypes = { + columns: React.PropTypes.array, + data: React.PropTypes.array +}; + +module.exports = TableBody; \ No newline at end of file diff --git a/ui/src/components/table-new/table-cell.js b/ui/src/components/table-new/table-cell.js new file mode 100644 index 00000000..e69de29b diff --git a/ui/src/components/table-new/table-head.js b/ui/src/components/table-new/table-head.js new file mode 100644 index 00000000..85bb50ae --- /dev/null +++ b/ui/src/components/table-new/table-head.js @@ -0,0 +1,56 @@ +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 +} = 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 TableHeader = (columns) => { + + columns.map( (column) => { + 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-item.js b/ui/src/components/table-new/table-item.js new file mode 100644 index 00000000..e43bc69b --- /dev/null +++ b/ui/src/components/table-new/table-item.js @@ -0,0 +1,28 @@ +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 new file mode 100644 index 00000000..3817b656 --- /dev/null +++ b/ui/src/components/table-new/table-row.js @@ -0,0 +1,54 @@ +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 itemCount = children.length; + + return ( + + {children} + + ); +}; + +TableRow.propTypes = { + children: React.PropTypes.node +}; + +module.exports = TableRow; \ No newline at end of file diff --git a/ui/src/components/table-new/table.js b/ui/src/components/table-new/table.js new file mode 100644 index 00000000..ee67ac7b --- /dev/null +++ b/ui/src/components/table-new/table.js @@ -0,0 +1,66 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const TableBody = require('./table-body'); +const TableHeader = require('./table-head'); + +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 TableContent = ({ + columns, + data, + hasHeader = false, + hasBody = data.length >= 1, + width = '100%' +}) => { + + return ( +
{value}
{column.title}
+ {hasHeader ? : null} + {hasBody ? : null} +
+ ) +}; + +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/table.js b/ui/src/components/table/table.js index b77c2207..dca22a41 100644 --- a/ui/src/components/table/table.js +++ b/ui/src/components/table/table.js @@ -5,25 +5,45 @@ const { default: styled } = Styled; -const StyledTable = styled.section` +const StyledTableWrapper = styled.section` border: solid 1px #d8d8d8 font-family: 'LibreFranklin', sans-serif; font-style: normal; `; +const StyledTableHead = styled.thead``; +const StyledTableBody = styled.tbody``; + +const renderTable = ({ + hasHeader = false, + hasBody = true, + width = '100%' +}) => { + + const tableBody = () => { + + return ( + + ) + } + +} + const Table = ({ - children + children, + title, }) => { return ( - + {children} - + ); }; Table.propTypes = { - children: React.PropTypes.node + children: React.PropTypes.node, + title: React.PropTypes.string, }; module.exports = Table;