Merge pull request #150 from ryanalexander/external-link-prompt

This commit is contained in:
Paul Makles 2021-08-30 12:17:16 +01:00 committed by GitHub
commit 912071db3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 0 deletions

View file

@ -24,6 +24,7 @@ import { generateEmoji } from "../common/Emoji";
import { emojiDictionary } from "../../assets/emojis"; import { emojiDictionary } from "../../assets/emojis";
import { MarkdownProps } from "./Markdown"; import { MarkdownProps } from "./Markdown";
import {useIntermediate} from "../../context/intermediate/Intermediate";
// TODO: global.d.ts file for defining globals // TODO: global.d.ts file for defining globals
declare global { declare global {
@ -97,6 +98,8 @@ const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { openScreen } = useIntermediate();
if (typeof content === "undefined") return null; if (typeof content === "undefined") return null;
if (content.length === 0) return null; if (content.length === 0) return null;
@ -198,6 +201,13 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
if (!internal) { if (!internal) {
element.setAttribute("target", "_blank"); element.setAttribute("target", "_blank");
element.onclick = (ev) => {
ev.preventDefault();
openScreen({
id: "external_link_prompt",
link: href
})
}
} }
}, },
); );

View file

@ -24,6 +24,7 @@ export type Screen =
| { id: "signed_out" } | { id: "signed_out" }
| { id: "error"; error: string } | { id: "error"; error: string }
| { id: "clipboard"; text: string } | { id: "clipboard"; text: string }
| { id: "external_link_prompt"; link: string }
| { | {
id: "_prompt"; id: "_prompt";
question: Children; question: Children;

View file

@ -9,6 +9,7 @@ import { InputModal } from "./modals/Input";
import { OnboardingModal } from "./modals/Onboarding"; import { OnboardingModal } from "./modals/Onboarding";
import { PromptModal } from "./modals/Prompt"; import { PromptModal } from "./modals/Prompt";
import { SignedOutModal } from "./modals/SignedOut"; import { SignedOutModal } from "./modals/SignedOut";
import {ExternalLinkModal} from "./modals/ExternalLinkPrompt";
export interface Props { export interface Props {
screen: Screen; screen: Screen;
@ -34,6 +35,8 @@ export default function Modals({ screen, openScreen }: Props) {
return <ClipboardModal onClose={onClose} {...screen} />; return <ClipboardModal onClose={onClose} {...screen} />;
case "onboarding": case "onboarding":
return <OnboardingModal onClose={onClose} {...screen} />; return <OnboardingModal onClose={onClose} {...screen} />;
case "external_link_prompt":
return <ExternalLinkModal onClose={onClose} {...screen} />;
} }
return null; return null;

View file

@ -0,0 +1,34 @@
import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal";
interface Props {
onClose: () => void;
link: string;
}
export function ExternalLinkModal({ onClose, link }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={<Text id={"app.special.modals.external_links.title"} />}
actions={[
{
onClick: ()=>{window.open(link, "_blank");},
confirmation: true,
contrast: true,
accent: true,
children: "Continue",
},
{
onClick: onClose,
confirmation: false,
children: "Cancel",
},
]}>
<Text id={"app.special.modals.external_links.short"} /> <br />
<a>{link}</a>
</Modal>
);
}