Max width NaN fix (TanStack#415)

ldstein · tannerlinsley · commit 098b1fec5143 · 2017-08-01T21:27:40.000-06:00
* Added button to reset table state in Controlled Component story

* Fix maxWidth style when value is NaN

* code formatting
diff --git a/docs/src/stories/ControlledTable.js b/docs/src/stories/ControlledTable.js
@@ -21,7 +21,8 @@ const columns = [{
   }, {
     Header: 'Last Name',
     id: 'lastName',
-    accessor: d => d.lastName
+    accessor: d => d.lastName,
+    width: 170
   }]
 }, {
   Header: 'Info',
@@ -31,21 +32,31 @@ const columns = [{
   }]
 }]
 
+function makeDefaultState()
+{
+  return {
+    sorted: [],
+    page: 0,
+    pageSize: 10,
+    expanded: {},
+    resized: [],
+    filtered: []
+  }
+}
+
 class Story extends React.PureComponent {
   constructor () {
     super()
-    this.state = {
-      sorted: [],
-      page: 0,
-      pageSize: 10,
-      expanded: {},
-      resized: [],
-      filtered: []
-    }
+    this.state = makeDefaultState()
+    this.resetState = this.resetState.bind(this)
+  }
+  resetState(){
+    this.setState(makeDefaultState())
   }
   render () {
     return (
       <div>
+
         <div className='table-wrap'>
           <ReactTable
             className='-striped -highlight'
@@ -70,6 +81,7 @@ class Story extends React.PureComponent {
           />
         </div>
         <br />
+        <div style={{float:'right'}}><button onClick={this.resetState}>Reset State</button></div>
         <pre><code><strong>this.state ===</strong> {JSON.stringify(this.state, null, 2)}</code></pre>
         <br />
       </div>
diff --git a/src/index.js b/src/index.js
@@ -261,8 +261,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
 
       const flexStyles = {
         flex: `${flex} 0 auto`,
-        width: `${width}px`,
-        maxWidth: `${maxWidth}px`,
+        width: _.asPx(width),
+        maxWidth: _.asPx(maxWidth),
       }
 
       return (
@@ -376,8 +376,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           style={{
             ...styles,
             flex: `${width} 0 auto`,
-            width: `${width}px`,
-            maxWidth: `${maxWidth}px`,
+            width: _.asPx(width),
+            maxWidth: _.asPx(maxWidth),
           }}
           toggleSort={e => {
             isSortable && this.sortColumn(column, e.shiftKey)
@@ -475,8 +475,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           style={{
             ...styles,
             flex: `${width} 0 auto`,
-            width: `${width}px`,
-            maxWidth: `${maxWidth}px`,
+            width: _.asPx(width),
+            maxWidth: _.asPx(maxWidth),
           }}
           {...rest}
         >
@@ -706,8 +706,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                   style={{
                     ...styles,
                     flex: `${width} 0 auto`,
-                    width: `${width}px`,
-                    maxWidth: `${maxWidth}px`,
+                    width: _.asPx(width),
+                    maxWidth: _.asPx(maxWidth),
                   }}
                   {...interactionProps}
                   {...tdProps.rest}
@@ -798,8 +798,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           style={{
             ...styles,
             flex: `${flex} 0 auto`,
-            width: `${width}px`,
-            maxWidth: `${maxWidth}px`,
+            width: _.asPx(width),
+            maxWidth: _.asPx(maxWidth),
           }}
           {...tdProps.rest}
         >
@@ -878,8 +878,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           style={{
             ...styles,
             flex: `${width} 0 auto`,
-            width: `${width}px`,
-            maxWidth: `${maxWidth}px`,
+            width: _.asPx(width),
+            maxWidth: _.asPx(maxWidth),
           }}
           {...columnProps.rest}
           {...tFootTdProps.rest}
diff --git a/src/utils.js b/src/utils.js
@@ -19,6 +19,7 @@ export default {
   compactObject,
   isSortingDesc,
   normalizeComponent,
+  asPx,
 }
 
 function get (obj, path, def) {
@@ -142,6 +143,11 @@ function groupBy (xs, key) {
   }, {})
 }
 
+function asPx (value) {
+  value = Number(value)
+  return (Number.isNaN(value)) ? null : value + 'px'
+}
+
 function isArray (a) {
   return Array.isArray(a)
 }

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export default {`
`19`	`19`	`compactObject,`
`20`	`20`	`isSortingDesc,`
`21`	`21`	`normalizeComponent,`
	`22`	`+ asPx,`
`22`	`23`	`}`
`23`	`24`
`24`	`25`	`function get (obj, path, def) {`
`@@ -142,6 +143,11 @@ function groupBy (xs, key) {`
`142`	`143`	`}, {})`
`143`	`144`	`}`
`144`	`145`
	`146`	`+function asPx (value) {`
	`147`	`+ value = Number(value)`
	`148`	`+ return (Number.isNaN(value)) ? null : value + 'px'`
	`149`	`+}`
	`150`	`+`
`145`	`151`	`function isArray (a) {`
`146`	`152`	`return Array.isArray(a)`
`147`	`153`	`}`