initial commit

Author: vitosamson

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015", "stage-0"]
+}

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "globals": {
+    "React": true
+  },
+  "rules": {
+    "react/jsx-boolean-value": [2, "always"],
+    "react/sort-comp": [0],
+    "react/no-multi-comp": [0],
+    "react/no-did-mount-set-state": [0],
+    "react/jsx-no-duplicate-props": [2],
+    "react/jsx-filename-extension": [0],
+    "no-param-reassign": [0],
+    "no-else-return": [0],
+    "no-unused-vars": [2, {
+      "vars": "all",
+      "args": "none"
+    }],
+    "no-use-before-define": [2, "nofunc"],
+    "indent": [2, 2, {
+      "SwitchCase": 1
+    }],
+    "jsx-quotes": [0],
+    "new-cap": [2, {
+      "capIsNewExceptions": ["Line", "Bar"]
+    }],
+    "consistent-return": [0],
+    "no-dupe-keys": [2],
+    "max-len": [0],
+    "no-return-assign": [0],
+    "import/no-unresolved": [2, {
+      "ignore": ["react"]
+    }],
+    "import/no-named-as-default": [0]
+  }
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Hexa1 LLC, Vito LaVilla
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,47 @@
+# React JSON Editor
+
+## Peer Dependencies
+You must have these packages installed in your project to use this component:
+
+  - `react ^0.14 || ^15.0.0-rc || ^15.0`
+  - `react-dom ^0.14 || ^15.0.0-rc || ^15.0`
+  - `react-bootstrap ^0.29.3`
+  - `react-select ^0.7.0`
+
+## Usage
+```js
+import JSONEditor from 'react-json-editor';
+
+// in your component
+<JSONEditor json={{ foo: 'bar' }} onChange={json => console.log(json)} />
+```
+
+You'll also need to include the css which is located in `dist/jsonEditor.css'.
+
+### Props
+
+|Prop      | Type             | Default     | Description
+|----------|------------------|-------------|-------------
+|`json`    | object or string | `{}`        | the json object you want to edit. if you pass a string, the editor will attempt to parse it with `JSON.parse()`.
+|`onChange`| function         | `noop`      | called whenever a change occurs. the updated json is passed as the first and only argument to the function.
+
+## Development
+
+### Building
+`npm run build` will run the js through babel and the scss through node-sass and output into `dist/`.
+
+The `dist` folder should be committed to the repo.
+
+### Linting
+`npm run lint` - please lint before committing any code
+
+## Known Issues
+  - Typing a decimal as the last character in a number field doesn't work because of the way we coerce the type - if the field is a number type, we try to `parseFloat()` it, which parses a value like `1.` to `1`. Adding the decimal anywhere but the last character will work, so a workaround to trying to type `1.1` would be to type `11`, then insert the decimal between the `1`s.
+
+## TODO
+  - Remove react-bootstrap dependency (used for tooltips/popovers)
+  - Remove react-select dependency (used for dropdown)
+  - Allow passing input & select factories instead of using bootstrap/react-select components
+  - Add AMD/UMD module support via webpack
+  - Tests
+  - Examples

dist/components/AddElementButton.js

@@ -0,0 +1,168 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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');
+
+var _OverlayTrigger = require('react-bootstrap/lib/OverlayTrigger');
+
+var _OverlayTrigger2 = _interopRequireDefault(_OverlayTrigger);
+
+var _Popover = require('react-bootstrap/lib/Popover');
+
+var _Popover2 = _interopRequireDefault(_Popover);
+
+var _lib = require('../lib');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 AddElementButton = function (_Component) {
+  _inherits(AddElementButton, _Component);
+
+  function AddElementButton(props) {
+    _classCallCheck(this, AddElementButton);
+
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(AddElementButton).call(this, props));
+
+    _this.state = {
+      newElementName: '',
+      newElementNameInvalid: false
+    };
+
+    _this.addElement = _this.addElement.bind(_this);
+    return _this;
+  }
+
+  _createClass(AddElementButton, [{
+    key: 'addElement',
+    value: function addElement(e) {
+      if (e) {
+        e.preventDefault();
+      }
+
+      var _props = this.props;
+      var fieldValue = _props.fieldValue;
+      var path = _props.path;
+      var newElementName = this.state.newElementName;
+      var _context$jsonEditor = this.context.jsonEditor;
+      var addArrayElement = _context$jsonEditor.addArrayElement;
+      var addMapElement = _context$jsonEditor.addMapElement;
+
+
+      if ((0, _lib.getValueType)(fieldValue) === 'array') {
+        return addArrayElement(path, null);
+      }
+
+      var added = addMapElement(path, newElementName, null);
+
+      if (added) {
+        this.newElementOverlay.hide();
+        this.setState({
+          newElementInvalidName: false
+        });
+      } else {
+        this.setState({
+          newElementInvalidName: true
+        });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var fieldValue = this.props.fieldValue;
+      var _state = this.state;
+      var newElementName = _state.newElementName;
+      var newElementInvalidName = _state.newElementInvalidName;
+
+      var isArray = (0, _lib.getValueType)(fieldValue) === 'array';
+      var onBtnClick = isArray ? this.addElement.bind(this) : null;
+
+      var button = React.createElement(
+        'button',
+        { className: 'btn default btn-xs add-element-btn', type: 'button', onClick: onBtnClick },
+        React.createElement('i', { className: 'fa fa-plus' }),
+        'Add element'
+      );
+
+      // new array elements don't need a name, so just render the button and add the element when it's clicked
+      if (isArray) {
+        return button;
+      }
+
+      var newElementNameOverlay = React.createElement(
+        _Popover2.default,
+        { id: 'json-editor-new-element-name' },
+        React.createElement(
+          'form',
+          { onSubmit: this.addElement },
+          React.createElement('input', {
+            type: 'text',
+            className: 'form-control',
+            placeholder: 'Element Name',
+            value: newElementName,
+            onChange: function onChange(e) {
+              return _this2.setState({ newElementName: e.target.value });
+            },
+            ref: function ref(i) {
+              return setTimeout(function () {
+                return i && i.focus();
+              });
+            }
+          }),
+          React.createElement('i', { className: 'fa fa-check add-new-element', onClick: this.addElement }),
+          React.createElement('i', { className: 'fa fa-times cancel-new-element', onClick: function onClick() {
+              return _this2.newElementOverlay.hide();
+            } }),
+          newElementInvalidName && React.createElement(
+            'div',
+            { className: 'invalid-element-name' },
+            ' Map element keys must be unique '
+          )
+        )
+      );
+
+      return React.createElement(
+        _OverlayTrigger2.default,
+        {
+          overlay: newElementNameOverlay,
+          trigger: ['click'],
+          placement: 'top',
+          rootClose: true,
+          onEnter: function onEnter() {
+            return _this2.setState({ newElementInvalidName: false });
+          },
+          onExited: function onExited() {
+            return _this2.setState({ newElementName: '' });
+          },
+          ref: function ref(ot) {
+            return _this2.newElementOverlay = ot;
+          }
+        },
+        button
+      );
+    }
+  }]);
+
+  return AddElementButton;
+}(_react.Component);
+
+AddElementButton.propTypes = {
+  fieldValue: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.array, _react.PropTypes.object, _react.PropTypes.number, _react.PropTypes.bool]),
+  path: _react.PropTypes.string
+};
+AddElementButton.contextTypes = {
+  jsonEditor: _react.PropTypes.object
+};
+exports.default = AddElementButton;