2.0.5

Author: ukrbublik

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog
+- 2.0.5
+ - Fixed TS types. Updated sandbox to TS
 - 2.0.4
  - Fixed import
 - 2.0.2

package.json

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

sandbox/package.json

@@ -17,11 +17,15 @@
   "author": "Denis Oblogin <ukrbublik@gmail.com> (https://github.com/ukrbublik)",
   "homepage": "https://ukrbublik.github.io/react-awesome-query-builder/",
   "dependencies": {
+    "@types/node": "^13.13.4",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
+    "antd": "^4.1.2",
     "react": "^16.4.1",
+    "react-awesome-query-builder": "^2.0.5",
     "react-dom": "^16.4.1",
-    "react-awesome-query-builder": "^2.0.3",
     "react-scripts": "3.0.1",
-    "antd": "^4.1.2"
+    "typescript": "^3.8.3"
   },
   "browserslist": {
     "production": [

sandbox/src/demo/config.jsx renamed to sandbox/src/demo/config.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import merge from 'lodash/merge';
-import { Widgets, Operators, BasicConfig } from 'react-awesome-query-builder';
+import {
+    BasicConfig,
+    // types:
+    Operators, Widgets, Fields, Config, Types, Conjunctions, Settings, LocaleSettings, OperatorProximity, Funcs,
+} from 'react-awesome-query-builder';
 import en_US from 'antd/lib/locale-provider/en_US';
 import ru_RU from 'antd/lib/locale-provider/ru_RU';
 import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
@@ -14,11 +18,36 @@ const {
 const InitialConfig = AntdConfig; // BasicConfig
 
 
-const conjunctions = {
+const conjunctions: Conjunctions = {
     ...InitialConfig.conjunctions
 };
 
-const operators = {
+
+const proximity: OperatorProximity = {
+    ...InitialConfig.operators.proximity,
+    valueLabels: [
+        { label: 'Word 1', placeholder: 'Enter first word' },
+        { label: 'Word 2', placeholder: 'Enter second word' },
+    ],
+    textSeparators: [
+        //'Word 1',
+        //'Word 2'
+    ],
+    options: {
+        ...InitialConfig.operators.proximity.options,
+        optionLabel: "Near", // label on top of "near" selectbox (for config.settings.showLabels==true)
+        optionTextBefore: "Near", // label before "near" selectbox (for config.settings.showLabels==false)
+        optionPlaceholder: "Select words between", // placeholder for "near" selectbox
+        minProximity: 2,
+        maxProximity: 10,
+        defaults: {
+            proximity: 2
+        },
+        customProps: {}
+    }
+};
+
+const operators: Operators = {
     ...InitialConfig.operators,
     // examples of  overriding
     between: {
@@ -32,32 +61,10 @@ const operators = {
             'to'
         ],
     },
-    proximity: {
-        ...InitialConfig.operators.proximity,
-        valueLabels: [
-            { label: 'Word 1', placeholder: 'Enter first word' },
-            { label: 'Word 2', placeholder: 'Enter second word' },
-        ],
-        textSeparators: [
-            //'Word 1',
-            //'Word 2'
-        ],
-        options: {
-            ...InitialConfig.operators.proximity.options,
-            optionLabel: "Near", // label on top of "near" selectbox (for config.settings.showLabels==true)
-            optionTextBefore: "Near", // label before "near" selectbox (for config.settings.showLabels==false)
-            optionPlaceholder: "Select words between", // placeholder for "near" selectbox
-            minProximity: 2,
-            maxProximity: 10,
-            defaults: {
-                proximity: 2
-            },
-            customProps: {}
-        }
-    },
+    proximity,
 };
 
-const widgets = {
+const widgets: Widgets = {
     ...InitialConfig.widgets,
     // examples of  overriding
     text: {
@@ -109,7 +116,7 @@ const widgets = {
 };
 
 
-const types = {
+const types: Types = {
     ...InitialConfig.types,
     // examples of  overriding
     boolean: merge(InitialConfig.types.boolean, {
@@ -125,7 +132,7 @@ const types = {
 };
 
 
-const localeSettings = {
+const localeSettings: LocaleSettings = {
     locale: {
         short: 'ru',
         full: 'ru-RU',
@@ -155,7 +162,7 @@ const localeSettings = {
     },
   };
 
-const settings = {
+const settings: Settings = {
     ...InitialConfig.settings,
     ...localeSettings,
 
@@ -186,7 +193,7 @@ const settings = {
 
 //////////////////////////////////////////////////////////////////////
 
-const fields = {
+const fields: Fields = {
     user: {
         label: 'User',
         tooltip: 'Group of fields',
@@ -383,7 +390,7 @@ const fields = {
 
 //////////////////////////////////////////////////////////////////////
 
-const funcs = {
+const funcs: Funcs = {
     LOWER: {
         label: 'Lowercase',
         mongoFunc: '$toLower',
@@ -428,14 +435,15 @@ const funcs = {
     },
 };
 
-
-export default {
+const config: Config = {
     conjunctions,
     operators,
     widgets,
     types,
     settings,
     fields,
-    funcs,
+    funcs
 };
 
+export default config;
+

sandbox/src/demo/demo.jsx renamed to sandbox/src/demo/demo.tsx

@@ -1,5 +1,9 @@
 import React, {Component} from 'react';
-import {Query, Builder, BasicConfig, Utils} from 'react-awesome-query-builder';
+import {
+  Query, Builder, Utils, 
+  //types:
+  ImmutableTree, Config, BuilderProps, JsonTree, JsonLogicTree
+} from 'react-awesome-query-builder';
 import throttle from 'lodash/throttle';
 import loadedConfig from './config';
 import loadedInitValue from './init_value';
@@ -10,15 +14,23 @@ const {queryBuilderFormat, jsonLogicFormat, queryString, mongodbFormat, sqlForma
 const preStyle = { backgroundColor: 'darkgrey', margin: '10px', padding: '10px' };
 const preErrorStyle = { backgroundColor: 'lightpink', margin: '10px', padding: '10px' };
 
-const emptyInitValue = {"id": uuid(), "type": "group"};
-const initValue = loadedInitValue && Object.keys(loadedInitValue).length > 0 ? loadedInitValue : emptyInitValue;
-const initLogic = loadedInitLogic && Object.keys(loadedInitLogic).length > 0 ? loadedInitLogic : undefined;
-let initTree;
+const emptyInitValue: JsonTree = {"id": uuid(), "type": "group"};
+const initValue: JsonTree = loadedInitValue && Object.keys(loadedInitValue).length > 0 ? loadedInitValue as JsonTree : emptyInitValue;
+const initLogic: JsonLogicTree = loadedInitLogic && Object.keys(loadedInitLogic).length > 0 ? loadedInitLogic : undefined;
+let initTree: ImmutableTree;
 initTree = checkTree(loadTree(initValue), loadedConfig);
 //initTree = checkTree(loadFromJsonLogic(initLogic, loadedConfig), loadedConfig); // <- this will work same  
 
 
-export default class DemoQueryBuilder extends Component {
+interface DemoQueryBuilderState {
+  tree: ImmutableTree;
+  config: Config;
+}
+
+export default class DemoQueryBuilder extends Component<{}, DemoQueryBuilderState> {
+    private immutableTree: ImmutableTree;
+    private config: Config;
+    
     state = {
       tree: initTree,
       config: loadedConfig
@@ -54,15 +66,15 @@ export default class DemoQueryBuilder extends Component {
       });
     };
 
-    renderBuilder = (props) => (
+    renderBuilder = (props: BuilderProps) => (
         <div className="query-builder-container" style={{padding: '10px'}}>
             <div className="query-builder qb-lite">
                 <Builder {...props} />
             </div>
         </div>
     )
 
-    onChange = (immutableTree, config) => {
+    onChange = (immutableTree: ImmutableTree, config: Config) => {
       this.immutableTree = immutableTree;
       this.config = config;
       this.updateResult();
@@ -73,7 +85,7 @@ export default class DemoQueryBuilder extends Component {
       this.setState({tree: this.immutableTree, config: this.config});
     }, 100)
 
-    renderResult = ({tree: immutableTree, config}) => {
+    renderResult = ({tree: immutableTree, config} : {tree: ImmutableTree, config: Config}) => {
       const {logic, data, errors} = jsonLogicFormat(immutableTree, config);
       return (
       <div>

sandbox/src/index.jsx renamed to sandbox/src/index.tsx

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

sandbox/src/react-app-env.d.ts

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "strictNullChecks": false,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src"
+  ]
+}

sandbox/tsconfig.json

@@ -1,3 +1,6 @@
 rm -rf lib
 babel -d lib ./modules
+cp modules/index.d.ts lib/index.d.ts
+cp modules/config/antd/index.d.ts lib/config/antd/index.d.ts
+cp modules/components/widgets/antd/index.d.ts lib/components/widgets/antd/index.d.ts
 find lib -type d -name __tests__ | xargs rm -rf