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
|
@ -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;
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
```
|
|
@ -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>
|
||||
));
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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'),
|
||||
};
|
|
@ -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' />
|
||||
);
|
||||
}
|
||||
```
|
|
@ -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>
|
||||
));
|
|
@ -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,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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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