Restore properties panel after exiting preview mode (#4223)

shesha-reactjs/src/components/formDesigner/componentPropertiesPanel/index.tsx

@@ -1,12 +1,16 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import { Empty } from 'antd';
 import { useFormDesigner, useFormDesignerReadOnly, useFormDesignerSelectedComponentId } from '@/providers/formDesigner';
 
 const ComponentPropertiesPanelInner: FC = () => {
-  const { settingsPanelRef } = useFormDesigner();
+  const formDesigner = useFormDesigner();
   const readOnly = useFormDesignerReadOnly();
   const selectedComponentId = useFormDesignerSelectedComponentId();
 
+  const panelRef = useCallback((node: HTMLDivElement | null) => {
+    formDesigner.setSettingsPanelElement(node);
+  }, [formDesigner]);
+
   return (
     <>
       {!selectedComponentId && (
@@ -15,7 +19,7 @@ const ComponentPropertiesPanelInner: FC = () => {
           description={readOnly ? 'Please select a component to view settings' : 'Please select a component to begin editing'}
         />
       )}
-      <div ref={settingsPanelRef}></div>
+      <div ref={panelRef}></div>
     </>
   );
 };

shesha-reactjs/src/components/formDesigner/configurableFormComponent/index.tsx

@@ -3,7 +3,6 @@ import DragWrapper from './dragWrapper';
 import FormComponent from '../formComponent';
 import React, {
   FC,
-  MutableRefObject,
   memo,
   useMemo,
   useRef,
@@ -37,15 +36,15 @@ export interface IConfigurableFormComponentDesignerProps {
   componentModel: IComponentModelProps;
   selectedComponentId?: string;
   readOnly?: boolean;
-  settingsPanelRef?: MutableRefObject<HTMLElement>;
+  settingsPanelElement?: HTMLDivElement | null;
   hidden?: boolean;
   componentEditMode?: EditMode;
 }
 const ConfigurableFormComponentDesignerInner: FC<IConfigurableFormComponentDesignerProps> = ({
   componentModel,
   selectedComponentId,
   readOnly,
-  settingsPanelRef,
+  settingsPanelElement,
   hidden,
   componentEditMode,
 }) => {
@@ -125,7 +124,7 @@ const ConfigurableFormComponentDesignerInner: FC<IConfigurableFormComponentDesig
   // when typing in the properties panel. The portal is created once and the component
   // receives updates through its own internal state management.
   const settingsEditor = useMemo(() => {
-    const renderRequired = isSelected && settingsPanelRef?.current;
+    const renderRequired = isSelected && settingsPanelElement;
 
     if (!renderRequired)
       return null;
@@ -142,10 +141,10 @@ const ConfigurableFormComponentDesignerInner: FC<IConfigurableFormComponentDesig
           toolboxComponent={component}
         />
       </div>
-    ), settingsPanelRef.current, "propertiesPanel");
+    ), settingsPanelElement, "propertiesPanel");
 
     return result;
-  }, [isSelected, settingsPanelRef, readOnly, component]);
+  }, [isSelected, settingsPanelElement, readOnly, component]);
 
   // Extract margins from ORIGINAL component styling (both stylingBox and custom styles)
   // Custom style margins take precedence over stylingBox margins
@@ -305,7 +304,7 @@ const ConfigurableFormComponentDesignerMemo = memo(ConfigurableFormComponentDesi
 
 export const ConfigurableFormComponentDesigner: FC<IConfigurableFormComponentDesignerProps> = (props) => {
   const allData = useAvailableConstantsData({ topContextId: DataContextTopLevels.All });
-  const { settingsPanelRef } = useFormDesigner();
+  const { settingsPanelElement } = useFormDesigner();
   const selectedComponentId = useFormDesignerSelectedComponentId();
   const readOnly = useFormDesignerReadOnly();
   const isEditMode = (value: unknown): value is EditMode =>
@@ -321,7 +320,7 @@ export const ConfigurableFormComponentDesigner: FC<IConfigurableFormComponentDes
     };
   }, [props.componentModel, allData]);
 
-  return <ConfigurableFormComponentDesignerMemo {...props} {...{ selectedComponentId, readOnly, settingsPanelRef, hidden, componentEditMode }} />;
+  return <ConfigurableFormComponentDesignerMemo {...props} {...{ selectedComponentId, readOnly, settingsPanelElement, hidden, componentEditMode }} />;
 };
 
 export interface IConfigurableFormComponentProps {

shesha-reactjs/src/providers/formDesigner/contexts.tsx

@@ -1,4 +1,3 @@
-import { MutableRefObject } from 'react';
 import {
   IAsyncValidationError,
   IFormValidationErrors,
@@ -90,7 +89,7 @@ export type FormDesignerState = {
   readOnly: boolean;
   formMode: FormMode;
 
-  settingsPanelRef: MutableRefObject<HTMLDivElement | undefined>;
+  settingsPanelElement: HTMLDivElement | null;
 };
 
 export type FormDesignerActions = {
@@ -124,6 +123,8 @@ export type FormDesignerActions = {
   subscribe: (type: FormDesignerSubscriptionType, callback: FormDesignerSubscription) => void;
   loadAsync: () => Promise<void>;
   saveAsync: () => Promise<void>;
+
+  setSettingsPanelElement: (element: HTMLDivElement | null) => void;
 };
 
 

shesha-reactjs/src/providers/formDesigner/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
+import React, { FC, PropsWithChildren, useContext, useEffect, useState } from 'react';
 import { useFormDesignerComponentGroups } from '../form/hooks';
 import { FormMode, IConfigurableFormComponent, IFlatComponentsStructure, IFormSettings, isConfigurableFormComponent } from '../form/models';
 import {
@@ -26,7 +26,6 @@ const FormDesignerProvider: FC<PropsWithChildren<IFormDesignerProviderProps>> =
   } = props;
   const toolboxComponentGroups = useFormDesignerComponentGroups();
   const formPersister = useFormPersister();
-  const settingsPanelRef = useRef<HTMLDivElement>();
   const devMode = useIsDevMode();
 
   const [formDesigner] = useState<IFormDesignerInstance>(() => {
@@ -36,7 +35,6 @@ const FormDesignerProvider: FC<PropsWithChildren<IFormDesignerProviderProps>> =
       formPersister,
       formFlatMarkup: flatMarkup,
       formSettings,
-      settingsPanelRef,
       logEnabled: devMode,
     });
   });

shesha-reactjs/src/providers/formDesigner/instance.ts

@@ -19,7 +19,6 @@ import {
 import { isDefined, isNullOrWhiteSpace } from "@/utils/nullables";
 import { camelcaseDotNotation } from '@/utils/string';
 import { nanoid } from "@/utils/uuid";
-import { MutableRefObject } from "react";
 import { toolbarGroupsToComponents } from "../form/hooks";
 import { componentsFlatStructureToTree, createComponentModelForDataProperty, processRecursive, upgradeComponent } from "../form/utils";
 import {
@@ -42,7 +41,6 @@ export type FormDesignerArgs = {
   toolboxComponentGroups: IToolboxComponentGroup[];
   formFlatMarkup: IFlatComponentsStructure;
   formSettings: IFormSettings;
-  settingsPanelRef: MutableRefObject<HTMLDivElement | undefined>;
   logEnabled?: boolean;
   formPersister: IFormPersisterContext;
 };
@@ -91,7 +89,6 @@ export class FormDesignerInstance implements IFormDesignerInstance {
     this.toolboxComponentGroups = args.toolboxComponentGroups;
     this.toolboxComponents = toolbarGroupsToComponents(args.toolboxComponentGroups);
     this.formPersister = args.formPersister;
-    this.settingsPanelRef = args.settingsPanelRef;
     this.readOnly = args.readOnly;
     this.isDebug = false;
     this.formMode = 'designer';
@@ -149,7 +146,12 @@ export class FormDesignerInstance implements IFormDesignerInstance {
 
   selectedComponentId: string | undefined;
 
-  settingsPanelRef: MutableRefObject<HTMLDivElement | undefined>;
+  settingsPanelElement: HTMLDivElement | null = null;
+
+  setSettingsPanelElement = (element: HTMLDivElement | null): void => {
+    this.settingsPanelElement = element;
+    this.notifySubscribers(['selection']);
+  };
 
   private getToolboxComponentOrUndefined = (type: string): IToolboxComponent | undefined => {
     return this.toolboxComponents[type];

shesha-reactjs/src/providers/formDesigner/models.ts

@@ -5,7 +5,6 @@ import {
 } from '@/interfaces';
 import { IPropertyMetadata } from '@/interfaces/metadata';
 import { createNamedContext } from '@/utils/react';
-import { MutableRefObject } from 'react';
 import { DEFAULT_FORM_SETTINGS, FormMode, IConfigurableFormComponent, IFlatComponentsStructure, IFormSettings, ROOT_COMPONENT_KEY } from "../form/models";
 
 /** Named Data Source */
@@ -99,7 +98,7 @@ export type FormDesignerState = {
   readOnly: boolean;
   formMode: FormMode;
 
-  settingsPanelRef: MutableRefObject<HTMLDivElement | undefined>;
+  settingsPanelElement: HTMLDivElement | null;
 };
 
 export type FormDesignerActions = {
@@ -131,6 +130,8 @@ export type FormDesignerActions = {
   getCachedComponentEditor: (type: string, evaluator: () => ISettingsFormFactory) => ISettingsFormFactory;
 
   subscribe: (type: FormDesignerSubscriptionType, callback: FormDesignerSubscription) => void;
+
+  setSettingsPanelElement: (element: HTMLDivElement | null) => void;
 };