Added new optional prop and using it in FormDesigner.tsx

Altinn · Oct 18, 2024 · 83f46eb · 83f46eb
1 parent 3283838
commit 83f46eb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/...nents/StudioResizableLayout/StudioResizableLayoutElement/StudioResizableLayoutElement.tsx b/...nents/StudioResizableLayout/StudioResizableLayoutElement/StudioResizableLayoutElement.tsx
@@ -12,6 +12,7 @@ export type StudioResizableLayoutElementProps = {
   style?: React.CSSProperties;
 
   onResizing?: (resizing: boolean) => void;
+  disableRightHandle?: boolean;
 
   //** supplied from container **//
   resize?: (size: number) => void;
@@ -24,15 +25,16 @@ export type StudioResizableLayoutElementProps = {
 const StudioResizableLayoutElement = forwardRef<HTMLDivElement, StudioResizableLayoutElementProps>(
   (
     {
-      index,
       minimumSize = 0,
       maximumSize,
       collapsedSize,
       collapsed,
-      children,
-      hasNeighbour = false,
       style,
+      disableRightHandle,
+      index,
       onResizing,
+      hasNeighbour = false,
+      children,
     }: StudioResizableLayoutElementProps,
     ref,
   ): ReactElement => {
@@ -58,6 +60,7 @@ const StudioResizableLayoutElement = forwardRef<HTMLDivElement, StudioResizableL
             orientation={orientation}
             index={index}
             onResizing={onResizing}
+            disableRightHandle={disableRightHandle}
           />
         )}
       </>

diff --git a/...ponents/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.tsx b/...ponents/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.tsx
@@ -10,12 +10,14 @@ export type StudioResizableLayoutHandleProps = {
   orientation: StudioResizableOrientation;
   index: number;
   onResizing?: (resizing: boolean) => void;
+  disableRightHandle?: boolean;
 };
 
 export const StudioResizableLayoutHandle = ({
   orientation,
   index,
   onResizing,
+  disableRightHandle,
 }: StudioResizableLayoutHandleProps): ReactElement => {
   const { resizeDelta, containerSize } = useStudioResizableLayoutContext(index);
   const { onMouseDown, isResizing } = useStudioResizableLayoutMouseMovement(
@@ -30,6 +32,17 @@ export const StudioResizableLayoutHandle = ({
     onResizing?.(isResizing);
   }, [isResizing, onResizing]);
 
+  if (disableRightHandle) {
+    return (
+      <div
+        role='separator'
+        tabIndex={0}
+        className={`${classes.resizeHandle}
+                  ${containerSize < 0.05 ? classes.hideLeftSide : ''}`}
+      ></div>
+    );
+  }
+
   return (
     <div
       role='separator'

diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
@@ -164,6 +164,7 @@ export const FormDesigner = (): JSX.Element => {
                 collapsedSize={50}
                 minimumSize={300}
                 maximumSize={300}
+                disableRightHandle={true}
               >
                 <Elements
                   collapsed={elementsCollapsed}