UniqueSoft/openpanel
2
0
Fork 0
mirror of https://github.com/stefanpejcic/openpanel synced 2025-06-26 18:28:26 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Delete documentation/src/refine-theme/landing-playground-modal.tsx

Browse Source
This commit is contained in:
Stefan Pejcic 2024-07-10 19:55:53 +02:00 committed by GitHub
parent cfe2a1fda8
commit 794ee1cccf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 0 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
documentation/src/refine-theme/landing-playground-modal.tsx
View File

@ -1,188 +0,0 @@
import React, { Fragment } from "react";
import clsx from "clsx";
import { Dialog, Transition } from "@headlessui/react";
import { useLocation } from "@docusaurus/router";
import { useColorMode } from "@docusaurus/theme-common";
import { CloseIcon } from "./icons/close";
export const LandingPlaygroundModal = ({ visible, close }) => {
const iframeRef = React.useRef<HTMLIFrameElement>(null);
const { colorMode } = useColorMode();
const { search, hash } = useLocation();
const [isActive, setIsActive] = React.useState(false);
React.useEffect(() => {
// when color mode changes, post a message to the iframe
// to update its color mode
if (iframeRef.current) {
iframeRef.current.contentWindow?.postMessage(
{
type: "colorMode",
colorMode,
},
"*",
);
}
}, [colorMode, visible, isActive]);
React.useEffect(() => {
const mediaQuery = window.matchMedia("(max-width: 959px)");
setIsActive(mediaQuery.matches);
const listener = () => {
setIsActive(mediaQuery.matches);
};
mediaQuery.addEventListener("change", listener);
return () => {
mediaQuery.removeEventListener("change", listener);
};
}, []);
const [params, setParams] = React.useState<Record<string, string>>({});
const scrollToItem = React.useCallback(() => {
const playgroundElement = document.getElementById("playground");
if (playgroundElement) {
playgroundElement.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
}
}, []);
React.useEffect(() => {
const _params = new URLSearchParams(search);
const paramsObj: Record<string, string> = {};
// @ts-expect-error no downlevel iteration
for (const [key, value] of _params.entries()) {
paramsObj[key] = value;
}
setParams(paramsObj);
}, [search]);
React.useEffect(() => {
if (params.playground || hash === "#playground") {
scrollToItem();
}
}, [params.playground, hash]);
const closePlayground = React.useCallback(() => {
close();
}, []);
React.useEffect(() => {
if (isActive && visible) {
if (typeof document !== "undefined" && document.documentElement) {
document.documentElement.style.scrollBehavior = "unset";
}
} else {
setTimeout(() => {
if (
typeof document !== "undefined" &&
document.documentElement
) {
document.documentElement.style.scrollBehavior = "smooth";
}
}, 300);
}
}, [isActive, visible]);
if (!isActive) return null;
return (
<Transition appear show={!!visible} as={Fragment}>
<Dialog
as="div"
className="relative z-10 bg-gray-100 dark:bg-gray-900 h-full w-full"
onClose={closePlayground}
>
<div
className={clsx(
"fixed top-0 left-0 right-0",
"overflow-y-auto",
"bg-gray-100",
"dark:bg-gray-900",
"h-full",
"w-full",
"z-[10]",
)}
>
<div
className={clsx(
"flex",
"py-5",
"px-4",
"landing-md:px-5",
"w-full",
"absolute",
"left-0 top-0",
"items-center justify-end",
"z-[1]",
"max-w-[900px]",
"mx-auto",
)}
>
<button
type="button"
className={clsx(
"rounded-lg",
"text-gray-500",
"hover:bg-gray-200",
"dark:hover:bg-gray-700",
"dark:text-gray-300",
"active:scale-90",
"transition-transform duration-200 ease-in-out",
"focus:outline-none",
"appearance-none",
)}
>
<CloseIcon onClick={closePlayground} />
</button>
</div>
<div
className={clsx(
"flex items-start justify-center",
"min-h-full h-full",
"text-center",
"overflow-auto",
)}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className={clsx("w-full", "h-full")}>
<iframe
ref={iframeRef}
src={`https://refine.new/embed-form?theme=${colorMode}`}
className={clsx(
"bg-gray-100",
"dark:bg-gray-900",
"max-w-[830px]",
"mx-auto",
"w-full",
"h-full",
"border-none",
)}
/>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
);
};