From 244732accb45554f1daed6ae79c7baeafe984047 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 9 Jun 2017 01:43:58 +0200
Subject: [PATCH] Cherry-pick knobs fix from #1224

---
 .../src/components/ActionLogger/index.js      | 16 ++----------
 .../src/components/ActionLogger/style.js      |  2 +-
 addons/knobs/src/components/PropField.js      |  2 +-
 addons/knobs/src/components/PropForm.js       | 26 +++++++++++--------
 addons/knobs/src/components/WrapStory.js      |  2 +-
 addons/knobs/src/components/types/Number.js   |  2 +-
 6 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/addons/actions/src/components/ActionLogger/index.js b/addons/actions/src/components/ActionLogger/index.js
index 5c2566495ff0..76de8f0f477d 100644
--- a/addons/actions/src/components/ActionLogger/index.js
+++ b/addons/actions/src/components/ActionLogger/index.js
@@ -4,26 +4,14 @@ import Inspector from 'react-inspector';
 import style from './style';
 
 class ActionLogger extends Component {
-  componentDidUpdate() {
-    const latest = this.ref.latest;
-    if (latest) {
-      const borderLeft = style.action.borderLeft;
-      latest.style.borderLeft = 'solid 5px #aaa';
-      setTimeout(() => {
-        latest.style.borderLeft = borderLeft;
-      }, 300);
-    }
-  }
-
   getActionData() {
     return this.props.actions.map((action, i) => this.renderAction(action, i));
   }
 
-  renderAction(action, i) {
-    const ref = () => (this.ref = i ? '' : 'latest');
+  renderAction(action) {
     const counter = <div style={style.counter}>{action.count}</div>;
     return (
-      <div ref={ref} key={action.id} style={style.action}>
+      <div key={action.id} style={style.action}>
         <div style={style.countwrap}>
           {action.count > 1 && counter}
         </div>
diff --git a/addons/actions/src/components/ActionLogger/style.js b/addons/actions/src/components/ActionLogger/style.js
index d82497e1adad..b7afc0524051 100644
--- a/addons/actions/src/components/ActionLogger/style.js
+++ b/addons/actions/src/components/ActionLogger/style.js
@@ -17,7 +17,7 @@ export default {
     borderLeft: '5px solid white',
     borderBottom: '1px solid #fafafa',
     transition: 'all 0.1s',
-    alignItems: 'center',
+    alignItems: 'start',
   },
   countwrap: {
     paddingBottom: 2,
diff --git a/addons/knobs/src/components/PropField.js b/addons/knobs/src/components/PropField.js
index 0ecbfff94145..f75b6f125e32 100644
--- a/addons/knobs/src/components/PropField.js
+++ b/addons/knobs/src/components/PropField.js
@@ -64,7 +64,7 @@ export default class PropField extends React.Component {
 PropField.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.any,
   }),
   onChange: PropTypes.func.isRequired,
 };
diff --git a/addons/knobs/src/components/PropForm.js b/addons/knobs/src/components/PropForm.js
index 784e1e439a91..f645b02354be 100644
--- a/addons/knobs/src/components/PropForm.js
+++ b/addons/knobs/src/components/PropForm.js
@@ -35,16 +35,20 @@ export default class propForm extends React.Component {
 
     return (
       <form style={stylesheet.propForm}>
-        {knobs.map(knob =>
-          <PropField
-            key={knob.name}
-            name={knob.name}
-            type={knob.type}
-            value={knob.value}
-            knob={knob}
-            onChange={() => this._onFieldChange(knob.name, knob.type)}
-          />
-        )}
+        {knobs.map(knob => {
+          // eslint-disable-next-line react/jsx-no-bind
+          const changeHandler = this.onFieldChange.bind(this, knob.name, knob.type);
+          return (
+            <PropField
+              key={knob.name}
+              name={knob.name}
+              type={knob.type}
+              value={knob.value}
+              knob={knob}
+              onChange={changeHandler}
+            />
+          );
+        })}
       </form>
     );
   }
@@ -60,7 +64,7 @@ propForm.propTypes = {
   knobs: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
-      value: PropTypes.string,
+      value: PropTypes.any,
     })
   ),
   onFieldChange: PropTypes.func.isRequired,
diff --git a/addons/knobs/src/components/WrapStory.js b/addons/knobs/src/components/WrapStory.js
index 02b2e4fbe8a3..29568e2950ad 100644
--- a/addons/knobs/src/components/WrapStory.js
+++ b/addons/knobs/src/components/WrapStory.js
@@ -71,7 +71,7 @@ WrapStory.defaultProps = {
 WrapStory.propTypes = {
   context: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   storyFn: PropTypes.func,
-  channel: React.PropTypes.shape({
+  channel: PropTypes.shape({
     on: PropTypes.func,
     removeListener: PropTypes.func,
   }).isRequired,
diff --git a/addons/knobs/src/components/types/Number.js b/addons/knobs/src/components/types/Number.js
index 4cbf4b9b38a2..a14bceb4b0fa 100644
--- a/addons/knobs/src/components/types/Number.js
+++ b/addons/knobs/src/components/types/Number.js
@@ -74,7 +74,7 @@ NumberType.defaultProps = {
 NumberType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.number,
   }),
   onChange: PropTypes.func,
 };