[MIRROR] Fixes stamps [NO GBP] [MDB IGNORE] (#25564)

* Fixes stamps [NO GBP] (#80255) ## About The Pull Request You can't pass a ref as a prop like that to a functional component. You must use `forwardRef`. This was my fault in #80044 <details> <summary>proof</summary> ![zaeL0GL9SR](https://github.com/tgstation/tgstation/assets/42397676/026ebede-0b9d-49d9-a8c8-479541675608) </details> ## Why It's Good For The Game Bug fix Fixes #80237 ## Changelog :cl: fix: You should be able to move stamps on paper again. /:cl: * Fixes stamps [NO GBP] --------- Co-authored-by: Jeremiah <[email protected]>
Fluffy-Frontier · Dec 12, 2023 · a92bbf5 · a92bbf5
1 parent 7c4c91f
commit a92bbf5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 56 deletions.
diff --git a/tgui/packages/tgui/components/Section.tsx b/tgui/packages/tgui/components/Section.tsx
@@ -5,7 +5,7 @@
  */
 
 import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
-import { ReactNode, RefObject, createRef, useEffect } from 'react';
+import { forwardRef, ReactNode, RefObject, useEffect } from 'react';
 import { addScrollableNode, removeScrollableNode } from '../events';
 import { canRender, classes } from 'common/react';
 
@@ -16,68 +16,72 @@ export type SectionProps = Partial<{
   scrollable: boolean;
   scrollableHorizontal: boolean;
   title: ReactNode;
-  /** @member Allows external control of scrolling. */
-  scrollableRef: RefObject<HTMLDivElement>;
   /** @member Callback function for the `scroll` event */
   onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
 }> &
   BoxProps;
 
-export const Section = (props: SectionProps) => {
-  const {
-    className,
-    title,
-    buttons,
-    fill,
-    fitted,
-    scrollable,
-    scrollableHorizontal,
-    children,
-    onScroll,
-    ...rest
-  } = props;
+export const Section = forwardRef(
+  (props: SectionProps, ref: RefObject<HTMLDivElement>) => {
+    const {
+      className,
+      title,
+      buttons,
+      fill,
+      fitted,
+      scrollable,
+      scrollableHorizontal,
+      children,
+      onScroll,
+      ...rest
+    } = props;
 
-  const scrollableRef = props.scrollableRef || createRef();
-  const hasTitle = canRender(title) || canRender(buttons);
+    const hasTitle = canRender(title) || canRender(buttons);
+
+    useEffect(() => {
+      if (!ref?.current) return;
 
-  useEffect(() => {
-    if (scrollable || scrollableHorizontal) {
-      addScrollableNode(scrollableRef.current as HTMLElement);
-      if (onScroll && scrollableRef.current) {
-        scrollableRef.current.onscroll = onScroll;
-      }
-    }
-    return () => {
       if (scrollable || scrollableHorizontal) {
-        removeScrollableNode(scrollableRef.current as HTMLElement);
+        addScrollableNode(ref.current);
+        if (onScroll && ref.current) {
+          ref.current.onscroll = onScroll;
+        }
       }
-    };
-  }, []);
+      return () => {
+        if (!ref?.current) return;
 
-  return (
-    <div
-      className={classes([
-        'Section',
-        fill && 'Section--fill',
-        fitted && 'Section--fitted',
-        scrollable && 'Section--scrollable',
-        scrollableHorizontal && 'Section--scrollableHorizontal',
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...computeBoxProps(rest)}
-    >
-      {hasTitle && (
-        <div className="Section__title">
-          <span className="Section__titleText">{title}</span>
-          <div className="Section__buttons">{buttons}</div>
-        </div>
-      )}
-      <div className="Section__rest">
-        <div onScroll={onScroll as any} className="Section__content">
-          {children}
+        if (scrollable || scrollableHorizontal) {
+          removeScrollableNode(ref.current);
+        }
+      };
+    }, []);
+
+    return (
+      <div
+        className={classes([
+          'Section',
+          fill && 'Section--fill',
+          fitted && 'Section--fitted',
+          scrollable && 'Section--scrollable',
+          scrollableHorizontal && 'Section--scrollableHorizontal',
+          className,
+          computeBoxClassName(rest),
+        ])}
+        {...computeBoxProps(rest)}
+        ref={ref}
+      >
+        {hasTitle && (
+          <div className="Section__title">
+            <span className="Section__titleText">{title}</span>
+            <div className="Section__buttons">{buttons}</div>
+          </div>
+        )}
+        <div className="Section__rest">
+          <div onScroll={onScroll as any} className="Section__content">
+            {children}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
diff --git a/tgui/packages/tgui/interfaces/NtosMessenger/ChatScreen.tsx b/tgui/packages/tgui/interfaces/NtosMessenger/ChatScreen.tsx
@@ -349,7 +349,7 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
             fill
             fitted
             title={`${recipient.name} (${recipient.job})`}
-            scrollableRef={this.scrollRef}
+            ref={this.scrollRef}
           >
             <Stack vertical className="NtosChatLog">
               {!!(messages.length > 0 && canReply) && (

diff --git a/tgui/packages/tgui/interfaces/PaperSheet.tsx b/tgui/packages/tgui/interfaces/PaperSheet.tsx
@@ -956,7 +956,7 @@ export class PreviewView extends Component<PreviewViewProps> {
         fill
         fitted
         scrollable
-        scrollableRef={scrollableRef}
+        ref={scrollableRef}
         onScroll={handleOnScroll}
       >
         <Box