add dropdownFactory prop, remove react-select peer dependency

Author: vitosamson

README.md

@@ -5,8 +5,9 @@ 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`
+  - `react-bootstrap ^0.29.3` (for tooltips and popovers)
+
+The editor also uses some Font Awesome icons so you should have that as well
 
 ## Usage
 ```js
@@ -16,32 +17,60 @@ import JSONEditor from 'react-json-editor';
 <JSONEditor json={{ foo: 'bar' }} onChange={json => console.log(json)} />
 ```
 
-You'll also need to include the css which is located in `dist/jsonEditor.css'.
+You'll also need to include the css which is located in `dist/jsonEditor.css`.
+
+#### Custom dropdowns
+The editor uses a dropdown in two places: 1) to select the field type (string, map, bool, etc) and 2) to select the value for a boolean field.
+
+You can pass the `dropdownFactory` prop to render your own dropdown:
+
+```js
+<JSONEditor
+  dropdownFactory={(options, value, onChange, props) => (
+    <MyOwnDropdown
+      options={options}
+      value={value}
+      onChange={onChange}
+      {...props}
+    />
+  )}
+/>
+```
+
+`options` will be an array of objects: `[{ label, value }, { label, value }]`. `label` and `value` will always be strings.
+
+`value` will be the currently selected value, always a string to match the `value` in the `options` object.
+
+`onChange` will be a function that should be called when an option is selected. the function takes a single argument with the value of the selected option
+
+The following additional props may be passed in the `props` argument:
+  - `placeholder`: placeholder value that can be displayed if the field has no value
 
-### Props
+#### 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.
+|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: `function(updatedJson) {}`
+|`dropdownFactory` | function         |             | factory to render a custom dropdown element for selecting the field type and value if type is boolean: `function(options = [], value, props={}) {}`
 
 ## Development
 
-### Building
+#### 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.
+The `dist` folder should be committed to the repo for now.
 
-### Linting
+#### 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
+  - Allow passing an input factory or custom classname instead of using bootstrap components
+  - Remove font awesome dependency
   - Add AMD/UMD module support via webpack
   - Tests
   - Examples

dist/components/Editor.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 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');
@@ -59,6 +61,7 @@ var JSONEditor = function (_Component) {
     _this.addArrayElement = _this.addArrayElement.bind(_this);
     _this.addMapElement = _this.addMapElement.bind(_this);
     _this.removeElement = _this.removeElement.bind(_this);
+    _this.createDropdown = _this.createDropdown.bind(_this);
     _this.undo = _this.undo.bind(_this);
     _this.redo = _this.redo.bind(_this);
     return _this;
@@ -72,7 +75,8 @@ var JSONEditor = function (_Component) {
           onFieldValueChange: this.onFieldValueChange,
           addArrayElement: this.addArrayElement,
           addMapElement: this.addMapElement,
-          removeElement: this.removeElement
+          removeElement: this.removeElement,
+          createDropdown: this.createDropdown
         }
       };
     }
@@ -164,6 +168,39 @@ var JSONEditor = function (_Component) {
       this.redoStack = [];
       this.props.onChange(json);
     }
+  }, {
+    key: 'createDropdown',
+    value: function createDropdown() {
+      var options = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
+      var value = arguments[1];
+      var _onChange = arguments[2];
+      var props = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
+      var dropdownFactory = this.props.dropdownFactory;
+
+
+      if (dropdownFactory && typeof dropdownFactory === 'function') {
+        return dropdownFactory(options, value, _onChange, props);
+      }
+
+      return React.createElement(
+        'select',
+        _extends({ value: value, onChange: function onChange(evt) {
+            return _onChange(evt.target.value);
+          }, defaultValue: '' }, props),
+        React.createElement(
+          'option',
+          { disabled: true, value: '' },
+          props.placeholder
+        ),
+        options.map(function (opt, idx) {
+          return React.createElement(
+            'option',
+            { value: opt.value, key: idx },
+            opt.label
+          );
+        })
+      );
+    }
   }, {
     key: 'undo',
     value: function undo() {
@@ -233,7 +270,8 @@ var JSONEditor = function (_Component) {
 
 JSONEditor.propTypes = {
   json: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.string]),
-  onChange: _react.PropTypes.func
+  onChange: _react.PropTypes.func,
+  dropdownFactory: _react.PropTypes.func
 };
 JSONEditor.defaultProps = {
   onChange: function onChange() {}

dist/components/Field.js

@@ -12,10 +12,6 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _reactSelect = require('react-select');
-
-var _reactSelect2 = _interopRequireDefault(_reactSelect);
-
 var _OverlayTrigger = require('react-bootstrap/lib/OverlayTrigger');
 
 var _OverlayTrigger2 = _interopRequireDefault(_OverlayTrigger);
@@ -183,18 +179,14 @@ var JSONField = function (_Component) {
     key: 'renderTypeSelectorAndButtons',
     value: function renderTypeSelectorAndButtons() {
       var fieldValue = this.props.fieldValue;
+      var createDropdown = this.context.jsonEditor.createDropdown;
 
 
       return React.createElement(
         'span',
         null,
-        React.createElement(_reactSelect2.default, {
-          options: typeSelectorOptions,
-          clearable: false,
-          searchable: false,
-          value: (0, _lib.getValueType)(fieldValue),
-          placeholder: 'Type',
-          onChange: this.onTypeChange
+        createDropdown(typeSelectorOptions, (0, _lib.getValueType)(fieldValue), this.onTypeChange, {
+          placeholder: 'Type'
         }),
         fieldValue !== null && React.createElement(
           _OverlayTrigger2.default,

dist/components/ValueEditor.js

@@ -7,21 +7,16 @@ exports.default = undefined;
 
 var _react = require('react');
 
-var _reactSelect = require('react-select');
-
-var _reactSelect2 = _interopRequireDefault(_reactSelect);
-
 var _lib = require('../lib');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var boolOptions = [{
   value: 'true', label: 'True'
 }, {
   value: 'false', label: 'False'
 }];
 
-// ReactSelect doesn't like boolean values :-\
+// values in the bool options are strings for ease of use across dropdown components
+// convert the value back to an actual boolean when updating the json value
 function convertToActualBool(string) {
   return string === 'true';
 }
@@ -43,24 +38,21 @@ function validateKeyPress(evt, fieldValue, valueType) {
   }
 }
 
-function ValueEditor(props) {
+function ValueEditor(props, context) {
   var _onChange = props.onChange;
   var fieldValue = props.fieldValue;
+  var createDropdown = context.jsonEditor.createDropdown;
 
   var valueType = (0, _lib.getValueType)(fieldValue);
 
   if (valueType === 'boolean') {
     return React.createElement(
       'span',
       { className: 'bool-selector' },
-      React.createElement(_reactSelect2.default, {
-        value: String(fieldValue),
-        options: boolOptions,
-        clearable: false,
-        searchable: false,
-        onChange: function onChange(val) {
-          return _onChange(convertToActualBool(val));
-        }
+      createDropdown(boolOptions, String(fieldValue), function (val) {
+        return _onChange(convertToActualBool(val));
+      }, {
+        placeholder: 'Value'
       })
     );
   }
@@ -82,4 +74,8 @@ exports.default = ValueEditor;
 ValueEditor.propTypes = {
   fieldValue: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.array, _react.PropTypes.object, _react.PropTypes.number, _react.PropTypes.bool]),
   onChange: _react.PropTypes.func
+};
+
+ValueEditor.contextTypes = {
+  jsonEditor: _react.PropTypes.object
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-json-editor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A JSON editor for ReactJS",
   "main": "dist/index.js",
   "scripts": {
@@ -30,8 +30,7 @@
   "peerDependencies": {
     "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"
+    "react-bootstrap": "^0.29.3"
   },
   "dependencies": {
     "classnames": "^2.2.5",

src/components/Editor.js

@@ -15,6 +15,7 @@ export default class JSONEditor extends Component {
       PropTypes.string,
     ]),
     onChange: PropTypes.func,
+    dropdownFactory: PropTypes.func,
   }
 
   static defaultProps = {
@@ -35,6 +36,7 @@ export default class JSONEditor extends Component {
     this.addArrayElement = ::this.addArrayElement;
     this.addMapElement = ::this.addMapElement;
     this.removeElement = ::this.removeElement;
+    this.createDropdown = ::this.createDropdown;
     this.undo = ::this.undo;
     this.redo = ::this.redo;
   }
@@ -46,6 +48,7 @@ export default class JSONEditor extends Component {
         addArrayElement: this.addArrayElement,
         addMapElement: this.addMapElement,
         removeElement: this.removeElement,
+        createDropdown: this.createDropdown,
       },
     };
   }
@@ -132,6 +135,23 @@ export default class JSONEditor extends Component {
     this.props.onChange(json);
   }
 
+  createDropdown(options = [], value, onChange, props = {}) {
+    const { dropdownFactory } = this.props;
+
+    if (dropdownFactory && typeof dropdownFactory === 'function') {
+      return dropdownFactory(options, value, onChange, props);
+    }
+
+    return (
+      <select value={value} onChange={evt => onChange(evt.target.value)} defaultValue="" {...props}>
+        <option disabled={true} value="">{ props.placeholder }</option>
+        { options.map((opt, idx) =>
+          <option value={opt.value} key={idx}>{ opt.label }</option>
+        )}
+      </select>
+    );
+  }
+
   undo() {
     const lastAction = this.undoStack.pop();
     const json = cloneDeep(this.parseJson());

src/components/Field.js

@@ -1,6 +1,5 @@
 import { Component, PropTypes } from 'react';
 import cn from 'classnames';
-import ReactSelect from 'react-select';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
@@ -141,17 +140,13 @@ export default class JSONField extends Component {
 
   renderTypeSelectorAndButtons() {
     const { fieldValue } = this.props;
+    const { createDropdown } = this.context.jsonEditor;
 
     return (
       <span>
-        <ReactSelect
-          options={typeSelectorOptions}
-          clearable={false}
-          searchable={false}
-          value={getValueType(fieldValue)}
-          placeholder="Type"
-          onChange={this.onTypeChange}
-        />
+        { createDropdown(typeSelectorOptions, getValueType(fieldValue), this.onTypeChange, {
+          placeholder: 'Type',
+        })}
 
         { fieldValue !== null &&
           <OverlayTrigger overlay={<Tooltip id="nullify">Make null</Tooltip>} placement="left">