WIP: Send empty data

src/components/Field.jsx

@@ -12,6 +12,7 @@ import {
   TextareaWidget,
   CheckboxListWidget,
   RadioWidget,
+  HiddenWidget,
 } from 'volto-form-block/components/Widget';
 import config from '@plone/volto/registry';
 
@@ -25,32 +26,61 @@ const messages = defineMessages({
   },
 });
 
+const widgetMapping = {
+  single_choice: RadioWidget,
+  checkbox: CheckboxWidget,
+};
+
 /**
  * Field class.
  * @class View
  * @extends Component
  */
-const Field = ({
-  label,
-  description,
-  name,
-  field_type,
-  required,
-  input_values,
-  value,
-  onChange,
-  isOnEdit,
-  valid,
-  disabled = false,
-  formHasErrors = false,
-  id,
-}) => {
+const Field = (props) => {
+  const {
+    label,
+    description,
+    name,
+    field_type,
+    required,
+    input_values,
+    value,
+    onChange,
+    isOnEdit,
+    valid,
+    disabled = false,
+    formHasErrors = false,
+    id,
+    widget,
+  } = props;
   const intl = useIntl();
 
   const isInvalid = () => {
     return !isOnEdit && !valid;
   };
 
+  if (widget) {
+    const Widget = widgetMapping[widget];
+    const valueList =
+      field_type === 'yes_no'
+        ? [
+            { value: true, label: 'Yes' },
+            { value: false, label: 'No' },
+          ]
+        : [...(input_values?.map((v) => ({ value: v, label: v })) ?? [])];
+
+    return (
+      <Widget
+        {...props}
+        id={name}
+        title={label}
+        valueList={valueList}
+        invalid={isInvalid().toString()}
+        {...(isInvalid() ? { className: 'is-invalid' } : {})}
+      />
+    );
+  }
+
   return (
     <div className="field">
       {field_type === 'text' && (
@@ -135,7 +165,7 @@ const Field = ({
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
-      {field_type === 'checkbox' && (
+      {(field_type === 'yes_no' || field_type === 'checkbox') && (
         <CheckboxWidget
           id={name}
           name={name}
@@ -195,6 +225,9 @@ const Field = ({
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
+      {field_type === 'hidden' && (
+        <HiddenWidget id={name} value={value} isOnEdit={isOnEdit} />
+      )}
       {field_type === 'static_text' &&
         (isOnEdit ? (
           <WysiwygWidget

src/components/FieldTypeSchemaExtenders/HiddenSchemaExtender.js

@@ -0,0 +1,20 @@
+import { defineMessages } from 'react-intl';
+const messages = defineMessages({
+  field_input_value: {
+    id: 'form_field_input_value',
+    defaultMessage: 'Value for field',
+  },
+});
+
+export const HiddenSchemaExtender = (intl) => {
+  return {
+    fields: ['value'],
+    properties: {
+      value: {
+        title: intl.formatMessage(messages.field_input_value),
+        type: 'text',
+      },
+    },
+    required: ['value'],
+  };
+};

src/components/FieldTypeSchemaExtenders/YesNoSchemaExtender.js

@@ -0,0 +1,25 @@
+import { defineMessages } from 'react-intl';
+const messages = defineMessages({
+  field_widget: {
+    id: 'form_field_widget',
+    defaultMessage: 'Widget',
+  },
+});
+
+export const YesNoSchemaExtender = (intl) => {
+  return {
+    fields: ['widget'],
+    properties: {
+      widget: {
+        title: intl.formatMessage(messages.field_widget),
+        type: 'array',
+        choices: [
+          ['checkbox', 'Checkbox'],
+          ['single_choice', 'Radio'],
+        ],
+        default: 'checkbox',
+      },
+    },
+    required: ['widget'],
+  };
+};

src/components/FieldTypeSchemaExtenders/index.js

@@ -1,2 +1,4 @@
 export { SelectionSchemaExtender } from './SelectionSchemaExtender';
 export { FromSchemaExtender } from './FromSchemaExtender';
+export { HiddenSchemaExtender } from './HiddenSchemaExtender';
+export { YesNoSchemaExtender } from './YesNoSchemaExtender';

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/components/View.jsx

@@ -48,12 +48,32 @@ const formStateReducer = (state, action) => {
   }
 };
 
-const getInitialData = (data) => ({
-  ...data.reduce(
-    (acc, field) => ({ ...acc, [getFieldName(field.label, field.id)]: field }),
-    {},
-  ),
-});
+const getInitialData = (data) => {
+  const { static_fields = [], subblocks = [] } = data;
+
+  return {
+    ...subblocks.reduce(
+      (acc, field) =>
+        field.field_type === 'hidden'
+          ? {
+              ...acc,
+              [getFieldName(field.label, field.id)]: {
+                ...field,
+                ...(data[field.id] && { custom_field_id: data[field.id] }),
+              },
+            }
+          : acc,
+      {},
+    ),
+    ...static_fields.reduce(
+      (acc, field) => ({
+        ...acc,
+        [getFieldName(field.label, field.id)]: field,
+      }),
+      {},
+    ),
+  };
+};
 
 /**
  * Form view
@@ -62,26 +82,33 @@ const getInitialData = (data) => ({
 const View = ({ data, id, path }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
-  const { static_fields = [] } = data;
 
   const [formData, setFormData] = useReducer((state, action) => {
     if (action.reset) {
-      return getInitialData(static_fields);
+      return getInitialData(data);
     }
 
     return {
       ...state,
       [action.field]: action.value,
     };
-  }, getInitialData(static_fields));
+  }, getInitialData(data));
 
   const [formState, setFormState] = useReducer(formStateReducer, initialState);
   const [formErrors, setFormErrors] = useState([]);
   const submitResults = useSelector((state) => state.submitForm);
   const captchaToken = useRef();
 
   const onChangeFormData = (field_id, field, value, extras) => {
-    setFormData({ field, value: { field_id, value, ...extras } });
+    setFormData({
+      field,
+      value: {
+        field_id,
+        value,
+        ...(data[field_id] && { custom_field_id: data[field_id] }), // Conditionally add the key. Nicer to work with than having a key with a null value
+        ...extras,
+      },
+    });
   };
 
   useEffect(() => {
@@ -145,7 +172,22 @@ const View = ({ data, id, path }) => {
             captcha.value = formData[data.captcha_props.id]?.value ?? '';
           }
 
-          let formattedFormData = { ...formData };
+          let formattedFormData = data.subblocks.reduce(
+            (returnValue, field) => {
+              if (field.field_type === 'static_text') {
+                return returnValue;
+              }
+              const fieldName = getFieldName(field.label, field.id);
+              const dataToAdd = formData[fieldName] ?? {
+                field_id: field.id,
+                label: field.label,
+                value: null,
+                ...(data[field.id] && { custom_field_id: data[field.id] }), // Conditionally add the key. Nicer to work with than having a key with a null value
+              };
+              return { ...returnValue, [fieldName]: dataToAdd };
+            },
+            {},
+          );
           data.subblocks.forEach((subblock) => {
             let name = getFieldName(subblock.label, subblock.id);
             if (formattedFormData[name]?.value) {

src/components/Widget/HiddenWidget.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+
+/**
+ * Displays an `<input type="hidden" />`.
+ */
+export const HiddenWidget = ({ id, title, value, isOnEdit }) => {
+  const inputId = `field-${id}`;
+  return (
+    <>
+      {isOnEdit ? <label htmlFor={inputId}>Hidden: {title || id}</label> : null}
+      <input type="hidden" id={inputId} name={id} value={value} />
+    </>
+  );
+};
+
+HiddenWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  focus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};

src/components/Widget/index.js

@@ -6,6 +6,7 @@ export { default as EmailWidget } from 'volto-form-block/components/Widget/Email
 export { default as FileWidget } from 'volto-form-block/components/Widget/FileWidget';
 export { default as GoogleReCaptchaWidget } from 'volto-form-block/components/Widget/GoogleReCaptchaWidget';
 export { default as HCaptchaWidget } from 'volto-form-block/components/Widget/HCaptchaWidget';
+export { HiddenWidget } from 'volto-form-block/components/Widget/HiddenWidget';
 export { default as HoneypotCaptchaWidget } from 'volto-form-block/components/Widget/HoneypotCaptchaWidget';
 export { default as NoRobotsCaptchaWidget } from 'volto-form-block/components/Widget/NoRobotsCaptchaWidget';
 export { default as RadioWidget } from 'volto-form-block/components/Widget/RadioWidget';