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:
Alex Windett 2017-01-20 14:47:58 +00:00
commit fc9d940986
17 changed files with 681 additions and 1 deletions

View 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;

View 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>
);
}
```

View 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>
));

View 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;

View 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;

View 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;

View 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;

View 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'),
};

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

View 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>
));

View 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;

View 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;

View 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;

View 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;

View 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;

View File

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