fixing unassigned object and changing forEach to map, plus fixing lintingst
This commit is contained in:
parent
c43832c2d0
commit
5dd5bc9498
@ -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>
|
||||||
));
|
));
|
||||||
|
@ -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} />
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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;
|
@ -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 = ({
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user