75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
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 {
|
|
content: string;
|
|
author: string;
|
|
origin: string;
|
|
links: string;
|
|
is_comment: boolean;
|
|
}
|
|
|
|
const submitForm = (body: FormValue) => {
|
|
sendToBackground({
|
|
name: "say",
|
|
body: {
|
|
action: "addSay",
|
|
values: body,
|
|
},
|
|
}).then((res) => {
|
|
add({
|
|
content: res.msg,
|
|
});
|
|
}).catch((e) => {
|
|
if (e instanceof Error) {
|
|
add({
|
|
content: e.message,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function Say() {
|
|
const formRef = useRef<HTMLFormElement>();
|
|
|
|
const { bindInput, onSubmit } = useForm<FormValue>({
|
|
initialValues: {
|
|
is_comment: true,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<Tab>
|
|
<Tab.Body>
|
|
<Form ref={formRef} onSubmit={onSubmit(submitForm)}>
|
|
<div>
|
|
<label htmlFor="content">内容</label>
|
|
<textarea {...bindInput("content")} rows={5} required placeholder="内容"></textarea>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="author">作者</label>
|
|
<input {...bindInput("author")} placeholder="作者" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="links">链接</label>
|
|
<input {...bindInput("links")} placeholder="链接" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="is_comment">摘抄</label>
|
|
<input type="checkbox" role="switch" {...bindInput("is_comment")} placeholder="摘抄" />
|
|
</div>
|
|
</Form>
|
|
</Tab.Body>
|
|
<Tab.Footer>
|
|
<button onClick={() => formRef.current?.requestSubmit()}>提交</button>
|
|
</Tab.Footer>
|
|
</Tab>
|
|
);
|
|
}
|
|
|
|
export default Say;
|