working on table by passing in js object
This commit is contained in:
parent
2b25582af0
commit
c43832c2d0
8
ui/src/components/table-new/index.js
Normal file
8
ui/src/components/table-new/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-new/readme.md
Normal file
41
ui/src/components/table-new/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' />
|
||||
);
|
||||
}
|
||||
```
|
56
ui/src/components/table-new/story.js
Normal file
56
ui/src/components/table-new/story.js
Normal 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>
|
||||
));
|
57
ui/src/components/table-new/table-body.js
Normal file
57
ui/src/components/table-new/table-body.js
Normal 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;
|
0
ui/src/components/table-new/table-cell.js
Normal file
0
ui/src/components/table-new/table-cell.js
Normal file
56
ui/src/components/table-new/table-head.js
Normal file
56
ui/src/components/table-new/table-head.js
Normal 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;
|
28
ui/src/components/table-new/table-item.js
Normal file
28
ui/src/components/table-new/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-new/table-row.js
Normal file
54
ui/src/components/table-new/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;
|
66
ui/src/components/table-new/table.js
Normal file
66
ui/src/components/table-new/table.js
Normal 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;
|
@ -5,25 +5,45 @@ const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTable = styled.section`
|
||||
const StyledTableWrapper = styled.section`
|
||||
border: solid 1px #d8d8d8
|
||||
font-family: 'LibreFranklin', sans-serif;
|
||||
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 = ({
|
||||
children
|
||||
children,
|
||||
title,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<StyledTable>
|
||||
<StyledTableWrapper>
|
||||
{children}
|
||||
</StyledTable>
|
||||
</StyledTableWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
Table.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
children: React.PropTypes.node,
|
||||
title: React.PropTypes.string,
|
||||
};
|
||||
|
||||
module.exports = Table;
|
||||
|
Loading…
Reference in New Issue
Block a user