import React, {
PropsWithChildren,
useCallback,
useEffect,
useRef,
useState
} from 'react';
import ReactModal from 'react-modal';
import CodeBlock from '@theme/CodeBlock';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import BrowserOnly from '@docusaurus/BrowserOnly';
import ExpoSnippet from './ExpoSnippet';
import styles from './RenderHTMLCard.module.scss';
const ExpoLogo = ({ color, size }) => (
);
const tabs = [
{ label: 'JSX Source', value: 'jsx' },
{ label: 'HTML Snippet', value: 'html' },
{ label: 'TRT Snapshot', value: 'snapshot' }
];
function ExpoModal({
isOpen,
onModalClose,
...props
}: {
isOpen: boolean;
onModalClose: any;
expoSource: string;
title: string;
caption?: string;
preferHtmlSrc: boolean;
version: string;
extraneousDeps: string[];
}) {
const modalRef = useRef(null);
useEffect(
function fixClickOverlay() {
const current = modalRef.current;
current.node.addEventListener('click', onModalClose);
return () => {
current.node.removeEventListener('click', onModalClose);
};
},
[onModalClose]
);
return (
document.querySelector('body')}
overlayClassName={styles.overlay}
portalClassName={styles.portal}
className={styles.modalContainer}
isOpen={isOpen}
onRequestClose={onModalClose}
shouldCloseOnEsc
shouldCloseOnOverlayClick
appElement={document.body}
ref={modalRef}
contentLabel="Expo Interactive Source">
);
}
export default function RenderHTMLCard({
snippet,
title,
caption,
html,
preferHtmlSrc,
snapshot,
expoSource,
...props
}: PropsWithChildren<{
snippet: string;
expoSource: string;
html: string;
snapshot: string;
title: string;
caption?: string;
preferHtmlSrc: boolean;
version: string;
extraneousDeps: string[];
}>) {
const [isOpen, setIsOpen] = useState(false);
const normalSnippet = decodeURIComponent(snippet);
const normalExpoSource = decodeURIComponent(expoSource);
const normalHtml = decodeURIComponent(html);
const normalSnapshot = decodeURIComponent(snapshot);
const onModalClose = useCallback(() => setIsOpen(false), []);
return (
<>
{title && {title}
}
{normalHtml}
{normalSnippet}
{normalSnapshot}
{() => (
)}
{caption && (
{caption}
)}
Press on the button below to show how this code renders on your
device.
);
}