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

refactoring, removing comments and unused files for new table

This commit is contained in:
Alex Windett 2017-01-20 13:23:52 +00:00
parent fb579ac378
commit 186353111b
8 changed files with 65 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
ui/src/components/table-new/index.js
View File

@ -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 (
<StyledTableWrapper>
<StyledTitle>{title}</StyledTitle>
<TableContent
columns={columns}
data={data}
/>
</StyledTableWrapper>
);
};
Table.propTypes = {
children: React.PropTypes.node,
columns: React.PropTypes.array,
data: React.PropTypes.array,
title: React.PropTypes.string,
};
module.exports = Table;

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

@ -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',

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

@ -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 <td key={i}>{value}</td>;
});
return (
<tr>
{rowItems}
</tr>
);
};
Row.propTypes = {
dataItem: React.PropTypes.object
};
const TableRows = ({
const TableBody = ({
columns,
data
}) => {
const rows = columns.map( (column, index) => {
return <Row dataItem={data[index]} key={index} />;
});
@ -49,20 +17,6 @@ const TableRows = ({
);
};
TableRows.propTypes = {
columns: React.PropTypes.array,
data: React.PropTypes.array
};
const TableBody = ({
columns,
data
}) => {
return (
<TableRows columns={columns} data={data} />
);
};
TableBody.propTypes = {
columns: React.PropTypes.array,
data: React.PropTypes.array

0
ui/src/components/table-new/table-cell.js
View File

41
ui/src/components/table-new/table.js → ui/src/components/table-new/table-content.js
View File

@ -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 (
<StyledTableWrapper>
<StyledTitle>{title}</StyledTitle>
<TableContent
columns={columns}
data={data}
/>
</StyledTableWrapper>
);
};
Table.propTypes = {
children: React.PropTypes.node,
columns: React.PropTypes.array,
data: React.PropTypes.array,
title: React.PropTypes.string,
};
module.exports = Table;
module.exports = TableContent;

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

@ -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}`}
`;

28
ui/src/components/table-new/table-item.js
View File

@ -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 (
<Item className="table-item">
{children}
</Item>
);
};
TableItem.propTypes = {
children: React.PropTypes.node
};
module.exports = TableItem;

59
ui/src/components/table-new/table-row.js
View File

@ -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 <td key={i}>{value}</td>;
});
return (
<StyledTableRow itemCount={itemCount}>
{children}
</StyledTableRow>
<tr>
{rowItems}
</tr>
);
};
TableRow.propTypes = {
children: React.PropTypes.node
Row.propTypes = {
dataItem: React.PropTypes.object
};
module.exports = TableRow;
module.export = Row;