42 lines
985 B
TypeScript
42 lines
985 B
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import * as ReactDOM from 'react-dom/client';
|
|
import { GenericContentItemProps } from './types';
|
|
|
|
const GenericContentItem: React.FC<GenericContentItemProps> = (props) => {
|
|
const {
|
|
renderFunction,
|
|
width,
|
|
} = props;
|
|
const elementRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
let rootRef: ReactDOM.Root | null;
|
|
if (elementRef.current && renderFunction) {
|
|
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 = {
|
|
height: '100%',
|
|
overflow: 'hidden',
|
|
};
|
|
if (width) {
|
|
style.width = width;
|
|
}
|
|
return (
|
|
<div
|
|
style={style}
|
|
ref={elementRef}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default GenericContentItem;
|