Add show/hide data to rule example

* Add show/hide data to rule example * Restructure rule example
eclipsesource · Jul 10, 2020 · 4c3f710 · 4c3f710
1 parent d205f2c
commit 4c3f710
Showing 1 changed file with 53 additions and 17 deletions.
diff --git a/packages/examples/src/rule.ts b/packages/examples/src/rule.ts
@@ -30,50 +30,86 @@ export const schema = {
     name: {
       type: 'string'
     },
-    alive: {
+    dead: {
       type: 'boolean'
     },
     kindOfDead: {
       type: 'string',
       enum: ['Zombie', 'Vampire', 'Ghoul']
+    },
+    vegetables: {
+      type: 'boolean'
+    },
+    kindOfVegetables: {
+      type: 'string',
+      enum: ['All', 'Some', 'Only potatoes']
     }
   }
 };
 
 export const uischema = {
-  type: 'HorizontalLayout',
+  type: 'VerticalLayout',
   elements: [
     {
       type: 'Control',
       label: 'Name',
       scope: '#/properties/name'
     },
     {
-      type: 'Control',
-      label: 'Is Alive?',
-      scope: '#/properties/alive'
+      type: 'Group',
+      elements: [
+        {
+          type: 'Control',
+          label: 'Is Dead?',
+          scope: '#/properties/dead'
+        },
+        {
+          type: 'Control',
+          label: 'Kind of dead',
+          scope: '#/properties/kindOfDead',
+          rule: {
+            effect: 'ENABLE',
+            condition: {
+              scope: '#/properties/dead',
+              schema: {
+                const: true
+              }
+            }
+          }
+        }
+      ]
     },
     {
-      type: 'Control',
-      label: 'Kind of dead',
-      scope: '#/properties/kindOfDead',
-      rule: {
-        effect: 'DISABLE',
-        condition: {
-          scope: '#/properties/alive',
-          schema: {
-            const: true
+      type: 'Group',
+      elements: [
+        {
+          type: 'Control',
+          label: 'Eats vegetables?',
+          scope: '#/properties/vegetables'
+        },
+        {
+          type: 'Control',
+          label: 'Kind of vegetables',
+          scope: '#/properties/kindOfVegetables',
+          rule: {
+            effect: 'HIDE',
+            condition: {
+              scope: '#/properties/vegetables',
+              schema: {
+                const: false
+              }
+            }
           }
         }
-      }
+      ]
     }
   ]
 };
 
 export const data = {
   name: 'John Doe',
-  alive: true,
-  kindOfDead: 'Zombie'
+  dead: false,
+  vegetables: false,
 };
 
 registerExamples([