Commit 673e87ab authored by Chunchi Che's avatar Chunchi Che

optimize replay modal style

parent a4e6c32f
......@@ -3,15 +3,15 @@ import {
DeleteOutlined,
DownloadOutlined,
FileAddOutlined,
InboxOutlined,
PlusOutlined,
} from "@ant-design/icons";
import { App, Button, Dropdown, MenuProps, Upload, UploadProps } from "antd";
import { App, Button, Dropdown, MenuProps, UploadProps } from "antd";
import React, { useRef, useState } from "react";
import YGOProDeck from "ygopro-deck-encode";
import { deckStore, IDeck } from "@/stores";
import { Uploader } from "../Shared";
import styles from "./DeckSelect.module.scss";
export const DeckSelect: React.FC<{
......@@ -211,18 +211,11 @@ const DeckUploader: React.FC<{ onLoaded: (deck: IDeck) => void }> = ({
};
return (
<div>
<Upload.Dragger
{...uploadProps}
style={{ width: "100%", margin: "20px 0 10px" }}
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
<p className="ant-upload-hint">仅支持后缀名为ydk的卡组文件。</p>
</Upload.Dragger>
</div>
<Uploader
{...uploadProps}
text="单击或拖动文件到此区域进行上传"
hint="仅支持后缀名为ydk的卡组文件。"
/>
);
};
......
import { UploadOutlined } from "@ant-design/icons";
import { Button, message, Modal, Upload, UploadProps } from "antd";
import { Button, message, Modal, UploadProps } from "antd";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { proxy, useSnapshot } from "valtio";
import { matStore } from "@/stores";
import { Uploader } from "../Shared";
import { init } from "./util";
const localStore = proxy({
......@@ -22,6 +22,7 @@ export const ReplayModal: React.FC = () => {
onChange(info) {
info.file.status = "done";
},
accept: ".yrp3d",
beforeUpload(file, _) {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
......@@ -78,9 +79,11 @@ export const ReplayModal: React.FC = () => {
}
onCancel={() => (localStore.open = false)}
>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>点击上传录像文件</Button>
</Upload>
<Uploader
{...uploadProps}
text="单击或拖动文件到此区域进行上传"
hint="仅支持后缀名为yrp3d的录像文件。"
/>
</Modal>
);
};
......
import { InboxOutlined } from "@ant-design/icons";
import { Upload, UploadProps } from "antd";
import React from "react";
export const Uploader: React.FC<
UploadProps & { text?: string; hint?: string }
> = ({ text, hint, ...uploadProps }) => (
<div>
<Upload.Dragger
{...uploadProps}
style={{ width: "100%", margin: "20px 0 10px" }}
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">{text}</p>
<p className="ant-upload-hint">{hint}</p>
</Upload.Dragger>
</div>
);
......@@ -6,4 +6,5 @@ export * from "./Loading";
export * from "./Scrollbar";
export * from "./Select";
export * from "./SpecialButton";
export * from "./Uploader";
export * from "./YgoCard";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment