mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Merge branch 'component/table'
* component/table: editing story to pull in react component instead of string updating readme adding padding to td`s starting to style data table renaming directories. Table >> Simple Table and Table New >> Data Table removing old storybook story refactoring, removing comments and unused files for new table adding table head to new table fixing unassigned object and changing forEach to map, plus fixing linting working on table by passing in js object implementing simple table component
This commit is contained in:
commit
fc9d940986
46
ui/src/components/table-data-table/index.js
Normal file
46
ui/src/components/table-data-table/index.js
Normal file
@ -0,0 +1,46 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const TableContent = require('./table-content');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTitle = styled.h3`
|
||||
text-align: center
|
||||
`;
|
||||
|
||||
const StyledTableWrapper = styled.section`
|
||||
font-family: 'LibreFranklin', sans-serif;
|
||||
font-style: normal;
|
||||
`;
|
||||
|
||||
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;
|
76
ui/src/components/table-data-table/readme.md
Normal file
76
ui/src/components/table-data-table/readme.md
Normal file
@ -0,0 +1,76 @@
|
||||
# `<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 Table = require('./index.js');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title="This is the table title"
|
||||
/>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Avatar = require('ui/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
|
||||
}, {
|
||||
name: 'Alex',
|
||||
status: 'Inactive',
|
||||
role: 'Read Only',
|
||||
key: 2
|
||||
}];
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Base>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title="This is the table title"
|
||||
/>
|
||||
</Base>
|
||||
);
|
||||
}
|
||||
```
|
54
ui/src/components/table-data-table/story.js
Normal file
54
ui/src/components/table-data-table/story.js
Normal file
@ -0,0 +1,54 @@
|
||||
const React = require('react');
|
||||
const Base = require('../base');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Table = require('./');
|
||||
|
||||
const memberDetail = (name) => {
|
||||
return (
|
||||
<div>
|
||||
<h4>{name}</h4>
|
||||
<small>{name}@biztech.com</small>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const columns = [{
|
||||
title: 'Memeber',
|
||||
width: '50%'
|
||||
}, {
|
||||
title: 'Status',
|
||||
width: '10%'
|
||||
}, {
|
||||
title: 'Role',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: '',
|
||||
width: '20%'
|
||||
}];
|
||||
|
||||
const data = [{
|
||||
name: memberDetail('Nicola'),
|
||||
status: 'Active',
|
||||
role: 'Owner',
|
||||
key: 1
|
||||
}, {
|
||||
name: memberDetail('Alex'),
|
||||
status: 'Inactive',
|
||||
role: 'Read Only',
|
||||
key: 2
|
||||
}];
|
||||
|
||||
storiesOf('Table - Data Table', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title="This is the table title"
|
||||
/>
|
||||
</Base>
|
||||
));
|
25
ui/src/components/table-data-table/table-body.js
Normal file
25
ui/src/components/table-data-table/table-body.js
Normal file
@ -0,0 +1,25 @@
|
||||
const React = require('react');
|
||||
|
||||
const Row = require('./table-row');
|
||||
|
||||
const TableBody = ({
|
||||
columns,
|
||||
data
|
||||
}) => {
|
||||
const rows = columns.map( (column, index) => {
|
||||
return <Row dataItem={data[index]} key={index} />;
|
||||
});
|
||||
|
||||
return (
|
||||
<tbody>
|
||||
{rows}
|
||||
</tbody>
|
||||
);
|
||||
};
|
||||
|
||||
TableBody.propTypes = {
|
||||
columns: React.PropTypes.array,
|
||||
data: React.PropTypes.array
|
||||
};
|
||||
|
||||
module.exports = TableBody;
|
39
ui/src/components/table-data-table/table-content.js
Normal file
39
ui/src/components/table-data-table/table-content.js
Normal file
@ -0,0 +1,39 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const TableBody = require('./table-body');
|
||||
const TableHeader = require('./table-head');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTable = styled.table`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const TableContent = ({
|
||||
columns,
|
||||
data,
|
||||
hasHeader = columns.length >= 1,
|
||||
hasBody = data.length >= 1,
|
||||
width = '100%'
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<StyledTable>
|
||||
{hasHeader ? <TableHeader columns={columns} /> : null}
|
||||
{hasBody ? <TableBody columns={columns} data={data} /> : null}
|
||||
</StyledTable>
|
||||
);
|
||||
};
|
||||
|
||||
TableContent.propTypes = {
|
||||
columns: React.PropTypes.array,
|
||||
data: React.PropTypes.array,
|
||||
hasBody: React.PropTypes.bool,
|
||||
hasHeader: React.PropTypes.bool,
|
||||
width: React.PropTypes.string,
|
||||
};
|
||||
|
||||
module.exports = TableContent;
|
57
ui/src/components/table-data-table/table-head.js
Normal file
57
ui/src/components/table-data-table/table-head.js
Normal file
@ -0,0 +1,57 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const fns = require('../../shared/functions');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTableHeadItem = styled.td`
|
||||
${props => `width: ${props.width}`}
|
||||
border-bottom: none;
|
||||
padding: ${remcalc(24)};
|
||||
`;
|
||||
|
||||
const StyledTableHead = styled.thead`
|
||||
background: #fafafa;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
border: solid ${remcalc(1)} #d8d8d8;
|
||||
`;
|
||||
|
||||
const TableHeader = ({
|
||||
columns
|
||||
}) => {
|
||||
|
||||
const fallBackWidth = `${100 / parseInt(columns.length)}%`;
|
||||
|
||||
const titles = columns.map( (column, i) => {
|
||||
|
||||
return (
|
||||
<StyledTableHeadItem
|
||||
key={i}
|
||||
width={column.width || fallBackWidth}
|
||||
>
|
||||
{column.title}
|
||||
</StyledTableHeadItem>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledTableHead>
|
||||
<tr>
|
||||
{titles}
|
||||
</tr>
|
||||
</StyledTableHead>
|
||||
);
|
||||
};
|
||||
|
||||
TableHeader.propTypes = {
|
||||
columns: React.PropTypes.array
|
||||
};
|
||||
|
||||
module.exports = TableHeader;
|
44
ui/src/components/table-data-table/table-row.js
Normal file
44
ui/src/components/table-data-table/table-row.js
Normal file
@ -0,0 +1,44 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const fns = require('../../shared/functions');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledRow = styled.tr`
|
||||
border: solid ${remcalc(1)} #d8d8d8;
|
||||
`;
|
||||
|
||||
const StyledTableItem = styled.td`
|
||||
padding: ${remcalc(24)};
|
||||
`;
|
||||
|
||||
const Row = ({
|
||||
dataItem = {}
|
||||
}) => {
|
||||
const _dataItem = dataItem;
|
||||
|
||||
const rowItems = Object.keys(_dataItem).map( (item, i) => {
|
||||
const value = _dataItem[item];
|
||||
|
||||
return <StyledTableItem key={i}>{value}</StyledTableItem>;
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledRow>
|
||||
{rowItems}
|
||||
</StyledRow>
|
||||
);
|
||||
};
|
||||
|
||||
Row.propTypes = {
|
||||
dataItem: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = Row;
|
8
ui/src/components/table-simple-table/index.js
Normal file
8
ui/src/components/table-simple-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-simple-table/readme.md
Normal file
41
ui/src/components/table-simple-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' />
|
||||
);
|
||||
}
|
||||
```
|
51
ui/src/components/table-simple-table/story.js
Normal file
51
ui/src/components/table-simple-table/story.js
Normal file
@ -0,0 +1,51 @@
|
||||
const React = require('react');
|
||||
const Base = require('../base');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const _table = require('./');
|
||||
|
||||
const {
|
||||
Table,
|
||||
TableHead,
|
||||
TableItem,
|
||||
TableBody,
|
||||
TableRow
|
||||
} = _table;
|
||||
|
||||
storiesOf('Table - Simple', module)
|
||||
.add('Default', () => (
|
||||
<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>
|
||||
));
|
39
ui/src/components/table-simple-table/table-body.js
Normal file
39
ui/src/components/table-simple-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-simple-table/table-cell.js
Normal file
0
ui/src/components/table-simple-table/table-cell.js
Normal file
58
ui/src/components/table-simple-table/table-head.js
Normal file
58
ui/src/components/table-simple-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-simple-table/table-item.js
Normal file
28
ui/src/components/table-simple-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-simple-table/table-row.js
Normal file
54
ui/src/components/table-simple-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;
|
49
ui/src/components/table-simple-table/table.js
Normal file
49
ui/src/components/table-simple-table/table.js
Normal file
@ -0,0 +1,49 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
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,
|
||||
title,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<StyledTableWrapper>
|
||||
{children}
|
||||
</StyledTableWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
Table.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
title: React.PropTypes.string,
|
||||
};
|
||||
|
||||
module.exports = Table;
|
@ -47,5 +47,16 @@ module.exports = {
|
||||
right: ${positions.right || 'auto'};
|
||||
bottom: ${positions.bottom || 'auto'};
|
||||
left: ${positions.left || 'auto'};
|
||||
`
|
||||
`,
|
||||
clearfix: css`
|
||||
&:before,
|
||||
&:after {
|
||||
content:"";
|
||||
display:table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear:both;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user