mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
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
|
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;
|
||||||
|
Loading…
Reference in New Issue
Block a user