working on table by passing in js object

This commit is contained in:
Alex Windett 2017-01-20 10:33:52 +00:00
parent 2b25582af0
commit c43832c2d0
10 changed files with 391 additions and 5 deletions

View File

@ -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'),
};

View File

@ -0,0 +1,41 @@
# `<Avatar>`
## 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(
<Base>
<Row>
<Column>
<Avatar color='#35a8c0' name='Alex' />
</Column>
<Column>
<Avatar color='#ef6176' name='Alex' src='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Avatar = require('ui/avatar');
module.exports = () => {
return (
<Avatar color='#35a8c0' name='Alex' />
<Avatar color='#ef6176' name='Alex' src='path/to/image.png' />
);
}
```

View File

@ -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', () => (
<Base>
<Table
title="This is the table title"
columns={columns}
data={data}
/>
</Base>
));

View File

@ -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 <td key={i}>{value}</td>;
});
};
const TableRows = ({
columns,
data
}) => {
const rows = columns.map( (column, index) => {
return <Row dataItem={data[index]} key={index} />
});
return (
<tbody>
{rows}
</tbody>
);
};
const TableBody = ({
columns,
data
}) => {
return (
<TableRows data={data} columns={columns} />
);
};
TableBody.propTypes = {
columns: React.PropTypes.array,
data: React.PropTypes.array
};
module.exports = TableBody;

View File

@ -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 (
<td>{column.title}</td>
)
});
return (
<thead></thead>
);
};
TableHeader.propTypes = {
children: React.PropTypes.node
};
module.exports = TableHeader;

View File

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

View File

@ -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 (
<StyledTableRow itemCount={itemCount}>
{children}
</StyledTableRow>
);
};
TableRow.propTypes = {
children: React.PropTypes.node
};
module.exports = TableRow;

View File

@ -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 (
<table>
{hasHeader ? <TableHeader columns={columns} /> : null}
{hasBody ? <TableBody data={data} columns={columns} /> : null}
</table>
)
};
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;

View File

@ -5,25 +5,45 @@ const {
default: styled default: styled
} = Styled; } = Styled;
const StyledTable = styled.section` const StyledTableWrapper = styled.section`
border: solid 1px #d8d8d8 border: solid 1px #d8d8d8
font-family: 'LibreFranklin', sans-serif; font-family: 'LibreFranklin', sans-serif;
font-style: normal; font-style: normal;
`; `;
const StyledTableHead = styled.thead``;
const StyledTableBody = styled.tbody``;
const renderTable = ({
hasHeader = false,
hasBody = true,
width = '100%'
}) => {
const tableBody = () => {
return (
<StyledTableBody />
)
}
}
const Table = ({ const Table = ({
children children,
title,
}) => { }) => {
return ( return (
<StyledTable> <StyledTableWrapper>
{children} {children}
</StyledTable> </StyledTableWrapper>
); );
}; };
Table.propTypes = { Table.propTypes = {
children: React.PropTypes.node children: React.PropTypes.node,
title: React.PropTypes.string,
}; };
module.exports = Table; module.exports = Table;