Add conditions example

rvsia · rvsia · commit 0ebc4524b57a · 2020-03-30T16:25:54.000+02:00
diff --git a/packages/react-renderer-demo/src/app/pages/renderer/condition.md b/packages/react-renderer-demo/src/app/pages/renderer/condition.md
@@ -34,7 +34,9 @@ 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 condition. At least one condition must be met
+### OR
+
+At least one condition must be met.
 
 You can use `or` object to connect two conditions. If either of of fields with name `a` and `b` will have value `x` condition is met.
 
@@ -81,7 +83,11 @@ Also, you can use a shorthand:
 }
 ```
 
-### AND condition. All conditions must be met
+<RawComponent source="conditions/or" />
+
+### AND
+
+All conditions must be met.
 
 Field `controlled-field-1` must have value `Bar` and field `controlled-field-2` must include `FooBar` somewhere in its value to display field `BarFoo`.
 
@@ -154,6 +160,8 @@ Or you can use a shorthand:
 }
 ```
 
+<RawComponent source="conditions/and" />
+
 ### Not
 
 You can simple negate a condition by using a `not`. Following condition is a true, when both of values are not a `x`.
@@ -189,9 +197,11 @@ You can simple negate a condition by using a `not`. Following condition is a tru
 
 As the value you can use an array (AND) or another condition.
 
+<RawComponent source="conditions/not" />
+
 ### Nesting
 
-Of course it is possible to neste conditions:
+Of course it is possible to nest conditions:
 
 ```jsx
 condition = {
@@ -202,6 +212,8 @@ condition = {
 };
 ```
 
+<RawComponent source="condition" />
+
 ## Conditions
 
 ### Is
@@ -217,6 +229,9 @@ condition: {
 // Foo == 'Bar' => true
 // Foo == 'Not a Bar' => false
 ```
+
+<RawComponent source="conditions/is" />
+
 ### Is empty
 
 `isEmpty` - tests if the value is empty (using [lodash function](https://lodash.com/docs/4.17.11#isEmpty))
@@ -237,6 +252,9 @@ condition: {
 // Foo = false => true
 // Foo = true => false
 ```
+
+<RawComponent source="conditions/is-empty" />
+
 ### Is not empty
 
 `isNotEmpty` - tests if the value is not empty (using [lodash function](https://lodash.com/docs/4.17.11#isEmpty))
@@ -257,6 +275,9 @@ condition: {
 // Foo = true => false
 // Foo = true => true
 ```
+
+<RawComponent source="conditions/is-not-empty" />
+
 ### Pattern
 
 `pattern` - tests if the value matches the pattern
@@ -284,6 +305,8 @@ condition: {
 // Foo = 'bAr!' => true
 ```
 
+<RawComponent source="conditions/pattern" />
+
 ### Not match
 
 `notMatch` - reverse `is`/`pattern` condition
@@ -309,9 +332,7 @@ condition: {
 // Foo = 'bar' => false
 ```
 
-## Example
-
-<RawComponent source="condition" />
+<RawComponent source="conditions/not-match" />
 
 ## Clearing values
 
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/conditions/and.js b/packages/react-renderer-demo/src/app/src/doc-components/conditions/and.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: 'And condition',
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-1',
+      label: 'Field 1',
+      helperText: 'To show field 3 type a cat here...'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-2',
+      label: 'Field 1',
+      helperText: '...and dog here.'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-3',
+      label: 'Field 3',
+      initialValue: 'I am shown!',
+      isDisabled: true,
+      condition: {
+        and: [
+          { when: 'field-1', is: 'cat' },
+          { when: 'field-2', is: 'dog' }
+        ]
+      }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const AndCondition = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default AndCondition;
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/conditions/is-empty.js b/packages/react-renderer-demo/src/app/src/doc-components/conditions/is-empty.js
@@ -0,0 +1,39 @@
+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: 'IsEmpty condition',
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-1',
+      label: 'Field 1',
+      helperText: 'To show field 2 remove cat here!',
+      initialValue: 'cat'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-2',
+      label: 'Field 2',
+      initialValue: 'I am shown!',
+      isDisabled: true,
+      condition: { when: 'field-1', isEmpty: true }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const IsEmpty = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default IsEmpty;
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/conditions/is-not-empty.js b/packages/react-renderer-demo/src/app/src/doc-components/conditions/is-not-empty.js
@@ -0,0 +1,38 @@
+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: 'IsNotEmpty condition',
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-1',
+      label: 'Field 1',
+      helperText: 'To show field 2 write anything here!'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-2',
+      label: 'Field 2',
+      initialValue: 'I am shown!',
+      isDisabled: true,
+      condition: { when: 'field-1', isNotEmpty: true }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const IsNotEmpty = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default IsNotEmpty;
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/conditions/is.js b/packages/react-renderer-demo/src/app/src/doc-components/conditions/is.js
@@ -0,0 +1,38 @@
+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: 'Is condition',
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-1',
+      label: 'Field 1',
+      helperText: 'To show field 2 type cat here!'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-2',
+      label: 'Field 2',
+      initialValue: 'I am shown!',
+      isDisabled: true,
+      condition: { when: 'field-1', is: 'cat' }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const IsCondition = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default IsCondition;
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/conditions/not-match.js b/packages/react-renderer-demo/src/app/src/doc-components/conditions/not-match.js
@@ -0,0 +1,39 @@
+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: 'notMatch condition',
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-1',
+      label: 'Field 1',
+      helperText: 'To show field 2 remove the cat!',
+      initialValue: 'blablacatbla'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-2',
+      label: 'Field 2',
+      initialValue: 'I am shown!',
+      isDisabled: true,
+      condition: { when: 'field-1', pattern: /cat/, notMatch: true }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const NotMatch = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default NotMatch;
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/conditions/not.js b/packages/react-renderer-demo/src/app/src/doc-components/conditions/not.js
@@ -0,0 +1,41 @@
+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: 'Not condition',
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-1',
+      label: 'Field 1',
+      helperText: 'To show field 2 type anything else than cat here!',
+      initialValue: 'cat'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'field-2',
+      label: 'Field 2',
+      initialValue: 'I am shown!',
+      isDisabled: true,
+      condition: {
+        not: { when: 'field-1', is: 'cat' }
+      }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const NotCondition = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default NotCondition;
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/conditions/or.js b/packages/react-renderer-demo/src/app/src/doc-components/conditions/or.js
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/conditions/pattern.js b/packages/react-renderer-demo/src/app/src/doc-components/conditions/pattern.js
