From 6d010c599ff1a0ce003a41d8f6761eddbd4f4521 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Mon, 2 Oct 2023 21:51:06 +0800
Subject: [PATCH] refactor: extract webview kernel wich easy replace

---
 client/web/src/components/Webview.tsx | 73 ++++++++++++++++++---------
 1 file changed, 48 insertions(+), 25 deletions(-)

diff --git a/client/web/src/components/Webview.tsx b/client/web/src/components/Webview.tsx
index cd2b0e45..38454337 100644
--- a/client/web/src/components/Webview.tsx
+++ b/client/web/src/components/Webview.tsx
@@ -1,8 +1,51 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { t } from 'tailchat-shared';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { buildRegFn, t } from 'tailchat-shared';
 import { withKeepAliveOverlay } from './KeepAliveOverlay';
 import { Loading } from './Loading';
 
+interface WebviewKernelProps {
+  className?: string;
+  src: string;
+}
+
+/**
+ * 内置的默认webview渲染容器
+ */
+const DefaultWebviewKernel: React.FC<WebviewKernelProps> = React.memo(
+  (props) => {
+    const ref = useRef<HTMLIFrameElement>(null);
+    const [spinning, setSpinning] = useState(true);
+
+    useEffect(() => {
+      const callback = () => {
+        setSpinning(false);
+      };
+      ref.current?.addEventListener('load', callback);
+
+      return () => {
+        ref.current?.removeEventListener('load', callback);
+      };
+    }, []);
+
+    return (
+      <Loading
+        spinning={spinning}
+        className="w-full h-full"
+        tip={t('加载网页中...')}
+      >
+        <iframe {...props} ref={ref} />
+      </Loading>
+    );
+  }
+);
+DefaultWebviewKernel.displayName = 'DefaultWebviewKernel';
+
+const [getWebviewKernel, setWebviewKernel] = buildRegFn<
+  () => React.ComponentType<WebviewKernelProps>
+>('webviewKernelComponent', () => DefaultWebviewKernel);
+
+export { setWebviewKernel };
+
 interface WebviewProps {
   className?: string;
   style?: React.CSSProperties;
@@ -13,29 +56,9 @@ interface WebviewProps {
  * 网页渲染容器
  */
 export const Webview: React.FC<WebviewProps> = (props) => {
-  const ref = useRef<HTMLIFrameElement>(null);
-  const [spinning, setSpinning] = useState(true);
-
-  useEffect(() => {
-    const callback = () => {
-      setSpinning(false);
-    };
-    ref.current?.addEventListener('load', callback);
-
-    return () => {
-      ref.current?.removeEventListener('load', callback);
-    };
-  }, []);
-
-  return (
-    <Loading
-      spinning={spinning}
-      className="w-full h-full"
-      tip={t('加载网页中...')}
-    >
-      <iframe ref={ref} className="w-full h-full" src={props.url} />
-    </Loading>
-  );
+  const KernelComponent = useMemo(() => getWebviewKernel(), []);
+
+  return <KernelComponent className="w-full h-full" src={props.url} />;
 };
 Webview.displayName = 'Webview';