-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* [package.json] upgrade dependencies * [TextField.css] fix linter error * [Table] implementation * [Table] unit test * [Table] allow custom className, spread additional attributes
- Loading branch information
1 parent
3391355
commit a2a5e79
Showing
14 changed files
with
338 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import Grid, {GridItem} from '../../../src/Grid'; | ||
| import Page from '../Page'; | ||
| import Paper from '../../../src/Paper'; | ||
| import React from 'react'; | ||
| import Table, {TableBody, TableCell, TableHead, TableRow} from '../../../src/Table'; | ||
| import Typography from '../../../src/Typography'; | ||
|
|
||
| class TabsDocs extends React.Component { | ||
| render() { | ||
| return ( | ||
| <Page | ||
| componentName="Table" | ||
| examples={ | ||
| <Grid gutter={16}> | ||
| <GridItem xs={12}> | ||
| <Typography component="p"> | ||
| Simple table. | ||
| </Typography> | ||
| <Paper elevation={3}> | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell>Name</TableCell> | ||
| <TableCell>Age</TableCell> | ||
| <TableCell>Street Address</TableCell> | ||
| <TableCell>ZIP Code</TableCell> | ||
| <TableCell>State</TableCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| <TableRow> | ||
| <TableCell>Johnathan Doe</TableCell> | ||
| <TableCell>25</TableCell> | ||
| <TableCell>700 1st Ave</TableCell> | ||
| <TableCell>90210</TableCell> | ||
| <TableCell>CA</TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell>Jane Doe</TableCell> | ||
| <TableCell>23</TableCell> | ||
| <TableCell>15 Spruce St</TableCell> | ||
| <TableCell>92101</TableCell> | ||
| <TableCell>CA</TableCell> | ||
| </TableRow> | ||
| </TableBody> | ||
| </Table> | ||
| </Paper> | ||
| </GridItem> | ||
| </Grid> | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default TabsDocs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .container { | ||
| overflow-x: auto; | ||
| } | ||
|
|
||
| .table { | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import makeClass from 'classnames'; | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import Styles from './Table.css'; | ||
|
|
||
| class Table extends React.Component { | ||
| render() { | ||
| const {children, className, ...other} = this.props; | ||
| return ( | ||
| <div className={makeClass(Styles.container, className)}> | ||
| <table className={Styles.table} {...other}> | ||
| {children} | ||
| </table> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| Table.propTypes = { | ||
| children: PropTypes.node, | ||
| className: PropTypes.string | ||
| }; | ||
|
|
||
| Table.defaultProps = { | ||
| children: null, | ||
| className: '' | ||
| }; | ||
|
|
||
| export default Table; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /* eslint-env mocha */ | ||
|
|
||
| import assert from 'assert'; | ||
| import {createMount} from '../../test/utils'; | ||
| import React from 'react'; | ||
| import Table, {TableBody, TableCell, TableHead, TableRow} from './index'; | ||
|
|
||
| describe('Tabs', () => { | ||
| let mount; | ||
|
|
||
| beforeEach(() => { | ||
| mount = createMount(); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| mount.cleanUp(); | ||
| }); | ||
|
|
||
| it('should deep render', () => { | ||
| const component = ( | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell>Name</TableCell> | ||
| <TableCell>Age</TableCell> | ||
| <TableCell>Street Address</TableCell> | ||
| <TableCell>ZIP Code</TableCell> | ||
| <TableCell>State</TableCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| <TableRow> | ||
| <TableCell>Johnathan Doe</TableCell> | ||
| <TableCell>25</TableCell> | ||
| <TableCell>700 1st Ave</TableCell> | ||
| <TableCell>90210</TableCell> | ||
| <TableCell>CA</TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell>Jane Doe</TableCell> | ||
| <TableCell>23</TableCell> | ||
| <TableCell>15 Spruce St</TableCell> | ||
| <TableCell>92101</TableCell> | ||
| <TableCell>CA</TableCell> | ||
| </TableRow> | ||
| </TableBody> | ||
| </Table> | ||
| ); | ||
| const wrapper = mount(component); | ||
| assert(wrapper); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
|
|
||
| class TableBody extends React.Component { | ||
| render() { | ||
| const {children, ...other} = this.props; | ||
| return ( | ||
| <tbody {...other}> | ||
| {children} | ||
| </tbody> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| TableBody.propTypes = { | ||
| children: PropTypes.node | ||
| }; | ||
|
|
||
| TableBody.defaultProps = { | ||
| children: null | ||
| }; | ||
|
|
||
| export default TableBody; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| .cell { | ||
| border-bottom: 1px solid rgb(235, 235, 235); | ||
| color: $black87; | ||
| font-size: 13px; | ||
| height: 48px; | ||
| padding-left: 24px; | ||
| padding-right: 56px; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .cell:first-child { | ||
| text-align: left; | ||
| } | ||
|
|
||
| .cell:not(:first-child) { | ||
| text-align: right; | ||
| } | ||
|
|
||
| .head { | ||
| color: $black54; | ||
| font-size: 12px; | ||
| font-weight: 500; | ||
| height: 56px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import makeClass from 'classnames'; | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import Styles from './TableCell.css'; | ||
|
|
||
| class TableCell extends React.Component { | ||
| render() { | ||
| const { | ||
| children, | ||
| className, | ||
| head, | ||
| ...other | ||
| } = this.props; | ||
| const Component = head ? 'th' : 'td'; | ||
| const classnames = makeClass(Styles.cell, { | ||
| [Styles.head]: head | ||
| }, className); | ||
|
|
||
| return ( | ||
| <Component className={classnames} {...other}> | ||
| {children} | ||
| </Component> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| TableCell.propTypes = { | ||
| children: PropTypes.node, | ||
| className: PropTypes.string, | ||
| head: PropTypes.bool | ||
| }; | ||
|
|
||
| TableCell.defaultProps = { | ||
| children: null, | ||
| className: '', | ||
| head: false | ||
| }; | ||
|
|
||
| export default TableCell; |
Oops, something went wrong.