implimenting simple table component

This commit is contained in:
Alex Windett 2017-01-19 14:59:59 +00:00
parent c5d8013016
commit 2b25582af0
10 changed files with 356 additions and 1 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,87 @@
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: 'Ownder',
}];
storiesOf('Table', module)
.add('Table', () => (
<Base>
<Table>
<TableHead>
<TableItem>Member</TableItem>
<TableItem>Status</TableItem>
<TableItem>Role</TableItem>
<TableItem>{/*Empty last Column*/}</TableItem>
</TableHead>
<TableBody>
<TableRow>
<TableItem>
<h4>Nicola (You)</h4>
<p>nicola@biztech.com</p>
</TableItem>
<TableItem>Active</TableItem>
<TableItem>Owner</TableItem>
<TableItem>🗑</TableItem>
</TableRow>
<TableRow>
<TableItem>
<h4>Nicola (You)</h4>
<p>nicola@biztech.com</p>
</TableItem>
<TableItem>Active</TableItem>
<TableItem>Owner</TableItem>
<TableItem>🗑</TableItem>
</TableRow>
</TableBody>
</Table>
</Base>
))
.add('Table New', () => (
<Base>
<Table
columns={columns}
data={data}
/>
</Base>
));

View File

@ -0,0 +1,39 @@
const composers = require('../../shared/composers');
const React = require('react');
const Styled = require('styled-components');
const {
default: styled,
} = Styled;
const {
clearfix
} = composers;
const StyledTableBody = styled.article`
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
${clearfix}
`;
const TableBody = ({
children
}) => {
const itemCount = children.length;
if (itemCount <= 1) return;
return (
<StyledTableBody itemCount={itemCount}>
{children}
</StyledTableBody>
);
};
TableBody.propTypes = {
children: React.PropTypes.node
};
module.exports = StyledTableBody;

View File

View File

@ -0,0 +1,58 @@
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 TableHead = ({
children
}) => {
const itemCount = children.length;
if (itemCount <= 1) return;
return (
<StyledTableHead itemCount={itemCount}>
{children}
</StyledTableHead>
);
};
TableHead.propTypes = {
children: React.PropTypes.node
};
module.exports = TableHead;

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,29 @@
const React = require('react');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const StyledTable = styled.section`
border: solid 1px #d8d8d8
font-family: 'LibreFranklin', sans-serif;
font-style: normal;
`;
const Table = ({
children
}) => {
return (
<StyledTable>
{children}
</StyledTable>
);
};
Table.propTypes = {
children: React.PropTypes.node
};
module.exports = Table;

View File

@ -47,5 +47,16 @@ module.exports = {
right: ${positions.right || 'auto'}; right: ${positions.right || 'auto'};
bottom: ${positions.bottom || 'auto'}; bottom: ${positions.bottom || 'auto'};
left: ${positions.left || 'auto'}; left: ${positions.left || 'auto'};
` `,
clearfix: css`
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
`,
}; };