diff options
author | Michael C <[email protected]> | 2022-10-07 19:51:05 -0400 |
---|---|---|
committer | Michael C <[email protected]> | 2022-10-07 19:51:05 -0400 |
commit | fda4a03541bcd9a9892cf879daa67caa9fa803d6 (patch) | |
tree | ab115074197ea2a36509a26eeb69c8cc81ba72c0 | |
parent | 55c84662c02cd4c5fb0795128dd4966192228fc5 (diff) | |
download | SponsorBlock-fda4a03541bcd9a9892cf879daa67caa9fa803d6.tar.gz SponsorBlock-fda4a03541bcd9a9892cf879daa67caa9fa803d6.zip |
fix more components
-rw-r--r-- | src/render/ChapterVote.tsx | 11 | ||||
-rw-r--r-- | src/render/GenericNotice.tsx | 14 | ||||
-rw-r--r-- | src/render/RectangleTooltip.tsx | 13 | ||||
-rw-r--r-- | src/render/SubmissionNotice.tsx | 12 | ||||
-rw-r--r-- | src/render/Tooltip.tsx | 13 |
5 files changed, 34 insertions, 29 deletions
diff --git a/src/render/ChapterVote.tsx b/src/render/ChapterVote.tsx index 1a3f8999..9112d719 100644 --- a/src/render/ChapterVote.tsx +++ b/src/render/ChapterVote.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent"; import { VoteResponse } from "../messageTypes"; import { Category, SegmentUUID, SponsorTime } from "../types"; @@ -7,6 +7,7 @@ import { Category, SegmentUUID, SponsorTime } from "../types"; export class ChapterVote { container: HTMLElement; ref: React.RefObject<ChapterVoteComponent>; + root: Root; unsavedState: ChapterVoteState; @@ -19,10 +20,8 @@ export class ChapterVote { this.container.id = "chapterVote"; this.container.style.height = "100%"; - ReactDOM.render( - <ChapterVoteComponent ref={this.ref} vote={vote} />, - this.container - ); + this.root = createRoot(this.container); + this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />); } getContainer(): HTMLElement { @@ -30,7 +29,7 @@ export class ChapterVote { } close(): void { - ReactDOM.unmountComponentAtNode(this.container); + this.root.unmount(); this.container.remove(); } diff --git a/src/render/GenericNotice.tsx b/src/render/GenericNotice.tsx index 63a4c879..4e01bcac 100644 --- a/src/render/GenericNotice.tsx +++ b/src/render/GenericNotice.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import NoticeComponent from "../components/NoticeComponent"; import Utils from "../utils"; @@ -35,6 +35,7 @@ export default class GenericNotice { noticeElement: HTMLDivElement; noticeRef: React.MutableRefObject<NoticeComponent>; idSuffix: string; + root: Root; constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) { this.noticeRef = React.createRef(); @@ -49,11 +50,13 @@ export default class GenericNotice { referenceNode.prepend(this.noticeElement); - this.update(options); + this.root = createRoot(this.noticeElement); + + this.update(options); } update(options: NoticeOptions): void { - ReactDOM.render( + this.root.render( <NoticeComponent noticeTitle={options.title} idSuffix={this.idSuffix} @@ -92,8 +95,7 @@ export default class GenericNotice { </> : null} - </NoticeComponent>, - this.noticeElement + </NoticeComponent> ); } @@ -137,7 +139,7 @@ export default class GenericNotice { } close(): void { - ReactDOM.unmountComponentAtNode(this.noticeElement); + this.root.unmount(); this.noticeElement.remove(); } diff --git a/src/render/RectangleTooltip.tsx b/src/render/RectangleTooltip.tsx index ea019db7..571a2788 100644 --- a/src/render/RectangleTooltip.tsx +++ b/src/render/RectangleTooltip.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; export interface RectangleTooltipProps { text: string, @@ -20,7 +20,7 @@ export interface RectangleTooltipProps { export class RectangleTooltip { text: string; container: HTMLDivElement; - + root: Root; timer: NodeJS.Timeout; constructor(props: RectangleTooltipProps) { @@ -32,6 +32,7 @@ export class RectangleTooltip { this.text = props.text; props.fontSize ??= "10px"; + this.container = document.createElement('div'); props.htmlId ??= "sponsorRectangleTooltip" + props.text; this.container.id = props.htmlId; @@ -47,7 +48,8 @@ export class RectangleTooltip { this.timer = setTimeout(() => this.close(), props.timeout * 1000); } - ReactDOM.render( + this.root = createRoot(this.container); + this.root.render( <div style={{ bottom: props.bottomOffset, left: props.leftOffset, @@ -81,13 +83,12 @@ export class RectangleTooltip { {chrome.i18n.getMessage("GotIt")} </button> - </div>, - this.container + </div> ) } close(): void { - ReactDOM.unmountComponentAtNode(this.container); + this.root.unmount(); this.container.remove(); if (this.timer) clearTimeout(this.timer); diff --git a/src/render/SubmissionNotice.tsx b/src/render/SubmissionNotice.tsx index 9164666d..295d8e2b 100644 --- a/src/render/SubmissionNotice.tsx +++ b/src/render/SubmissionNotice.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import Utils from "../utils"; const utils = new Utils(); @@ -17,6 +17,8 @@ class SubmissionNotice { noticeElement: HTMLDivElement; + root: Root; + constructor(contentContainer: ContentContainer, callback: () => unknown) { this.noticeRef = React.createRef(); @@ -30,13 +32,13 @@ class SubmissionNotice { referenceNode.prepend(this.noticeElement); - ReactDOM.render( + this.root = createRoot(this.noticeElement); + this.root.render( <SubmissionNoticeComponent contentContainer={contentContainer} callback={callback} ref={this.noticeRef} - closeListener={() => this.close(false)} />, - this.noticeElement + closeListener={() => this.close(false)} /> ); } @@ -46,7 +48,7 @@ class SubmissionNotice { close(callRef = true): void { if (callRef) this.noticeRef.current.cancel(); - ReactDOM.unmountComponentAtNode(this.noticeElement); + this.root.unmount(); this.noticeElement.remove(); } diff --git a/src/render/Tooltip.tsx b/src/render/Tooltip.tsx index dd9a26cc..7c89dd8e 100644 --- a/src/render/Tooltip.tsx +++ b/src/render/Tooltip.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import { ButtonListener } from "../types"; export interface TooltipProps { @@ -26,6 +26,7 @@ export class Tooltip { container: HTMLDivElement; timer: NodeJS.Timeout; + root: Root; constructor(props: TooltipProps) { props.bottomOffset ??= "70px"; @@ -54,8 +55,9 @@ export class Tooltip { } const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`; - - ReactDOM.render( + + this.root = createRoot(this.container); + this.root.render( <div style={{bottom: props.bottomOffset, left: props.leftOffset, right: props.rightOffset, backgroundColor}} className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "") + ` ${props.extraClass}`}> <div> @@ -93,8 +95,7 @@ export class Tooltip { {chrome.i18n.getMessage("GotIt")} </button> : null} - </div>, - this.container + </div> ) } @@ -120,7 +121,7 @@ export class Tooltip { } close(): void { - ReactDOM.unmountComponentAtNode(this.container); + this.root.unmount(); this.container.remove(); if (this.timer) clearTimeout(this.timer); |