Move forms to sidepanel
表单组件迁移到 SidePanel 原 Popup 引导打开 SidePanel 优化表单组件和 Hooks，获取 Form 组件 Ref
This commit is contained in:
@@ -1,23 +0,0 @@
|
||||
.bili {
|
||||
gap: 1em;
|
||||
width: 600px;
|
||||
display: flex;
|
||||
|
||||
.image {
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
|
||||
.selector {
|
||||
gap: 1em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1em;
|
||||
|
||||
img {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
cursor: pointer;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
-146
@@ -1,146 +0,0 @@
|
||||
import { useEffect, useState } 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";
|
||||
import Placeholder from "~components/ui/placeholder";
|
||||
|
||||
import styles from "./bili.module.less";
|
||||
|
||||
interface ReadProps {
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
interface FormValue {
|
||||
name: string;
|
||||
ename: string;
|
||||
project: string;
|
||||
made: string;
|
||||
sale: string;
|
||||
type: number;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
const getInfo = async () => {
|
||||
let tab: chrome.tabs.Tab;
|
||||
|
||||
[tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
|
||||
|
||||
if (tab && !tab.url.includes("chrome")) {
|
||||
const a = await chrome.tabs.sendMessage(tab.id, { type: 'toolbox:getBiliToy' });
|
||||
|
||||
console.log('get toy:', a);
|
||||
|
||||
return a;
|
||||
}
|
||||
}
|
||||
|
||||
function Toy({ onBack }: ReadProps) {
|
||||
const { bindInput, setValues, onSubmit } = useForm<FormValue>({
|
||||
initialValues: {
|
||||
type: 3,
|
||||
},
|
||||
});
|
||||
|
||||
const [imgs, setImgs] = useState([]);
|
||||
const [currentImg, setCurrentImg] = useState(0);
|
||||
|
||||
const submitForm = (body: FormValue) => {
|
||||
sendToBackground({
|
||||
name: "bili",
|
||||
body: {
|
||||
action: "submitAddForm",
|
||||
values: {
|
||||
...body,
|
||||
imageUrl: imgs[0],
|
||||
},
|
||||
},
|
||||
}).then((res) => {
|
||||
if (res.status === "Success") {
|
||||
add({
|
||||
content: "提交成功",
|
||||
});
|
||||
}
|
||||
else {
|
||||
add({
|
||||
content: res.msg,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getInfo().then((res) => {
|
||||
if (!res) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { images, ...others } = res;
|
||||
|
||||
setImgs(images);
|
||||
setCurrentImg(0);
|
||||
|
||||
// ! 必须等组件渲染出来才能设置值，这里是个问题
|
||||
window.requestAnimationFrame(() => {
|
||||
setValues(others);
|
||||
});
|
||||
})
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Tab>
|
||||
<Tab.Header title="添加手办" onBack={onBack} />
|
||||
<Tab.Body>
|
||||
<Placeholder className={styles.bili} show={imgs.length === 0} value="非 B 站会员购页面">
|
||||
<div className={styles.image}>
|
||||
<img src={imgs[currentImg]} alt="" />
|
||||
<div className={styles.selector}>
|
||||
{imgs.map((item, index) => (
|
||||
<img key={index} src={item} alt="" onClick={() => setCurrentImg(index)} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Form className={styles.form} onSubmit={onSubmit(submitForm)}>
|
||||
<div>
|
||||
<label htmlFor="name">中文名</label>
|
||||
<input {...bindInput("name")} required placeholder="中文名" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="ename">英文名</label>
|
||||
<input {...bindInput("ename")} placeholder="英文名" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="project">作品</label>
|
||||
<input {...bindInput("project")} placeholder="作品" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="made">制作</label>
|
||||
<input {...bindInput("made")} placeholder="制作" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="sale">发售日期</label>
|
||||
<input {...bindInput("sale")} placeholder="发售日期" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="type">状态</label>
|
||||
<select {...bindInput("type")} required>
|
||||
<option value={1}>已到货</option>
|
||||
<option value={2}>已预订</option>
|
||||
<option value={3}>想要但没钱</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="desc">描述</label>
|
||||
<textarea {...bindInput("desc")} rows={5} placeholder="描述"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit">提交</button>
|
||||
</Form>
|
||||
</Placeholder>
|
||||
</Tab.Body>
|
||||
</Tab>
|
||||
);
|
||||
}
|
||||
|
||||
export default Toy;
|
||||
+8
-13
@@ -1,7 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import Menu from "./menu";
|
||||
import Read from "./read";
|
||||
import Toy from "./bili";
|
||||
import Message from "~components/ui/message";
|
||||
import { clsn } from "~utils";
|
||||
import "assets/global.less";
|
||||
@@ -17,6 +15,7 @@ function IndexPopup() {
|
||||
const onClickMenu = (value: string) => {
|
||||
if (value === "options") {
|
||||
chrome.runtime.openOptionsPage();
|
||||
|
||||
return;
|
||||
}
|
||||
else if (value === "home") {
|
||||
@@ -29,24 +28,20 @@ function IndexPopup() {
|
||||
return;
|
||||
}
|
||||
|
||||
setTab(value);
|
||||
}
|
||||
chrome.tabs.query({ active: true, lastFocusedWindow: true }).then((tabs) => {
|
||||
const { id, windowId } = tabs[0];
|
||||
|
||||
const renderBody = () => {
|
||||
if (tab === "read") {
|
||||
return <Read onBack={onBack} />;
|
||||
}
|
||||
if (tab === "toy") {
|
||||
return <Toy onBack={onBack} />;
|
||||
}
|
||||
chrome.sidePanel.setOptions({ path: `sidepanel.html?type=${value}` })
|
||||
chrome.sidePanel.open({ tabId: id, windowId });
|
||||
|
||||
return <Menu onClick={onClickMenu} />;
|
||||
window.close();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={clsn(styles.root, tab && styles.hasTab)}>
|
||||
{renderBody()}
|
||||
<Menu onClick={onClickMenu} />
|
||||
</div>
|
||||
<Message />
|
||||
</>
|
||||
|
||||
-107
@@ -1,107 +0,0 @@
|
||||
import { useEffect } 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 ReadProps {
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function Read({ onBack }: ReadProps) {
|
||||
const { bindInput, setValues, onSubmit } = useForm<FormValue>({
|
||||
initialValues: {
|
||||
tags: "",
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
getInfo().then((res) => {
|
||||
if (!res) {
|
||||
return;
|
||||
}
|
||||
|
||||
setValues(res);
|
||||
})
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Tab>
|
||||
<Tab.Header title="在看" onBack={onBack} />
|
||||
<Tab.Body>
|
||||
<Form 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>
|
||||
<button type="submit">提交</button>
|
||||
</Form>
|
||||
</Tab.Body>
|
||||
</Tab>
|
||||
);
|
||||
}
|
||||
|
||||
export default Read;
|
||||
Reference in New Issue
Block a user