fix(<Updateable />): remove shouldComponentUpdate

remove shouldComponentUpdate of Updateable component as it does not update on ticksize change. It is also hard to have a shouldComponentUpdate in this component as it's not bound to a specific set of props.
nordnet · Mar 12, 2018 · ab3abf7 · ab3abf7
1 parent eca566e
commit ab3abf7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/src/components/updateable/updateable.jsx b/src/components/updateable/updateable.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-state */
 import PropTypes from 'prop-types';
 import React from 'react';
 import { throttle, omit } from 'lodash';
@@ -14,6 +15,7 @@ export default class Updateable extends React.Component {
     this.state = {
       updateableClass: '',
       value: props.value,
+      diff: 0,
     };
 
     this.updateClass = throttle(this.updateClass.bind(this), this.props.maxUpdateFrequency);
@@ -27,17 +29,13 @@ export default class Updateable extends React.Component {
     this.updateClass(this.props.value, nextProps.value);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.state.value !== nextState.value || this.state.updateableClass !== nextState.updateableClass;
-  }
-
   updateClass(oldValue, newValue) {
     const diff = newValue - oldValue;
     if (diff === 0) return;
 
     this.setState(
       {
-        diff, // eslint-disable-line
+        diff,
         updateableClass: diff < 0 ? this.props.negativeClass : this.props.positiveClass,
         value: newValue,
       },
@@ -63,7 +61,6 @@ Updateable.defaultProps = {
   negativeClass: 'updateable--negative',
   animationTime: 300,
   maxUpdateFrequency: 1000,
-  // eslint-disable-next-line
   render: (
     { className, positiveClass, negativeClass, animationTime, maxUpdateFrequency, ...rest }, // eslint-disable-line
     { updateableClass, value: stateValue },

diff --git a/src/components/updateable/updateable.md b/src/components/updateable/updateable.md
@@ -9,20 +9,16 @@
             animation-timing-function: ease-in-out;
             display: inline-block;
           }
-
           .updateable--positive {
             animation-name: bounceUp;
           }
-
           .updateable--negative {
             animation-name: bounceDown;
           }
-
           @keyframes bounceUp {
             0%, 100% { transform: translateY(0);  }
             50% { transform: translateY(-3px); }
           }
-
           @keyframes bounceDown {
             0%, 100% { transform: translateY(0);  }
             50% { transform: translateY(3px); }
@@ -31,14 +27,18 @@
       />
       Send updates every: <input style={{ width: 30 }} value={state.interval} onChange={(e) => setState({ interval: +e.target.value })} /> ms
       <button onClick={() => setInterval(() => setState({ updateable: +Math.random().toFixed(2) }), state.interval)}>Test Update</button><br/><br/>
+      This value will respect locale changes:<br />
+      <span style={{marginRight: '2rem'}}>
+          <Updateable value={ state.updateable } decimals={4} />
+      </span>
+      <br /><br />
+      This value overrides render and adds an icon that shows up after first update:<br/>
       <span style={{marginRight: '2rem'}}>
-        <Updateable value={ state.updateable } decimals={4} />
-        <br />
         <Updateable value={ state.updateable } render={(props, state) => (
           <span className={props.className + ' ' + state.updateableClass}>
-              {state.value.toFixed(2)}
-              {' '}
-              { state.diff > 0 ? '⬆️' : '⬇️' }
+            {state.value.toFixed(2)}
+            {' '}
+            { state.diff === 0 ? '' : (state.diff > 0 ? '⬆️' : '⬇️') }
           </span>
         )} />
       </span>