@plone/volto 18.0.0-alpha.32 → 18.0.0-alpha.34

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

@@ -52,6 +52,7 @@ import {
   resetMetadataFocus,
   setSidebarTab,
   setFormData,
+  setUIState,
 } from '@plone/volto/actions';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
@@ -230,13 +231,17 @@ class Form extends Component {
       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: {},
@@ -263,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);
@@ -376,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
@@ -439,9 +441,9 @@ class Form extends Component {
 
       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) {
@@ -451,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 {
@@ -468,9 +471,10 @@ class Form extends Component {
       }
     }
 
-    this.setState({
+    this.props.setUIState({
       selected,
       multiSelected,
+      gridSelected: null,
     });
 
     if (this.props.onSelectForm) {
@@ -660,141 +664,143 @@ class Form extends Component {
           />
 
           <Container>
-            <BlocksToolbar
-              formData={formData}
-              selectedBlock={this.state.selected}
-              selectedBlocks={this.state.multiSelected}
-              onChangeBlocks={(newBlockData) => {
-                const newFormData = {
-                  ...formData,
-                  ...newBlockData,
-                };
-                this.setState({
-                  formData: newFormData,
-                });
-                if (this.props.global) {
-                  this.props.setFormData(newFormData);
-                }
-              }}
-              onSetSelectedBlocks={(blockIds) =>
-                this.setState({ multiSelected: blockIds })
-              }
-              onSelectBlock={this.onSelectBlock}
-            />
-            <UndoToolbar
-              state={{
-                formData,
-                selected: this.state.selected,
-                multiSelected: this.state.multiSelected,
-              }}
-              enableHotKeys
-              onUndoRedo={({ state }) => {
-                if (this.props.global) {
-                  this.props.setFormData(state.formData);
+            <>
+              <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 })
                 }
-                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.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}
-              // 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}`}
+                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}
                         >
-                          <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)}
+                          <div
+                            key={fieldset.id}
+                            id={`metadataform-fieldset-${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.inFocus[field]}
-                                  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>
-                    ))}
-                </UiForm>,
-                document.getElementById('sidebar-metadata'),
-              )}
-
-            <SlotRenderer
-              name="belowContent"
-              content={this.props.content}
-              navRoot={navRoot}
-            />
+                            <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.inFocus[field]}
+                                    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>
+                      ))}
+                  </UiForm>,
+                  document.getElementById('sidebar-metadata'),
+                )}
+
+              <SlotRenderer
+                name="belowContent"
+                content={this.props.content}
+                navRoot={navRoot}
+              />
+            </>
           </Container>
         </>
       )
@@ -964,6 +970,7 @@ export default compose(
     (state, props) => ({
       content: state.content.data,
       globalData: state.form?.global,
+      uiState: state.form?.ui,
       metadataFieldsets: state.sidebar?.metadataFieldsets,
       metadataFieldFocus: state.sidebar?.metadataFieldFocus,
     }),
@@ -971,6 +978,7 @@ export default compose(
       setMetadataFieldsets,
       setSidebarTab,
       setFormData,
+      setUIState,
       resetMetadataFocus,
     },
     null,