From c12873d929ed23e74ded6aa10e9c27e8de9b3c1a Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Tue, 7 Dec 2021 19:26:51 -0600 Subject: [PATCH] add react image overlay to other message type --- src/client/webapp/elements/msg-img-res-cont.tsx | 7 +++++-- src/client/webapp/elements/msg-img-res.tsx | 2 +- src/client/webapp/elements/overlays/overlay-image.tsx | 4 +--- src/client/webapp/elements/require/base-elements.tsx | 5 ----- src/client/webapp/elements/require/elements-util.tsx | 7 +++++++ 5 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/client/webapp/elements/msg-img-res-cont.tsx b/src/client/webapp/elements/msg-img-res-cont.tsx index c19849c..5a0ddd2 100644 --- a/src/client/webapp/elements/msg-img-res-cont.tsx +++ b/src/client/webapp/elements/msg-img-res-cont.tsx @@ -10,12 +10,12 @@ import ElementsUtil from './require/elements-util.js'; import { Message, ShouldNeverHappenError } from '../data-types'; import Q from '../q-module'; -import createImageOverlay from './overlay-image'; import createImageContextMenu from './context-menu-img'; import CombinedGuild from '../guild-combined'; import React from 'react'; import ReactHelper from './require/react-helper'; +import ImageOverlay from './overlays/overlay-image'; export default function createImageResourceMessageContinued(document: Document, q: Q, guild: CombinedGuild, message: Message): Element { if (!message.resourceId || !message.resourcePreviewId || !message.resourceName) { @@ -35,7 +35,10 @@ export default function createImageResourceMessageContinued(document: Document, ); q.$$$(element, '.content.image').addEventListener('click', () => { - document.body.appendChild(createImageOverlay(document, q, guild, message.resourceId as string, message.resourceName as string)); + ElementsUtil.presentReactOverlay(document, + + ); }); (async () => { try { diff --git a/src/client/webapp/elements/msg-img-res.tsx b/src/client/webapp/elements/msg-img-res.tsx index 432ef6b..66b1478 100644 --- a/src/client/webapp/elements/msg-img-res.tsx +++ b/src/client/webapp/elements/msg-img-res.tsx @@ -62,7 +62,7 @@ export default function createImageResourceMessage(document: Document, q: Q, gui ); q.$$$(element, '.content.image').addEventListener('click', (e) => { - BaseElements.presentReactOverlay(document, + ElementsUtil.presentReactOverlay(document, ); diff --git a/src/client/webapp/elements/overlays/overlay-image.tsx b/src/client/webapp/elements/overlays/overlay-image.tsx index 2314fc7..cbac3c1 100644 --- a/src/client/webapp/elements/overlays/overlay-image.tsx +++ b/src/client/webapp/elements/overlays/overlay-image.tsx @@ -5,7 +5,7 @@ const LOG = Logger.create(__filename, electronConsole); import * as FileType from 'file-type'; -import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import React, { FC, useEffect, useMemo, useState } from 'react'; import CombinedGuild from '../../guild-combined'; import ElementsUtil from '../require/elements-util'; import { Resource } from '../../data-types'; @@ -13,8 +13,6 @@ import DownloadButton from '../components/button-download'; import createImageContextMenu from '../context-menu-img'; import Q from '../../q-module'; -type ButtonText = 'Loading...' | 'Error' | 'Save' | 'Downloading...' | 'Writing...' | 'Reveal in Explorer' | 'Try Again'; - export interface ImageOverlayProps { guild: CombinedGuild resourceId: string, diff --git a/src/client/webapp/elements/require/base-elements.tsx b/src/client/webapp/elements/require/base-elements.tsx index a499161..cd9d441 100644 --- a/src/client/webapp/elements/require/base-elements.tsx +++ b/src/client/webapp/elements/require/base-elements.tsx @@ -251,11 +251,6 @@ export default class BaseElements { return element as HTMLElementWithRemoveSelf; } - static presentReactOverlay(document: Document, content: JSX.Element) { - const overlay = {content}; - ReactDOM.render(overlay, document.querySelector('#react-overlays')); - } - // eslint-disable-next-line @typescript-eslint/no-explicit-any static createOverlay(document: Document, content: JSX.Element): HTMLElementWithRemoveSelf { const q = new Q(document); diff --git a/src/client/webapp/elements/require/elements-util.tsx b/src/client/webapp/elements/require/elements-util.tsx index eb9b613..dfb5e29 100644 --- a/src/client/webapp/elements/require/elements-util.tsx +++ b/src/client/webapp/elements/require/elements-util.tsx @@ -17,6 +17,8 @@ import CombinedGuild from '../../guild-combined'; import { ShouldNeverHappenError } from '../../data-types'; import React from 'react'; +import Overlay from '../components/overlay'; +import ReactDOM from 'react-dom'; interface IAlignment { left?: string; @@ -336,6 +338,11 @@ export default class ElementsUtil { } } + static presentReactOverlay(document: Document, content: JSX.Element) { + const overlay = {content}; + ReactDOM.render(overlay, document.querySelector('#react-overlays')); + } + static bindHoverableContextElement( hoverElement: HTMLElement, contextElement: IHTMLElementWithRemovalType,