@plone/volto 18.0.0-alpha.4 → 18.0.0-alpha.41

package/src/components/manage/Form/Form.jsx

@@ -3,7 +3,10 @@
  * @module components/manage/Form/Form
  */
 
-import { BlocksForm, Field, Icon, Toast } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
+import { Field, BlocksForm } from '@plone/volto/components/manage/Form';
+import BlocksToolbar from '@plone/volto/components/manage/Form/BlocksToolbar';
+import UndoToolbar from '@plone/volto/components/manage/Form/UndoToolbar';
 import {
   difference,
   FormValidation,
@@ -13,23 +16,28 @@ import {
 } from '@plone/volto/helpers';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
 import {
   findIndex,
   isEmpty,
+  isEqual,
   keys,
   map,
   mapValues,
   pickBy,
   without,
   cloneDeep,
+  xor,
 } from 'lodash';
 import isBoolean from 'lodash/isBoolean';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { connect } from 'react-redux';
 import {
+  Accordion,
   Button,
   Container as SemanticContainer,
   Form as UiForm,
@@ -39,10 +47,16 @@ import {
 } from 'semantic-ui-react';
 import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
-import { BlocksToolbar, UndoToolbar } from '@plone/volto/components';
-import { setSidebarTab } from '@plone/volto/actions';
+import {
+  setMetadataFieldsets,
+  resetMetadataFocus,
+  setSidebarTab,
+  setFormData,
+  setUIState,
+} from '@plone/volto/actions';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 /**
  * Form container class.
@@ -69,6 +83,9 @@ class Form extends Component {
       required: PropTypes.arrayOf(PropTypes.string),
     }),
     formData: PropTypes.objectOf(PropTypes.any),
+    globalData: PropTypes.objectOf(PropTypes.any),
+    metadataFieldsets: PropTypes.arrayOf(PropTypes.string),
+    metadataFieldFocus: PropTypes.string,
     pathname: PropTypes.string,
     onSubmit: PropTypes.func,
     onCancel: PropTypes.func,
@@ -93,6 +110,7 @@ class Form extends Component {
     requestError: PropTypes.string,
     allowedBlocks: PropTypes.arrayOf(PropTypes.string),
     showRestricted: PropTypes.bool,
+    global: PropTypes.bool,
   };
 
   /**
@@ -123,6 +141,7 @@ class Form extends Component {
     editable: true,
     requestError: null,
     allowedBlocks: null,
+    global: false,
   };
 
   /**
@@ -137,10 +156,16 @@ class Form extends Component {
       title: uuid(),
       text: uuid(),
     };
-    let { formData } = props;
+    let { formData, schema: originalSchema } = props;
     const blocksFieldname = getBlocksFieldname(formData);
     const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
 
+    const schema = this.removeBlocksLayoutFields(originalSchema);
+
+    this.props.setMetadataFieldsets(
+      schema?.fieldsets ? schema.fieldsets.map((fieldset) => fieldset.id) : [],
+    );
+
     if (!props.isEditForm) {
       // It's a normal (add form), get defaults from schema
       formData = {
@@ -201,15 +226,26 @@ class Form extends Component {
       }
     }
 
+    // Sync state to global state
+    if (this.props.global) {
+      this.props.setFormData(formData);
+    }
+
+    this.props.setUIState({
+      selected: selectedBlock,
+      multiSelected: [],
+      hovered: null,
+    });
+
+    // Set initial state
     this.state = {
       formData,
       initialFormData,
       errors: {},
-      selected: selectedBlock,
-      multiSelected: [],
       isClient: false,
       // Ensure focus remain in field after change
       inFocus: {},
+      sidebarMetadataIsAvailable: false,
     };
     this.onChangeField = this.onChangeField.bind(this);
     this.onSelectBlock = this.onSelectBlock.bind(this);
@@ -218,6 +254,7 @@ class Form extends Component {
     this.onTabChange = this.onTabChange.bind(this);
     this.onBlurField = this.onBlurField.bind(this);
     this.onClickInput = this.onClickInput.bind(this);
+    this.onToggleMetadataFieldset = this.onToggleMetadataFieldset.bind(this);
   }
 
   /**
@@ -231,6 +268,12 @@ class Form extends Component {
     let errors = {};
     let activeIndex = 0;
 
+    if (!this.props.isFormSelected && prevProps.isFormSelected) {
+      this.props.setUIState({
+        selected: null,
+      });
+    }
+
     if (requestError && prevProps.requestError !== requestError) {
       errors =
         FormValidation.giveServerErrorsToCorrespondingFields(requestError);
@@ -246,14 +289,51 @@ class Form extends Component {
     }
 
     if (this.props.onChangeFormData) {
-      if (
-        // TODO: use fast-deep-equal
-        JSON.stringify(prevState?.formData) !==
-        JSON.stringify(this.state.formData)
-      ) {
+      if (!isEqual(prevState?.formData, this.state.formData)) {
         this.props.onChangeFormData(this.state.formData);
       }
     }
+    if (
+      this.props.global &&
+      !isEqual(this.props.globalData, prevProps.globalData)
+    ) {
+      this.setState({
+        formData: this.props.globalData,
+      });
+    }
+
+    if (!isEqual(prevProps.schema, this.props.schema)) {
+      this.props.setMetadataFieldsets(
+        this.removeBlocksLayoutFields(this.props.schema).fieldsets.map(
+          (fieldset) => fieldset.id,
+        ),
+      );
+    }
+
+    if (
+      this.props.metadataFieldFocus !== '' &&
+      !isEqual(prevProps.metadataFieldFocus, this.props.metadataFieldFocus)
+    ) {
+      // Scroll into view
+      document
+        .querySelector(`.field-wrapper-${this.props.metadataFieldFocus}`)
+        .scrollIntoView();
+
+      // Set focus to first input if available
+      document
+        .querySelector(`.field-wrapper-${this.props.metadataFieldFocus} input`)
+        ?.focus();
+
+      // Reset focus field
+      this.props.resetMetadataFocus();
+    }
+
+    if (
+      !this.state.sidebarMetadataIsAvailable &&
+      document.getElementById('sidebar-metadata')
+    ) {
+      this.setState(() => ({ sidebarMetadataIsAvailable: true }));
+    }
   }
 
   /**
@@ -307,15 +387,6 @@ class Form extends Component {
     this.setState({ isClient: true });
   }
 
-  static getDerivedStateFromProps(props, state) {
-    let newState = { ...state };
-    if (!props.isFormSelected) {
-      newState.selected = null;
-    }
-
-    return newState;
-  }
-
   /**
    * Change field handler
    * Remove errors for changed field
@@ -327,15 +398,18 @@ class Form extends Component {
   onChangeField(id, value) {
     this.setState((prevState) => {
       const { errors, formData } = prevState;
+      const newFormData = {
+        ...formData,
+        // We need to catch also when the value equals false this fixes #888
+        [id]: value || (value !== undefined && isBoolean(value)) ? value : null,
+      };
       delete errors[id];
+      if (this.props.global) {
+        this.props.setFormData(newFormData);
+      }
       return {
         errors,
-        formData: {
-          ...formData,
-          // We need to catch also when the value equals false this fixes #888
-          [id]:
-            value || (value !== undefined && isBoolean(value)) ? value : null,
-        },
+        formData: newFormData,
         // Changing the form data re-renders the select widget which causes the
         // focus to get lost. To circumvent this, we set the focus back to
         // the input.
@@ -357,20 +431,19 @@ class Form extends Component {
   onSelectBlock(id, isMultipleSelection, event) {
     let multiSelected = [];
     let selected = id;
+    const formData = this.state.formData;
 
     if (isMultipleSelection) {
       selected = null;
-      const blocksLayoutFieldname = getBlocksLayoutFieldname(
-        this.state.formData,
-      );
+      const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
 
-      const blocks_layout = this.state.formData[blocksLayoutFieldname].items;
+      const blocks_layout = formData[blocksLayoutFieldname].items;
 
       if (event.shiftKey) {
         const anchor =
-          this.state.multiSelected.length > 0
-            ? blocks_layout.indexOf(this.state.multiSelected[0])
-            : blocks_layout.indexOf(this.state.selected);
+          this.props.uiState.multiSelected.length > 0
+            ? blocks_layout.indexOf(this.props.uiState.multiSelected[0])
+            : blocks_layout.indexOf(this.props.uiState.selected);
         const focus = blocks_layout.indexOf(id);
 
         if (anchor === focus) {
@@ -380,15 +453,16 @@ class Form extends Component {
         } else {
           multiSelected = [...blocks_layout.slice(focus, anchor + 1)];
         }
+        window.getSelection().empty();
       }
 
       if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
-        multiSelected = this.state.multiSelected || [];
-        if (!this.state.multiSelected.includes(this.state.selected)) {
-          multiSelected = [...multiSelected, this.state.selected];
+        multiSelected = this.props.uiState.multiSelected || [];
+        if (!this.props.uiState.multiSelected.includes(this.state.selected)) {
+          multiSelected = [...multiSelected, this.props.uiState.selected];
           selected = null;
         }
-        if (this.state.multiSelected.includes(id)) {
+        if (this.props.uiState.multiSelected.includes(id)) {
           selected = null;
           multiSelected = without(multiSelected, id);
         } else {
@@ -397,9 +471,10 @@ class Form extends Component {
       }
     }
 
-    this.setState({
+    this.props.setUIState({
       selected,
       multiSelected,
+      gridSelected: null,
     });
 
     if (this.props.onSelectForm) {
@@ -424,6 +499,9 @@ class Form extends Component {
       this.setState({
         formData: this.props.formData,
       });
+      if (this.props.global) {
+        this.props.setFormData(this.props.formData);
+      }
     }
     this.props.onCancel(event);
   }
@@ -435,6 +513,8 @@ class Form extends Component {
    * @returns {undefined}
    */
   onSubmit(event) {
+    const formData = this.state.formData;
+
     if (event) {
       event.preventDefault();
     }
@@ -442,7 +522,7 @@ class Form extends Component {
     const errors = this.props.schema
       ? FormValidation.validateFieldsPerFieldset({
           schema: this.props.schema,
-          formData: this.state.formData,
+          formData,
           formatMessage: this.props.intl.formatMessage,
         })
       : {};
@@ -477,12 +557,15 @@ class Form extends Component {
       if (this.props.isEditForm) {
         this.props.onSubmit(this.getOnlyFormModifiedValues());
       } else {
-        this.props.onSubmit(this.state.formData);
+        this.props.onSubmit(formData);
       }
       if (this.props.resetAfterSubmit) {
         this.setState({
           formData: this.props.formData,
         });
+        if (this.props.global) {
+          this.props.setFormData(this.props.formData);
+        }
       }
     }
   }
@@ -497,15 +580,15 @@ class Form extends Component {
    * @returns {undefined}
    */
   getOnlyFormModifiedValues = () => {
+    const formData = this.state.formData;
+
     const fieldsModified = Object.keys(
-      difference(this.state.formData, this.state.initialFormData),
+      difference(formData, this.state.initialFormData),
     );
     return {
-      ...pickBy(this.state.formData, (value, key) =>
-        fieldsModified.includes(key),
-      ),
-      ...(this.state.formData['@static_behaviors'] && {
-        '@static_behaviors': this.state.formData['@static_behaviors'],
+      ...pickBy(formData, (value, key) => fieldsModified.includes(key)),
+      ...(formData['@static_behaviors'] && {
+        '@static_behaviors': formData['@static_behaviors'],
       }),
     };
   };
@@ -537,6 +620,18 @@ class Form extends Component {
     return newSchema;
   };
 
+  /**
+   * Toggle metadata fieldset handler
+   * @method onToggleMetadataFieldset
+   * @param {Object} event Event object.
+   * @param {Object} blockProps Block properties.
+   * @returns {undefined}
+   */
+  onToggleMetadataFieldset(event, blockProps) {
+    const { index } = blockProps;
+    this.props.setMetadataFieldsets(xor(this.props.metadataFieldsets, [index]));
+  }
+
   /**
    * Render method.
    * @method render
@@ -544,8 +639,15 @@ class Form extends Component {
    */
   render() {
     const { settings } = config;
-    const { schema: originalSchema, onCancel, onSubmit } = this.props;
-    const { formData } = this.state;
+    const {
+      schema: originalSchema,
+      onCancel,
+      onSubmit,
+      navRoot,
+      type,
+      metadataFieldsets,
+    } = this.props;
+    const formData = this.state.formData;
     const schema = this.removeBlocksLayoutFields(originalSchema);
     const Container =
       config.getComponent({ name: 'Container' }).component || SemanticContainer;
@@ -554,96 +656,160 @@ class Form extends Component {
       // Removing this from SSR is important, since react-beautiful-dnd supports SSR,
       // but draftJS don't like it much and the hydration gets messed up
       this.state.isClient && (
-        <Container>
-          <BlocksToolbar
-            formData={this.state.formData}
-            selectedBlock={this.state.selected}
-            selectedBlocks={this.state.multiSelected}
-            onChangeBlocks={(newBlockData) =>
-              this.setState({
-                formData: {
-                  ...formData,
-                  ...newBlockData,
-                },
-              })
-            }
-            onSetSelectedBlocks={(blockIds) =>
-              this.setState({ multiSelected: blockIds })
-            }
-            onSelectBlock={this.onSelectBlock}
+        <>
+          <SlotRenderer
+            name="aboveContent"
+            content={this.props.content}
+            navRoot={navRoot}
           />
-          <UndoToolbar
-            state={{
-              formData: this.state.formData,
-              selected: this.state.selected,
-              multiSelected: this.state.multiSelected,
-            }}
-            enableHotKeys
-            onUndoRedo={({ state }) => this.setState(state)}
-          />
-          <BlocksForm
-            onChangeFormData={(newFormData) =>
-              this.setState({
-                formData: {
-                  ...formData,
-                  ...newFormData,
-                },
-              })
-            }
-            onChangeField={this.onChangeField}
-            onSelectBlock={this.onSelectBlock}
-            properties={formData}
-            pathname={this.props.pathname}
-            selectedBlock={this.state.selected}
-            multiSelected={this.state.multiSelected}
-            manage={this.props.isAdminForm}
-            allowedBlocks={this.props.allowedBlocks}
-            showRestricted={this.props.showRestricted}
-            editable={this.props.editable}
-            isMainForm={this.props.editable}
-          />
-          {this.state.isClient && this.props.editable && (
-            <Portal
-              node={__CLIENT__ && document.getElementById('sidebar-metadata')}
-            >
-              <UiForm
-                method="post"
-                onSubmit={this.onSubmit}
-                error={keys(this.state.errors).length > 0}
-              >
-                {schema &&
-                  map(schema.fieldsets, (item) => [
-                    <Segment
-                      secondary
-                      attached
-                      className={`fieldset-${item.id}`}
-                      key={item.title}
-                    >
-                      {item.title}
-                    </Segment>,
-                    <Segment attached key={`fieldset-contents-${item.title}`}>
-                      {map(item.fields, (field, index) => (
-                        <Field
-                          {...schema.properties[field]}
-                          id={field}
-                          fieldSet={item.title.toLowerCase()}
-                          formData={this.state.formData}
-                          focus={this.state.inFocus[field]}
-                          value={this.state.formData?.[field]}
-                          required={schema.required.indexOf(field) !== -1}
-                          onChange={this.onChangeField}
-                          onBlur={this.onBlurField}
-                          onClick={this.onClickInput}
-                          key={field}
-                          error={this.state.errors[field]}
-                        />
+
+          <Container>
+            <>
+              <BlocksToolbar
+                formData={formData}
+                selectedBlock={this.props.uiState.selected}
+                selectedBlocks={this.props.uiState.multiSelected}
+                onChangeBlocks={(newBlockData) => {
+                  const newFormData = {
+                    ...formData,
+                    ...newBlockData,
+                  };
+                  this.setState({
+                    formData: newFormData,
+                  });
+                  if (this.props.global) {
+                    this.props.setFormData(newFormData);
+                  }
+                }}
+                onSetSelectedBlocks={(blockIds) =>
+                  this.props.setUIState({ multiSelected: blockIds })
+                }
+                onSelectBlock={this.onSelectBlock}
+              />
+              <UndoToolbar
+                state={{
+                  formData,
+                  selected: this.props.uiState.selected,
+                  multiSelected: this.props.uiState.multiSelected,
+                }}
+                enableHotKeys
+                onUndoRedo={({ state }) => {
+                  if (this.props.global) {
+                    this.props.setFormData(state.formData);
+                  }
+                  return this.setState(state);
+                }}
+              />
+              <BlocksForm
+                onChangeFormData={(newData) => {
+                  const newFormData = {
+                    ...formData,
+                    ...newData,
+                  };
+                  this.setState({
+                    formData: newFormData,
+                  });
+                  if (this.props.global) {
+                    this.props.setFormData(newFormData);
+                  }
+                }}
+                onChangeField={this.onChangeField}
+                onSelectBlock={this.onSelectBlock}
+                properties={formData}
+                navRoot={navRoot}
+                type={type}
+                pathname={this.props.pathname}
+                selectedBlock={this.props.uiState.selected}
+                multiSelected={this.props.uiState.multiSelected}
+                manage={this.props.isAdminForm}
+                allowedBlocks={this.props.allowedBlocks}
+                showRestricted={this.props.showRestricted}
+                editable={this.props.editable}
+                isMainForm={this.props.editable}
+                // Properties to pass to the BlocksForm to match the View ones
+                history={this.props.history}
+                location={this.props.location}
+                token={this.props.token}
+              />
+              {this.state.isClient &&
+                this.state.sidebarMetadataIsAvailable &&
+                this.props.editable &&
+                createPortal(
+                  <UiForm
+                    method="post"
+                    onSubmit={this.onSubmit}
+                    error={keys(this.state.errors).length > 0}
+                  >
+                    {schema &&
+                      map(schema.fieldsets, (fieldset) => (
+                        <Accordion
+                          fluid
+                          styled
+                          className="form"
+                          key={fieldset.title}
+                        >
+                          <div
+                            key={fieldset.id}
+                            id={`metadataform-fieldset-${fieldset.id}`}
+                          >
+                            <Accordion.Title
+                              active={metadataFieldsets.includes(fieldset.id)}
+                              index={fieldset.id}
+                              onClick={this.onToggleMetadataFieldset}
+                            >
+                              {fieldset.title}
+                              {metadataFieldsets.includes(fieldset.id) ? (
+                                <Icon name={upSVG} size="20px" />
+                              ) : (
+                                <Icon name={downSVG} size="20px" />
+                              )}
+                            </Accordion.Title>
+                            <Accordion.Content
+                              active={metadataFieldsets.includes(fieldset.id)}
+                            >
+                              <Segment className="attached">
+                                {map(fieldset.fields, (field, index) => (
+                                  <Field
+                                    {...schema.properties[field]}
+                                    id={field}
+                                    fieldSet={fieldset.title.toLowerCase()}
+                                    formData={formData}
+                                    focus={
+                                      this.state.isClient &&
+                                      document
+                                        .getElementById('sidebar-metadata')
+                                        ?.contains(document.activeElement)
+                                        ? this.state.inFocus[field]
+                                        : false
+                                    }
+                                    value={formData?.[field]}
+                                    required={
+                                      schema.required.indexOf(field) !== -1
+                                    }
+                                    onChange={this.onChangeField}
+                                    onBlur={this.onBlurField}
+                                    onClick={this.onClickInput}
+                                    key={field}
+                                    error={this.state.errors[field]}
+                                  />
+                                ))}
+                              </Segment>
+                            </Accordion.Content>
+                          </div>
+                        </Accordion>
                       ))}
-                    </Segment>,
-                  ])}
-              </UiForm>
-            </Portal>
-          )}
-        </Container>
+                  </UiForm>,
+                  document.getElementById('sidebar-metadata'),
+                )}
+
+              <SlotRenderer
+                name="belowContent"
+                content={this.props.content}
+                navRoot={navRoot}
+              />
+            </>
+          </Container>
+        </>
       )
     ) : (
       <Container>
@@ -690,14 +856,17 @@ class Form extends Component {
                         ...map(item.fields, (field, index) => (
                           <Field
                             {...schema.properties[field]}
-                            isDisabled={!this.props.editable}
                             id={field}
-                            formData={this.state.formData}
-                            fieldSet={item.title.toLowerCase()}
+                            formData={formData}
+                            fieldSet={item.id}
                             focus={this.state.inFocus[field]}
-                            value={this.state.formData?.[field]}
+                            value={formData?.[field]}
                             required={schema.required.indexOf(field) !== -1}
-                            onChange={this.onChangeField}
+                            onChange={
+                              this.props.editable
+                                ? this.onChangeField
+                                : () => {}
+                            }
                             onBlur={this.onBlurField}
                             onClick={this.onClickInput}
                             key={field}
@@ -743,7 +912,7 @@ class Form extends Component {
                     <Field
                       {...schema.properties[field]}
                       id={field}
-                      value={this.state.formData?.[field]}
+                      value={formData?.[field]}
                       required={schema.required.indexOf(field) !== -1}
                       onChange={this.onChangeField}
                       onBlur={this.onBlurField}
@@ -804,5 +973,22 @@ class Form extends Component {
 const FormIntl = injectIntl(Form, { forwardRef: true });
 
 export default compose(
-  connect(null, { setSidebarTab }, null, { forwardRef: true }),
+  connect(
+    (state, props) => ({
+      content: state.content.data,
+      globalData: state.form?.global,
+      uiState: state.form?.ui,
+      metadataFieldsets: state.sidebar?.metadataFieldsets,
+      metadataFieldFocus: state.sidebar?.metadataFieldFocus,
+    }),
+    {
+      setMetadataFieldsets,
+      setSidebarTab,
+      setFormData,
+      setUIState,
+      resetMetadataFocus,
+    },
+    null,
+    { forwardRef: true },
+  ),
 )(FormIntl);