Conditionally showing fields

src/components/Field.jsx

@@ -44,9 +44,12 @@ const Field = ({
   disabled = false,
   formHasErrors = false,
   id,
+  ...rest
 }) => {
   const intl = useIntl();
 
+  console.log('rest', rest);
+
   const isInvalid = () => {
     return !isOnEdit && !valid;
   };

src/components/FormView.jsx

@@ -10,6 +10,7 @@ import {
 } from 'semantic-ui-react';
 import { getFieldName } from 'volto-form-block/components/utils';
 import Field from 'volto-form-block/components/Field';
+import { showWhenValidator } from 'volto-form-block/helpers/show_when';
 import config from '@plone/volto/registry';
 
 /* Style */
@@ -134,6 +135,30 @@ const FormView = ({
                     }),
                   );
 
+                  const value =
+                    subblock.field_type === 'static_text'
+                      ? subblock.value
+                      : formData[name]?.value;
+                  const { show_when, target_value } = subblock;
+
+                  const shouldShowValidator = showWhenValidator[show_when];
+                  const shouldShowTargetValue =
+                    formData[subblock.target_field]?.value;
+
+                  // Only checking for false here to preserve backwards compatibility with blocks that haven't been updated and so have a value of 'undefined' or 'null'
+                  const shouldShow = shouldShowValidator
+                    ? shouldShowValidator({
+                        value: shouldShowTargetValue,
+                        target_value: target_value,
+                      }) !== false
+                    : true;
+
+                  const shouldHide = __CLIENT__ && !shouldShow;
+
+                  if (shouldHide) {
+                    return <p key={'row' + index}>Empty</p>;
+                  }
+
                   return (
                     <Grid.Row key={'row' + index}>
                       <Grid.Column>
@@ -148,11 +173,7 @@ const FormView = ({
                               fields_to_send_with_value,
                             )
                           }
-                          value={
-                            subblock.field_type === 'static_text'
-                              ? subblock.value
-                              : formData[name]?.value
-                          }
+                          value={value}
                           valid={isValidField(name)}
                           formHasErrors={formErrors?.length > 0}
                         />

src/components/Sidebar.jsx

@@ -191,7 +191,7 @@ const Sidebar = ({
                   </Accordion.Title>
                   <Accordion.Content active={selected === index}>
                     <BlockDataForm
-                      schema={FieldSchema(subblock)}
+                      schema={FieldSchema({ ...subblock, formData: data })}
                       onChangeField={(name, value) => {
                         var update_values = {};
 

src/fieldSchema.js

@@ -63,8 +63,38 @@ const messages = defineMessages({
     id: 'form_field_type_static_text',
     defaultMessage: 'Static text',
   },
+  field_type_hidden: {
+    id: 'form_field_type_hidden',
+    defaultMessage: 'Hidden',
+  },
+  field_show_when_when: {
+    id: 'form_field_show_when',
+    defaultMessage: 'Show when',
+  },
+  field_show_when_is: {
+    id: 'form_field_show_is',
+    defaultMessage: 'Is',
+  },
+  field_show_when_to: {
+    id: 'form_field_show_to',
+    defaultMessage: 'To',
+  },
+  field_show_when_option_always: {
+    id: 'form_field_show_when_option_',
+    defaultMessage: 'Always',
+  },
+  field_show_when_option_value_is: {
+    id: 'form_field_show_when_option_value_is',
+    defaultMessage: 'equal',
+  },
+  field_show_when_option_value_is_not: {
+    id: 'form_field_show_when_option_value_is_not',
+    defaultMessage: 'not equal',
+  },
 });
 
+const choiceTypes = ['select', 'single_choice', 'multiple_choice'];
+
 export default (props) => {
   var intl = useIntl();
   const baseFieldTypeChoices = [
@@ -96,6 +126,14 @@ export default (props) => {
   const schemaExtenderValues = schemaExtender
     ? schemaExtender(intl)
     : { properties: [], fields: [], required: [] };
+
+  const show_when_when_field =
+    props.show_when_when && props.show_when_when
+      ? props.formData?.subblocks?.find(
+          (field) => field.field_id === props.show_when_when,
+        )
+      : undefined;
+
   return {
     title: props?.label || '',
     fieldsets: [
@@ -108,6 +146,13 @@ export default (props) => {
           'field_type',
           ...schemaExtenderValues.fields,
           'required',
+          'show_when_when',
+          ...(props.show_when_when && props.show_when_when !== 'always'
+            ? ['show_when_is']
+            : []),
+          ...(props.show_when_when && props.show_when_when !== 'always'
+            ? ['show_when_to']
+            : []),
         ],
       },
     ],
@@ -122,7 +167,7 @@ export default (props) => {
       },
       field_type: {
         title: intl.formatMessage(messages.field_type),
-        type: 'array',
+        type: 'string',
         choices: [
           ...baseFieldTypeChoices,
           ...(config.blocks.blocksConfig.form.additionalFields?.map(
@@ -136,12 +181,78 @@ export default (props) => {
         type: 'boolean',
         default: false,
       },
+      show_when_when: {
+        title: intl.formatMessage(messages.field_show_when_when),
+        type: 'string',
+        choices: [
+          [
+            'always',
+            intl.formatMessage(messages.field_show_when_option_always),
+          ],
+          ...(props?.formData?.subblocks
+            ? props.formData.subblocks.reduce((choices, subblock, index) => {
+                const currentFieldIndex = props.formData.subblocks.findIndex(
+                  (field) => field.field_id === props.field_id,
+                );
+                if (index > currentFieldIndex) {
+                  if (props.show_when_when === subblock.field_id) {
+                    choices.push([subblock.field_id, subblock.label]);
+                  }
+                  return choices;
+                }
+                if (subblock.field_id === props.field_id) {
+                  return choices;
+                }
+                choices.push([subblock.field_id, subblock.label]);
+                return choices;
+              }, [])
+            : []),
+        ],
+        default: 'always',
+      },
+      show_when_is: {
+        title: intl.formatMessage(messages.field_show_when_is),
+        type: 'string',
+        choices: [
+          [
+            'value_is',
+            intl.formatMessage(messages.field_show_when_option_value_is),
+          ],
+          [
+            'value_is_not',
+            intl.formatMessage(messages.field_show_when_option_value_is_not),
+          ],
+        ],
+        noValueOption: false,
+        required: true,
+      },
+      show_when_to: {
+        title: intl.formatMessage(messages.field_show_when_to),
+        type: 'array',
+        required: true,
+        creatable: true,
+        noValueOption: false,
+        ...(show_when_when_field &&
+          choiceTypes.includes(show_when_when_field.field_type) && {
+            choices: show_when_when_field.input_values,
+          }),
+        ...(show_when_when_field &&
+          show_when_when_field.field_type === 'yes_no' && {
+            choices: [
+              [true, 'Yes'],
+              [false, 'No'],
+            ],
+          }),
+      },
       ...schemaExtenderValues.properties,
     },
     required: [
       'label',
       'field_type',
       'input_values',
+      ...(props.show_when_when && props.show_when_when !== 'always'
+        ? ['show_when_is', 'show_when_to']
+        : []),
       ...schemaExtenderValues.required,
     ],
   };

src/helpers/show_when.js

@@ -0,0 +1,10 @@
+const always = () => true;
+const value_is = ({ value, target_value }) => value === target_value;
+const value_is_not = ({ value, target_value }) => value !== target_value;
+
+export const showWhenValidator = {
+  '': always,
+  always: always,
+  value_is: value_is,
+  value_is_not: value_is_not,
+};