-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Convert Table to FunctionComponent and wrap with forwardRef (#318)
* refactor: move docs into new /documentation folder * refactor: introduce index rollup class for Table family * refactor: convert Table family to FunctionComponent wrapped with refForward * docs: add ref logger to table docs * chore: update changelog
- Loading branch information
1 parent
266ddca
commit 62f1043
Showing
13 changed files
with
595 additions
and
571 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
File renamed without changes.
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,368 @@ | ||
| // Libraries | ||
| import React, {RefObject, createRef} from 'react' | ||
| import marked from 'marked' | ||
|
|
||
| // Storybook | ||
| import {storiesOf} from '@storybook/react' | ||
| import {withKnobs, select, text, boolean, object} from '@storybook/addon-knobs' | ||
| import {mapEnumKeys} from '../../../Utils/storybook' | ||
| import {jsxDecorator} from 'storybook-addon-jsx' | ||
|
|
||
| // Components | ||
| import { | ||
| Table, | ||
| TableRef, | ||
| TableHeaderRef, | ||
| TableHeaderCellRef, | ||
| TableBodyRef, | ||
| TableRowRef, | ||
| TableCellRef, | ||
| TableFooterRef, | ||
| } from '../' | ||
|
|
||
| // Types | ||
| import { | ||
| Alignment, | ||
| ComponentSize, | ||
| BorderType, | ||
| ComponentColor, | ||
| } from '../../../Types' | ||
|
|
||
| // Notes | ||
| import TableReadme from './Table.md' | ||
|
|
||
| const tableStories = storiesOf('Components|Table/Family', module) | ||
| .addDecorator(withKnobs) | ||
| .addDecorator(jsxDecorator) | ||
|
|
||
| tableStories.add( | ||
| 'Table', | ||
| () => { | ||
| const tableRef: RefObject<TableRef> = createRef() | ||
| const tableHeaderRef: RefObject<TableHeaderRef> = createRef() | ||
| const tableHeaderCellRef: RefObject<TableHeaderCellRef> = createRef() | ||
| const tableBodyRef: RefObject<TableBodyRef> = createRef() | ||
| const tableRowRef: RefObject<TableRowRef> = createRef() | ||
| const tableCellRef: RefObject<TableCellRef> = createRef() | ||
| const tableFooterRef: RefObject<TableFooterRef> = createRef() | ||
|
|
||
| const logRefs = (): void => { | ||
| /* eslint-disable */ | ||
| console.log('Table', tableRef.current) | ||
| console.log('TableHeader', tableHeaderRef.current) | ||
| console.log('TableHeaderCell', tableHeaderCellRef.current) | ||
| console.log('TableBody', tableBodyRef.current) | ||
| console.log('TableRow', tableRowRef.current) | ||
| console.log('TableCell', tableCellRef.current) | ||
| console.log('TableFooter', tableFooterRef.current) | ||
| /* eslint-enable */ | ||
| } | ||
|
|
||
| return ( | ||
| <div className="story--example"> | ||
| <div className="story--test-buttons"> | ||
| <button onClick={logRefs}>Log Ref</button> | ||
| </div> | ||
| <Table.Table | ||
| ref={tableRef} | ||
| cellPadding={ | ||
| ComponentSize[ | ||
| select('cellPadding', mapEnumKeys(ComponentSize), 'Small') | ||
| ] | ||
| } | ||
| fontSize={ | ||
| ComponentSize[ | ||
| select('fontSize', mapEnumKeys(ComponentSize), 'Medium') | ||
| ] | ||
| } | ||
| borders={ | ||
| BorderType[select('borders', mapEnumKeys(BorderType), 'Horizontal')] | ||
| } | ||
| striped={boolean('striped', false)} | ||
| highlight={boolean('highlight', false)} | ||
| style={object('Table - width', {width: '100%'})} | ||
| > | ||
| <Table.Header ref={tableHeaderRef}> | ||
| <Table.Row ref={tableRowRef}> | ||
| <Table.HeaderCell | ||
| ref={tableHeaderCellRef} | ||
| width={text('Name - width', '30%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Name - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| Name | ||
| </Table.HeaderCell> | ||
| <Table.HeaderCell | ||
| width={text('Description - width', '50%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Description - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| Description | ||
| </Table.HeaderCell> | ||
| <Table.HeaderCell | ||
| width={text('Price - width', '20%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Price - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Right' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| Price | ||
| </Table.HeaderCell> | ||
| </Table.Row> | ||
| </Table.Header> | ||
| <Table.Body ref={tableBodyRef}> | ||
| <Table.Row | ||
| color={ | ||
| ComponentColor[ | ||
| select( | ||
| 'Peach - row color', | ||
| mapEnumKeys(ComponentColor), | ||
| 'Default' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| <Table.Cell | ||
| ref={tableCellRef} | ||
| width={text('Name - width', '30%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Name - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| Peach | ||
| </Table.Cell> | ||
| <Table.Cell | ||
| width={text('Description - width', '50%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Description - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| A sweet fruit that makes a great pie | ||
| </Table.Cell> | ||
| <Table.Cell | ||
| width={text('Price - width', '20%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Price - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Right' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| $5.00 | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row | ||
| color={ | ||
| ComponentColor[ | ||
| select( | ||
| 'Pineapple - row color', | ||
| mapEnumKeys(ComponentColor), | ||
| 'Default' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| <Table.Cell | ||
| width={text('Name - width', '30%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Name - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| Pineapple | ||
| </Table.Cell> | ||
| <Table.Cell | ||
| width={text('Description - width', '50%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Description - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| Tropical, highly sought after, and a requirement for a Piña | ||
| Colada | ||
| </Table.Cell> | ||
| <Table.Cell | ||
| width={text('Price - width', '20%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Price - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Right' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| $8.00 | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row | ||
| color={ | ||
| ComponentColor[ | ||
| select( | ||
| 'Yuzu - row color', | ||
| mapEnumKeys(ComponentColor), | ||
| 'Default' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| <Table.Cell | ||
| width={text('Name - width', '30%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Name - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| Yuzu | ||
| </Table.Cell> | ||
| <Table.Cell | ||
| width={text('Description - width', '50%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Description - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| A golden citrus fruit from Japan & China with a powerful aroma | ||
| </Table.Cell> | ||
| <Table.Cell | ||
| width={text('Price - width', '20%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Price - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Right' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| $11.00 | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row | ||
| color={ | ||
| ComponentColor[ | ||
| select( | ||
| 'Lychee - row color', | ||
| mapEnumKeys(ComponentColor), | ||
| 'Default' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| <Table.Cell | ||
| width={text('Name - width', '30%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Name - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| Lychee | ||
| </Table.Cell> | ||
| <Table.Cell | ||
| width={text('Description - width', '50%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Description - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Left' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| A light and refreshing fruit encased in a spiky shell | ||
| </Table.Cell> | ||
| <Table.Cell | ||
| width={text('Price - width', '20%')} | ||
| horizontalAlignment={ | ||
| Alignment[ | ||
| select( | ||
| 'Price - horizontalAlignment', | ||
| mapEnumKeys(Alignment), | ||
| 'Right' | ||
| ) | ||
| ] | ||
| } | ||
| > | ||
| $2.00 | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| </Table.Body> | ||
| <Table.Footer ref={tableFooterRef}> | ||
| <Table.Row> | ||
| <Table.Cell colSpan={3}> | ||
| *All fruits are shipped in padded boxes to ensure quality | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| </Table.Footer> | ||
| </Table.Table> | ||
| </div> | ||
| ) | ||
| }, | ||
| { | ||
| readme: { | ||
| content: marked(TableReadme), | ||
| }, | ||
| } | ||
| ) |
Oops, something went wrong.