ProjectHentai/nonebot2
6
0
Fork 0
mirror of https://github.com/nonebot/nonebot2.git synced 2025-07-31 01:59:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

🚧 add modal

Browse Source
This commit is contained in:
yanyongyu
2021-12-31 02:06:20 +08:00
parent 21a958ffd9
commit ab2c73856d
8 changed files with 286 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
website/src/components/Modal/index.tsx Normal file
View File

@ -0,0 +1,39 @@
import clsx from "clsx";
import React from "react";
export default function Modal({
active,
setActive,
children,
}: {
active: boolean;
setActive: (active: boolean) => void;
children: React.ReactNode;
}): JSX.Element {
return (
<>
{/* overlay */}
<div
className={clsx(
"fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center transition z-[200]",
{
hidden: !active,
"pointer-events-auto": active,
}
)}
onClick={() => setActive(false)}
>
<div className="absolute top-0 bottom-0 left-0 right-0 h-full w-full bg-gray-800 opacity-[.46]"></div>
</div>
{/* modal */}
<div
className={clsx(
"fixed top-0 left-0 flex items-center justify-center h-full w-full transition z-[201] pointer-events-none",
{ hidden: !active }
)}
>
{children}
</div>
</>
);
}

9
website/src/components/Paginate/index.tsx
View File

@ -1,9 +1,10 @@
import React, { useCallback } from "react";
import React, { useCallback, useRef } from "react";
import ReactPaginate from "react-paginate";
import { usePagination } from "react-use-pagination";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useContentWidth } from "../../libs/width";
import styles from "./styles.module.css";
export default function Paginate({
@ -11,6 +12,9 @@ export default function Paginate({
setPage,
currentPage,
}: ReturnType<typeof usePagination>): JSX.Element {
const ref = useRef<HTMLElement>();
const maxWidth = useContentWidth(ref.current?.parentElement ?? undefined);
const onPageChange = useCallback(
(selectedItem: { selected: number }) => {
setPage(selectedItem.selected);
@ -18,8 +22,9 @@ export default function Paginate({
[setPage]
);
// FIXME: responsive width
return (
<nav role="navigation" aria-label="Pagination Navigation">
<nav role="navigation" aria-label="Pagination Navigation" ref={ref}>
<ReactPaginate
pageCount={totalPages}
forcePage={currentPage}

103
website/src/components/Plugin.tsx
View File

@ -1,12 +1,14 @@
import React from "react";
import React, { useCallback, useState } from "react";
import { usePagination } from "react-use-pagination";
import plugins from "../../static/plugins.json";
import { useFilteredObjs } from "../libs/store";
import Card from "./Card";
import Modal from "./Modal";
import Paginate from "./Paginate";
export default function Adapter(): JSX.Element {
const [modalOpen, setModalOpen] = useState<boolean>(false);
const {
filter,
setFilter,
@ -20,6 +22,28 @@ export default function Adapter(): JSX.Element {
const { startIndex, endIndex } = props;
const currentPlugins = filteredPlugins.slice(startIndex, endIndex + 1);
const [form, setForm] = useState<{
name: string;
desc: string;
projectLink: string;
moduleName: string;
homepage: string;
}>({ name: "", desc: "", projectLink: "", moduleName: "", homepage: "" });
const onSubmit = () => {
console.log(form);
};
const onChange = (event) => {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
setForm({
...form,
[name]: value,
});
event.preventDefault();
};
return (
<>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
@ -29,7 +53,10 @@ export default function Adapter(): JSX.Element {
placeholder="搜索插件"
onChange={(event) => setFilter(event.target.value)}
/>
<button className="w-full rounded-lg bg-hero text-white">
<button
className="w-full rounded-lg bg-hero text-white"
onClick={() => setModalOpen(true)}
>
发布插件
</button>
</div>
@ -44,6 +71,78 @@ export default function Adapter(): JSX.Element {
<div className="grid grid-cols-1 p-4">
<Paginate {...props} />
</div>
<Modal active={modalOpen} setActive={setModalOpen}>
<div className="w-full max-w-[600px] max-h-[90%] overflow-y-auto rounded shadow-lg m-6 origin-center transition z-[inherit] pointer-events-auto thin-scrollbar">
<div className="bg-light-nonepress-100 dark:bg-dark-nonepress-100">
<div className="px-6 pt-4 pb-2 font-medium text-xl">
<span>插件信息</span>
</div>
<div className="px-6 pb-5 w-full">
<form onSubmit={onSubmit}>
<div className="grid grid-cols-1 gap-4 p-4">
<label className="flex flex-wrap">
<span className="mr-2">插件名称:</span>
<input
type="text"
name="name"
maxLength={20}
className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
onChange={onChange}
/>
</label>
<label className="flex flex-wrap">
<span className="mr-2">插件介绍:</span>
<input
type="text"
name="desc"
className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
onChange={onChange}
/>
</label>
<label className="flex flex-wrap">
<span className="mr-2">PyPI 项目名:</span>
<input
type="text"
name="projectLink"
className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
onChange={onChange}
/>
</label>
<label className="flex flex-wrap">
<span className="mr-2">import 包名:</span>
<input
type="text"
name="moduleName"
className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
onChange={onChange}
/>
</label>
<label className="flex flex-wrap">
<span className="mr-2">仓库/主页:</span>
<input
type="text"
name="homepage"
className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
onChange={onChange}
/>
</label>
</div>
</form>
</div>
<div className="px-4 py-2 flex justify-end">
<button className="px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]">
关闭
</button>
<button
className="ml-2 px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
onClick={onSubmit}
>
发布
</button>
</div>
</div>
</div>
</Modal>
</>
);
}