Merge pull request #1233 from storybooks/1220-fix-knobs-editing

Fixed knobs addon editing bug
storybookjs · Jun 9, 2017 · 96e99a3 · 96e99a3
2 parents c0dbffd + 6807b5e
commit 96e99a3
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 39 deletions.
diff --git 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
@@ -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/info/src/components/Node.js b/addons/info/src/components/Node.js
@@ -106,7 +106,7 @@ export default function Node(props) {
         />
         <span style={tagStyle}>&gt;</span>
       </div>
-      {React.Children.map(children, childElement => (
+      {React.Children.map(children, childElement =>
         <Node
           node={childElement}
           depth={depth + 1}
@@ -115,7 +115,7 @@ export default function Node(props) {
           maxPropArrayLength={maxPropArrayLength}
           maxPropStringLength={maxPropStringLength}
         />
-      ))}
+      )}
       <div style={containerStyleCopy}>
         <span style={tagStyle}>&lt;/{name}&gt;</span>
       </div>

diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
@@ -98,7 +98,7 @@ export default function PropTable(props) {
         </tr>
       </thead>
       <tbody>
-        {array.map(row => (
+        {array.map(row =>
           <tr key={row.property}>
             <td>{row.property}</td>
             <td>{row.propType}</td>
@@ -110,7 +110,7 @@ export default function PropTable(props) {
             </td>
             <td>{row.description}</td>
           </tr>
-        ))}
+        )}
       </tbody>
     </table>
   );

diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
@@ -264,7 +264,7 @@ export default class Story extends React.Component {
       <div>
         <h1 style={this.state.stylesheet.source.h1}>Story Source</h1>
         <Pre>
-          {React.Children.map(this.props.children, (root, idx) => (
+          {React.Children.map(this.props.children, (root, idx) =>
             <Node
               key={idx}
               node={root}
@@ -274,7 +274,7 @@ export default class Story extends React.Component {
               maxPropArrayLength={maxPropArrayLength}
               maxPropStringLength={maxPropStringLength}
             />
-          ))}
+          )}
         </Pre>
       </div>
     );
@@ -329,7 +329,7 @@ export default class Story extends React.Component {
     array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
 
     const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
-    const propTables = array.map(type => (
+    const propTables = array.map(type =>
       <div key={type.name}>
         <h2 style={this.state.stylesheet.propTableHead}>
           "{type.displayName || type.name}" Component
@@ -341,7 +341,7 @@ export default class Story extends React.Component {
           maxPropStringLength={maxPropStringLength}
         />
       </div>
-    ));
+    );
 
     if (!propTables || propTables.length === 0) {
       return null;

diff --git 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
@@ -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
@@ -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
@@ -74,7 +74,7 @@ NumberType.defaultProps = {
 NumberType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.number,
   }),
   onChange: PropTypes.func,
 };

diff --git a/app/react/src/server/middleware.js b/app/react/src/server/middleware.js
@@ -50,14 +50,14 @@ export default function(configDir) {
     };
 
     router.get('/', (req, res) => {
-      const headHtml = getManagerHeadHtml(configDir)
+      const headHtml = getManagerHeadHtml(configDir);
       res.send(getIndexHtml({ publicPath, headHtml }));
     });
 
     router.get('/iframe.html', (req, res) => {
       const headHtml = getHeadHtml(configDir);
       res.send(getIframeHtml({ ...data, headHtml, publicPath }));
-    }); 
+    });
 
     if (stats.toJson().errors.length) {
       webpackReject(stats);