diff --git a/package.json b/package.json index 8eb5c7416..7e69f650e 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "grimorio-ui", "sideEffects": false, - "version": "6.0.0", + "version": "6.0.1", "description": "React UI Kit that works like magic", "main": "lib/index.js", "scripts": { diff --git a/source/components/table-fixed/table-fixed-component.js b/source/components/table-fixed/table-fixed-component.js index 0f942fd51..b86998ea0 100644 --- a/source/components/table-fixed/table-fixed-component.js +++ b/source/components/table-fixed/table-fixed-component.js @@ -34,7 +34,10 @@ class TableFixed extends PureComponent { }) ), isMobile: PropTypes.bool, + rowHeight: PropTypes.string, + layout: PropTypes.oneOf(['auto', 'fixed']), }; + static defaultProps = {}; render() { @@ -49,6 +52,8 @@ class TableFixed extends PureComponent { widthFixedTable, specialCase, isMobile, + rowHeight, + layout, } = this.props; const wrapSizes = { maxWidth: width || 'auto', @@ -69,6 +74,8 @@ class TableFixed extends PureComponent { data={data} dataFooter={dataFooterLeft} specialCase={specialCase} + rowHeight={rowHeight} + layout={layout} />
@@ -80,6 +87,8 @@ class TableFixed extends PureComponent { data={data} dataFooter={dataFooterRight} specialCase={specialCase} + rowHeight={rowHeight} + layout={layout} />
diff --git a/source/components/table-fixed/table-fixed.stories.js b/source/components/table-fixed/table-fixed.stories.js index 9cd76881c..dc24851c6 100644 --- a/source/components/table-fixed/table-fixed.stories.js +++ b/source/components/table-fixed/table-fixed.stories.js @@ -107,6 +107,7 @@ stories.add( isSticky width="700px" height="300px" + rowHeight="60px" schemaRight={schemaRight} schemaLeft={schemaLeft} data={store.state.data} diff --git a/source/components/table-fixed/table-fixed.styl b/source/components/table-fixed/table-fixed.styl index 0f9ee5a31..a04c4356e 100644 --- a/source/components/table-fixed/table-fixed.styl +++ b/source/components/table-fixed/table-fixed.styl @@ -24,12 +24,6 @@ flex: 1; } -.table { - tr { - height: 60px; - } -} - .stickShort { left: initial; z-index: 0; diff --git a/source/components/table/table-component.js b/source/components/table/table-component.js index 137dd6dac..7959600f8 100644 --- a/source/components/table/table-component.js +++ b/source/components/table/table-component.js @@ -36,6 +36,7 @@ class Table extends PureComponent { width: PropTypes.string, height: PropTypes.string, isSticky: PropTypes.bool, + rowHeight: PropTypes.string, }; static defaultProps = { @@ -47,9 +48,9 @@ class Table extends PureComponent { isSticky: false, }; - renderHeadRow(schema, isSticky) { + renderHeadRow(schema, isSticky, rowHeight) { return ( - + {Object.keys(schema).map((key, index) => { const currentSchema = schema[key]; const headClass = cx(styles.cellHead, currentSchema.className, { [styles.isSticky]: isSticky }); @@ -66,9 +67,9 @@ class Table extends PureComponent { ); } - renderFootRow(dataFooter, isSticky) { + renderFootRow(dataFooter, isSticky, rowHeight) { return ( - + {Object.keys(dataFooter).map((key, index) => { const currentData = dataFooter[key]; const headClass = cx(styles.cellFoot, currentData.className, { [styles.isSticky]: isSticky }); @@ -97,9 +98,13 @@ class Table extends PureComponent { : {}; } - renderRow(data, schema, specialCase) { + renderRow(data, schema, specialCase, rowHeight) { return data.map((infoRow, index) => ( - + {Object.keys(schema).map(key => { const currentSchema = schema[key]; if (Object.keys(currentSchema).length) { @@ -124,13 +129,13 @@ class Table extends PureComponent { ); } - verifyResults(data, schema, loadingMessage, notFoundMessage, specialCase) { + verifyResults(data, schema, loadingMessage, notFoundMessage, specialCase, rowHeight) { if (!Array.isArray(data)) { return this.renderEmptyResults(loadingMessage, schema); } else if (data.length === 0) { return this.renderEmptyResults(notFoundMessage, schema); } else { - return this.renderRow(data, schema, specialCase); + return this.renderRow(data, schema, specialCase, rowHeight); } } @@ -151,6 +156,7 @@ class Table extends PureComponent { specialCase, isSticky, dataFooter, + rowHeight, ...rest } = this.props; @@ -173,15 +179,15 @@ class Table extends PureComponent {
- {this.renderHeadRow(schema, isSticky)} + {this.renderHeadRow(schema, isSticky, rowHeight)} - {this.verifyResults(data, schema, loadingMessage, notFoundMessage, specialCase)} + {this.verifyResults(data, schema, loadingMessage, notFoundMessage, specialCase, rowHeight)} {dataFooter && - {this.renderFootRow(dataFooter, true)} + {this.renderFootRow(dataFooter, true, rowHeight)} }
diff --git a/source/components/table/table.stories.js b/source/components/table/table.stories.js index a74cf207a..395ae4038 100644 --- a/source/components/table/table.stories.js +++ b/source/components/table/table.stories.js @@ -75,6 +75,17 @@ stories.add('Fixed', () => { ); }); +stories.add('Row Height', () => { + return ( + + ); +}); + stories.add('Sticky', withState({ data: null })(({ store }) => { fetch('https://randomuser.me/api/?results=10') .then(res => res.json())