Merge pull request #337 from react-querybuilder/between-fields

Support "between" operator for `valueSource: "field"` and `valueEditorType: "select"`
react-querybuilder · Jul 5, 2022 · 74409f7 · 74409f7
2 parents 440a27b + d1023f5
commit 74409f7
Show file tree

Hide file tree

Showing 60 changed files with 1,013 additions and 534 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Prettify code
         uses: creyD/prettier_action@v3.1
         with:
-          prettier_options: --write packages/*/src/** ./*.js examples/**/*
+          prettier_options: --write packages/*/src/** packages/*/dev/** ./*.js examples/**/*
           prettier_version: 2.6.2
           commit_message: 'Prettified code'
         env:

diff --git a/.prettierrc.json b/.prettierrc.json
@@ -6,5 +6,13 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "bracketSameLine": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "overrides": [
+    {
+      "files": "examples/*/**",
+      "options": {
+        "printWidth": 80
+      }
+    }
+  ]
 }
diff --git a/examples/_template/src/index.scss b/examples/_template/src/index.scss
@@ -6,7 +6,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 // __SCSS_POST__
diff --git a/examples/antd/src/index.scss b/examples/antd/src/index.scss
@@ -6,7 +6,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .queryBuilder {

diff --git a/examples/basic-ts/src/App.tsx b/examples/basic-ts/src/App.tsx
@@ -17,7 +17,11 @@ export const App = () => {
 
   return (
     <div>
-      <QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />
+      <QueryBuilder
+        fields={fields}
+        query={query}
+        onQueryChange={q => setQuery(q)}
+      />
       <h4>Query</h4>
       <pre>
         <code>{formatQuery(query, 'json')}</code>

diff --git a/examples/basic-ts/src/index.scss b/examples/basic-ts/src/index.scss
@@ -5,5 +5,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
diff --git a/examples/basic/src/App.jsx b/examples/basic/src/App.jsx
@@ -15,7 +15,11 @@ export const App = () => {
 
   return (
     <div>
-      <QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />
+      <QueryBuilder
+        fields={fields}
+        query={query}
+        onQueryChange={q => setQuery(q)}
+      />
       <h4>Query</h4>
       <pre>
         <code>{formatQuery(query, 'json')}</code>

diff --git a/examples/basic/src/index.css b/examples/basic/src/index.css
@@ -5,5 +5,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
diff --git a/examples/bootstrap/src/index.scss b/examples/bootstrap/src/index.scss
@@ -7,7 +7,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .queryBuilder {

diff --git a/examples/bulma/src/index.scss b/examples/bulma/src/index.scss
@@ -8,7 +8,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .queryBuilder {

diff --git a/examples/chakra/src/index.scss b/examples/chakra/src/index.scss
@@ -5,7 +5,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .queryBuilder {

diff --git a/examples/ci/index.html b/examples/ci/index.html
@@ -2,7 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <title>React Query Builder CI</title>
   </head>

diff --git a/examples/ci/src/App.tsx b/examples/ci/src/App.tsx
@@ -1,17 +1,32 @@
 import { useReducer, useState } from 'react';
-import type { DefaultRuleGroupType, QueryBuilderProps } from 'react-querybuilder';
-import { defaultValidator, formatQuery, QueryBuilder } from 'react-querybuilder';
+import type {
+  DefaultRuleGroupType,
+  QueryBuilderProps,
+} from 'react-querybuilder';
+import {
+  defaultValidator,
+  formatQuery,
+  QueryBuilder,
+} from 'react-querybuilder';
 import { fields } from './fields';
 import './index.scss';
 import { initialQuery, initialQueryIC } from './initialQuery';
-import type { DefaultQBPropsNoDefaultQuery, DefaultQBPropsNoDefaultQueryIC } from './types';
+import type {
+  DefaultQBPropsNoDefaultQuery,
+  DefaultQBPropsNoDefaultQueryIC,
+} from './types';
 import { defaultOptions, optionsOrder, optionsReducer } from './utils';
 
 export const App = () => {
   const [query, setQuery] = useState(initialQuery);
   const [queryIC, setQueryIC] = useState(initialQueryIC);
   const [options, dispatch] = useReducer(optionsReducer, defaultOptions);
-  const { useValidation, independentCombinators, parseNumbers, ...commonOptions } = options;
+  const {
+    useValidation,
+    independentCombinators,
+    parseNumbers,
+    ...commonOptions
+  } = options;
   const commonProps: QueryBuilderProps<DefaultRuleGroupType> = {
     fields,
     ...commonOptions,
@@ -46,7 +61,10 @@ export const App = () => {
               type="checkbox"
               checked={options[optionName]}
               onChange={e =>
-                dispatch({ type: 'update', payload: { optionName, value: e.target.checked } })
+                dispatch({
+                  type: 'update',
+                  payload: { optionName, value: e.target.checked },
+                })
               }
             />
             {optionName}
@@ -58,39 +76,61 @@ export const App = () => {
       </h5>
       <pre>
         {JSON.stringify(
-          JSON.parse(formatQuery(queryForFormatting, { format: 'json_without_ids', parseNumbers })),
+          JSON.parse(
+            formatQuery(queryForFormatting, {
+              format: 'json_without_ids',
+              parseNumbers,
+            })
+          ),
           null,
           2
         )}
       </pre>
       <h5>Parameterized SQL</h5>
       <pre>
         {JSON.stringify(
-          formatQuery(queryForFormatting, { format: 'parameterized', parseNumbers }),
+          formatQuery(queryForFormatting, {
+            format: 'parameterized',
+            parseNumbers,
+          }),
           null,
           2
         )}
       </pre>
       <h5>Parameterized (Named) SQL</h5>
       <pre>
         {JSON.stringify(
-          formatQuery(queryForFormatting, { format: 'parameterized_named', parseNumbers }),
+          formatQuery(queryForFormatting, {
+            format: 'parameterized_named',
+            parseNumbers,
+          }),
           null,
           2
         )}
       </pre>
       <h5>SQL</h5>
-      <pre>{formatQuery(queryForFormatting, { format: 'sql', parseNumbers })}</pre>
+      <pre>
+        {formatQuery(queryForFormatting, { format: 'sql', parseNumbers })}
+      </pre>
       <h5>MongoDB</h5>
-      <pre>{formatQuery(queryForFormatting, { format: 'mongodb', parseNumbers })}</pre>
+      <pre>
+        {formatQuery(queryForFormatting, { format: 'mongodb', parseNumbers })}
+      </pre>
       <h5>CEL</h5>
-      <pre>{formatQuery(queryForFormatting, { format: 'cel', parseNumbers })}</pre>
+      <pre>
+        {formatQuery(queryForFormatting, { format: 'cel', parseNumbers })}
+      </pre>
       <h5>SpEL</h5>
-      <pre>{formatQuery(queryForFormatting, { format: 'spel', parseNumbers })}</pre>
+      <pre>
+        {formatQuery(queryForFormatting, { format: 'spel', parseNumbers })}
+      </pre>
       <h5>JsonLogic</h5>
       <pre>
         {JSON.stringify(
-          formatQuery(queryForFormatting, { format: 'jsonlogic', parseNumbers }),
+          formatQuery(queryForFormatting, {
+            format: 'jsonlogic',
+            parseNumbers,
+          }),
           null,
           2
         )}

diff --git a/examples/ci/src/utils.ts b/examples/ci/src/utils.ts
@@ -34,7 +34,10 @@ export const optionsOrder: CIOption[] = [
   'parseNumbers',
 ];
 
-export const optionsReducer = (state: CIOptions, action: CIOptionsAction): CIOptions => {
+export const optionsReducer = (
+  state: CIOptions,
+  action: CIOptionsAction
+): CIOptions => {
   const { optionName, value } = action.payload;
   return { ...state, [optionName]: value };
 };
diff --git a/examples/generateExamples.mjs b/examples/generateExamples.mjs
@@ -151,6 +151,7 @@ for (const exampleID in configs) {
     const fileContents = (await readFile(filePath)).toString('utf-8');
     const prettified = prettier.format(fileContents, {
       ...prettierConfig,
+      printWidth: 80, // narrower since codesandbox code panel is narrow
       filepath: filePath,
       plugins: ['prettier-plugin-organize-imports'],
     });

diff --git a/examples/material/src/index.scss b/examples/material/src/index.scss
@@ -5,5 +5,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "test:watch": "jest --watch",
     "type-check": "yarn workspaces run type-check && tsc -p examples",
     "publish:demo": "yarn build && node gh-pages.publish.js",
-    "pretty-print": "prettier --write packages/*/src/** ./*.js examples/**/*",
+    "pretty-print": "prettier --write packages/*/src/** packages/*/dev/** ./*.js examples/**/*",
     "generate-changelog": "github-changes --owner react-querybuilder --repository react-querybuilder --auth --use-commit-body --only-pulls --date-format=\"(YYYY-MM-DD)\"",
     "generate-examples": "node ./examples/generateExamples.mjs"
   },

diff --git a/packages/antd/dev/main.tsx b/packages/antd/dev/main.tsx
@@ -1,8 +1,8 @@
+import 'antd/dist/antd.compact.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from 'react-querybuilder/dev';
 import { antdControlElements } from '../src';
-import 'antd/dist/antd.compact.css';
 import './styles.scss';
 
 createRoot(document.getElementById('app')!).render(

diff --git a/packages/antd/dev/styles.scss b/packages/antd/dev/styles.scss
@@ -1,3 +1,3 @@
-body {
-  margin: 1rem;
+.ant-input {
+  width: auto;
 }