✨ #19 - Basic Form.io conditionals.

src/components/columns/columns.component.tsx

@@ -36,11 +36,9 @@ export interface IFormioColumn {
   sizeMobile?: ColumnSize;
 }
 
-export interface IColumnComponent extends IFormioColumn {
-  defaultValue: undefined;
-
-  key: undefined;
+type IFormioColumnComponentSchema = IFormioColumn & ComponentSchema;
 
+export interface IColumnComponent extends IFormioColumnComponentSchema {
   type: 'column';
 }
 

src/fixtures/formio/formio-conditional.ts

@@ -0,0 +1,86 @@
+import {IContentComponent} from '@components';
+import {IRendererComponent} from '@lib/renderer';
+
+export const FORMIO_CONDITIONAL: Array<IRendererComponent | IContentComponent> = [
+  // Reference field.
+  {
+    id: 'favoriteAnimal',
+    type: 'textfield',
+    label: 'Favorite animal',
+    key: 'favoriteAnimal',
+  },
+
+  // Case: hide unless "cat"
+  {
+    conditional: {
+      eq: 'cat',
+      show: true,
+      when: 'favoriteAnimal',
+    },
+    id: 'motivationCat',
+    hidden: true,
+    type: 'textfield',
+    key: 'motivation',
+    label: 'Motivation',
+    placeholder: 'I like cats because...',
+    description: 'Please motivate why "cat" is your favorite animal...',
+  },
+
+  // Case hide unless "dog"
+  {
+    conditional: {
+      eq: 'dog',
+      show: true,
+      when: 'favoriteAnimal',
+    },
+    id: 'motivationDog',
+    hidden: true,
+    type: 'textfield',
+    key: 'motivation',
+    label: 'Motivation',
+    placeholder: 'I like dogs because...',
+    description: 'Please motivate why "dog" is your favorite animal...',
+  },
+
+  // Case hide unless "" (empty string)
+  {
+    conditional: {
+      eq: '',
+      show: true,
+      when: 'favoriteAnimal',
+    },
+    id: 'content1',
+    hidden: true,
+    type: 'content',
+    key: 'content',
+    html: 'Please enter you favorite animal.',
+  },
+
+  // Case show unless "cat"
+  {
+    conditional: {
+      eq: 'cat',
+      show: false,
+      when: 'favoriteAnimal',
+    },
+    id: 'content2',
+    hidden: false,
+    type: 'content',
+    key: 'content',
+    html: 'Have you tried "cat"?',
+  },
+
+  // Case show unless "dog"
+  {
+    conditional: {
+      eq: 'dog',
+      show: false,
+      when: 'favoriteAnimal',
+    },
+    id: 'content3',
+    hidden: false,
+    type: 'content',
+    key: 'content',
+    html: 'Have you tried "dog"?',
+  },
+];

src/fixtures/formio/index.ts

@@ -1,4 +1,5 @@
 export * from './formio-columns';
+export * from './formio-conditional';
 export * from './formio-example';
 export * from './formio-length';
 export * from './formio-pattern';

src/lib/renderer/renderer.stories.tsx

@@ -1,5 +1,16 @@
-import {FORMIO_EXAMPLE, FORMIO_LENGTH, FORMIO_PATTERN, FORMIO_REQUIRED} from '@fixtures';
-import {DEFAULT_RENDER_CONFIGURATION, RenderComponent, RenderForm} from '@lib/renderer/renderer';
+import {
+  FORMIO_CONDITIONAL,
+  FORMIO_EXAMPLE,
+  FORMIO_LENGTH,
+  FORMIO_PATTERN,
+  FORMIO_REQUIRED,
+} from '@fixtures';
+import {
+  DEFAULT_RENDER_CONFIGURATION,
+  IRendererComponent,
+  RenderComponent,
+  RenderForm,
+} from '@lib/renderer/renderer';
 import {expect} from '@storybook/jest';
 import type {ComponentStory, Meta} from '@storybook/react';
 import {userEvent, within} from '@storybook/testing-library';
@@ -151,6 +162,78 @@ renderFormWithNestedKeyValidation.play = async ({canvasElement}) => {
   await canvas.findByText('Er zijn te weinig karakters opgegeven.');
 };
 
+export const renderFormWithConditionalLogic: ComponentStory<typeof RenderForm> = args => (
+  <RenderForm {...args}>
+    <button type="submit">Submit</button>
+  </RenderForm>
+);
+renderFormWithConditionalLogic.args = {
+  configuration: DEFAULT_RENDER_CONFIGURATION,
+  form: {
+    display: 'form',
+    components: FORMIO_CONDITIONAL,
+  },
+  initialValues: {
+    favoriteAnimal: '',
+    motivationCat: '',
+    motivationDog: '',
+    content: '',
+  },
+};
+renderFormWithConditionalLogic.play = async ({canvasElement}) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText('Favorite animal', {
+    selector: 'input',
+  });
+  expect(
+    await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
+  ).toBeNull();
+  expect(
+    await canvas.queryByText('Please motivate why "dog" is your favorite animal...')
+  ).toBeNull();
+  await canvas.findByText('Please enter you favorite animal.');
+  await canvas.findByText('Have you tried "cat"?');
+  await canvas.findByText('Have you tried "dog"?');
+  await userEvent.type(input, 'horse', {delay: 30});
+  expect(
+    await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
+  ).toBeNull();
+  expect(
+    await canvas.queryByText('Please motivate why "dog" is your favorite animal...')
+  ).toBeNull();
+  expect(await canvas.queryByText('Please enter you favorite animal.')).toBeNull();
+  await canvas.findByText('Have you tried "cat"?');
+  await canvas.findByText('Have you tried "dog"?');
+  await userEvent.clear(input);
+  await userEvent.type(input, 'cat', {delay: 30});
+  await canvas.findByText('Please motivate why "cat" is your favorite animal...');
+  expect(
+    await canvas.queryByText('Please motivate why "dog" is your favorite animal...')
+  ).toBeNull();
+  expect(await canvas.queryByText('Please enter you favorite animal.')).toBeNull();
+  expect(await canvas.queryByText('Have you tried "cat"?')).toBeNull();
+  await canvas.findByText('Have you tried "dog"?');
+  await userEvent.clear(input);
+  await userEvent.type(input, 'dog', {delay: 30});
+  expect(
+    await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
+  ).toBeNull();
+  await canvas.findByText('Please motivate why "dog" is your favorite animal...');
+  expect(await canvas.queryByText('Please enter you favorite animal.')).toBeNull();
+  await canvas.findByText('Have you tried "cat"?');
+  expect(await canvas.queryByText('Have you tried "dog"?')).toBeNull();
+  await userEvent.clear(input);
+  expect(
+    await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
+  ).toBeNull();
+  expect(
+    await canvas.queryByText('Please motivate why "dog" is your favorite animal...')
+  ).toBeNull();
+  await canvas.findByText('Please enter you favorite animal.');
+  await canvas.findByText('Have you tried "cat"?');
+  await canvas.findByText('Have you tried "dog"?');
+};
+
 export const formValidationWithLayoutComponent: ComponentStory<typeof RenderForm> = args => (
   <RenderForm {...args}>
     <button type="submit">Submit</button>
@@ -199,7 +282,11 @@ export const renderComponent: ComponentStory<typeof RenderComponent> = args => (
   </RenderComponent>
 );
 renderComponent.args = {
-  component: FORMIO_EXAMPLE[0],
+  component: FORMIO_EXAMPLE[0] as IRendererComponent,
+  form: {
+    display: 'form',
+    components: FORMIO_EXAMPLE,
+  },
 };
 renderComponent.play = async ({canvasElement}) => {
   const canvas = within(canvasElement);

src/lib/renderer/renderer.tsx

@@ -9,11 +9,13 @@ import {
 } from '@components';
 import {DEFAULT_VALIDATORS, getFormErrors} from '@lib/validation';
 import {IComponentProps, IFormioForm, IRenderConfiguration, IValues} from '@types';
-import {Formik, useField} from 'formik';
+import {Formik, useField, useFormikContext} from 'formik';
 import {FormikHelpers} from 'formik/dist/types';
-import {ComponentSchema} from 'formiojs';
+import {ComponentSchema, Utils} from 'formiojs';
 import React, {FormHTMLAttributes, useContext} from 'react';
 
+import getComponent = Utils.getComponent;
+
 export const DEFAULT_RENDER_CONFIGURATION: IRenderConfiguration = {
   components: {
     columns: Columns,
@@ -29,6 +31,14 @@ export const RenderContext = React.createContext<IRenderConfiguration>(
   DEFAULT_RENDER_CONFIGURATION
 );
 
+export interface IRendererComponent extends ComponentSchema {
+  columns?: IFormioColumn[];
+  components?: IRendererComponent[];
+  id: string;
+  key: string;
+  type: string;
+}
+
 export interface IRenderFormProps {
   children: React.ReactNode;
   configuration: IRenderConfiguration;
@@ -72,7 +82,7 @@ export const RenderForm = ({
 }: IRenderFormProps): React.ReactElement => {
   const childComponents =
     form.components?.map((component: IRendererComponent, i: number) => (
-      <RenderComponent key={component.id || i} component={component} />
+      <RenderComponent key={component.id || i} component={component} form={form} />
     )) || null;
 
   return (
@@ -95,15 +105,9 @@ export const RenderForm = ({
   );
 };
 
-export interface IRendererComponent extends ComponentSchema {
-  columns?: IFormioColumn[];
-  components?: IRendererComponent[];
-  id?: string;
-  type: string;
-}
-
 export interface IRenderComponentProps {
   component: IColumnComponent | IRendererComponent;
+  form: IFormioForm;
 }
 
 /** @const Form.io does not guarantee a key for a form component, we use this as a fallback. */
@@ -135,9 +139,25 @@ export const OF_MISSING_KEY = 'OF_MISSING_KEY';
  * @external {FormikContext} Expects `Formik`/`FormikContext` to be available.
  * @external {RenderContext} Expects `RenderContext` to be available.
  */
-export const RenderComponent = ({component}: IRenderComponentProps): React.ReactElement => {
+export const RenderComponent = ({
+  component,
+  form,
+}: IRenderComponentProps): React.ReactElement | null => {
+  const {setFieldValue} = useFormikContext();
   const Component = useComponentType(component);
   const field = useField(component.key || OF_MISSING_KEY);
+
+  // Basic Form.io conditional.
+  const show = useConditional(component, form);
+
+  if (!show && component.clearOnHide) {
+    setFieldValue(component.key || OF_MISSING_KEY, null);
+  }
+
+  if (!show) {
+    return null;
+  }
+
   const [{value, onBlur, onChange}, {error}] = field;
   const callbacks = {onBlur, onChange};
   const errors = error?.split('\n') || []; // Reconstruct array.
@@ -154,14 +174,23 @@ export const RenderComponent = ({component}: IRenderComponentProps): React.React
 
   // Regular children, either from component or column.
   const childComponents = cComponents?.map((c: IRendererComponent, i: number) => (
-    <RenderComponent key={c.id || i} component={c} />
+    <RenderComponent key={c.id || i} component={c} form={form} />
   ));
 
   // Columns from component.
   const childColumns = cColumns?.map((c: IFormioColumn, i) => (
     <RenderComponent
       key={i}
-      component={{...c, defaultValue: undefined, key: undefined, type: 'column'}}
+      component={{
+        ...c,
+        clearOnHide: undefined,
+        conditional: {eq: undefined, show: undefined, when: undefined},
+        defaultValue: undefined,
+        hidden: false,
+        key: undefined,
+        type: 'column',
+      }}
+      form={form}
     />
   ));
 
@@ -172,6 +201,7 @@ export const RenderComponent = ({component}: IRenderComponentProps): React.React
     </Component>
   );
 };
+
 /**
  * Fallback component, gets used when no other component is found within the `RenderContext`
  * The Fallback component makes sure (child) components keep being rendered with as little side
@@ -190,3 +220,29 @@ export const useComponentType = (
   const ComponentType = renderConfiguration.components[component.type];
   return ComponentType || Fallback;
 };
+
+/**
+ * Evaluates the `component.conditional` (if set) and returns whether the component should be shown.
+ * This does not evaluate complex form logic but merely the basic Form.io conditional logic (found
+ * in the "Advanced" tab).
+ *
+ * @external {FormikContext} Expects `Formik`/`FormikContext` to be available.
+ * @return {boolean} If a conditional passes, the show argument is returned to respect it's
+ * configuration. If a conditional does not pass, `!component.hidden` is used as return value.
+ */
+export const useConditional = (
+  component: IColumnComponent | IRendererComponent,
+  form: IFormioForm
+) => {
+  const {eq, show, when} = component?.conditional || {};
+  const isConditionalSet = typeof show == 'boolean' && when;
+  const otherComponent = getComponent(form.components, when as string, false);
+  const [{value}] = useField(otherComponent.key || OF_MISSING_KEY);
+  const isEqual = eq === value;
+
+  if (!isConditionalSet || !otherComponent || !isEqual) {
+    return !component.hidden;
+  }
+
+  return show;
+};