implimenting simple table component
This commit is contained in:
parent
c5d8013016
commit
2b25582af0
8
ui/src/components/table/index.js
Normal file
8
ui/src/components/table/index.js
Normal 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'),
|
||||||
|
};
|
41
ui/src/components/table/readme.md
Normal file
41
ui/src/components/table/readme.md
Normal 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' />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
87
ui/src/components/table/story.js
Normal file
87
ui/src/components/table/story.js
Normal 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>
|
||||||
|
));
|
39
ui/src/components/table/table-body.js
Normal file
39
ui/src/components/table/table-body.js
Normal 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;
|
0
ui/src/components/table/table-cell.js
Normal file
0
ui/src/components/table/table-cell.js
Normal file
58
ui/src/components/table/table-head.js
Normal file
58
ui/src/components/table/table-head.js
Normal 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;
|
28
ui/src/components/table/table-item.js
Normal file
28
ui/src/components/table/table-item.js
Normal 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;
|
54
ui/src/components/table/table-row.js
Normal file
54
ui/src/components/table/table-row.js
Normal 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;
|
29
ui/src/components/table/table.js
Normal file
29
ui/src/components/table/table.js
Normal 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;
|
@ -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;
|
||||||
|
}
|
||||||
|
`,
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user