fix #252 (#285)

* fix #252

* mt

* readme

* pr

* lint

Author: ukrbublik

CHANGELOG.md

@@ -1,4 +1,7 @@
 # Changelog
+- 2.1.19
+  - Fixed issue #252 ("Cannot update a component from inside the function body of a different component")
+  - Issue #190: Fixed TS def for getTree/2 - added 2nd param light?
 - 2.1.17
   - Dropped support of loading query in obsolete Immutable string format used in versions 0.* (issue #254)
 - 2.1.16

README.md

@@ -192,9 +192,10 @@ Wrapping in `div.query-builder-container` is necessary if you put query builder
 
 ### `Utils`
 - Save, load:
-  #### getTree (immutableValue) -> Object
+  #### getTree (immutableValue, light = true) -> Object
   Convert query value from internal Immutable format to JS format. 
-  You can use it to save value on backend in `onChange` callback of `<Query>`.
+  You can use it to save value on backend in `onChange` callback of `<Query>`.  
+  Tip: Use `light = false` in case if you want to store query value in your state in JS format and pass it as `value` of `<Query>` after applying `loadTree()` (which is not recommended because of double conversion). See issue [#190](https://github.com/ukrbublik/react-awesome-query-builder/issues/190)
   #### loadTree (jsValue, config) -> Immutable
   Convert query value from JS format to internal Immutable format. 
   You can use it to load saved value from backend and pass as `value` prop to `<Query>` (don't forget to also apply `checkTree()`).
@@ -205,7 +206,7 @@ Wrapping in `div.query-builder-container` is necessary if you put query builder
   #### isValidTree (immutableValue) -> Boolean
   If `showErrorMessage` in config.settings is true, use this method to check is query has bad values.
 - Export:
-  #### queryString (immutableValue, config, isForDisplay) -> String
+  #### queryString (immutableValue, config, isForDisplay = false) -> String
   Convert query value to custom string representation. `isForDisplay` = true can be used to make string more "human readable".
   #### mongodbFormat (immutableValue, config) -> Object
   Convert query value to MongoDb query object.

modules/components/Query.jsx

@@ -127,16 +127,10 @@ export default class QueryContainer extends Component {
     }
 
     shouldComponentUpdate = liteShouldComponentUpdate(this, {
-      value: (nextValue, prevValue, state) => {
-        const storeValue = state.store.getState().tree;
-        return !immutableEqual(storeValue, nextValue) && !immutableEqual(prevValue, nextValue);
-      }
+      value: (nextValue, prevValue, state) => { return false; }
     });
 
     onPropsChanged(nextProps) {
-      if (this.props.dontDispatchOnNewProps)
-        return;
-        
       // compare configs
       const oldConfig = pick(this.props, configKeys);
       let nextConfig = pick(nextProps, configKeys);
@@ -145,16 +139,18 @@ export default class QueryContainer extends Component {
         nextConfig = extendConfig(nextConfig);
         this.setState({config: nextConfig});
       }
-        
+      
       // compare trees
       const storeValue = this.state.store.getState().tree;
       const isTreeChanged = !immutableEqual(nextProps.value, this.props.value) && !immutableEqual(nextProps.value, storeValue);
       if (isTreeChanged) {
         const nextTree = nextProps.value || defaultRoot({ ...nextProps, tree: null });
         const validatedTree = validateAndFixTree(nextTree, null, nextConfig, oldConfig);
-        this.state.store.dispatch(
-          actions.tree.setTree(nextProps, validatedTree)
-        );
+        return Promise.resolve().then(() => {
+          this.state.store.dispatch(
+            actions.tree.setTree(nextProps, validatedTree)
+          );
+        });
       }
     }
 

modules/index.d.ts

@@ -89,7 +89,7 @@ export interface Utils {
   sqlFormat(tree: ImmutableTree, config: Config): string;
   mongodbFormat(tree: ImmutableTree, config: Config): Object;
   // load, save
-  getTree(tree: ImmutableTree): JsonTree;
+  getTree(tree: ImmutableTree, light?: boolean): JsonTree;
   loadTree(jsonTree: JsonTree): ImmutableTree;
   checkTree(tree: ImmutableTree, config: Config): ImmutableTree;
   isValidTree(tree: ImmutableTree): boolean;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-query-builder",
-  "version": "2.1.18",
+  "version": "2.1.19",
   "description": "User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder",
   "keywords": [
     "query-builder",

tests/ChangeQueryProps.test.js

@@ -6,8 +6,8 @@ import { with_qb, load_tree } from "./utils";
 
 describe("change props", () => {
   it("change tree via props triggers onChange", () => {
-    with_qb(configs.simple_with_2_numbers, inits.with_num_and_num2, "JsonLogic", (qb, onChange, {expect_jlogic}) => {
-      qb.setProps({
+    with_qb(configs.simple_with_2_numbers, inits.with_num_and_num2, "JsonLogic", async (qb, onChange, {expect_jlogic}) => {
+      await qb.setProps({
         value: load_tree("JsonLogic", inits.with_number, configs.simple_with_2_numbers(BasicConfig))
       });
       expect_jlogic([null, inits.with_number]);