Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fixing unassigned object and changing forEach to map, plus fixing lintingst

This commit is contained in:
Alex Windett 2017-01-20 11:29:13 +00:00
parent c43832c2d0
commit 5dd5bc9498
5 changed files with 97 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/components/table-new/story.js
View File

@ -9,10 +9,10 @@ const _table = require('./');
const { const {
Table, Table,
TableHead, // TableHead,
TableBody, // TableBody,
TableRow, // TableRow,
TableItem // TableItem
} = _table; } = _table;
const columns = [{ const columns = [{
@ -48,9 +48,9 @@ storiesOf('Table New', module)
.add('Table New', () => ( .add('Table New', () => (
<Base> <Base>
<Table <Table
title="This is the table title"
columns={columns} columns={columns}
data={data} data={data}
title="This is the table title"
/> />
</Base> </Base>
)); ));

44
ui/src/components/table-new/table-body.js
View File

@ -1,27 +1,36 @@
const composers = require('../../shared/composers'); // const composers = require('../../shared/composers');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); // const Styled = require('styled-components');
//
// const {
// default: styled,
// } = Styled;
const { // const {
default: styled, // clearfix
} = Styled; // } = composers;
const { const Row = ({
clearfix dataItem = {}
} = composers;
const Row = ({st
dataItem
}) => { }) => {
const _dataItem = dataItem; const _dataItem = dataItem;
const rowItems = Object.keys(_dataItem).map( (item, i) => {
Object.keys(_dataItem).forEach( (item, i) => {
const value = _dataItem[item]; const value = _dataItem[item];
return <td key={i}>{value}</td>; return <td key={i}>{value}</td>;
}); });
return (
<tr>
{rowItems}
</tr>
);
};
Row.propTypes = {
dataItem: React.PropTypes.object
}; };
const TableRows = ({ const TableRows = ({
@ -30,7 +39,7 @@ const TableRows = ({
}) => { }) => {
const rows = columns.map( (column, index) => { const rows = columns.map( (column, index) => {
return <Row dataItem={data[index]} key={index} /> return <Row dataItem={data[index]} key={index} />;
}); });
return ( return (
@ -40,12 +49,17 @@ const TableRows = ({
); );
}; };
TableRows.propTypes = {
columns: React.PropTypes.array,
data: React.PropTypes.array
};
const TableBody = ({ const TableBody = ({
columns, columns,
data data
}) => { }) => {
return ( return (
<TableRows data={data} columns={columns} /> <TableRows columns={columns} data={data} />
); );
}; };

74
ui/src/components/table-new/table-head.js
View File

@ -1,56 +1,52 @@
const fns = require('../../shared/functions'); // const fns = require('../../shared/functions');
const composers = require('../../shared/composers'); // const composers = require('../../shared/composers');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); // const Styled = require('styled-components');
const { // const {
remcalc // remcalc
} = fns; // } = fns;
const { // const {
default: styled, // default: styled,
css // css
} = Styled; // } = Styled;
const { // const {
clearfix // clearfix
} = composers; // } = composers;
const StyledTableHead = styled.header` // const StyledTableHead = styled.header`
background: #fafafa; // background: #fafafa;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); // box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
padding: ${remcalc(24)} 0; // padding: ${remcalc(24)} 0;
//
${clearfix} // ${clearfix}
//
& > .table-item { // & > .table-item {
text-align: center; // text-align: center;
//
${props => { // ${props => {
const width = 100 / props.itemCount; // const width = 100 / props.itemCount;
return css` // return css`
width: ${width}%; // width: ${width}%;
`; // `;
}} // }}
} // }
`; // `;
const TableHeader = (columns) => { const TableHeader = (columns) => {
columns.map( (column) => { columns.map( (column, i) => {
return ( return (
<td>{column.title}</td> <td key={i}>{column.title}</td>
) );
}); });
return ( return (
<thead></thead> <thead />
); );
}; };
TableHeader.propTypes = {
children: React.PropTypes.node
};
module.exports = TableHeader; module.exports = TableHeader;

16
ui/src/components/table-new/table.js
View File

@ -13,8 +13,8 @@ const StyledTableWrapper = styled.section`
font-style: normal; font-style: normal;
`; `;
const StyledTableHead = styled.thead``; // const StyledTableHead = styled.thead``;
const StyledTableBody = styled.tbody``; // const StyledTableBody = styled.tbody``;
const StyledTitle = styled.h3` const StyledTitle = styled.h3`
text-align: center text-align: center
@ -31,9 +31,17 @@ const TableContent = ({
return ( return (
<table> <table>
{hasHeader ? <TableHeader columns={columns} /> : null} {hasHeader ? <TableHeader columns={columns} /> : null}
{hasBody ? <TableBody data={data} columns={columns} /> : null} {hasBody ? <TableBody columns={columns} data={data} /> : null}
</table> </table>
) );
};
TableContent.propTypes = {
columns: React.PropTypes.array,
data: React.PropTypes.array,
hasBody: React.PropTypes.bool,
hasHeader: React.PropTypes.bool,
width: React.PropTypes.string,
}; };
const Table = ({ const Table = ({

32
ui/src/components/table/table.js
View File

@ -11,23 +11,23 @@ const StyledTableWrapper = styled.section`
font-style: normal; font-style: normal;
`; `;
const StyledTableHead = styled.thead``; // const StyledTableHead = styled.thead``;
const StyledTableBody = styled.tbody``; // const StyledTableBody = styled.tbody``;
const renderTable = ({ // const renderTable = ({
hasHeader = false, // hasHeader = false,
hasBody = true, // hasBody = true,
width = '100%' // width = '100%'
}) => { // }) => {
//
const tableBody = () => { // const tableBody = () => {
//
return ( // return (
<StyledTableBody /> // <StyledTableBody />
) // )
} // }
//
} // }
const Table = ({ const Table = ({
children, children,