react-demo - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/Controls/ControlNumber.js

+'use strict';
+
+exports.__esModule = true;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Group = require('./Group');
+
+var _Group2 = _interopRequireDefault(_Group);
+
+var _InputNumber = require('./InputNumber');
+
+var _InputNumber2 = _interopRequireDefault(_InputNumber);
+
+exports['default'] = _react2['default'].createClass({
+
+  displayName: 'Demo.Controls.ControlNumber',
+
+  propTypes: {
+    name: _react.PropTypes.string.isRequired,
+    value: _react.PropTypes.string.isRequired,
+    onChange: _react.PropTypes.func.isRequired
+  },
+
+  render: function render() {
+    var _props = this.props;
+    var name = _props.name;
+    var value = _props.value;
+    var onChange = _props.onChange;
+
+    return _react2['default'].createElement(
+      _Group2['default'],
+      { name: name },
+      _react2['default'].createElement(_InputNumber2['default'], { value: value, onChange: onChange })
+    );
+  }
+});
+module.exports = exports['default'];

dist/Controls/InputNumber.js

+'use strict';
+
+exports.__esModule = true;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function styles(invalid) {
+  return {
+    display: 'block',
+    width: '100%',
+    boxSizing: 'border-box',
+    backgroundColor: invalid ? 'pink' : 'white'
+  };
+}
+
+exports['default'] = _react2['default'].createClass({
+
+  displayName: 'Demo.Controls.InputNumber',
+
+  propTypes: {
+    value: _react.PropTypes.string.isRequired,
+    onChange: _react.PropTypes.func.isRequired
+  },
+
+  getInitialState: function getInitialState() {
+    return {
+      strValue: String(this.props.value),
+      invalid: false
+    };
+  },
+
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value) {
+      this.setState({
+        strValue: String(nextProps.value),
+        invalid: false
+      });
+    }
+  },
+
+  handleChange: function handleChange(event) {
+    var strValue = event.target.value;
+    var value = Number(strValue);
+    var invalid = Number.isNaN(value);
+    this.setState({ strValue: strValue, invalid: invalid });
+    if (!invalid) {
+      this.props.onChange(value);
+    }
+  },
+
+  render: function render() {
+    var _state = this.state;
+    var strValue = _state.strValue;
+    var invalid = _state.invalid;
+
+    return _react2['default'].createElement('input', {
+      type: 'text',
+      style: styles(invalid),
+      value: strValue,
+      onChange: this.handleChange
+    });
+  }
+
+});
+module.exports = exports['default'];

dist/Controls/InputJson.js

@@ -59,7 +59,12 @@ 'use strict';
   handleChange: function handleChange(event) {
-    var nextStrValue = event.target.value;
+    var strValue = event.target.value;
+    var invalid = true;
+    var value = undefined;
     try {
-      this.props.onChange(JSON.parse(nextStrValue));
-    } catch (e) {
-      this.setState({ strValue: nextStrValue, invalid: true });
+      value = JSON.parse(strValue);
+      invalid = false;
+    } catch (e) {} // eslint-disable-line no-empty
+    this.setState({ strValue: strValue, invalid: invalid });
+    if (!invalid) {
+      this.props.onChange(value);
     }
@@ -66,0 +71,0 @@ },

dist/props.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _ControlsControlNumber = require('./Controls/ControlNumber');
+
+var _ControlsControlNumber2 = _interopRequireDefault(_ControlsControlNumber);
+
 var _ControlsControlText = require('./Controls/ControlText');
@@ -54,2 +58,10 @@
 
+  number: function number(initialValue) {
+    return {
+      type: 'value',
+      Control: _ControlsControlNumber2['default'],
+      initialValue: initialValue
+    };
+  },
+
   text: function text(initialValue) {
@@ -56,0 +68,0 @@ return {

package.json

 {
   "name": "react-demo",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A React-component for creating demos of other components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -109,2 +109,17 @@ # React-demo [![Build Status](https://travis-ci.org/rpominov/react-demo.svg?branch=master)](https://travis-ci.org/rpominov/react-demo)
 
+#### `props.number(initialValue)`
+
+Creates a number input in the panel.
+
+```js
+import Demo, {props as P} from 'react-demo'
+
+<Demo
+  ...
+  props={{
+    foo: P.number(10),
+  }}
+/>
+```
+
 #### `props.text(initialValue)`
@@ -111,0 +126,0 @@

No alert changes

Improved metrics

Total package byte prevSize

47245

7.54%

Number of package files

31

6.9%

Lines of code

1110

9.47%

Number of lines in readme file

292

5.42%

No dependency changes