Merge pull request #46 from b2wads/hotfix-tablefixed

Deixa altura do row como prop
b2wads · Sep 5, 2019 · 68e3c02 · 68e3c02
2 parents 28c5fbc + a2fe748
commit 68e3c02
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 18 deletions.
diff --git 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
@@ -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}
           />
         </div>
         <div className={styles.fullWidth}>
@@ -80,6 +87,8 @@ class TableFixed extends PureComponent {
             data={data}
             dataFooter={dataFooterRight}
             specialCase={specialCase}
+            rowHeight={rowHeight}
+            layout={layout}
           />
         </div>
       </div>

diff --git 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
@@ -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
@@ -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 (
-      <tr className={cx(styles.rowHead, { [styles.isSticky]: isSticky })}>
+      <tr style={{ height: rowHeight }} className={cx(styles.rowHead, { [styles.isSticky]: isSticky })}>
         {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 (
-      <tr className={cx(styles.rowFoot, { [styles.isSticky]: isSticky })}>
+      <tr style={{ height: rowHeight }} className={cx(styles.rowFoot, { [styles.isSticky]: isSticky })}>
         {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) => (
-      <tr key={uniqueId()} className={cx(styles.row, this.generateSpecialStyle(specialCase, infoRow))}>
+      <tr
+        style={{ height: rowHeight }}
+        key={uniqueId()}
+        className={cx(styles.row, this.generateSpecialStyle(specialCase, infoRow))}
+      >
         {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 {
       <div style={wrapSizes} className={wrapClass} {...rest}>
         <table className={tableClass}>
           <thead className={styles.tableHead}>
-            {this.renderHeadRow(schema, isSticky)}
+            {this.renderHeadRow(schema, isSticky, rowHeight)}
           </thead>
 
           <tbody className={styles.tableBody}>
-            {this.verifyResults(data, schema, loadingMessage, notFoundMessage, specialCase)}
+            {this.verifyResults(data, schema, loadingMessage, notFoundMessage, specialCase, rowHeight)}
           </tbody>
           {dataFooter &&
             <tfoot>
-              {this.renderFootRow(dataFooter, true)}
+              {this.renderFootRow(dataFooter, true, rowHeight)}
             </tfoot>}
         </table>
       </div>

diff --git 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 (
+    <Table
+      layout="fixed"
+      rowHeight="80px"
+      schema={schema}
+      data={simpledata}
+    />
+  );
+});
+
 stories.add('Sticky', withState({ data: null })(({ store }) => {
   fetch('https://randomuser.me/api/?results=10')
     .then(res => res.json())