Merge pull request #292 from neilime/feat/fix-doc-usage-frame

docs: fix usage frame auto resize
neilime · Jan 7, 2022 · 36a5b17 · 36a5b17
2 parents b1a5544 + d110ca1
commit 36a5b17
Show file tree

Hide file tree

Showing 4 changed files with 1,017 additions and 974 deletions.
diff --git a/website/package.json b/website/package.json
@@ -23,8 +23,7 @@
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-frame-component": "^5.2.1",
+    "react-dom": "^17.0.2",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {

diff --git a/website/src/components/AutoResizeFrame.tsx b/website/src/components/AutoResizeFrame.tsx
@@ -0,0 +1,32 @@
+import React, { useRef, useState } from "react";
+import { FunctionComponent } from "react";
+
+const AutoResizeFrame: FunctionComponent<{ srcDoc: string }> = ({ srcDoc }) => {
+  const ref = useRef<HTMLIFrameElement>();
+  const [height, setHeight] = useState("100px");
+  const onLoad = () => {
+    setHeight(ref?.current?.contentWindow.document.body.scrollHeight + "px");
+  };
+
+  const id = "iframe_" + Math.random().toString(36).slice(2, 9);
+
+  return (
+    <iframe
+      ref={ref}
+      onLoad={onLoad}
+      id={id}
+      srcDoc={srcDoc}
+      width="100%"
+      height={height}
+      scrolling="no"
+      frameBorder="0"
+      style={{
+        maxWidth: "100%",
+        width: "100%",
+        overflow: "auto",
+      }}
+    ></iframe>
+  );
+};
+
+export default AutoResizeFrame;
diff --git a/website/src/components/HtmlCode.tsx b/website/src/components/HtmlCode.tsx
@@ -1,41 +1,17 @@
-import React, { Children, FunctionComponent, ReactNode } from "react";
-import { createRef, RefObject, useEffect, useState } from "react";
-import Frame from "react-frame-component";
+import React, { FunctionComponent, ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import AutoResizeFrame from "./AutoResizeFrame";
 
 interface IProps {
   children: ReactNode;
   bootstrapVersion: string;
 }
 
-interface IFrame {
-  node: HTMLIFrameElement;
-}
-
 const HtmlCode: FunctionComponent<IProps> = ({
   children,
   bootstrapVersion,
 }) => {
-  const [height, setHeight] = useState(100);
-  const iframeRef: RefObject<IFrame> = createRef();
-  const handleResize = (iframe: RefObject<IFrame>) => {
-    const doc = iframe?.current?.node?.contentDocument;
-    const body_ = doc?.body;
-    const html_ = doc?.documentElement;
-
-    const height = Math.max(
-      body_?.scrollHeight,
-      body_?.offsetHeight,
-      html_?.clientHeight,
-      html_?.scrollHeight,
-      html_?.offsetHeight
-    );
-
-    if (height !== 0) {
-      setHeight(height);
-    }
-  };
-  useEffect(() => handleResize(iframeRef), [children]);
-
+  const htmlString = renderToStaticMarkup(children);
   const initialContent = `<!DOCTYPE html>
   <html>
     <head>
@@ -45,9 +21,14 @@ const HtmlCode: FunctionComponent<IProps> = ({
         crossorigin="anonymous"
       />
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+      <link
+        href="https://getbootstrap.com/docs/${bootstrapVersion}/assets/css/docs.min.css" 
+        rel="stylesheet" 
+        crossorigin="anonymous"
+      />
       </head>
       <body>
-        <div></div>
+        <div class="bd-example">${htmlString}</div>
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@${bootstrapVersion}/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
         <script type="text/javascript">
@@ -58,19 +39,6 @@ const HtmlCode: FunctionComponent<IProps> = ({
     </body>
   </html>`;
 
-  return (
-    <Frame
-      style={{
-        height,
-        width: "100%",
-      }}
-      ref={iframeRef}
-      onLoad={() => handleResize(iframeRef)}
-      initialContent={initialContent}
-    >
-      {children}
-    </Frame>
-  );
+  return <AutoResizeFrame srcDoc={initialContent} />;
 };
-
 export default HtmlCode;