react-querybuilder - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

config/webpack-common.config.js

@@ -16,3 +16,5 @@ 'use strict';
                 test: /\.scss/,
-                loader: ExtractTextPlugin.extract('css!sass')
+                loader: ExtractTextPlugin.extract({
+                    loader: ['css', 'sass']
+                })
             }
@@ -22,3 +24,3 @@ ],
     resolve: {
-        extensions: ['', '.js', '.jsx', '.scss']
+        extensions: ['.js', '.jsx', '.scss']
     },
@@ -29,2 +31,2 @@
     ]
-};
+};

config/webpack-prod.config.js

@@ -14,5 +14,3 @@ 'use strict';
         filename: '[name].js',
-        path: path.resolve(__dirname, '../dist'),
-        library: true,
-        libraryTarget: 'commonjs2'
+        path: path.resolve(__dirname, '../dist')
     },
@@ -33,2 +31,2 @@ externals: [
     ]
-});
+});

config/webpack-test.config.js

@@ -8,5 +8,2 @@ 'use strict';
 module.exports = merge(webpackCommon, {
-    entry: {
-        index: './lib/index.js'
-    },
     output: {
@@ -24,5 +21,5 @@ filename: '[name].js',
 
-    devtool: 'cheap-module-source-map',
+    devtool: 'inline-source-map',
 
 
 });

demo/main.js

@@ -26,2 +26,5 @@ import '../lib/query-builder.scss';
     render() {
+        let controlElements = {
+            valueEditor: this.customValueEditor()
+        }
         return (
@@ -31,3 +34,3 @@ <div className="flex-box">
                     <QueryBuilder fields={this.props.fields}
-                                  getEditor={this.getEditor}
+                                  controlElements={controlElements}
                                   controlClassnames={{fields: 'form-control'}}
@@ -44,15 +47,25 @@ onQueryChange={this.logQuery.bind(this)}/>
 
-    getEditor({field, operator, value, onChange}) {
-        if (field !== 'isDev' || operator !== '=') {
-            return null;
-        }
+    customValueEditor() {
+        let checkbox = class MyCheckbox extends React.Component {
+            constructor(props) {
+                super(props);
+            }
 
-        const hasValue = !!value;
-        return (
-            <span>
-            <input type="checkbox"
-                   value={hasValue}
-                   onChange={event=>onChange(event.target.checked)}/>
-        </span>
-        );
+            render() {
+                if (this.props.field !== 'isDev' || this.props.operator !== '=') {
+                    return <input type="text"
+                                  value={this.props.value}
+                                  onChange={e=>this.props.handleOnChange(e.target.value)} />
+                }
+
+                return (
+                    <span>
+                        <input type="checkbox"
+                               value={!!this.props.value}
+                               onChange={e=>this.props.handleOnChange(e.target.checked)}/>
+                    </span>
+                );
+            }
+        };
+        return checkbox;
     }
@@ -59,0 +72,0 @@

dist/index.js

@@ -1,2 +0,1 @@
-module.exports =
 /******/ (function(modules) { // webpackBootstrap
@@ -49,2 +48,11 @@ /******/ 	// The module cache
 
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+
 /******/ 	// Object.prototype.hasOwnProperty.call
@@ -57,3 +65,3 @@ /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 4);
+/******/ 	return __webpack_require__(__webpack_require__.s = 19);
 /******/ })
@@ -65,3 +73,3 @@ /************************************************************************/
 
-module.exports = require("react");
+module.exports = react;
 
@@ -73,24 +81,34 @@ /***/ },
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId___default = __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId__ && __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId__; };
-/* harmony import */ __webpack_require__.d(__WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId___default, 'a', __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId___default);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __WEBPACK_IMPORTED_MODULE_1_react__ && __WEBPACK_IMPORTED_MODULE_1_react__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_1_react__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_1_react__; };
-/* harmony import */ __webpack_require__.d(__WEBPACK_IMPORTED_MODULE_1_react___default, 'a', __WEBPACK_IMPORTED_MODULE_1_react___default);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__RuleGroup__ = __webpack_require__(3);
+'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; }; }();
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var _uniqueId = __webpack_require__(17);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _uniqueId2 = _interopRequireDefault(_uniqueId);
 
-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; }
+var _react = __webpack_require__(0);
 
-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 _react2 = _interopRequireDefault(_react);
 
+var _RuleGroup = __webpack_require__(3);
 
+var _RuleGroup2 = _interopRequireDefault(_RuleGroup);
 
+var _index = __webpack_require__(7);
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 QueryBuilder = function (_React$Component) {
@@ -107,3 +125,3 @@ _inherits(QueryBuilder, _React$Component);
                 combinators: QueryBuilder.defaultCombinators,
-                getEditor: null,
+                controlElements: null,
                 getOperators: null,
@@ -118,10 +136,19 @@ onQueryChange: null,
             return {
-                query: __WEBPACK_IMPORTED_MODULE_1_react___default.a.PropTypes.object,
-                fields: __WEBPACK_IMPORTED_MODULE_1_react___default.a.PropTypes.array.isRequired,
-                operators: __WEBPACK_IMPORTED_MODULE_1_react___default.a.PropTypes.array,
-                combinators: __WEBPACK_IMPORTED_MODULE_1_react___default.a.PropTypes.array,
-                getEditor: __WEBPACK_IMPORTED_MODULE_1_react___default.a.PropTypes.func,
-                getOperators: __WEBPACK_IMPORTED_MODULE_1_react___default.a.PropTypes.func,
-                onQueryChange: __WEBPACK_IMPORTED_MODULE_1_react___default.a.PropTypes.func,
-                controlClassnames: __WEBPACK_IMPORTED_MODULE_1_react___default.a.PropTypes.object
+                query: _react2.default.PropTypes.object,
+                fields: _react2.default.PropTypes.array.isRequired,
+                operators: _react2.default.PropTypes.array,
+                combinators: _react2.default.PropTypes.array,
+                controlElements: _react2.default.PropTypes.shape({
+                    addGroupAction: _react2.default.PropTypes.func,
+                    removeGroupAction: _react2.default.PropTypes.func,
+                    addRuleAction: _react2.default.PropTypes.func,
+                    removeRuleAction: _react2.default.PropTypes.func,
+                    combinatorSelector: _react2.default.PropTypes.func,
+                    fieldSelector: _react2.default.PropTypes.func,
+                    operatorSelector: _react2.default.PropTypes.func,
+                    valueEditor: _react2.default.PropTypes.func
+                }),
+                getOperators: _react2.default.PropTypes.func,
+                onQueryChange: _react2.default.PropTypes.func,
+                controlClassnames: _react2.default.PropTypes.object
             };
@@ -132,3 +159,3 @@ }
     function QueryBuilder() {
-        var _Object$getPrototypeO;
+        var _ref;
 
@@ -141,3 +168,3 @@ _classCallCheck(this, QueryBuilder);
 
-        var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(QueryBuilder)).call.apply(_Object$getPrototypeO, [this].concat(args)));
+        var _this = _possibleConstructorReturn(this, (_ref = QueryBuilder.__proto__ || Object.getPrototypeOf(QueryBuilder)).call.apply(_ref, [this].concat(args)));
 
@@ -160,6 +187,7 @@ _this.state = {
             var combinators = _props.combinators;
+            var controlElements = _props.controlElements;
             var controlClassnames = _props.controlClassnames;
 
             var classNames = Object.assign({}, QueryBuilder.defaultControlClassnames, controlClassnames);
-
+            var controls = Object.assign({}, QueryBuilder.defaultControlElements, controlElements);
             this.setState({
@@ -182,5 +210,3 @@ root: this.getInitialQuery(),
                     isRuleGroup: this.isRuleGroup.bind(this),
-                    getEditor: function getEditor() {
-                        return _this2.prepareEditor.apply(_this2, arguments);
-                    },
+                    controls: controls,
                     getOperators: function getOperators() {
@@ -213,6 +239,6 @@ return _this2.getOperators.apply(_this2, arguments);
 
-            return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
+            return _react2.default.createElement(
                 'div',
                 { className: 'queryBuilder ' + schema.classNames.queryBuilder },
-                __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__RuleGroup__["a" /* default */], { rules: rules,
+                _react2.default.createElement(_RuleGroup2.default, { rules: rules,
                     combinator: combinator,
@@ -238,3 +264,3 @@ schema: schema,
             return {
-                id: __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId___default()('r-'),
+                id: (0, _uniqueId2.default)('r-'),
                 field: fields[0].name,
@@ -249,3 +275,3 @@ value: '',
             return {
-                id: __WEBPACK_IMPORTED_MODULE_0_lodash_uniqueId___default()('g-'),
+                id: (0, _uniqueId2.default)('g-'),
                 rules: [],
@@ -256,25 +282,2 @@ combinator: this.props.combinators[0].name
     }, {
-        key: 'prepareEditor',
-        value: function prepareEditor(config) {
-            var value = config.value;
-            var operator = config.operator;
-            var _onChange = config.onChange;
-
-
-            var editor = this.props.getEditor && this.props.getEditor(config);
-            if (editor) {
-                return editor;
-            }
-
-            if (operator === 'null' || operator === 'notNull') {
-                return null;
-            }
-
-            return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('input', { type: 'text',
-                value: value,
-                onChange: function onChange(event) {
-                    return _onChange(event.target.value);
-                } });
-        }
-    }, {
         key: 'getOperators',
@@ -458,8 +461,22 @@ value: function getOperators(field) {
         }
+    }, {
+        key: 'defaultControlElements',
+        get: function get() {
+            return {
+                addGroupAction: _index.ActionElement,
+                removeGroupAction: _index.ActionElement,
+                addRuleAction: _index.ActionElement,
+                removeRuleAction: _index.ActionElement,
+                combinatorSelector: _index.ValueSelector,
+                fieldSelector: _index.ValueSelector,
+                operatorSelector: _index.ValueSelector,
+                valueEditor: _index.ValueEditor
+            };
+        }
     }]);
 
     return QueryBuilder;
-}(__WEBPACK_IMPORTED_MODULE_1_react___default.a.Component);
+}(_react2.default.Component);
 
-/* harmony default export */ exports["a"] = QueryBuilder;
+exports.default = QueryBuilder;
 
@@ -471,7 +488,16 @@ /***/ },
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __WEBPACK_IMPORTED_MODULE_0_react__ && __WEBPACK_IMPORTED_MODULE_0_react__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_0_react__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_0_react__; };
-/* harmony import */ __webpack_require__.d(__WEBPACK_IMPORTED_MODULE_0_react___default, 'a', __WEBPACK_IMPORTED_MODULE_0_react___default);
+'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 = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+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"); } }
@@ -483,4 +509,2 @@
 
-
-
 var Rule = function (_React$Component) {
@@ -490,5 +514,31 @@ _inherits(Rule, _React$Component);
     function Rule() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
         _classCallCheck(this, Rule);
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(Rule).apply(this, arguments));
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Rule.__proto__ || Object.getPrototypeOf(Rule)).call.apply(_ref, [this].concat(args))), _this), _this.onFieldChanged = function (value) {
+            _this.onElementChanged('field', value);
+        }, _this.onOperatorChanged = function (value) {
+            _this.onElementChanged('operator', value);
+        }, _this.onValueChanged = function (value) {
+            _this.onElementChanged('value', value);
+        }, _this.onElementChanged = function (property, value) {
+            var _this$props = _this.props;
+            var id = _this$props.id;
+            var onPropChange = _this$props.schema.onPropChange;
+
+
+            onPropChange(property, value, id);
+        }, _this.removeRule = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            _this.props.schema.onRuleRemove(_this.props.id, _this.props.parentId);
+        }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -499,4 +549,2 @@
         value: function render() {
-            var _this2 = this;
-
             var _props = this.props;
@@ -509,76 +557,34 @@ var field = _props.field;
             var operators = _props$schema.operators;
-            var getEditor = _props$schema.getEditor;
+            var controls = _props$schema.controls;
             var getOperators = _props$schema.getOperators;
             var classNames = _props$schema.classNames;
 
-
-            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+            return _react2.default.createElement(
                 'div',
                 { className: 'rule ' + classNames.rule },
-                __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                    'select',
-                    { className: 'rule-fields ' + classNames.fields,
-                        value: field,
-                        onChange: function onChange(event) {
-                            return _this2.onValueChanged('field', event.target.value);
-                        } },
-                    fields.map(function (field) {
-                        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                            'option',
-                            { key: field.name, value: field.name },
-                            field.label
-                        );
-                    })
-                ),
-                __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                    'select',
-                    { className: 'rule-operators ' + classNames.operators,
-                        value: operator,
-                        onChange: function onChange(event) {
-                            return _this2.onValueChanged('operator', event.target.value);
-                        } },
-                    getOperators(field).map(function (op) {
-                        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                            'option',
-                            { value: op.name, key: op.name },
-                            op.label
-                        );
-                    })
-                ),
-                getEditor({
+                _react2.default.createElement(controls.fieldSelector, {
+                    options: fields,
+                    value: field,
+                    className: 'rule-fields ' + classNames.fields,
+                    handleOnChange: this.onFieldChanged
+                }),
+                _react2.default.createElement(controls.operatorSelector, {
+                    options: getOperators(field),
+                    value: operator,
+                    className: 'rule-operators ' + classNames.operators,
+                    handleOnChange: this.onOperatorChanged
+                }),
+                _react2.default.createElement(controls.valueEditor, {
                     field: field,
+                    operator: operator,
                     value: value,
-                    operator: operator,
-                    onChange: function onChange(value) {
-                        return _this2.onValueChanged('value', value);
-                    }
+                    handleOnChange: this.onValueChanged
                 }),
-                __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                    'button',
-                    { className: 'rule-remove ' + classNames.removeRule,
-                        onClick: function onClick(event) {
-                            return _this2.removeRule(event);
-                        } },
-                    'x'
-                )
+                _react2.default.createElement(controls.removeRuleAction, {
+                    label: 'x',
+                    className: 'rule-remove ' + classNames.removeRule,
+                    handleOnClick: this.removeRule
+                })
             );
         }
-    }, {
-        key: 'onValueChanged',
-        value: function onValueChanged(field, value) {
-            var _props2 = this.props;
-            var id = _props2.id;
-            var onPropChange = _props2.schema.onPropChange;
-
-
-            onPropChange(field, value, id);
-        }
-    }, {
-        key: 'removeRule',
-        value: function removeRule(event) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            this.props.schema.onRuleRemove(this.props.id, this.props.parentId);
-        }
     }], [{
@@ -599,5 +605,5 @@ key: 'defaultProps',
     return Rule;
-}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);
+}(_react2.default.Component);
 
-/* harmony default export */ exports["a"] = Rule;
+exports.default = Rule;
 
@@ -609,8 +615,20 @@ /***/ },
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __WEBPACK_IMPORTED_MODULE_0_react__ && __WEBPACK_IMPORTED_MODULE_0_react__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_0_react__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_0_react__; };
-/* harmony import */ __webpack_require__.d(__WEBPACK_IMPORTED_MODULE_0_react___default, 'a', __WEBPACK_IMPORTED_MODULE_0_react___default);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Rule__ = __webpack_require__(2);
+'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 = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Rule = __webpack_require__(2);
+
+var _Rule2 = _interopRequireDefault(_Rule);
+
+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"); } }
@@ -622,5 +640,2 @@
 
-
-
-
 var RuleGroup = function (_React$Component) {
@@ -630,5 +645,44 @@ _inherits(RuleGroup, _React$Component);
     function RuleGroup() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
         _classCallCheck(this, RuleGroup);
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(RuleGroup).apply(this, arguments));
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RuleGroup.__proto__ || Object.getPrototypeOf(RuleGroup)).call.apply(_ref, [this].concat(args))), _this), _this.onCombinatorChange = function (value) {
+            var onPropChange = _this.props.schema.onPropChange;
+
+
+            onPropChange('combinator', value, _this.props.id);
+        }, _this.addRule = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            var _this$props$schema = _this.props.schema;
+            var createRule = _this$props$schema.createRule;
+            var onRuleAdd = _this$props$schema.onRuleAdd;
+
+
+            var newRule = createRule();
+            onRuleAdd(newRule, _this.props.id);
+        }, _this.addGroup = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            var _this$props$schema2 = _this.props.schema;
+            var createRuleGroup = _this$props$schema2.createRuleGroup;
+            var onGroupAdd = _this$props$schema2.onGroupAdd;
+
+            var newGroup = createRuleGroup();
+            onGroupAdd(newGroup, _this.props.id);
+        }, _this.removeGroup = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            _this.props.schema.onGroupRemove(_this.props.id, _this.props.parentId);
+        }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -646,2 +700,3 @@
             var combinators = _props$schema.combinators;
+            var controls = _props$schema.controls;
             var onRuleRemove = _props$schema.onRuleRemove;
@@ -651,46 +706,28 @@ var isRuleGroup = _props$schema.isRuleGroup;
 
-            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+            return _react2.default.createElement(
                 'div',
                 { className: 'ruleGroup ' + classNames.ruleGroup },
-                __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                    'select',
-                    { className: 'ruleGroup-combinators ' + classNames.combinators,
-                        value: combinator,
-                        onChange: function onChange(event) {
-                            return _this2.onCombinatorChange(event.target.value);
-                        } },
-                    combinators.map(function (c) {
-                        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                            'option',
-                            { key: c.name, value: c.name },
-                            c.label
-                        );
-                    })
-                ),
-                __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                    'button',
-                    { className: 'ruleGroup-addRule ' + classNames.addRule,
-                        onClick: function onClick(event) {
-                            return _this2.addRule(event);
-                        } },
-                    '+Rule'
-                ),
-                __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                    'button',
-                    { className: 'ruleGroup-addGroup ' + classNames.addGroup,
-                        onClick: function onClick(event) {
-                            return _this2.addGroup(event);
-                        } },
-                    '+Group'
-                ),
-                this.props.parentId ? __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-                    'button',
-                    { className: 'ruleGroup-remove ' + classNames.removeGroup,
-                        onClick: function onClick(event) {
-                            return _this2.removeGroup(event, _this2.props.id);
-                        } },
-                    'x'
-                ) : null,
+                _react2.default.createElement(controls.combinatorSelector, {
+                    options: combinators,
+                    value: combinator,
+                    className: 'ruleGroup-combinators ' + classNames.combinators,
+                    handleOnChange: this.onCombinatorChange
+                }),
+                _react2.default.createElement(controls.addRuleAction, {
+                    label: '+Rule',
+                    className: 'ruleGroup-addRule ' + classNames.addRule,
+                    handleOnClick: this.addRule
+                }),
+                _react2.default.createElement(controls.addGroupAction, {
+                    label: '+Group',
+                    className: 'ruleGroup-addGroup ' + classNames.addGroup,
+                    handleOnClick: this.addGroup
+                }),
+                this.hasParentGroup() ? _react2.default.createElement(controls.removeGroupAction, {
+                    label: 'x',
+                    className: 'ruleGroup-remove ' + classNames.removeGroup,
+                    handleOnClick: this.removeGroup
+                }) : null,
                 rules.map(function (r) {
-                    return isRuleGroup(r) ? __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(RuleGroup, { key: r.id,
+                    return isRuleGroup(r) ? _react2.default.createElement(RuleGroup, { key: r.id,
                         id: r.id,
@@ -700,3 +737,3 @@ schema: _this2.props.schema,
                         combinator: r.combinator,
-                        rules: r.rules }) : __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1__Rule__["a" /* default */], { key: r.id,
+                        rules: r.rules }) : _react2.default.createElement(_Rule2.default, { key: r.id,
                         id: r.id,
@@ -713,44 +750,6 @@ field: r.field,
     }, {
-        key: 'onCombinatorChange',
-        value: function onCombinatorChange(value) {
-            var onPropChange = this.props.schema.onPropChange;
-
-
-            onPropChange('combinator', value, this.props.id);
+        key: 'hasParentGroup',
+        value: function hasParentGroup() {
+            return this.props.parentId;
         }
-    }, {
-        key: 'addRule',
-        value: function addRule(event) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            var _props$schema2 = this.props.schema;
-            var createRule = _props$schema2.createRule;
-            var onRuleAdd = _props$schema2.onRuleAdd;
-
-
-            var newRule = createRule();
-            onRuleAdd(newRule, this.props.id);
-        }
-    }, {
-        key: 'addGroup',
-        value: function addGroup(event) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            var _props$schema3 = this.props.schema;
-            var createRuleGroup = _props$schema3.createRuleGroup;
-            var onGroupAdd = _props$schema3.onGroupAdd;
-
-            var newGroup = createRuleGroup();
-            onGroupAdd(newGroup, this.props.id);
-        }
-    }, {
-        key: 'removeGroup',
-        value: function removeGroup(event, groupId) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            this.props.schema.onGroupRemove(groupId, this.props.parentId);
-        }
     }], [{
@@ -770,5 +769,5 @@ key: 'defaultProps',
     return RuleGroup;
-}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);
+}(_react2.default.Component);
 
-/* harmony default export */ exports["a"] = RuleGroup;
+exports.default = RuleGroup;
 
@@ -780,6 +779,67 @@ /***/ },
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__QueryBuilder__ = __webpack_require__(1);
-/* harmony reexport */ if(__webpack_require__.o(__WEBPACK_IMPORTED_MODULE_0__QueryBuilder__, "a")) __webpack_require__.d(exports, "QueryBuilder", function() { return __WEBPACK_IMPORTED_MODULE_0__QueryBuilder__["a"]; });
+'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 = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+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 ActionElement = function (_React$Component) {
+  _inherits(ActionElement, _React$Component);
+
+  _createClass(ActionElement, null, [{
+    key: 'propTypes',
+    get: function get() {
+      return {
+        label: _react2.default.PropTypes.string,
+        className: _react2.default.PropTypes.string,
+        handleOnClick: _react2.default.PropTypes.func
+      };
+    }
+  }]);
+
+  function ActionElement(props) {
+    _classCallCheck(this, ActionElement);
+
+    return _possibleConstructorReturn(this, (ActionElement.__proto__ || Object.getPrototypeOf(ActionElement)).call(this, props));
+  }
+
+  _createClass(ActionElement, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var label = _props.label;
+      var className = _props.className;
+      var handleOnClick = _props.handleOnClick;
+
+
+      return _react2.default.createElement(
+        'button',
+        { className: className,
+          onClick: function onClick(e) {
+            return handleOnClick(e);
+          } },
+        label
+      );
+    }
+  }]);
+
+  return ActionElement;
+}(_react2.default.Component);
+
+exports.default = ActionElement;
+
 /***/ },
@@ -789,4 +849,196 @@ /* 5 */
 
-var root = __webpack_require__(8);
+"use strict";
+'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 = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+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 ValueEditor = function (_React$Component) {
+  _inherits(ValueEditor, _React$Component);
+
+  _createClass(ValueEditor, null, [{
+    key: 'propTypes',
+    get: function get() {
+      return {
+        field: _react2.default.PropTypes.string,
+        operator: _react2.default.PropTypes.string,
+        value: _react2.default.PropTypes.string,
+        handleOnChange: _react2.default.PropTypes.func
+      };
+    }
+  }]);
+
+  function ValueEditor(props) {
+    _classCallCheck(this, ValueEditor);
+
+    return _possibleConstructorReturn(this, (ValueEditor.__proto__ || Object.getPrototypeOf(ValueEditor)).call(this, props));
+  }
+
+  _createClass(ValueEditor, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var field = _props.field;
+      var operator = _props.operator;
+      var value = _props.value;
+      var handleOnChange = _props.handleOnChange;
+
+
+      if (operator === 'null' || operator === 'notNull') {
+        return null;
+      }
+
+      return _react2.default.createElement('input', { type: 'text',
+        value: value,
+        onChange: function onChange(e) {
+          return handleOnChange(e.target.value);
+        } });
+    }
+  }]);
+
+  return ValueEditor;
+}(_react2.default.Component);
+
+exports.default = ValueEditor;
+
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+"use strict";
+'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 = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+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 ValueSelector = function (_React$Component) {
+  _inherits(ValueSelector, _React$Component);
+
+  _createClass(ValueSelector, null, [{
+    key: 'propTypes',
+    get: function get() {
+      return {
+        value: _react2.default.PropTypes.string,
+        options: _react2.default.PropTypes.array.isRequired,
+        className: _react2.default.PropTypes.string,
+        handleOnChange: _react2.default.PropTypes.func
+      };
+    }
+  }]);
+
+  function ValueSelector(props) {
+    _classCallCheck(this, ValueSelector);
+
+    return _possibleConstructorReturn(this, (ValueSelector.__proto__ || Object.getPrototypeOf(ValueSelector)).call(this, props));
+  }
+
+  _createClass(ValueSelector, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var value = _props.value;
+      var options = _props.options;
+      var className = _props.className;
+      var handleOnChange = _props.handleOnChange;
+
+
+      return _react2.default.createElement(
+        'select',
+        { className: className,
+          value: value,
+          onChange: function onChange(e) {
+            return handleOnChange(e.target.value);
+          } },
+        options.map(function (option) {
+          return _react2.default.createElement(
+            'option',
+            { key: option.name, value: option.name },
+            option.label
+          );
+        })
+      );
+    }
+  }]);
+
+  return ValueSelector;
+}(_react2.default.Component);
+
+exports.default = ValueSelector;
+
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ValueEditor = __webpack_require__(5);
+
+Object.defineProperty(exports, 'ValueEditor', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_ValueEditor).default;
+  }
+});
+
+var _ValueSelector = __webpack_require__(6);
+
+Object.defineProperty(exports, 'ValueSelector', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_ValueSelector).default;
+  }
+});
+
+var _ActionElement = __webpack_require__(4);
+
+Object.defineProperty(exports, 'ActionElement', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_ActionElement).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+var root = __webpack_require__(12);
+
 /** Built-in value references. */
@@ -799,7 +1051,36 @@ var Symbol = root.Symbol;
 /***/ },
-/* 6 */
+/* 9 */
+/***/ function(module, exports) {
+
+/**
+ * A specialized version of `_.map` for arrays without support for iteratee
+ * shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ */
+function arrayMap(array, iteratee) {
+  var index = -1,
+      length = array ? array.length : 0,
+      result = Array(length);
+
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
+  }
+  return result;
+}
+
+module.exports = arrayMap;
+
+
+/***/ },
+/* 10 */
 /***/ function(module, exports, __webpack_require__) {
 
-var Symbol = __webpack_require__(5),
-    isSymbol = __webpack_require__(10);
+var Symbol = __webpack_require__(8),
+    arrayMap = __webpack_require__(9),
+    isArray = __webpack_require__(13),
+    isSymbol = __webpack_require__(15);
 
@@ -826,2 +1107,6 @@ /** Used as references for various `Number` constants. */
   }
+  if (isArray(value)) {
+    // Recursively convert values (susceptible to call stack limits).
+    return arrayMap(value, baseToString) + '';
+  }
   if (isSymbol(value)) {
@@ -838,46 +1123,64 @@ return symbolToString ? symbolToString.call(value) : '';
 /***/ },
-/* 7 */
-/***/ function(module, exports) {
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
 
-/**
- * Checks if `value` is a global object.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {null|Object} Returns `value` if it's a global object, else `null`.
- */
-function checkGlobal(value) {
-  return (value && value.Object === Object) ? value : null;
-}
+/* WEBPACK VAR INJECTION */(function(global) {/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
 
-module.exports = checkGlobal;
+module.exports = freeGlobal;
 
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(18)))
 
 /***/ },
-/* 8 */
+/* 12 */
 /***/ function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(global) {var checkGlobal = __webpack_require__(7);
+var freeGlobal = __webpack_require__(11);
 
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = checkGlobal(typeof global == 'object' && global);
-
 /** Detect free variable `self`. */
-var freeSelf = checkGlobal(typeof self == 'object' && self);
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
-/** Detect `this` as the global object. */
-var thisGlobal = checkGlobal(typeof this == 'object' && this);
-
 /** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || thisGlobal || Function('return this')();
+var root = freeGlobal || freeSelf || Function('return this')();
 
 module.exports = root;
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(13)))
 
 /***/ },
-/* 9 */
+/* 13 */
 /***/ function(module, exports) {
 
 /**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+var isArray = Array.isArray;
+
+module.exports = isArray;
+
+
+/***/ },
+/* 14 */
+/***/ function(module, exports) {
+
+/**
  * Checks if `value` is object-like. A value is object-like if it's not `null`
@@ -907,3 +1210,3 @@ * and has a `typeof` result of "object".
 function isObjectLike(value) {
-  return !!value && typeof value == 'object';
+  return value != null && typeof value == 'object';
 }
@@ -915,6 +1218,6 @@
 /***/ },
-/* 10 */
+/* 15 */
 /***/ function(module, exports, __webpack_require__) {
 
-var isObjectLike = __webpack_require__(9);
+var isObjectLike = __webpack_require__(14);
 
@@ -929,3 +1232,3 @@ /** `Object#toString` result references. */
  * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
  * of values.
@@ -943,4 +1246,3 @@ */
  * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is correctly classified,
- *  else `false`.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
  * @example
@@ -963,6 +1265,6 @@ *
 /***/ },
-/* 11 */
+/* 16 */
 /***/ function(module, exports, __webpack_require__) {
 
-var baseToString = __webpack_require__(6);
+var baseToString = __webpack_require__(10);
 
@@ -977,4 +1279,4 @@ /**
  * @category Lang
- * @param {*} value The value to process.
- * @returns {string} Returns the string.
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
  * @example
@@ -999,6 +1301,6 @@ *
 /***/ },
-/* 12 */
+/* 17 */
 /***/ function(module, exports, __webpack_require__) {
 
-var toString = __webpack_require__(11);
+var toString = __webpack_require__(16);
 
@@ -1034,3 +1336,3 @@ /** Used to generate unique IDs. */
 /***/ },
-/* 13 */
+/* 18 */
 /***/ function(module, exports) {
@@ -1059,3 +1361,25 @@
 
+/***/ },
+/* 19 */
+/***/ function(module, exports, __webpack_require__) {
+
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _QueryBuilder = __webpack_require__(1);
+
+Object.defineProperty(exports, 'QueryBuilder', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_QueryBuilder).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /***/ }
 /******/ ]);

karma.conf.js

@@ -8,3 +8,3 @@ process.env.BABEL_ENV = 'test'; // Set the proper environment for babel
         basePath: '',
-        frameworks: ['mocha', 'chai'],
+        frameworks: ['mocha', 'chai', 'es6-shim'],
 
@@ -18,3 +18,3 @@ files: [
         preprocessors: {
-            [testFileGlob]: ['webpack'],
+            [testFileGlob]: ['webpack']
         },
@@ -31,2 +31,3 @@ webpack: require('./config/webpack-test.config'),
                 {type: 'text-summary'},
+                {'type': 'lcov'}
             ],
@@ -33,0 +34,0 @@ includeAllSources: true,

lib/QueryBuilder.jsx

@@ -5,2 +5,3 @@ import uniqueId from 'lodash/uniqueId';
 import RuleGroup from './RuleGroup';
+import { ActionElement, ValueEditor, ValueSelector } from './controls/index';
 
@@ -15,3 +16,3 @@
             combinators: QueryBuilder.defaultCombinators,
-            getEditor: null,
+            controlElements: null,
             getOperators: null,
@@ -29,3 +30,12 @@ onQueryChange: null,
             combinators: React.PropTypes.array,
-            getEditor: React.PropTypes.func,
+            controlElements: React.PropTypes.shape({
+                addGroupAction: React.PropTypes.func,
+                removeGroupAction: React.PropTypes.func,
+                addRuleAction: React.PropTypes.func,
+                removeRuleAction: React.PropTypes.func,
+                combinatorSelector: React.PropTypes.func,
+                fieldSelector: React.PropTypes.func,
+                operatorSelector: React.PropTypes.func,
+                valueEditor: React.PropTypes.func
+            }),
             getOperators: React.PropTypes.func,
@@ -89,6 +99,19 @@ onQueryChange: React.PropTypes.func,
 
+    static get defaultControlElements() {
+        return {
+            addGroupAction: ActionElement,
+            removeGroupAction: ActionElement,
+            addRuleAction: ActionElement,
+            removeRuleAction: ActionElement,
+            combinatorSelector: ValueSelector,
+            fieldSelector: ValueSelector,
+            operatorSelector: ValueSelector,
+            valueEditor: ValueEditor
+        };
+    }
+
     componentWillMount() {
-        const {fields, operators, combinators, controlClassnames} = this.props;
+        const {fields, operators, combinators, controlElements, controlClassnames} = this.props;
         const classNames = Object.assign({}, QueryBuilder.defaultControlClassnames, controlClassnames);
-
+        const controls = Object.assign({}, QueryBuilder.defaultControlElements, controlElements);
         this.setState({
@@ -111,3 +134,3 @@ root: this.getInitialQuery(),
                 isRuleGroup: this.isRuleGroup.bind(this),
-                getEditor: (...args)=>this.prepareEditor(...args),
+                controls,
                 getOperators: (...args)=>this.getOperators(...args),
@@ -165,22 +188,2 @@ }
 
-
-    prepareEditor(config) {
-        const {value, operator, onChange} = config;
-
-        const editor = this.props.getEditor && this.props.getEditor(config);
-        if (editor) {
-            return editor;
-        }
-
-        if (operator === 'null' || operator === 'notNull') {
-            return null;
-        }
-
-        return (
-            <input type="text"
-                   value={value}
-                   onChange={event=>onChange(event.target.value)}/>
-        );
-    }
-
     getOperators(field) {
@@ -187,0 +190,0 @@ if (this.props.getOperators) {

lib/QueryBuilder.test.js

@@ -27,2 +27,3 @@ import React from 'react';
     describe('when initial query is provided', ()=> {
+        let dom;
 
@@ -49,3 +50,3 @@ beforeEach(()=> {
 
-            this.dom = mount(<QueryBuilder query={query} fields={fields}/>);
+            dom = mount(<QueryBuilder query={query} fields={fields}/>);
         });
@@ -55,3 +56,3 @@
 
-            const rule = this.dom.find('Rule');
+            const rule = dom.find('Rule');
             expect(rule).to.have.length(1);
@@ -61,3 +62,3 @@ });
         it('should have the Rule with the correct props', ()=> {
-            const rule = this.dom.find('Rule');
+            const rule = dom.find('Rule');
 
@@ -70,10 +71,27 @@ expect(rule.props().field).to.equal('firstName');
         it('should have a select control with the provided fields', ()=> {
-            const rule = this.dom.find('Rule');
+            const rule = dom.find('Rule');
 
-            expect(rule.find('.Rule-fields option')).to.have.length(3);
+            expect(rule.find('.rule-fields option')).to.have.length(3);
         });
 
+        it('should have an field selector with the correct field', ()=> {
+            const rule = dom.find('Rule');
 
+            expect(rule.find('.rule-fields').props().value).to.equal('firstName');
+        });
+
+        it('should have an operator selector with the correct operator', ()=> {
+            const rule = dom.find('Rule');
+
+            expect(rule.find('.rule-operators').props().value).to.equal('=');
+        });
+
+        it('should have an input control with the correct value', ()=> {
+            const rule = dom.find('Rule');
+
+            expect(rule.find('input').props().value).to.equal('Test');
+        });
+
     });
 
 });

lib/Rule.jsx

@@ -16,41 +16,43 @@ import React from 'react';
     render() {
-        const {field, operator, value, schema: {fields, operators, getEditor, getOperators, classNames}} = this.props;
-
+        const {field, operator, value, schema: {fields, operators, controls, getOperators, classNames}} = this.props;
         return (
             <div className={`rule ${classNames.rule}`}>
-                <select className={`rule-fields ${classNames.fields}`}
-                        value={field}
-                        onChange={event=>this.onValueChanged('field', event.target.value)}>
+                {
+                    React.createElement(controls.fieldSelector,
                         {
-                            fields.map(field=> {
-                                return (
-                                    <option key={field.name} value={field.name}>{field.label}</option>
-                                );
-                            })
+                            options: fields,
+                            value: field,
+                            className: `rule-fields ${classNames.fields}`,
+                            handleOnChange: this.onFieldChanged
                         }
-                </select>
-                <select className={`rule-operators ${classNames.operators}`}
-                        value={operator}
-                        onChange={event=>this.onValueChanged('operator', event.target.value)}>
+                    )
+                }
+                {
+                    React.createElement(controls.operatorSelector,
                         {
-                            getOperators(field).map(op=> {
-                                return (
-                                    <option value={op.name} key={op.name}>{op.label}</option>
-                                );
-                            })
+                            options: getOperators(field),
+                            value: operator,
+                            className: `rule-operators ${classNames.operators}`,
+                            handleOnChange: this.onOperatorChanged
                         }
-                </select>
-
-                 {
-                     getEditor({
-                         field,
-                         value,
-                         operator,
-                         onChange: value=>this.onValueChanged('value', value)
-                     })
-                 }
-
-                <button className={`rule-remove ${classNames.removeRule}`}
-                        onClick={event=>this.removeRule(event)}>x
-                </button>
+                    )
+                }
+                {
+                    React.createElement(controls.valueEditor,
+                        {
+                            field: field,
+                            operator: operator,
+                            value: value,
+                            handleOnChange: this.onValueChanged
+                        }
+                    )
+                }
+                {
+                    React.createElement(controls.removeRuleAction,
+                    {
+                        label: 'x',
+                        className: `rule-remove ${classNames.removeRule}`,
+                        handleOnClick: this.removeRule
+                    })
+                }
             </div>
@@ -60,9 +62,21 @@ );
 
-    onValueChanged(field, value) {
+    onFieldChanged = (value) => {
+        this.onElementChanged('field', value);
+    }
+
+    onOperatorChanged = (value) => {
+        this.onElementChanged('operator', value);
+    }
+
+    onValueChanged = (value) => {
+        this.onElementChanged('value', value);
+    }
+
+    onElementChanged = (property, value) => {
         const {id, schema: {onPropChange}} = this.props;
 
-        onPropChange(field, value, id);
+        onPropChange(property, value, id);
     }
 
-    removeRule(event) {
+    removeRule = (event) => {
         event.preventDefault();
@@ -69,0 +83,0 @@ event.stopPropagation();

lib/RuleGroup.jsx

@@ -16,30 +16,44 @@ import React from 'react';
     render() {
-        const {combinator, rules, schema: {combinators, onRuleRemove, isRuleGroup, classNames}} = this.props;
+        const {combinator, rules, schema: {combinators, controls, onRuleRemove, isRuleGroup, classNames}} = this.props;
         return (
             <div className={`ruleGroup ${classNames.ruleGroup}`}>
-                <select className={`ruleGroup-combinators ${classNames.combinators}`}
-                        value={combinator}
-                        onChange={event=>this.onCombinatorChange(event.target.value)}>
+                {
+                    React.createElement(controls.combinatorSelector,
                         {
-                            combinators.map(c=> {
-                                return (<option key={c.name} value={c.name}>{c.label}</option>);
-                            })
+                            options: combinators,
+                            value: combinator,
+                            className: `ruleGroup-combinators ${classNames.combinators}`,
+                            handleOnChange: this.onCombinatorChange
                         }
-                </select>
-
-                <button className={`ruleGroup-addRule ${classNames.addRule}`}
-                        onClick={event=>this.addRule(event)}>
-                    +Rule
-                </button>
-                <button className={`ruleGroup-addGroup ${classNames.addGroup}`}
-                        onClick={event=>this.addGroup(event)}>
-                    +Group
-                </button>
+                    )
+                }
+                {
+                    React.createElement(controls.addRuleAction,
+                        {
+                            label: '+Rule',
+                            className: `ruleGroup-addRule ${classNames.addRule}`,
+                            handleOnClick: this.addRule
+                        }
+                    )
+                }
+                {
+                    React.createElement(controls.addGroupAction,
+                        {
+                            label: '+Group',
+                            className: `ruleGroup-addGroup ${classNames.addGroup}`,
+                            handleOnClick: this.addGroup
+                        }
+                    )
+                }
+                {
+                    this.hasParentGroup() ?
+                        React.createElement(controls.removeGroupAction,
+                            {
+                                label: 'x',
+                                className: `ruleGroup-remove ${classNames.removeGroup}`,
+                                handleOnClick: this.removeGroup
+                            }
+                        ) : null
+                }
                  {
-                     (this.props.parentId)
-                         ? <button className={`ruleGroup-remove ${classNames.removeGroup}`}
-                                   onClick={event=>this.removeGroup(event, this.props.id)}>x</button>
-                         : null
-                 }
-                 {
                      rules.map(r=> {
@@ -69,3 +83,7 @@ return (
 
-    onCombinatorChange(value) {
+    hasParentGroup() {
+        return this.props.parentId;
+    }
+
+    onCombinatorChange = (value) => {
         const {onPropChange} = this.props.schema;
@@ -76,3 +94,3 @@
 
-    addRule(event) {
+    addRule = (event) => {
         event.preventDefault();
@@ -87,3 +105,3 @@ event.stopPropagation();
 
-    addGroup(event) {
+    addGroup = (event) => {
         event.preventDefault();
@@ -97,7 +115,7 @@ event.stopPropagation();
 
-    removeGroup(event, groupId) {
+    removeGroup = (event) => {
         event.preventDefault();
         event.stopPropagation();
 
-        this.props.schema.onGroupRemove(groupId, this.props.parentId);
+        this.props.schema.onGroupRemove(this.props.id, this.props.parentId);
     }
@@ -104,0 +122,0 @@

package.json

 {
   "name": "react-querybuilder",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "The React <QueryBuilder /> component for constructing queries",
@@ -22,36 +22,45 @@ "main": "dist/index.js",
   "devDependencies": {
-    "babel-core": "^6.10.4",
-    "babel-loader": "^6.2.4",
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
     "babel-plugin-__coverage__": "^11.0.0",
-    "babel-preset-es2015-webpack": "^6.4.1",
-    "babel-preset-react": "^6.11.1",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-1": "^6.16.0",
     "chai": "^3.5.0",
+    "codecov.io": "^0.1.6",
     "copy-webpack-plugin": "^3.0.1",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.25.0",
     "del-cli": "^0.2.0",
     "enzyme": "^2.4.1",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "github-changes": "^1.0.4",
     "html-webpack-plugin": "^2.22.0",
-    "karma": "^0.13.22",
+    "karma": "^1.3.0",
     "karma-chai": "^0.1.0",
-    "karma-coverage": "^1.1.0",
-    "karma-mocha": "^1.1.1",
-    "karma-mocha-reporter": "^2.0.4",
-    "karma-phantomjs-launcher": "^1.0.1",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.5.3",
-    "node-sass": "^3.8.0",
-    "phantomjs-prebuilt": "^2.1.7",
+    "karma-coverage": "^1.1.1",
+    "karma-es6-shim": "^1.0.0",
+    "karma-mocha": "^1.2.0",
+    "karma-mocha-reporter": "^2.2.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-webpack": "^1.8.0",
+    "mocha": "^3.1.0",
+    "node-sass": "^3.10.1",
+    "phantomjs-prebuilt": "^2.1.13",
+    "postcss-cssnext": "^2.8.0",
+    "postcss-loader": "^0.13.0",
     "react-addons-test-utils": "^15.2.1",
-    "sass-loader": "^3.2.3",
-    "webpack": "^2.1.0-beta.15",
-    "webpack-dev-server": "^2.1.0-beta.0",
-    "webpack-merge": "^0.14.0"
+    "sass-loader": "^4.0.2",
+    "webpack": "^2.1.0-beta.25",
+    "webpack-dev-server": "^2.1.0-beta.8",
+    "webpack-merge": "^0.14.1"
   },
   "dependencies": {
-    "lodash": "^4.13.1"
+    "lodash": "^4.16.3",
+    "react": "^15.3.2",
+    "react-addons-test-utils": "^15.3.2",
+    "react-dom": "^15.3.2"
   },
   "peerDependencies": {
-    "react": "^15.2.1",
-    "react-dom": "^15.2.1"
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
   },
@@ -62,4 +71,6 @@ "scripts": {
     "test": "karma start",
-    "test:watch": "npm test -- --no-single-run --auto-watch"
+    "test:watch": "npm test -- --no-single-run --auto-watch",
+    "codecov": "cat coverage/*/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js",
+    "generate-changelog": "node node_modules/github-changes -o sapientglobalmarkets -r react-querybuilder -a --use-commit-body --only-pulls --date-format=\"(YYYY/MM/DD)\""
   }
 }

README.md

 # react-querybuilder
 
 [![npm](https://img.shields.io/npm/v/react-querybuilder.svg?maxAge=2592000)](https://www.npmjs.com/package/react-querybuilder)
+[![Build Status](https://travis-ci.org/sapientglobalmarkets/react-querybuilder.svg?branch=master)](https://travis-ci.org/sapientglobalmarkets/react-querybuilder)
+[![codecov.io](https://codecov.io/github/sapientglobalmarkets/react-querybuilder/coverage.svg?branch=master)](https://codecov.io/github/sapientglobalmarkets/react-querybuilder?branch=master)
 
@@ -97,8 +99,95 @@ ## Credits
 
-#### getEditor *(Optional)*
-function({field, operator, value, onChange}):ReactElement
+#### controlElements *(Optional)*
+```js
+React.PropTypes.shape({
+  addGroupAction: React.PropTypes.func, //returns ReactClass
+  removeGroupAction: React.PropTypes.func, //returns ReactClass
+  addRuleAction: React.PropTypes.func, //returns ReactClass
+  removeRuleAction: React.PropTypes.func, //returns ReactClass
+  combinatorSelector: React.PropTypes.func, //returns ReactClass
+  fieldSelector: React.PropTypes.func, //returns ReactClass
+  operatorSelector: React.PropTypes.func, //returns ReactClass
+  valueEditor: React.PropTypes.func //returns ReactClass
+})
+```
 
-This is a callback function invoked by the internal `<Rule />` component to determine the
-editor for the field value. By default a `<input type="text" />` is used.
+This is a custom controls object that allows you to override the control elements used.
+The following control overrides are supported:
+- `addGroupAction`: By default a `<button />` is used. The following props are passed:
 
+  ```js
+  {
+    label: React.PropTypes.string, //"+Group"
+    className: React.PropTypes.string, //css classNames to be applied
+    handleOnClick: React.PropTypes.func //callback function to invoke adding a <RuleGroup />
+  }
+  ```
+- `removeGroupAction`: By default a `<button />` is used. The following props are passed:
+
+  ```js
+  {
+    label: React.PropTypes.string, //"x"
+    className: React.PropTypes.string, //css classNames to be applied
+    handleOnClick: React.PropTypes.func //callback function to invoke removing a <RuleGroup />
+  }
+  ```
+- `addRuleAction`: By default a `<button />` is used. The following props are passed:
+
+  ```js
+  {
+    label: React.PropTypes.string, //"+Rule"
+    className: React.PropTypes.string, //css classNames to be applied
+    handleOnClick: React.PropTypes.func //callback function to invoke adding a <Rule />
+  }
+  ```
+- `removeRuleAction`: By default a `<button />` is used. The following props are passed:
+
+  ```js
+  {
+    label: React.PropTypes.string, //"x"
+    className: React.PropTypes.string, //css classNames to be applied
+    handleOnClick: React.PropTypes.func //callback function to invoke removing a <Rule />
+  }
+  ```
+- `combinatorSelector`: By default a `<select />` is used. The following props are passed:
+
+  ```js
+  {
+    options: React.PropTypes.array.isRequired, //same as 'combinators' passed into QueryBuilder
+    value: React.PropTypes.string, //selected combinator from the existing query representation, if any
+    className: React.PropTypes.string, //css classNames to be applied
+    handleOnChange: React.PropTypes.func //callback function to update query representation
+  }
+  ```
+- `fieldSelector`: By default a `<select />` is used. The following props are passed:
+
+  ```js
+  {
+    options: React.PropTypes.array.isRequired, //same as 'fields' passed into QueryBuilder
+    value: React.PropTypes.string, //selected field from the existing query representation, if any
+    className: React.PropTypes.string, //css classNames to be applied
+    handleOnChange: React.PropTypes.func //callback function to update query representation
+  }
+  ```
+- `operatorSelector`: By default a `<select />` is used. The following props are passed:
+
+  ```js
+  {
+    options: React.PropTypes.array.isRequired, //return value of getOperators(field)
+    value: React.PropTypes.string, //selected operator from the existing query representation, if any
+    className: React.PropTypes.string, //css classNames to be applied
+    handleOnChange: React.PropTypes.func //callback function to update query representation
+  }
+  ```
+- `valueEditor`: By default a `<input type="text" />` is used. The following props are passed:
+
+  ```js
+  {
+    field: React.PropTypes.string, //field name corresponding to this Rule
+    operator: React.PropTypes.string, //operator name corresponding to this Rule
+    value: React.PropTypes.string, //value from the existing query representation, if any
+    handleOnChange: React.PropTypes.func //callback function to update the query representation
+  }
+  ```
+
 #### getOperators *(Optional)*
@@ -166,2 +255,15 @@ function(field):[]
 }
-```
+```
+
+## Development
+
+### Changelog Generation
+
+We are using [github-changes](https://github.com/lalitkapoor/github-changes) to generate the changelog.
+
+To use it:
+1. tag your commit using [semantic versioning](http://semver.org/)
+1. run `npm run generate-changelog`
+1. enter your github credentials at the prompt
+1. commit
+1. push your commit and tags

webpack.config.js

 'use strict';
 
-module.exports = env=> {
-    return [
-        require('./config/webpack-dev.config'),
-        require('./config/webpack-prod.config')
-    ];
-};
+module.exports = env => {
+
+    const config = {
+        prod: [
+            require('./config/webpack-dev.config'), // For the demo
+            require('./config/webpack-prod.config'), // lib files
+        ],
+        dev: require('./config/webpack-dev.config')
+    };
+
+    return config[env];
+};

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

2132462

increased by17.32%

Number of package files

39

increased by44.44%

Lines of code

22527

increased by7.09%

Number of lines in readme file

268

increased by62.42%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

6

increased by100%

Dev dependency count

33

increased by22.22%

Dependency changes

• + Addedreact@^15.3.2

• + Addedreact-addons-test-utils@^15.3.2

• + Addedreact-dom@^15.3.2

• + Addedreact-addons-test-utils@15.6.2(transitive)

• Updatedlodash@^4.16.3