feat(renderer): add function to filter invisible fields in the schema

Author: rvsia

packages/react-form-renderer/src/get-visible-fields/get-visible-fields.d.ts

@@ -0,0 +1,5 @@
+import { Schema, AnyObject } from "../common-types";
+
+declare function getVisibleFields(schema: Schema, values: AnyObject ): Schema;
+
+export default getVisibleFields;

packages/react-form-renderer/src/get-visible-fields/get-visible-fields.js

@@ -0,0 +1,27 @@
+import parseCondition from '../parse-condition';
+
+const getVisibleFields = (schema, values) => {
+  if (Array.isArray(schema)) {
+    return schema.map((field) => getVisibleFields(field, values)).filter(Boolean);
+  }
+
+  if (schema.condition) {
+    const result = parseCondition(schema.condition, values, schema);
+
+    if (result.visible) {
+      return {
+        ...schema,
+        ...(schema.fields && { fields: getVisibleFields(schema.fields, values).filter(Boolean) })
+      };
+    } else {
+      return null;
+    }
+  }
+
+  return {
+    ...schema,
+    ...(schema.fields && { fields: getVisibleFields(schema.fields, values).filter(Boolean) })
+  };
+};
+
+export default getVisibleFields;

packages/react-form-renderer/src/get-visible-fields/index.d.ts

@@ -0,0 +1 @@
+export { default } from './get-visible-fields';

packages/react-form-renderer/src/get-visible-fields/index.js

@@ -0,0 +1 @@
+export { default } from './get-visible-fields';

packages/react-form-renderer/src/tests/validation/get-visible-fields.test.js

@@ -0,0 +1,65 @@
+import getVisibleFields from '../../get-visible-fields';
+
+describe('getVisibleFields', () => {
+  it('parses conditions', () => {
+    let schema = {
+      fields: [
+        {
+          name: 'visible-1',
+          component: 'text'
+        },
+        {
+          name: 'visible-2',
+          condition: { when: 'x', is: 1 }
+        },
+        {
+          name: 'invisible-1',
+          condition: { not: { when: 'x', is: 1 } }
+        },
+        {
+          name: 'visible-nested',
+          fields: [
+            {
+              name: 'visible-nested-1',
+              condition: { when: 'y.nested.x', is: 1 }
+            },
+            {
+              name: 'invisible-nested-1',
+              condition: { not: { when: 'y.nested.x', is: 1 } }
+            }
+          ]
+        },
+        {
+          name: 'visible-nested-2',
+          condition: { when: 'y.nested.x', is: 1 },
+          fields: [{ name: 'visible-nested-2-1' }]
+        },
+        {
+          name: 'invisible-nested',
+          condition: { when: 'x', is: 2 },
+          fields: [
+            {
+              name: 'invisible-nested-1',
+              condition: { when: 'x', is: 1 }
+            },
+            {
+              name: 'invisible-nested-2',
+              condition: { not: { when: 'x', is: 1 } }
+            }
+          ]
+        }
+      ]
+    };
+
+    const values = { x: 1, y: { nested: { x: 1 } } };
+
+    expect(getVisibleFields(schema, values)).toEqual({
+      fields: [
+        { name: 'visible-1', component: 'text' },
+        { name: 'visible-2', condition: { is: 1, when: 'x' } },
+        { name: 'visible-nested', fields: [{ condition: { is: 1, when: 'y.nested.x' }, name: 'visible-nested-1' }] },
+        { name: 'visible-nested-2', condition: { is: 1, when: 'y.nested.x' }, fields: [{ name: 'visible-nested-2-1' }] }
+      ]
+    });
+  });
+});