mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 22:20:06 +02:00
refactoring, removing comments and unused files for new table
This commit is contained in:
parent
fb579ac378
commit
186353111b
@ -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;
|
||||
|
@ -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',
|
||||
|
@ -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
|
||||
|
@ -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;
|
@ -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}`}
|
||||
`;
|
||||
|
@ -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;
|
@ -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;
|
Loading…
Reference in New Issue
Block a user