56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { FC, useState } from "react";
|
|
import Iframe from "react-iframe";
|
|
|
|
type ZammadWrapperProps = {
|
|
path: string;
|
|
hideSidebar?: boolean;
|
|
};
|
|
|
|
export const ZammadWrapper: FC<ZammadWrapperProps> = ({
|
|
path,
|
|
hideSidebar = true,
|
|
}) => {
|
|
const origin = typeof window !== 'undefined' && window.location.origin
|
|
? window.location.origin
|
|
: '';
|
|
const [display, setDisplay] = useState("hidden");
|
|
const url = `${origin}/zammad${path}`;
|
|
console.log({ origin, path, url });
|
|
|
|
return (
|
|
< Iframe
|
|
id="link"
|
|
url={url}
|
|
width="100%"
|
|
height="100%"
|
|
frameBorder={0}
|
|
styles={{ display }}
|
|
onLoad={() => {
|
|
const linkElement = document.querySelector("iframe");
|
|
if (
|
|
linkElement.contentDocument &&
|
|
linkElement.contentDocument?.querySelector &&
|
|
linkElement.contentDocument.querySelector("#navigation") &&
|
|
linkElement.contentDocument.querySelector("body") &&
|
|
linkElement.contentDocument.querySelector(".sidebar")
|
|
) {
|
|
// @ts-ignore
|
|
linkElement.contentDocument.querySelector("#navigation").style =
|
|
"display: none";
|
|
// @ts-ignore
|
|
linkElement.contentDocument.querySelector("body").style =
|
|
"font-family: Arial";
|
|
|
|
if (hideSidebar) {
|
|
// @ts-ignore
|
|
linkElement.contentDocument.querySelector(".sidebar").style =
|
|
"display: none";
|
|
}
|
|
|
|
setDisplay("inherit");
|
|
}
|
|
|
|
}}
|
|
/>
|
|
);
|
|
};
|