Move forms to sidepanel

表单组件迁移到 SidePanel 原 Popup 引导打开 SidePanel 优化表单组件和 Hooks，获取 Form 组件 Ref
2024-04-12 14:09:38 +08:00
parent 288de31580
commit 0240b13123
10 changed files with 152 additions and 54 deletions
@@ -0,0 +1,112 @@
+import { useEffect, useRef } from "react";
+import { sendToBackground } from "@plasmohq/messaging";
+import useForm from "~hooks/useForm";
+import Tab from "~components/ui/tab";
+import Form from "~components/ui/form";
+import { add } from "~components/ui/message/utils";
+
+interface FormValue {
+  title: string;
+  link: string;
+  desc: string;
+  tips: string;
+  author: string;
+  image: string;
+  sitename: string;
+  tags: string;
+}
+
+const getInfo = async () => {
+  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+
+  if (tab) {
+    return await chrome.tabs.sendMessage(tab.id, { type: 'toolbox:getInfo' });
+  }
+}
+
+const submitForm = (body: FormValue) => {
+  sendToBackground({
+    name: "read",
+    body: {
+      action: "submitAddForm",
+      values: body,
+    },
+  }).then((res) => {
+    if (res.status === "Success") {
+      add({
+        content: "提交成功",
+      });
+    }
+    else {
+      add({
+        content: res.msg,
+      });
+    }
+  }).catch((e) => {
+    if (e instanceof Error) {
+      add({
+        content: e.message,
+      });
+    }
+  });
+}
+
+function Read() {
+  const formRef = useRef<HTMLFormElement>();
+
+  const { bindInput, setValues, onSubmit } = useForm<FormValue>({
+    initialValues: {
+      tags: "",
+    },
+  });
+
+  useEffect(() => {
+    getInfo().then((res) => {
+      if (!res) {
+        return;
+      }
+
+      setValues(res);
+    })
+  }, []);
+
+  return (
+    <Tab>
+      <Tab.Body>
+        <Form ref={formRef} onSubmit={onSubmit(submitForm)}>
+          <input {...bindInput("title")} required placeholder="标题" />
+          <input {...bindInput("link")} required placeholder="链接" />
+          <div>
+            <label htmlFor="desc">概括</label>
+            <textarea {...bindInput("desc")} rows={5} required placeholder="概括"></textarea>
+          </div>
+          <div>
+            <label htmlFor="tips">评论 / 推荐理由</label>
+            <textarea {...bindInput("tips")} rows={5} placeholder="推荐理由"></textarea>
+          </div>
+          <div>
+            <label htmlFor="author">作者</label>
+            <input {...bindInput("author")} placeholder="作者" />
+          </div>
+          <div>
+            <label htmlFor="image">插图</label>
+            <input {...bindInput("image")} placeholder="插图" />
+          </div>
+          <div>
+            <label htmlFor="sitename">站点名称</label>
+            <input {...bindInput("sitename")} placeholder="站点名称" />
+          </div>
+          <div>
+            <label htmlFor="tags">标签</label>
+            <input {...bindInput("tags")} placeholder="标签" />
+          </div>
+        </Form>
+      </Tab.Body>
+      <Tab.Footer>
+        <button onClick={() => formRef.current?.requestSubmit()}>提交</button>
+      </Tab.Footer>
+    </Tab>
+  );
+}
+
+export default Read;