-
-
Notifications
You must be signed in to change notification settings - Fork 303
/
SandboxModal.tsx
105 lines (96 loc) · 2.72 KB
/
SandboxModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React, { FC, useEffect, useRef } from "react";
import Head from "next/head";
import { IFiles } from "codesandbox-import-utils/lib/api/define";
import { Dialog } from "@react-md/dialog";
import { bem, useToggle } from "@react-md/utils";
import useAppSizeContext from "components/Layout/useAppSizeContext";
import { toTitle } from "utils/toTitle";
import "./SandboxModal.scss";
import CodePreview from "./CodePreview";
import SandboxFileTree from "./SandboxFileTree";
import SandboxNavigation from "./SandboxNavigation";
interface SandboxModalProps {
pkg: string;
name: string;
from: string;
fileName: string;
sandbox: IFiles | null;
onFileChange: (fileName: string) => void;
onRequestClose: () => void;
}
const block = bem("sandbox-modal");
const SandboxModal: FC<SandboxModalProps> = ({
pkg,
name,
from,
fileName,
sandbox,
onFileChange,
onRequestClose,
}) => {
const pkgName = toTitle(pkg, " ", true);
const title = `react-md - ${pkgName} - ${name} Sandbox`;
const rendered = useRef(false);
useEffect(() => {
rendered.current = true;
}, []);
const { isPhone, isTablet, isDesktop, isLandscape } = useAppSizeContext();
const isLandscapeTablet = isLandscape && isTablet;
const inline = isDesktop || isLandscapeTablet;
const [isTreeVisible, showTree, hideTree, , setTreeVisible] = useToggle(
isDesktop
);
useEffect(() => {
if (isTreeVisible !== isDesktop) {
setTreeVisible(isDesktop);
}
// only want to run on media changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isDesktop, isTablet, isPhone]);
useEffect(() => {
if (isTreeVisible && !isDesktop) {
setTreeVisible(false);
}
// this effect closes the tree on mobile only after a new file is
// selected
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isDesktop, fileName]);
return (
<Dialog
id="sandbox-modal"
aria-labelledby="sandbox-modal-title"
portal={false}
modal
type="full-page"
visible={sandbox !== null}
onRequestClose={onRequestClose}
className={block()}
>
<Head>
<title>{title}</title>
</Head>
<SandboxNavigation
name={`${pkgName} ${name}`}
fileName={fileName}
from={from}
onRequestFiles={showTree}
onRequestClose={onRequestClose}
/>
<SandboxFileTree
sandbox={sandbox}
fileName={fileName}
inline={inline}
visible={isTreeVisible}
onFileChange={onFileChange}
onRequestClose={hideTree}
/>
<CodePreview
fileName={fileName}
sandbox={sandbox}
offset={inline}
onFileChange={onFileChange}
/>
</Dialog>
);
};
export default SandboxModal;