Add sequence and conditional actions to demo

Author: rvsia

packages/react-renderer-demo/src/app/pages/renderer/condition.md

@@ -34,7 +34,7 @@ You can show a field only if it meets a condition:
 
 `when` - is name of field where the value is stored, **always required!**. It can be either string `'field-name'` or array of strings `['field-1', 'field-2']`.
 
-### OR
+### Or
 
 At least one condition must be met.
 
@@ -85,7 +85,7 @@ Also, you can use a shorthand:
 
 <RawComponent source="conditions/or" />
 
-### AND
+### And
 
 All conditions must be met.
 
@@ -199,6 +199,27 @@ As the value you can use an array (AND) or another condition.
 
 <RawComponent source="conditions/not" />
 
+### Sequence
+
+This special type of condition allows to trigger a sequence of multiple independent conditions. This is useful in combination with [conditional actions](/renderer/condition#conditionalactions). Setters are executed independently. Visibility is set to true, if any of the conditions sets it to true. Sequence has to be currently the root condition, that means the sequence cannot be nested within other types of conditions such as `and`, `or` and `not`.
+
+```jsx
+{
+  fields: [{
+    name: 'Sequence condition',
+    component: 'text-field',
+    condition: {
+      sequence: [
+        { when: ['a'], is: 'x', then: { set: { field: 'value' } } },
+        { when: ['b'], is: 'x', then: { set: { field: 'different value' } } }
+      ]
+    }
+  }]
+}
+```
+
+<RawComponent source="conditions/sequence" />
+
 ### Nesting
 
 Of course it is possible to nest conditions:
@@ -334,6 +355,44 @@ condition: {
 
 <RawComponent source="conditions/not-match" />
 
+## Conditional actions
+
+There are currently two types of conditionals actions: `visible` and `set`. These actions can be called from `then` or `else` statements in root conditions. (Conditions has to be the root of the condition tree, or they have to be included in a [sequence](/renderer/condition#sequence) array.)
+
+```jsx
+condition: { when: 'x', is: 'y', then: { ... }, else: { ... } }
+```
+
+### Set
+
+Setter allows to change form values according to selected values in different fields.
+
+```jsx
+// Single value
+condition: { when: 'x', is: 'y', then: { set: { [field]: value } } }
+
+// Multiple values
+condition: {
+  when: 'x',
+  is: 'y',
+  then: { set: { [field1]: value1, [field2]: value2 } }
+}
+```
+
+Set is a object consists of field names as keys and values as values. You can change any form field value from any conditional action.
+
+### Visible
+
+Visible controls visibility of the field that includes the condition. By default, it is set to `true`.
+
+```jsx
+condition: { when: 'x', is: 'y', then: { visible: true } }
+```
+
+### Example
+
+<RawComponent source="conditions/set" />
+
 ## Clearing values
 
 If you need to clear values after switching fields, please see [here](/renderer/unmounting).

packages/react-renderer-demo/src/app/src/doc-components/conditions/sequence.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+
+import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
+import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
+
+const schema = {
+  title: 'Sequence condition',
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-1',
+      label: 'What do you like?',
+      helperText: 'Write dog or cat here.'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-2',
+      label: 'What I like...',
+      isDisabled: true,
+      condition: {
+        sequence: [
+          { when: 'field-1', pattern: /^cat/i, then: { set: { 'field-2': 'I love cats!' } }, else: { visible: true } },
+          { when: 'field-1', pattern: /^dog/i, then: { set: { 'field-2': 'I love dogs!' } }, else: { visible: true } },
+          {
+            when: 'field-1',
+            notMatch: 'true',
+            pattern: /^(cat|dog)/i,
+            then: { set: { 'field-2': 'I love something else!' } },
+            else: { visible: true }
+          }
+        ]
+      }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const SequenceCondition = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default SequenceCondition;

packages/react-renderer-demo/src/app/src/doc-components/conditions/set.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+
+import Checkbox from '@data-driven-forms/pf4-component-mapper/dist/cjs/checkbox';
+import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
+import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
+
+const schema = {
+  title: 'Set action',
+  fields: [
+    {
+      component: componentTypes.CHECKBOX,
+      name: 'useDefaultNickName',
+      label: 'Do you want to use default nickname?',
+      condition: {
+        when: 'nickname',
+        is: 'User123',
+        notMatch: true,
+        then: {
+          set: { useDefaultNickName: false }
+        },
+        else: { visible: true, set: { useDefaultNickName: true } }
+      },
+      description: 'set: {} is used to reset the setter'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'nickname',
+      label: 'Nickname',
+      condition: {
+        when: 'useDefaultNickName',
+        is: true,
+        then: {
+          set: { nickname: 'User123' }
+        },
+        else: { visible: true, set: {} }
+      }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.CHECKBOX]: Checkbox,
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const SetAction = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default SetAction;