Support JsonLogic import for ternary mode (#1062)

* wip

* .

* .

* .

* pr

* .

* .

.

* fixes

* fix lint

* .

* 2 tests

CHANGELOG.md

@@ -1,12 +1,15 @@
 # Changelog
 - 6.6.0
   - Optimizations for rendering and export utils (PR #1054) (issue #342)
-  - Add JsonLogic Export for SwitchCase (PR #1013)
-  - Add support of `tooltip` for operator config (PR #1011) (issue #261)
+  - Added support of JsonLogic export for ternary mode (PR #1013) (issue #978)
+  - Added support of JsonLogic import for ternary mode (PR #1062) (issue #978)
+  - Added support of `tooltip` for operator config (PR #1011) (issue #261)
   - Removed `optimizeRenderWithInternals` from `settings` (PR #1054)
   - Fixed `TreeStore` - 2nd arg `action` can be undefined (PR #1054) (issue #1056)
   - Fixed import of negative number in SpEL (PR #1054) (issue #1055)
   - Fixed validation error message for min/max (PR #1058) (issue #1057)
+  - (Ternary mode) Added to `config.settings`: `caseValueField`, `renderBeforeCaseValue`, `renderAfterCaseValue`, `renderSwitchPrefix`, `defaultCaseLabel`, `addCaseLabel`, `addDefaultCaseLabel` (PR #1062)
+  - Use icon button label as the aria-label to improve accessibility (PR #1066) (issue #1038)
 - 6.5.2
   - Updated dependencies. `@babel/runtime` is now dep for core package (PR #1051) (issue #964)
 - 6.5.1

CONFIG.adoc

@@ -315,13 +315,15 @@ Behaviour settings:
 |keepInputOnChangeFieldSrc |true |Keep value entered in RHS after changing source of LHS? 
 |showErrorMessage |false |Show error message in QueryBuilder if `validateValue()` in field config returns false for the value or if input value does not satisfy `max`, `min` constraints in `fieldSettings`
 |canReorder |true |Activate reordering support for rules and groups of rules?
-|canRegroup |true |Allow move rules (or groups) in/out groups during reorder? +
+|canRegroup |true |Allow to move a rule (group) in/out of group during reorder? +
   False - allow "safe" reorder, means only reorder at same level
+|canRegroupCases |false |For ternary mode - Allow to move a rule (group) from one case to another?
 |showNot |true |Show `NOT` together with `AND`/`OR`?
 |forceShowConj |false |Show conjuction for 1 rule in group?
 |maxNumberOfRules | |Maximum number of rules which can be added to the query builder
 |maxNesting | |Max nesting for rule groups. +
   Set `1` if you don't want to use groups at all. This will remove also `Add group` button.
+|maxNumberOfCases | |For ternary mode - maximum number of cases
 |canLeaveEmptyGroup |true |True - leave empty group after deletion of rules, false - automatically remove empty groups + add 1 empty rule to empty root
 |shouldCreateEmptyGroup |false |False - automatically add 1 empty rule into new group
 |immutableGroupsMode |false |Not allow to add/delete rules or groups, but allow change
@@ -386,6 +388,9 @@ Render settings:
 |renderAfterWidget | | 
 |renderBeforeActions | | 
 |renderAfterActions | | 
+|renderSwitchPrefix |`IF` | For ternary mode - render on top of all confitions
+|renderBeforeCaseValue |`<span>then</span>` | For ternary mode - render before case value (except default case), after case condition tree
+|renderAfterCaseValue | | For ternary mode - render after case value (except default case)
 |defaultSliderWidth |`200px` |Width for slider
 |defaultSelectWidth |`200px` |Width for select
 |defaultSearchWidth |`100px` |Width for search in autocomplete
@@ -422,6 +427,8 @@ Other settings:
 |fieldSeparatorDisplay |`.` |Separator for struct fields in UI.
 |defaultField | |Field to be selected by default for new rule.
 |defaultOperator | |Operator to be selected by default for new rule.
+|caseValueField | |(For ternary mode) Special field config to be used for displaying widget in "then" parts. +
+  Example: `{type: "text"}` for simple text input in "then" part
 |===
 
 Localization:
@@ -457,6 +464,9 @@ Localization:
 |removeGroupConfirmOptions.okText |Yes
 |removeGroupConfirmOptions.okType |`danger`
 |removeGroupConfirmOptions.cancelText |Cancel
+|defaultCaseLabel |Default:
+|addCaseLabel |Add condition
+|addDefaultCaseLabel |Add default condition
 |===
 
 

README.md

@@ -48,6 +48,7 @@ See [live demo](https://ukrbublik.github.io/react-awesome-query-builder)
   * [Config format](#config-format)
   * [Validation](#validation)
 * [i18n](#i18n)
+* [Ternary mode](#ternary-mode)
 * [SSR](#ssr)
   * [ctx](#ctx)
 * [Versions](#versions)
@@ -67,33 +68,23 @@ See [live demo](https://ukrbublik.github.io/react-awesome-query-builder)
 
 ### Features
 [![Screenshot](https://user-images.githubusercontent.com/3238637/209590656-f32497be-6b74-4837-8414-4f44d78215ae.png)](https://ukrbublik.github.io/react-awesome-query-builder)
-- Highly configurable
-- Fields can be of type:
-  - simple (string, number, bool, date/time/datetime, list)
-  - structs (will be displayed in selectbox as tree)
-  - custom type (dev should add its own widget component in config for this)
-- Comparison operators can be:
-  - binary (== != < > ..)
-  - unary (is empty, is null)
-  - 'between' (for numbers, dates, times)
-  - complex operators like 'proximity'
-- RHS can be:
-  - values
-  - another fields (of same type)
-  - functions (arguments also can be values/fields/funcs)
-- LHS can be field or function
-- Reordering (drag-n-drop) support for rules and groups of rules
-- Themes:
-  - [Ant Design](https://ant.design/)
-  - [Material-UI](https://mui.com/)
-  - [Bootstrap](https://reactstrap.github.io/)
-  - [Fluent UI](https://developer.microsoft.com/en-us/fluentui)
-  - vanilla
-  (Using another UI framework and custom widgets is possible, see below)
-- Export to MongoDb, SQL, [JsonLogic](http://jsonlogic.com), [SpEL](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html), ElasticSearch or your custom format
-- Import from [JsonLogic](http://jsonlogic.com), [SpEL](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html)
-- TypeScript support (see [types](/packages/core/modules/index.d.ts) and [demo in TS](/packages/examples))
-- Query value and config can be saved/loaded from server
+
+* Highly configurable.
+  You can configure fields, types, operators, functions, widgets, behavior settings etc.
+* Fields can have simple type (string, number, bool, date/time, list), custom or complex (structs, arrays)
+* Aggregation is supported (query like "COUNT OF users WHERE (role == 'Manager' AND department == 'Development') > 5")
+* Fields can be compared with other fields
+* Comparison operators can be: binary (== != < >), unary ('is null'), 'between' or complex operators like 'proximity'
+* Functions are supported in both LHS and RHS.
+  Functions nesting is supported (function argument can be a function)
+* [Ternary mode](#ternary-mode) (if-then-else)
+* Export to MongoDb, SQL, [JsonLogic](http://jsonlogic.com), [SpEL](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html), ElasticSearch or your custom format
+* Import from [JsonLogic](http://jsonlogic.com), [SpEL](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html)
+* Reordering (drag-n-drop) support for rules and groups of rules
+* Query value and config can be saved/loaded from server
+* Themes: [Ant Design](https://ant.design/), [Material-UI](https://mui.com/), [Bootstrap](https://reactstrap.github.io/), [Fluent UI](https://developer.microsoft.com/en-us/fluentui), vanilla
+  It is possible to use another UI framework of your choice, see [how-to](/CONTRIBUTING.md#other-ui-frameworks)
+* TypeScript support (see [types](/packages/core/modules/index.d.ts) and [demo in TS](/packages/examples))
 
 
 ## Getting started
@@ -629,6 +620,51 @@ const config = {
 See [example](/packages/examples/demo/index.tsx).
 
 
+## Ternary mode
+
+First you need to configure `caseValueField` in `config.settings`. Example to use tags as case values:
+```js
+const config: Config = {
+  ...InitialConfig,
+  fields,
+  settings: {
+    ...InitialConfig.settings,
+    caseValueField: {
+      type: "select",
+      valueSources: ["value"],
+      fieldSettings: {
+        listValues: [
+          { value: "tag1", title: "Tag #1" },
+          { value: "tag2", title: "Tag #2" },
+        ],
+      },
+      mainWidgetProps: {
+        valueLabel: "Then",
+        valuePlaceholder: "Then",
+      },
+    },
+    canRegroupCases: true,
+    maxNumberOfCases: 10,
+  }
+};
+```
+
+You can use other type/widget (including your custom one) to render case values.  
+Also you can use function (action) by specifying `valueSources: ["func"]` in `caseValueField`. 
+You have to add [funcs](/CONFIG.adoc#configfuncs) to the config (with `returnType` equals `type` in case value field).
+
+Load empty tree in ternary mode:
+```js
+import { Utils as QbUtils, JsonSwitchGroup } from '@react-awesome-query-builder/ui';
+const emptyJson: JsonSwitchGroup = { id: QbUtils.uuid(), type: "switch_group", };
+const tree = QbUtils.loadTree(emptyJson);
+```
+
+See [example](/packages/examples/demo_switch/index.tsx)
+
+![Screenshot](https://github.com/ukrbublik/react-awesome-query-builder/assets/3238637/4bf87da5-47f2-4a64-b1be-8924a62f96ad)
+
+
 ## SSR
 You can save and load config from server with help of utils:
 - [Utils.compressConfig()](#compressconfig)

packages/core/modules/config/default.js

@@ -1,14 +1,13 @@
-
-
 export const settings = {
   formatField: (field, parts, label2, fieldDefinition, config, isForDisplay) => {
     if (isForDisplay)
       return label2;
     else
       return field;
   },
-
-
+  caseValueField: {
+    type: "case_value",
+  },
   fieldSources: ["field"],
   keepInputOnChangeFieldSrc: true,
   fieldItemKeysForSearch: ["label", "path", "altLabel", "grouplabel"],

packages/core/modules/config/index.js

@@ -933,6 +933,9 @@ const widgets = {
     valueLabel: "Function",
     valuePlaceholder: "Select function",
   },
+  /**
+   * @deprecated
+   */
   case_value: {
     valueSrc: "value",
     type: "case_value",
@@ -1217,10 +1220,15 @@ const types = {
       }
     }
   },
+  /**
+   * @deprecated
+   */
   "case_value": {
     mainWidget: "case_value",
     widgets: {
-      case_value: {}
+      case_value: {
+        widgetProps: {},
+      }
     }
   },
 };