BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #21211 from Arthurk12/sdk/issue/112

Browse Source 
fix(plugins): unmount extensible areas
This commit is contained in:
Anton Georgiev 2024-10-22 10:14:24 -04:00 committed by GitHub
commit 5788731745
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
bigbluebutton-html5/imports/ui/components/floating-window/component.tsx
View File

@ -1,4 +1,5 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { useEffect, useRef } from 'react';
import Draggable from 'react-draggable';
import Styled from './styles';
@ -10,7 +11,7 @@ interface FloatingWindowProps {
backgroundColor: string;
boxShadow: string;
isDraggable: boolean;
renderFunction: (element: HTMLElement) => void;
renderFunction: (element: HTMLElement) => ReactDOM.Root;
}
const renderComponent = (
@ -45,9 +46,17 @@ const FloatingWindow: React.FC<FloatingWindowProps> = ({
const elementRef = useRef(null);
useEffect(() => {
let rootRef: ReactDOM.Root | null;
if (elementRef.current && renderFunction) {
renderFunction(elementRef.current);
rootRef = renderFunction(elementRef.current);
}
return () => {
// extensible area injected by content functions have to
// be explicitly unmounted, because plugins use a different
// instance of ReactDOM
if (rootRef) rootRef.unmount();
};
}, [elementRef]);
const componentToRender = renderComponent(

11
bigbluebutton-html5/imports/ui/components/generic-content/generic-content-item/component.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef } from 'react';
import * as ReactDOM from 'react-dom/client';
import { GenericContentItemProps } from './types';
const GenericContentItem: React.FC<GenericContentItemProps> = (props) => {
@ -9,9 +10,17 @@ const GenericContentItem: React.FC<GenericContentItemProps> = (props) => {
const elementRef = useRef(null);
useEffect(() => {
let rootRef: ReactDOM.Root | null;
if (elementRef.current && renderFunction) {
renderFunction(elementRef.current);
rootRef = renderFunction(elementRef.current);
}
return () => {
// extensible area injected by content functions have to
// be explicitly unmounted, because plugins use a different
// instance of ReactDOM
if (rootRef) rootRef.unmount();
};
}, [elementRef, renderFunction]);
const style: React.CSSProperties = {

4
bigbluebutton-html5/imports/ui/components/generic-content/generic-content-item/types.ts
View File

@ -1,4 +1,6 @@
import * as ReactDOM from 'react-dom/client';
export interface GenericContentItemProps {
renderFunction: (element: HTMLElement) => void;
renderFunction: (element: HTMLElement) => ReactDOM.Root;
width?: string;
}

3
bigbluebutton-html5/imports/ui/components/generic-content/types.ts
View File

@ -1,3 +1,4 @@
import * as ReactDOM from 'react-dom/client';
import { GenericContentMainArea } from 'bigbluebutton-html-plugin-sdk';
import { GenericContentMainArea as GenericContentMainAreaLayout } from '../layout/layoutTypes';
@ -19,6 +20,6 @@ export interface GenericContentSidekickContainerProps {
export interface GenericSidekickContentProps {
layoutContextDispatch: (...args: unknown[]) => void;
genericContentId: string;
renderFunction: (element: HTMLElement) => void;
renderFunction: (element: HTMLElement) => ReactDOM.Root;
genericContentLabel: string;
}