Merge branch 'next' of github.com:storybooks/storybook into next

addons/ondevice-knobs/src/panel.js

@@ -79,7 +79,14 @@ export default class Panel extends React.Component {
 
     this.setState({ knobs: newKnobs });
 
-    this.setState({ knobs: newKnobs }, this.emitChange(changedKnob));
+    this.setState(
+      { knobs: newKnobs },
+      this.emitChange(
+        changedKnob.type === 'number'
+          ? { ...changedKnob, value: parseFloat(changedKnob.value) }
+          : changedKnob
+      )
+    );
   }
 
   handleClick(knob) {

addons/ondevice-knobs/src/types/Array.js

@@ -14,6 +14,7 @@ const ArrayType = ({ knob, onChange }) => (
   <TextInput
     id={knob.name}
     underlineColorAndroid="transparent"
+    autoCapitalize="none"
     style={{
       borderWidth: 1,
       borderColor: '#f7f4f4',

addons/ondevice-knobs/src/types/Number.js

@@ -9,8 +9,24 @@ class NumberType extends React.Component {
     this.renderRange = this.renderRange.bind(this);
   }
 
+  numberTransformer = x => {
+    if (Number.isNaN(Number(x))) {
+      return x.substr(0, x.length - 1);
+    }
+
+    return x;
+  };
+
+  onChangeNormal = value => {
+    const { onChange } = this.props;
+
+    if (!Number.isNaN(value)) {
+      onChange(value);
+    }
+  };
+
   renderNormal() {
-    const { knob, onChange } = this.props;
+    const { knob } = this.props;
 
     return (
       <TextInput
@@ -22,10 +38,12 @@ class NumberType extends React.Component {
           padding: 5,
           color: '#555',
         }}
+        autoCapitalize="none"
         underlineColorAndroid="transparent"
-        value={knob.value.toString()}
+        value={(knob.value || '').toString()}
+        transformer={this.numberTransformer}
         keyboardType="numeric"
-        onChangeText={val => onChange(parseFloat(val))}
+        onChangeText={this.onChangeNormal}
       />
     );
   }
@@ -61,7 +79,7 @@ NumberType.defaultProps = {
 NumberType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.number,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     step: PropTypes.number,
     min: PropTypes.number,
     max: PropTypes.number,

addons/ondevice-knobs/src/types/Object.js

@@ -37,12 +37,18 @@ class ObjectType extends React.Component {
 
   handleChange = value => {
     const { onChange } = this.props;
+
+    const withReplacedQuotes = value
+      .replace(/[\u2018\u2019]/g, "'")
+      .replace(/[\u201C\u201D]/g, '"');
+
     const newState = {
-      jsonString: value,
+      jsonString: withReplacedQuotes,
     };
 
     try {
-      newState.json = JSON.parse(value.trim());
+      newState.json = JSON.parse(withReplacedQuotes.trim());
+
       onChange(newState.json);
       this.failed = false;
     } catch (err) {
@@ -70,6 +76,7 @@ class ObjectType extends React.Component {
         value={jsonString}
         onChangeText={this.handleChange}
         multiline
+        autoCapitalize="none"
         underlineColorAndroid="transparent"
       />
     );

addons/ondevice-knobs/src/types/Select.js

@@ -40,6 +40,7 @@ class SelectType extends React.Component {
             }}
             editable={false}
             value={selected}
+            autoCapitalize="none"
             underlineColorAndroid="transparent"
           />
         </ModalPicker>

addons/ondevice-knobs/src/types/Text.js

@@ -16,6 +16,7 @@ const TextType = ({ knob, onChange }) => (
     id={knob.name}
     value={knob.value}
     onChangeText={onChange}
+    autoCapitalize="none"
     underlineColorAndroid="transparent"
   />
 );