react-key-value - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

dist/key-value.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -22,203 +24,239 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var c = 'key-value';
 
-exports.default = _react2.default.createClass({
-  displayName: 'KeyValue',
-  propTypes: {
-    rows: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-      keyItem: _propTypes2.default.string,
-      valueItem: _propTypes2.default.string
-    })),
-    onChange: _propTypes2.default.func,
-    customAddButtonRenderer: _propTypes2.default.func,
-    keyInputPlaceholder: _propTypes2.default.string,
-    valueInputPlaceholder: _propTypes2.default.string,
-    hideLabels: _propTypes2.default.bool
-  },
-  getDefaultProps: function getDefaultProps() {
-    return {
-      rows: [],
-      onChange: function onChange() {},
-      keyInputPlaceholder: '',
-      valueInputPlaceholder: '',
-      hideLabels: false
+var KeyValue = function (_React$Component) {
+  _inherits(KeyValue, _React$Component);
+
+  function KeyValue(props) {
+    _classCallCheck(this, KeyValue);
+
+    var _this = _possibleConstructorReturn(this, (KeyValue.__proto__ || Object.getPrototypeOf(KeyValue)).call(this, props));
+
+    _this.handleAddNew = function () {
+      _this.setState({
+        rows: [].concat(_toConsumableArray(_this.state.rows), [{
+          keyItem: '',
+          valueItem: ''
+        }])
+      }, function () {
+        _this.props.onChange([].concat(_toConsumableArray(_this.state.rows)));
+      });
     };
-  },
-  getInitialState: function getInitialState() {
-    return {
-      rows: [].concat(_toConsumableArray(this.props.rows))
+
+    _this.state = {
+      rows: [].concat(_toConsumableArray(_this.props.rows))
     };
-  },
-  handleAddNew: function handleAddNew() {
-    var _this = this;
+    return _this;
+  }
 
-    this.setState({
-      rows: [].concat(_toConsumableArray(this.state.rows), [{
-        keyItem: '',
-        valueItem: ''
-      }])
-    }, function () {
-      _this.props.onChange([].concat(_toConsumableArray(_this.state.rows)));
-    });
-  },
-  handleKeyItemChange: function handleKeyItemChange(index, value) {
-    var _this2 = this;
+  _createClass(KeyValue, [{
+    key: 'handleKeyItemChange',
+    value: function handleKeyItemChange(index, value) {
+      var _this2 = this;
 
-    this.setState({
-      rows: this.state.rows.map(function (row, i) {
-        if (index !== i) {
-          return row;
-        }
-        return _extends({}, row, {
-          keyItem: value
-        });
-      })
-    }, function () {
-      _this2.props.onChange([].concat(_toConsumableArray(_this2.state.rows)));
-    });
-  },
-  handleValueItemChange: function handleValueItemChange(index, value) {
-    var _this3 = this;
+      this.setState({
+        rows: this.state.rows.map(function (row, i) {
+          if (index !== i) {
+            return row;
+          }
+          return _extends({}, row, {
+            keyItem: value
+          });
+        })
+      }, function () {
+        _this2.props.onChange([].concat(_toConsumableArray(_this2.state.rows)));
+      });
+    }
+  }, {
+    key: 'handleValueItemChange',
+    value: function handleValueItemChange(index, value) {
+      var _this3 = this;
 
-    this.setState({
-      rows: this.state.rows.map(function (row, i) {
-        if (index !== i) {
-          return row;
-        }
-        return _extends({}, row, {
-          valueItem: value
-        });
-      })
-    }, function () {
-      _this3.props.onChange([].concat(_toConsumableArray(_this3.state.rows)));
-    });
-  },
-  handleRemove: function handleRemove(index) {
-    var _this4 = this;
+      this.setState({
+        rows: this.state.rows.map(function (row, i) {
+          if (index !== i) {
+            return row;
+          }
+          return _extends({}, row, {
+            valueItem: value
+          });
+        })
+      }, function () {
+        _this3.props.onChange([].concat(_toConsumableArray(_this3.state.rows)));
+      });
+    }
+  }, {
+    key: 'handleRemove',
+    value: function handleRemove(index) {
+      var _this4 = this;
 
-    this.setState({
-      rows: this.state.rows.filter(function (row, i) {
-        return i !== index;
-      })
-    }, function () {
-      _this4.props.onChange([].concat(_toConsumableArray(_this4.state.rows)));
-    });
-  },
-  toJSON: function toJSON() {
-    var _state$rows = this.state.rows,
-        rows = _state$rows === undefined ? [] : _state$rows;
+      this.setState({
+        rows: this.state.rows.filter(function (row, i) {
+          return i !== index;
+        })
+      }, function () {
+        _this4.props.onChange([].concat(_toConsumableArray(_this4.state.rows)));
+      });
+    }
+  }, {
+    key: 'toJSON',
+    value: function toJSON() {
+      var _state$rows = this.state.rows,
+          rows = _state$rows === undefined ? [] : _state$rows;
 
-    return rows.reduce(function (acc, row) {
-      acc[row.keyItem] = row.valueItem;
-      return acc;
-    }, {});
-  },
-  renderLabelText: function renderLabelText(text) {
-    if (this.props.hideLabels === true) {
-      return null;
+      return rows.reduce(function (acc, row) {
+        acc[row.keyItem] = row.valueItem;
+        return acc;
+      }, {});
     }
-    return _react2.default.createElement(
-      'span',
-      null,
-      text
-    );
-  },
-  renderKeyItem: function renderKeyItem(index, value) {
-    var _this5 = this;
+  }, {
+    key: 'renderLabelText',
+    value: function renderLabelText(text) {
+      if (this.props.hideLabels === true) {
+        return null;
+      }
+      return _react2.default.createElement(
+        'span',
+        null,
+        text
+      );
+    }
+  }, {
+    key: 'renderKeyItem',
+    value: function renderKeyItem(index, value) {
+      var _this5 = this;
 
-    return _react2.default.createElement(
-      'label',
-      null,
-      this.renderLabelText('Key:'),
-      _react2.default.createElement('input', {
-        type: 'text',
-        value: value,
-        placeholder: this.props.keyInputPlaceholder,
-        onChange: function onChange(e) {
-          return _this5.handleKeyItemChange(index, e.currentTarget.value);
-        }
-      })
-    );
-  },
-  renderValueItem: function renderValueItem(index, value) {
-    var _this6 = this;
+      return _react2.default.createElement(
+        'label',
+        null,
+        this.renderLabelText('Key:'),
+        _react2.default.createElement('input', {
+          type: 'text',
+          value: value,
+          placeholder: this.props.keyInputPlaceholder,
+          onChange: function onChange(e) {
+            return _this5.handleKeyItemChange(index, e.currentTarget.value);
+          }
+        })
+      );
+    }
+  }, {
+    key: 'renderValueItem',
+    value: function renderValueItem(index, value) {
+      var _this6 = this;
 
-    return _react2.default.createElement(
-      'label',
-      null,
-      this.renderLabelText('Value:'),
-      _react2.default.createElement('input', {
-        type: 'text',
-        value: value,
-        placeholder: this.props.valueInputPlaceholder,
-        onChange: function onChange(e) {
-          return _this6.handleValueItemChange(index, e.currentTarget.value);
-        }
-      })
-    );
-  },
-  renderRows: function renderRows() {
-    var _this7 = this;
+      return _react2.default.createElement(
+        'label',
+        null,
+        this.renderLabelText('Value:'),
+        _react2.default.createElement('input', {
+          type: 'text',
+          value: value,
+          placeholder: this.props.valueInputPlaceholder,
+          onChange: function onChange(e) {
+            return _this6.handleValueItemChange(index, e.currentTarget.value);
+          }
+        })
+      );
+    }
+  }, {
+    key: 'renderRows',
+    value: function renderRows() {
+      var _this7 = this;
 
-    return this.state.rows.map(function (row, i) {
+      return this.state.rows.map(function (row, i) {
+        return _react2.default.createElement(
+          'div',
+          {
+            key: 'key-value-row-' + i,
+            className: c + '-row'
+          },
+          _react2.default.createElement(
+            'div',
+            { className: c + '-row-key-item' },
+            _this7.renderKeyItem(i, row.keyItem)
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: c + '-row-value-item' },
+            _this7.renderValueItem(i, row.valueItem)
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: c + '-row-remove' },
+            _react2.default.createElement(
+              'button',
+              {
+                onClick: function onClick() {
+                  return _this7.handleRemove(i);
+                }
+              },
+              '-'
+            )
+          )
+        );
+      });
+    }
+  }, {
+    key: 'renderAddButton',
+    value: function renderAddButton() {
+      if (typeof this.props.customAddButtonRenderer === 'function') {
+        return this.props.customAddButtonRenderer(this.handleAddNew);
+      }
       return _react2.default.createElement(
-        'div',
+        'button',
         {
-          key: 'key-value-row-' + i,
-          className: c + '-row'
+          onClick: this.handleAddNew
         },
+        'Add new'
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { className: c },
         _react2.default.createElement(
           'div',
-          { className: c + '-row-key-item' },
-          _this7.renderKeyItem(i, row.keyItem)
+          { className: c + '-rows' },
+          this.renderRows()
         ),
         _react2.default.createElement(
           'div',
-          { className: c + '-row-value-item' },
-          _this7.renderValueItem(i, row.valueItem)
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: c + '-row-remove' },
-          _react2.default.createElement(
-            'button',
-            {
-              onClick: function onClick() {
-                return _this7.handleRemove(i);
-              }
-            },
-            '-'
-          )
+          { className: c + '-add-new' },
+          this.renderAddButton()
         )
       );
-    });
-  },
-  renderAddButton: function renderAddButton() {
-    if (typeof this.props.customAddButtonRenderer === 'function') {
-      return this.props.customAddButtonRenderer(this.handleAddNew);
     }
-    return _react2.default.createElement(
-      'button',
-      {
-        onClick: this.handleAddNew
-      },
-      'Add new'
-    );
-  },
-  render: function render() {
-    return _react2.default.createElement(
-      'div',
-      { className: c },
-      _react2.default.createElement(
-        'div',
-        { className: c + '-rows' },
-        this.renderRows()
-      ),
-      _react2.default.createElement(
-        'div',
-        { className: c + '-add-new' },
-        this.renderAddButton()
-      )
-    );
-  }
-});
+  }]);
+
+  return KeyValue;
+}(_react2.default.Component);
+
+KeyValue.displayName = 'KeyValue';
+KeyValue.propTypes = {
+  rows: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+    keyItem: _propTypes2.default.string,
+    valueItem: _propTypes2.default.string
+  })),
+  onChange: _propTypes2.default.func,
+  customAddButtonRenderer: _propTypes2.default.func,
+  keyInputPlaceholder: _propTypes2.default.string,
+  valueInputPlaceholder: _propTypes2.default.string,
+  hideLabels: _propTypes2.default.bool
+};
+KeyValue.defaultProps = {
+  rows: [],
+  onChange: function onChange() {},
+  keyInputPlaceholder: '',
+  valueInputPlaceholder: '',
+  hideLabels: false
+};
+exports.default = KeyValue;

package.json

 {
   "name": "react-key-value",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Key value visualizer/editor written in React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22071

increased by11.33%

Lines of code

374

increased by8.72%

No dependency changes