Merge branch 'antd-3'

css/styles.scss

@@ -45,7 +45,7 @@
 
 .query-builder, .query-preview {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.25;
   margin: 1rem;
 }

examples/demo/demo.js

@@ -5,7 +5,7 @@ import config from './config';
 var stringify = require('json-stringify-safe');
 import '../../css/reset.scss';
 import '../../css/styles.scss';
-import '../../css/compact_styles.scss';
+//import '../../css/compact_styles.scss';
 import '../../css/denormalize.scss';
 const Immutable = require('immutable');
 const transit = require('transit-immutable-js');

examples/index.js

@@ -1,9 +1,12 @@
 import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import Demo from './demo/demo.js';
+import { hot } from 'react-hot-loader'
 
 window.React = React;
 
+
+
 class App extends Component {
     render() {
         return (
@@ -12,10 +15,13 @@ class App extends Component {
     }
 }
 
+
+const  AppContainer = hot(module)(App);
+
 ReactDOM.render((
-    <App>
+    <AppContainer>
         <Demo />
-    </App>
+    </AppContainer>
 ), document.body);
 
 

examples/webpack.config.js

@@ -18,7 +18,7 @@ module.exports = {
         loaders: [
             {
                 test: /\.js$/,
-                loaders: ['react-hot-loader', 'babel-loader'],
+                loaders: ['babel-loader'],
                 exclude: /node_modules/
             },
             {

modules/components/Field.js

@@ -55,15 +55,24 @@ export default class Field extends Component {
   }
 
   filterOption = (input, option) => {
-    const isInChildren = option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 
-    const isInValue    = option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 
-    let isInGroupLabel = false 
+    const { value, groupLabel, children } = option.props;
 
-    if (option.props.groupLabel) {
-      isInGroupLabel = option.props.groupLabel.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    let isInChildren = false;
+    if (typeof children === 'string') {
+        isInChildren = children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
     }
 
-    return(isInChildren || isInValue || isInGroupLabel)
+    let isInValue = false;
+    if (typeof value === 'string') {
+        isInValue = value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    }
+
+    let isInGroupLabel = false;
+    if (typeof groupLabel === 'string') {
+        isInGroupLabel = groupLabel.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    }
+
+    return isInChildren || isInValue || isInGroupLabel;
   }
 
   getFieldDisplayLabel(field, fieldKey) {
@@ -118,7 +127,7 @@ export default class Field extends Component {
               return <Option
                 key={prefix+fieldKey}
                 value={prefix+fieldKey}
-                groupLabel={optGroupLabel}
+                grouplabel={optGroupLabel}
               >
                 {label}
               </Option>;
@@ -167,7 +176,7 @@ export default class Field extends Component {
     let fieldDisplayLabel = isFieldSelected ? this.getFieldDisplayLabel(this.curField(), this.props.selectedField) : null;
     let selectText = isFieldSelected ? fieldDisplayLabel : placeholder;
     selectText = truncateString(selectText, maxLabelsLength);
-    let selectWidth = calcTextWidth(selectText, '12px');
+    let selectWidth = calcTextWidth(selectText, '14px');
     //let tooltip = this.curFieldOpts().label2 || selectedFieldFullLabel || this.curFieldOpts().label;
     let fieldSelectItems = this.buildSelectItems(fieldOptions);
     let customProps = this.props.customProps || {};
@@ -176,7 +185,7 @@ export default class Field extends Component {
         <Select
             dropdownAlign={dropdownPlacement ? BUILT_IN_PLACEMENTS[dropdownPlacement] : undefined}
             dropdownMatchSelectWidth={false}
-            style={{ width: isFieldSelected && !customProps.showSearch ? null : selectWidth + 36 }}
+            style={{ width: isFieldSelected && !customProps.showSearch ? null : selectWidth + 48 }}
             ref="field"
             placeholder={placeholder}
             size={this.props.config.settings.renderSize || "small"}

modules/components/Operator.js

@@ -102,13 +102,13 @@ export default class Operator extends Component {
     let selectedOpKey = this.props.selectedOperator;
     let opMenuItems = this.buildMenuItems(this.operatorOptions);
     let placeholder = this.curOpOpts().label || this.props.config.settings.operatorPlaceholder;
-    let placeholderWidth = calcTextWidth(placeholder, '12px');
+    let placeholderWidth = calcTextWidth(placeholder, '14px');
     let fieldSelectItems = this.buildSelectItems(this.operatorOptions);
     let opSelect = (
         <Select
             dropdownAlign={dropdownPlacement ? BUILT_IN_PLACEMENTS[dropdownPlacement] : undefined}
             dropdownMatchSelectWidth={false}
-            style={{ width: this.props.selectedOperator ? null : placeholderWidth + 36 }}
+            style={{ width: this.props.selectedOperator ? null : placeholderWidth + 48 }}
             ref="field"
             placeholder={placeholder}
             size={this.props.config.settings.renderSize || "small"}

modules/components/Query.js

@@ -53,7 +53,7 @@ class ConnectedQuery extends Component {
         const newConfig = nextProps.config;
         const oldValidatedTree = this.validatedTree;
 
-        if (oldConfig != newConfig) {
+        if (oldConfig !== newConfig) {
             this._updateActions(nextProps);
         }
 

modules/components/widgets/MultiSelect.js

@@ -35,11 +35,11 @@ export default class MultiSelectWidget extends Component {
 
   onPropsChanged (props) {
     let placeholder = this.props.placeholder || "Select option";
-    let placeholderWidth = calcTextWidth(placeholder, '12px');
+    let placeholderWidth = calcTextWidth(placeholder, '14px');
     const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
     let optionsMaxWidth = 0;
     map(fieldDefinition.listValues, (label, value) => {
-      optionsMaxWidth = Math.max(optionsMaxWidth, calcTextWidth(label, '12px'));
+      optionsMaxWidth = Math.max(optionsMaxWidth, calcTextWidth(label, '14px'));
     });
 
     this.placeholder = placeholder;
@@ -58,10 +58,10 @@ export default class MultiSelectWidget extends Component {
 
     return (
         <Select
-            multiple
+            mode={"multiple"}
             style={{
-              minWidth: value ? null : this.placeholderWidth + 30,
-              width: this.props.value ? null : this.placeholderWidth + 30,
+              minWidth: value ? null : this.placeholderWidth + 40,
+              width: this.props.value ? null : this.placeholderWidth + 40,
             }}
             dropdownStyle={{
               width: this.optionsMaxWidth + 40,

modules/components/widgets/Range.js

@@ -114,6 +114,7 @@ export default class RangeWidget extends Component {
           <Slider
             ref="slider"
             value={value}
+            tipFormatter={(val) => (val != undefined ? val.toString() : '')}
             min={min}
             max={max}
             step={step}

modules/components/widgets/Select.js

@@ -34,12 +34,12 @@ export default class SelectWidget extends Component {
     const options = map(fieldDefinition.listValues, (label, value) => {
       return (<Option key={value} value={value}>{label}</Option>);
     });
-    let placeholderWidth = calcTextWidth(placeholder, '12px');
+    let placeholderWidth = calcTextWidth(placeholder, '14px');
     let customProps = this.props.customProps || {};
 
     return (
         <Select
-            style={{ width: this.props.value ? null : placeholderWidth + 36 }}
+            style={{ width: this.props.value ? null : placeholderWidth + 48 }}
             key={"widget-select"}
             dropdownMatchSelectWidth={false}
             ref="val"

modules/components/widgets/Slider.js

@@ -67,6 +67,7 @@ export default class SliderWidget extends Component {
           <Slider
             ref="slider"
             value={value}
+            tipFormatter={(val) => (val != undefined ? val.toString() : undefined)}
             min={min}
             max={max}
             included={false}

modules/components/widgets/ValueField.js

@@ -172,15 +172,15 @@ export default class ValueField extends Component {
     let dropdownPlacement = this.props.config.settings.dropdownPlacement;
     let fieldOptions = this.filterFields(this.props.config, this.props.config.fields, this.props.field, this.props.operator);
     let placeholder = this.curFieldOpts().label || this.props.config.settings.fieldPlaceholder;
-    let placeholderWidth = calcTextWidth(placeholder, '12px');
+    let placeholderWidth = calcTextWidth(placeholder, '14px');
     let fieldSelectItems = this.buildSelectItems(fieldOptions);
     let customProps = this.props.customProps || {};
 
     let fieldSelect = (
           <Select
               dropdownAlign={dropdownPlacement ? BUILT_IN_PLACEMENTS[dropdownPlacement] : undefined}
               dropdownMatchSelectWidth={false}
-              style={{ width: this.props.value ? null : placeholderWidth + 36 }}
+              style={{ width: this.props.value ? null : placeholderWidth + 48 }}
               ref="field"
               placeholder={placeholder}
               size={this.props.config.settings.renderSize || "small"}

modules/utils/stuff.js

@@ -18,7 +18,7 @@ export const bindActionCreators = (actionCreators, config, dispatch) =>
 
 
 export const calcTextWidth = function(str, font) {
-  var f = font || '12px';
+  var f = font || '14px';
   var div = document.createElement("div");
   div.innerHTML = str;
   var css = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-query-builder",
-  "version": "0.1.49",
+  "version": "0.2.49",
   "main1": "modules",
   "main": "build/npm/lib",
   "main2": "build/global/ReactAwesomeQueryBuilder.js",
@@ -31,15 +31,15 @@
   },
   "homepage": "https://github.com/ukrbublik/react-awesome-query-builder",
   "dependencies": {
-    "antd": "^2.12.2",
+    "antd": "^3.9.0",
     "classnames": "^2.2.5",
     "clone": "^2.1.1",
     "immutable": "^3.7.6",
     "json-stringify-safe": "^5.0.1",
     "lodash": "^4.6",
     "moment": "^2.12.0",
     "prop-types": "^15.6.0",
-    "react-addons-css-transition-group": "^15.0.0",
+    "react-transition-group": "^1.2.1",
     "react-addons-pure-render-mixin": "^15.0.0",
     "react-addons-shallow-compare": "^15.0.0",
     "react-redux": "^5.0.0",
@@ -49,11 +49,11 @@
     "rc-align": "2.3.5"
   },
   "peerDependencies": {
-    "react": "^0.14.6 || ^15.0.0",
-    "react-addons-css-transition-group": "^0.14.6 || ^15.0.0",
-    "react-addons-pure-render-mixin": "^0.14.6 || ^15.0.0",
-    "react-addons-shallow-compare": "^0.14.7 || ^15.0.0",
-    "react-dom": "^0.14.6 || ^15.0.0",
+    "react": "^0.14.6 || ^15.0.0 || ^16.4.1 ",
+    "react-transition-group": "^1.2.1",
+    "react-addons-pure-render-mixin": "^0.14.6 || ^15.0.0 || ^16.4.1",
+    "react-addons-shallow-compare": "^0.14.7 || ^15.0.0 || ^16.4.1",
+    "react-dom": "^0.14.6 || ^15.0.0 || ^16.4.1",
     "react-redux": "^4.0.6 || ^5.0.0",
     "redux": "^3.0.5"
   },
@@ -87,9 +87,9 @@
     "less-loader": "^2.2",
     "mocha": "^2.2.5",
     "node-sass": "^4.5.3",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "react-hot-loader": "^1.3.1",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-hot-loader": "^4.3.3",
     "rf-changelog": "^0.4.0",
     "sass-loader": "^4.1.1",
     "sourcemap": "^0.1.0",