🎉 开始项目
feat: 完成基础界面; 列表展示 todo: uplevel button function todo: download/upload
This commit is contained in:
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>nf-disk</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="height: 100%"></div>
|
||||
<script src="./src/main.tsx" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
5975
frontend/package-lock.json
generated
Normal file
5975
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
frontend/package.json
Normal file
30
frontend/package.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react-components": "^9.54.16",
|
||||
"@fluentui/react-icons": "^2.0.258",
|
||||
"jotai": "^2.10.0",
|
||||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.26.2",
|
||||
"use-debounce": "^10.0.3",
|
||||
"zustand": "^5.0.0-rc.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.17.10",
|
||||
"@types/react": "^18.0.17",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@vitejs/plugin-react": "^2.0.1",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^3.0.7"
|
||||
}
|
||||
}
|
1
frontend/package.json.md5
Normal file
1
frontend/package.json.md5
Normal file
@ -0,0 +1 @@
|
||||
b20ef5a27687e07e09878451f9a2e1aa
|
2723
frontend/pnpm-lock.yaml
generated
Normal file
2723
frontend/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
50
frontend/src/api.tsx
Normal file
50
frontend/src/api.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import {Invoke} from "../wailsjs/go/controller/App";
|
||||
|
||||
export interface Resp<T> {
|
||||
status: number;
|
||||
msg: string;
|
||||
err: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
|
||||
// 类型保护函数
|
||||
function isResp<T>(obj: any): obj is Resp<T> {
|
||||
return (
|
||||
typeof obj === 'object' &&
|
||||
obj !== null &&
|
||||
typeof obj.status === 'number' &&
|
||||
(typeof obj.msg === 'string' || typeof obj.msg === null) &&
|
||||
(typeof obj.err === 'string' || typeof obj.err === null)
|
||||
);
|
||||
}
|
||||
|
||||
export async function Dial<T=any>(path: string, req: any = null): Promise<Resp<T>> {
|
||||
const bs = JSON.stringify(req)
|
||||
console.log(`[DEBUG] invoke req: path = ${path}, req =`, req)
|
||||
|
||||
let result: Resp<T>;
|
||||
let ok = false;
|
||||
|
||||
try {
|
||||
const res = await Invoke(path, bs)
|
||||
const parsed = JSON.parse(res);
|
||||
if (isResp<T>(parsed)) {
|
||||
result = parsed;
|
||||
ok = true
|
||||
} else {
|
||||
console.error('[ERROR] invoke: resp not valid =', res)
|
||||
result = {status: 500, msg: "发生错误(0)", err: res} as Resp<T>;
|
||||
}
|
||||
} catch (error) {
|
||||
result = {status: 500, msg: "发生错误(-1)", err: "backend method(Invoke) not found in window"} as Resp<T>;
|
||||
}
|
||||
|
||||
if (ok) {
|
||||
console.log(`[DEBUG] invoke res: path = ${path}, res =`, result)
|
||||
} else {
|
||||
console.error(`[ERROR] invoke res: path = ${path}, res =`, result)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
93
frontend/src/assets/fonts/OFL.txt
Normal file
93
frontend/src/assets/fonts/OFL.txt
Normal file
@ -0,0 +1,93 @@
|
||||
Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
BIN
frontend/src/assets/fonts/nunito-v16-latin-regular.woff2
Normal file
BIN
frontend/src/assets/fonts/nunito-v16-latin-regular.woff2
Normal file
Binary file not shown.
BIN
frontend/src/assets/images/logo-universal.png
Normal file
BIN
frontend/src/assets/images/logo-universal.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 136 KiB |
174
frontend/src/component/connection/list.tsx
Normal file
174
frontend/src/component/connection/list.tsx
Normal file
@ -0,0 +1,174 @@
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
makeStyles,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuList, MenuPopover, MenuProps,
|
||||
mergeClasses, PositioningImperativeRef,
|
||||
tokens,
|
||||
Tooltip
|
||||
} from "@fluentui/react-components"
|
||||
import {DatabaseLinkRegular, DismissRegular} from "@fluentui/react-icons";
|
||||
import React, {useState} from "react";
|
||||
import {Bucket, Connection} from "../../interfaces/connection";
|
||||
import {useToast} from "../../message";
|
||||
import {Dial} from "../../api";
|
||||
import {useStoreConnection} from "../../store/connection";
|
||||
import {useStoreBucket} from "../../store/bucket";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
list: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
height: "100%",
|
||||
},
|
||||
content: {
|
||||
height: "100%",
|
||||
width: "25rem",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
filter: {
|
||||
height: "4rem",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
},
|
||||
filter_input: {
|
||||
width: "100%",
|
||||
marginLeft: "0.5rem",
|
||||
marginRight: "0.5rem",
|
||||
},
|
||||
items: {
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
},
|
||||
items_one: {
|
||||
marginLeft: "0.5rem",
|
||||
marginRight: "0.5rem",
|
||||
"&:hover": {
|
||||
color: tokens.colorNeutralForeground2BrandPressed,
|
||||
},
|
||||
"&.active": {
|
||||
color: tokens.colorNeutralForeground2BrandPressed,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
"& > span": {
|
||||
display: "flex",
|
||||
},
|
||||
},
|
||||
items_disconn: {
|
||||
marginLeft: "auto",
|
||||
},
|
||||
slider: {
|
||||
height: '100%', width: '1px',
|
||||
// todo: resize
|
||||
// cursor: 'ew-resize',
|
||||
'& > div': {
|
||||
height: '100%', width: '1px',
|
||||
backgroundColor: 'lightgray',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export function ConnectionList() {
|
||||
const styles = useStyles()
|
||||
const {dispatchMessage} = useToast();
|
||||
const {conn_list, conn_update} = useStoreConnection();
|
||||
const [conn_filter, set_conn_filter] = useState<string>('');
|
||||
const {bucket_get, bucket_set} = useStoreBucket()
|
||||
|
||||
async function handleSelect(item: Connection) {
|
||||
conn_list.map((one: Connection) => {
|
||||
if (item.id === one.id && one.active) {
|
||||
conn_update(one)
|
||||
bucket_get(one, false)
|
||||
bucket_set(null)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function handleConnect(item: Connection) {
|
||||
let res = await Dial('/api/connection/connect', {id: item.id});
|
||||
if (res.status !== 200) {
|
||||
dispatchMessage(res.msg, "error")
|
||||
return
|
||||
}
|
||||
|
||||
conn_update({...item, active: true})
|
||||
bucket_get(item, true)
|
||||
bucket_set(null)
|
||||
}
|
||||
|
||||
async function handleDisconnect(item: Connection) {
|
||||
let res = await Dial('/api/connection/disconnect', {id: item.id})
|
||||
if (res.status !== 200) {
|
||||
dispatchMessage(res.msg, "error")
|
||||
return
|
||||
}
|
||||
conn_update({...item, active: false})
|
||||
}
|
||||
|
||||
async function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Connection) {
|
||||
e.preventDefault()
|
||||
console.log('[DEBUG] right click connection =', item, 'event =', e)
|
||||
console.log(`[DEBUG] click position: [${e.pageX}, ${e.pageY}]`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.list}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.filter}>
|
||||
<Input
|
||||
value={conn_filter}
|
||||
className={styles.filter_input}
|
||||
contentAfter={
|
||||
<Button appearance={'transparent'} onClick={async () => {
|
||||
set_conn_filter('')
|
||||
}} size="small" icon={<DismissRegular/>}/>
|
||||
}
|
||||
placeholder="搜索连接"
|
||||
onChange={(e) => set_conn_filter(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.items}>
|
||||
<MenuList>
|
||||
{conn_list.filter(item => item.name.includes(conn_filter)).map(item => {
|
||||
return <MenuItem
|
||||
className={item.active ? mergeClasses(styles.items_one, "active") : styles.items_one}
|
||||
onClick={async () => {
|
||||
await handleSelect(item)
|
||||
}}
|
||||
onDoubleClick={async () => {
|
||||
await handleConnect(item)
|
||||
}}
|
||||
onContextMenu={async (e) => {
|
||||
await handleRightClick(e, item)
|
||||
}}
|
||||
icon={<DatabaseLinkRegular/>}
|
||||
key={item.id}>
|
||||
{item.name}
|
||||
<Tooltip
|
||||
content="断开连接"
|
||||
relationship="label">
|
||||
<Button
|
||||
appearance={'transparent'}
|
||||
size="small"
|
||||
icon={<DismissRegular/>}
|
||||
className={styles.items_disconn}
|
||||
onClick={async () => {
|
||||
await handleDisconnect(item)
|
||||
}}/>
|
||||
</Tooltip>
|
||||
</MenuItem>
|
||||
})}
|
||||
</MenuList>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.slider}>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
147
frontend/src/component/connection/new.tsx
Normal file
147
frontend/src/component/connection/new.tsx
Normal file
@ -0,0 +1,147 @@
|
||||
import {
|
||||
DialogTrigger,
|
||||
DialogSurface,
|
||||
DialogTitle,
|
||||
DialogBody,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
Button, Spinner, Field, Input, FieldProps, makeStyles, tokens,
|
||||
} from "@fluentui/react-components";
|
||||
import {useState} from "react";
|
||||
import {CheckmarkFilled, DismissRegular} from "@fluentui/react-icons";
|
||||
import {useToast} from "../../message";
|
||||
import {Dial} from "../../api";
|
||||
import {useStoreConnection} from "../../store/connection";
|
||||
|
||||
const useActionStyle = makeStyles({
|
||||
container: {
|
||||
backgroundColor: tokens.colorNeutralBackground1,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
gridColumnStart: 0,
|
||||
},
|
||||
test: {}
|
||||
});
|
||||
|
||||
export interface ConnectionCreateProps {
|
||||
openFn: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function ConnectionCreate(props: ConnectionCreateProps) {
|
||||
const actionStyle = useActionStyle();
|
||||
const {dispatchMessage} = useToast();
|
||||
const [testLoading, setTestLoading] = useState<"initial" | "loading" | "success" | "error">("initial");
|
||||
const {conn_get} = useStoreConnection();
|
||||
const buttonIcon =
|
||||
testLoading === "loading" ? (
|
||||
<Spinner size="tiny"/>
|
||||
) : testLoading === "success" ? (
|
||||
<CheckmarkFilled/>
|
||||
) : testLoading === "error" ? (
|
||||
<DismissRegular/>
|
||||
) : null;
|
||||
const [value, setValue] = useState<{ name: string, endpoint: string, access: string, key: string }>({
|
||||
name: '',
|
||||
endpoint: '',
|
||||
access: '',
|
||||
key: ''
|
||||
})
|
||||
|
||||
async function test() {
|
||||
setTestLoading("loading")
|
||||
let res = await Dial<string>("/api/connection/test", value)
|
||||
const status = res.status === 200 ? "success" : "error"
|
||||
setTestLoading(status);
|
||||
dispatchMessage(res.msg, status)
|
||||
}
|
||||
|
||||
async function create() {
|
||||
// self
|
||||
// qUvfW8xpOTc23O96
|
||||
// eTcuc8BebHPVpZZwIaNmzfwxRxPYGfTj
|
||||
|
||||
// 48-dev
|
||||
// OSIsqPrl0TkAUj3R
|
||||
// FYF4BBzL2j2ObbVYH0FrvOZqJf1EACRy
|
||||
let res = await Dial("/api/connection/create", value)
|
||||
dispatchMessage(res.msg, res.status === 200 ? "success" : "error");
|
||||
if (res.status === 200) {
|
||||
dispatchMessage("新建连接成功", "success");
|
||||
conn_get()
|
||||
props.openFn(false)
|
||||
}
|
||||
}
|
||||
|
||||
return <>
|
||||
<DialogSurface>
|
||||
<DialogBody>
|
||||
<DialogTitle>新建S3连接</DialogTitle>
|
||||
<DialogContent>
|
||||
<div className='connection-container'>
|
||||
<div className='connection-form'>
|
||||
<div className='connection-form-field'>
|
||||
<Field
|
||||
label="name"
|
||||
validationState="success"
|
||||
validationMessage="This is a success message."
|
||||
>
|
||||
<Input placeholder='名称 (example: 测试S3-minio)' value={value.name}
|
||||
onChange={(e) => {
|
||||
setValue({...value, name: e.target.value});
|
||||
}}/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className='connection-form-field'>
|
||||
<Field
|
||||
label="endpoint"
|
||||
validationState="success"
|
||||
validationMessage="This is a success message."
|
||||
>
|
||||
<Input placeholder='地址 (example: https://ip_or_server-name:port)'
|
||||
value={value.endpoint}
|
||||
onChange={(e) => {
|
||||
setValue({...value, endpoint: e.target.value});
|
||||
}}/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className='connection-form-field'>
|
||||
<Field
|
||||
label="secret access"
|
||||
validationState="success"
|
||||
validationMessage="This is a success message."
|
||||
>
|
||||
<Input placeholder='' value={value.access} onChange={(e) => {
|
||||
setValue({...value, access: e.target.value});
|
||||
}}/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className='connection-form-field'>
|
||||
<Field
|
||||
label="secret key"
|
||||
validationState="success"
|
||||
validationMessage="This is a success message."
|
||||
>
|
||||
<Input placeholder='' value={value.key} onChange={(e) => {
|
||||
setValue({...value, key: e.target.value});
|
||||
}}/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<DialogActions className={actionStyle.container}>
|
||||
<Button className={actionStyle.test} appearance='transparent' icon={buttonIcon}
|
||||
onClick={async () => await test()}>测试连接</Button>
|
||||
<DialogTrigger disableButtonEnhancement>
|
||||
<Button appearance="secondary">取消</Button>
|
||||
</DialogTrigger>
|
||||
<Button onClick={async () => {
|
||||
await create()
|
||||
}} appearance="primary">新建</Button>
|
||||
</DialogActions>
|
||||
</DialogBody>
|
||||
</DialogSurface>
|
||||
</>
|
||||
}
|
32
frontend/src/component/file/content.tsx
Normal file
32
frontend/src/component/file/content.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import {Path} from "./path";
|
||||
import {ListBucketComponent} from "./list_bucket";
|
||||
import {makeStyles} from "@fluentui/react-components";
|
||||
import {useStoreBucket} from "../../store/bucket";
|
||||
import {useStoreFile} from "../../store/file";
|
||||
import {ListFileComponent} from "./list_file";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
content: {
|
||||
flex: '1',
|
||||
display: "flex",
|
||||
flexDirection: 'column',
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
},
|
||||
})
|
||||
|
||||
export function Content() {
|
||||
|
||||
const styles = useStyles()
|
||||
const {bucket_active, bucket_list} = useStoreBucket()
|
||||
const {file_list} = useStoreFile()
|
||||
|
||||
return <div className={styles.content}>
|
||||
<Path/>
|
||||
{
|
||||
bucket_active ?
|
||||
<ListFileComponent/> :
|
||||
<ListBucketComponent/>
|
||||
}
|
||||
</div>
|
||||
}
|
76
frontend/src/component/file/list_bucket.tsx
Normal file
76
frontend/src/component/file/list_bucket.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import {makeStyles, MenuItem, MenuList, Text, tokens} from "@fluentui/react-components";
|
||||
import {ArchiveRegular, DocumentBulletListRegular} from "@fluentui/react-icons";
|
||||
import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
|
||||
import React from "react";
|
||||
import {useStoreBucket} from "../../store/bucket";
|
||||
import {Bucket} from "../../interfaces/connection";
|
||||
import {useStoreFile} from "../../store/file";
|
||||
import {useStoreConnection} from "../../store/connection";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
container: {
|
||||
marginTop: '0.5rem',
|
||||
maxWidth: 'calc(100vw - 25rem - 1px)',
|
||||
},
|
||||
row: {
|
||||
height: '32px',
|
||||
display: 'flex',
|
||||
marginLeft: '0.5rem',
|
||||
marginRight: '0.5rem',
|
||||
},
|
||||
item: {
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
"&:hover": {
|
||||
color: tokens.colorNeutralForeground2BrandPressed,
|
||||
}
|
||||
},
|
||||
text: {
|
||||
overflow: 'hidden',
|
||||
width: 'calc(100vw - 32rem)',
|
||||
display: "block",
|
||||
}
|
||||
})
|
||||
|
||||
export function ListBucketComponent() {
|
||||
|
||||
const styles = useStyles();
|
||||
const {conn_active} = useStoreConnection()
|
||||
const {bucket_set, bucket_list} = useStoreBucket()
|
||||
const {files_get} = useStoreFile()
|
||||
|
||||
async function handleClick(item: Bucket) {
|
||||
bucket_set(item)
|
||||
files_get(conn_active!, item, "")
|
||||
}
|
||||
|
||||
function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: Bucket) {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
return <MenuList className={styles.container}>
|
||||
<VirtualizerScrollView
|
||||
numItems={bucket_list.length}
|
||||
itemSize={32}
|
||||
container={{role: 'list', style: {maxHeight: 'calc(100vh - 9rem)'}}}
|
||||
>
|
||||
{(idx) => {
|
||||
return <div
|
||||
className={styles.row} key={idx}
|
||||
onClick={async () => {
|
||||
await handleClick(bucket_list[idx])
|
||||
}}
|
||||
onContextMenu={async (e) => {
|
||||
handleRightClick(e, bucket_list[idx])
|
||||
}}>
|
||||
<MenuItem className={styles.item}
|
||||
icon={<ArchiveRegular/>}>
|
||||
<Text truncate wrap={false} className={styles.text}>
|
||||
{bucket_list[idx].name}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
</div>
|
||||
}}
|
||||
</VirtualizerScrollView>
|
||||
</MenuList>
|
||||
}
|
105
frontend/src/component/file/list_file.tsx
Normal file
105
frontend/src/component/file/list_file.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import {makeStyles, MenuItem, MenuList, Text, tokens} from "@fluentui/react-components";
|
||||
import {ArchiveRegular, DocumentBulletListRegular, DocumentDismissRegular, FolderRegular} from "@fluentui/react-icons";
|
||||
import {VirtualizerScrollView} from "@fluentui/react-components/unstable";
|
||||
import React, {useEffect} from "react";
|
||||
import {useStoreBucket} from "../../store/bucket";
|
||||
import {Bucket, S3File} from "../../interfaces/connection";
|
||||
import {useStoreFile} from "../../store/file";
|
||||
import {useStoreConnection} from "../../store/connection";
|
||||
import {TrimSuffix} from "../../hook/strings";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
container: {
|
||||
marginTop: '0.5rem',
|
||||
maxWidth: 'calc(100vw - 25rem - 1px)',
|
||||
width: 'calc(100vw - 25rem - 1px)',
|
||||
height: 'calc(100vh - 9rem)',
|
||||
},
|
||||
row: {
|
||||
height: '32px',
|
||||
display: 'flex',
|
||||
marginLeft: '0.5rem',
|
||||
marginRight: '0.5rem',
|
||||
},
|
||||
item: {
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
"&:hover": {
|
||||
color: tokens.colorNeutralForeground2BrandPressed,
|
||||
}
|
||||
},
|
||||
text: {
|
||||
overflow: 'hidden',
|
||||
width: 'calc(100vw - 32rem)',
|
||||
display: "block",
|
||||
},
|
||||
no_data: {
|
||||
flex: "1",
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: '8rem',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
})
|
||||
|
||||
export function ListFileComponent() {
|
||||
|
||||
const styles = useStyles();
|
||||
const {conn_active} = useStoreConnection();
|
||||
const {bucket_active} = useStoreBucket()
|
||||
const {files_get, files_list} = useStoreFile()
|
||||
|
||||
const filename = (key: string) => {
|
||||
let strs = TrimSuffix(key, "/").split("/")
|
||||
return strs[strs.length - 1]
|
||||
}
|
||||
|
||||
async function handleClick(item: S3File) {
|
||||
if (item.type === 1) {
|
||||
files_get(conn_active!, bucket_active!, item.key)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
function handleRightClick(e: React.MouseEvent<HTMLDivElement>, item: S3File) {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
return <MenuList className={styles.container}>
|
||||
{files_list.length ?
|
||||
<VirtualizerScrollView
|
||||
numItems={files_list.length}
|
||||
itemSize={32}
|
||||
container={{role: 'list', style: {maxHeight: 'calc(100vh - 9rem)'}}}
|
||||
>
|
||||
{(idx) => {
|
||||
return <div
|
||||
className={styles.row} key={idx}
|
||||
onClick={async () => {
|
||||
await handleClick(files_list[idx])
|
||||
}}
|
||||
onContextMenu={async (e) => {
|
||||
handleRightClick(e, files_list[idx])
|
||||
}}>
|
||||
<MenuItem className={styles.item}
|
||||
icon={files_list[idx].type ? <FolderRegular/> : <DocumentBulletListRegular/>}>
|
||||
<Text truncate wrap={false} className={styles.text}>
|
||||
{filename(files_list[idx].key)}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
</div>
|
||||
}}
|
||||
</VirtualizerScrollView> : <div className={styles.no_data}>
|
||||
<div>
|
||||
<DocumentDismissRegular />
|
||||
</div>
|
||||
<Text size={900}>
|
||||
没有文件
|
||||
</Text>
|
||||
</div>
|
||||
}
|
||||
</MenuList>
|
||||
}
|
114
frontend/src/component/file/path.tsx
Normal file
114
frontend/src/component/file/path.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
import {Button, Input, makeStyles, Text, tokens, Tooltip} from "@fluentui/react-components";
|
||||
import {useStoreBucket} from "../../store/bucket";
|
||||
import {ArchiveRegular, ArrowCurveUpLeftFilled} from "@fluentui/react-icons";
|
||||
import {useStoreFile} from "../../store/file";
|
||||
import React from "react";
|
||||
import {debounce} from 'lodash'
|
||||
import {useStoreConnection} from "../../store/connection";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
container: {
|
||||
height: '4rem',
|
||||
width: '100%',
|
||||
borderBottom: '1px solid lightgray',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
show: {
|
||||
marginLeft: '0.5rem',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
show_line: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
show_text: {
|
||||
backgroundColor: tokens.colorNeutralBackground1Hover,
|
||||
padding: '0.5rem 0.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
cursor: 'pointer',
|
||||
display: 'block',
|
||||
alignItems: 'center',
|
||||
marginLeft: '0.5rem',
|
||||
overflow: 'hidden',
|
||||
maxWidth: '8rem',
|
||||
verticalAlign: 'middle',
|
||||
'&:hover': {
|
||||
textDecoration: 'none',
|
||||
backgroundColor: tokens.colorNeutralBackground1Pressed,
|
||||
},
|
||||
'& > div': {
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
},
|
||||
op_up: {},
|
||||
filter_prefix: {
|
||||
margin: '0.5rem',
|
||||
},
|
||||
})
|
||||
|
||||
export function Path() {
|
||||
const styles = useStyles()
|
||||
const {conn_active} = useStoreConnection()
|
||||
const {bucket_active} = useStoreBucket()
|
||||
const {prefix, files_get} = useStoreFile()
|
||||
|
||||
async function handleClickUp() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
const handleFilterChange = debounce((e) => {
|
||||
files_get(conn_active!, bucket_active!, prefix, e.target.value)
|
||||
}, 500)
|
||||
|
||||
return <div className={styles.container}>
|
||||
{bucket_active && (
|
||||
<>
|
||||
<div className={styles.show}>
|
||||
<Tooltip content="返回上一级" relationship="label">
|
||||
<Button className={styles.op_up}
|
||||
onClick={async () => {
|
||||
await handleClickUp()
|
||||
}}
|
||||
size="small" icon={<ArrowCurveUpLeftFilled/>}/>
|
||||
</Tooltip>
|
||||
<Tooltip content={bucket_active.name} relationship={'description'}>
|
||||
<Text className={styles.show_text}
|
||||
truncate
|
||||
wrap={false}
|
||||
align={'justify'}
|
||||
style={{maxWidth: '16rem'}}
|
||||
>
|
||||
<div>
|
||||
<ArchiveRegular style={{margin: '0rem 0.5rem 0 0'}}/>
|
||||
{bucket_active.name}
|
||||
</div>
|
||||
</Text>
|
||||
</Tooltip>
|
||||
{prefix && (
|
||||
prefix.split("/").filter(item => item).map((item, idx) => {
|
||||
return <div className={styles.show_line} key={idx}>
|
||||
<Text style={{marginLeft: '0.5rem'}}>/</Text>
|
||||
<Text className={styles.show_text} truncate wrap={false}>{item}</Text>
|
||||
</div>
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.filter_prefix}>
|
||||
<Input
|
||||
onChange={(e) => {
|
||||
handleFilterChange(e)
|
||||
}}
|
||||
placeholder={"输入前缀过滤"}
|
||||
// contentBefore={<Text>/</Text>}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
}
|
34
frontend/src/component/home/body.tsx
Normal file
34
frontend/src/component/home/body.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import {Button, Input, makeStyles, MenuItem, MenuList, mergeClasses, tokens, Tooltip} from "@fluentui/react-components";
|
||||
import {DismissRegular} from "@fluentui/react-icons";
|
||||
import {useEffect, useState} from "react";
|
||||
import {Connection} from "../../interfaces/connection";
|
||||
import {useStoreBucket} from "../../store/bucket";
|
||||
import {useStoreConnection} from "../../store/connection";
|
||||
import {Dial} from "../../api";
|
||||
import {useToast} from "../../message";
|
||||
import {ConnectionList} from "../connection/list";
|
||||
import {Content} from "../file/content";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
body: {
|
||||
display: "flex",
|
||||
flexDirection: 'row',
|
||||
width: "100%",
|
||||
flex: '1',
|
||||
},
|
||||
})
|
||||
|
||||
export function Body() {
|
||||
const styles = useStyles();
|
||||
const {conn_get} = useStoreConnection();
|
||||
|
||||
useEffect(() => {
|
||||
conn_get()
|
||||
}, []);
|
||||
|
||||
|
||||
return <div className={styles.body}>
|
||||
<ConnectionList/>
|
||||
<Content />
|
||||
</div>
|
||||
}
|
3
frontend/src/component/home/footer.tsx
Normal file
3
frontend/src/component/home/footer.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export function Footer() {
|
||||
return <div></div>
|
||||
}
|
37
frontend/src/component/home/header.tsx
Normal file
37
frontend/src/component/home/header.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import {Button, Dialog, DialogTrigger, makeStyles} from "@fluentui/react-components";
|
||||
import {ConnectionCreate} from "../connection/new";
|
||||
import {CloudAddFilled} from "@fluentui/react-icons";
|
||||
import {useState} from "react";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
header: {
|
||||
height: "5rem",
|
||||
width: "100%",
|
||||
display: 'flex',
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid lightgray",
|
||||
},
|
||||
button_new_connection: {
|
||||
margin: '0.5rem',
|
||||
},
|
||||
})
|
||||
|
||||
export function Header() {
|
||||
const styles = useStyles();
|
||||
const [openCreate, setOpenCreate] = useState(false);
|
||||
|
||||
return <div className={styles.header}>
|
||||
<div className={styles.button_new_connection}>
|
||||
<Dialog
|
||||
open={openCreate}
|
||||
onOpenChange={(event, data) => setOpenCreate(data.open)}>
|
||||
<DialogTrigger disableButtonEnhancement>
|
||||
<Button appearance="primary" icon={<CloudAddFilled/>}>
|
||||
新建连接
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<ConnectionCreate openFn={setOpenCreate}/>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
}
|
26
frontend/src/component/home/home.tsx
Normal file
26
frontend/src/component/home/home.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import {Header} from "./header";
|
||||
import {Body} from "./body";
|
||||
import {makeStyles} from "@fluentui/react-components";
|
||||
import {Footer} from "./footer";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
container: {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
})
|
||||
|
||||
export function Home() {
|
||||
|
||||
const styles = useStyles()
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Header />
|
||||
<Body />
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
}
|
6
frontend/src/hook/strings.ts
Normal file
6
frontend/src/hook/strings.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export function TrimSuffix(str: string, suffix: string) {
|
||||
if (str.lastIndexOf(suffix) === str.length - suffix.length) {
|
||||
return str.substring(0, str.length - suffix.length);
|
||||
}
|
||||
return str;
|
||||
}
|
22
frontend/src/interfaces/connection.ts
Normal file
22
frontend/src/interfaces/connection.ts
Normal file
@ -0,0 +1,22 @@
|
||||
export interface Connection {
|
||||
id: number;
|
||||
created_at: number;
|
||||
updated_at: number;
|
||||
deleted_at: number;
|
||||
name: string;
|
||||
endpoint: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export interface Bucket {
|
||||
name: string;
|
||||
created_at: number;
|
||||
}
|
||||
|
||||
export interface S3File {
|
||||
name: string;
|
||||
key: string;
|
||||
last_modified: number;
|
||||
size: number;
|
||||
type: 0 | 1;
|
||||
}
|
23
frontend/src/main.tsx
Normal file
23
frontend/src/main.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import {createRoot} from 'react-dom/client'
|
||||
import './style.css'
|
||||
import {FluentProvider, webLightTheme} from '@fluentui/react-components';
|
||||
import {createBrowserRouter, RouterProvider} from "react-router-dom";
|
||||
import {Home} from "./component/home/home";
|
||||
import {ToastProvider} from "./message";
|
||||
|
||||
const container = document.getElementById('root')
|
||||
|
||||
const root = createRoot(container!)
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{path: '/', element: <Home/>},
|
||||
])
|
||||
|
||||
root.render(
|
||||
<FluentProvider theme={webLightTheme} style={{height: '100%'}}>
|
||||
<ToastProvider>
|
||||
<RouterProvider router={router}/>
|
||||
</ToastProvider>
|
||||
</FluentProvider>,
|
||||
);
|
37
frontend/src/message.tsx
Normal file
37
frontend/src/message.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import {createContext, FC, ReactNode, useContext} from "react";
|
||||
import {Toast, Toaster, ToastTitle, useId, useToastController} from "@fluentui/react-components";
|
||||
|
||||
|
||||
interface ToastContextType {
|
||||
dispatchMessage: (content: string, type: "success" | "error" | "warning" | "info") => void;
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextType | undefined>(undefined);
|
||||
|
||||
export const ToastProvider: FC<{ children: ReactNode }> = ({children}) => {
|
||||
|
||||
const toasterId = useId("toaster");
|
||||
const {dispatchToast} = useToastController(toasterId);
|
||||
|
||||
const dispatchMessage = (content: string, type: "success" | "error" | "warning" | "info" = "info") => {
|
||||
dispatchToast(
|
||||
<Toast>
|
||||
<ToastTitle>{content}</ToastTitle>
|
||||
</Toast>,
|
||||
{position: "top-end", intent: type}
|
||||
);
|
||||
};
|
||||
|
||||
return <ToastContext.Provider value={{dispatchMessage}}>
|
||||
{children}
|
||||
<Toaster toasterId={toasterId}/>
|
||||
</ToastContext.Provider>
|
||||
}
|
||||
|
||||
export const useToast = () => {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) {
|
||||
throw new Error("useToast must be used within a ToastProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
38
frontend/src/store/bucket.tsx
Normal file
38
frontend/src/store/bucket.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import {create} from 'zustand'
|
||||
import {Bucket, Connection} from "../interfaces/connection";
|
||||
import {Dial, Resp} from "../api";
|
||||
|
||||
interface StoreBucket {
|
||||
bucket_active: Bucket | null;
|
||||
bucket_set: (Bucket: Bucket | null) => void;
|
||||
bucket_list: Bucket[];
|
||||
bucket_get: (conn: Connection, refresh: boolean) => void;
|
||||
}
|
||||
|
||||
let bucket_map: { [id: number]: Bucket[] };
|
||||
|
||||
export const useStoreBucket = create<StoreBucket>()((set) => ({
|
||||
bucket_active: null,
|
||||
bucket_set: async (bucket: Bucket | null) => {
|
||||
set({bucket_active: bucket});
|
||||
},
|
||||
bucket_list: [],
|
||||
bucket_get: async (conn: Connection, refresh: boolean) => {
|
||||
let res: Resp<{ list: Bucket[]; }>;
|
||||
if (refresh) {
|
||||
res = await Dial<{ list: Bucket[] }>('/api/connection/buckets', {id: conn.id});
|
||||
if (res.status !== 200) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
set((state) => {
|
||||
if (refresh) {
|
||||
bucket_map = {...bucket_map, [conn.id]: res.data.list}
|
||||
return {bucket_list: res.data.list};
|
||||
}
|
||||
|
||||
return {bucket_list: bucket_map[conn.id]};
|
||||
})
|
||||
}
|
||||
}))
|
38
frontend/src/store/connection.tsx
Normal file
38
frontend/src/store/connection.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import {create} from 'zustand'
|
||||
import {Connection} from "../interfaces/connection";
|
||||
import {Dial} from "../api";
|
||||
|
||||
interface StoreConnection {
|
||||
conn_active: Connection | null;
|
||||
conn_list: Connection[];
|
||||
conn_get: () => void;
|
||||
conn_update: (connection: Connection) => void;
|
||||
}
|
||||
|
||||
export const useStoreConnection = create<StoreConnection>()((set) => ({
|
||||
conn_active: null,
|
||||
conn_list: [],
|
||||
conn_get: async () => {
|
||||
const res = await Dial<{ list: Connection[] }>('/api/connection/list');
|
||||
if (res.status !== 200) {
|
||||
return
|
||||
}
|
||||
|
||||
set({conn_list: res.data.list})
|
||||
},
|
||||
|
||||
conn_update: async (connection: Connection) => {
|
||||
set((state) => {
|
||||
return {
|
||||
conn_active: connection.active? connection: null,
|
||||
conn_list: state.conn_list.map(item => {
|
||||
if (item.id === connection.id) {
|
||||
return connection
|
||||
}
|
||||
|
||||
return item
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}))
|
29
frontend/src/store/file.tsx
Normal file
29
frontend/src/store/file.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import {create} from 'zustand'
|
||||
import {Bucket, Connection, S3File} from "../interfaces/connection";
|
||||
import {Dial} from "../api";
|
||||
|
||||
interface StoreFile {
|
||||
prefix: string;
|
||||
files_list: S3File[];
|
||||
files_get: (conn: Connection, bucket: Bucket, prefix?: string, filter?: string) => void;
|
||||
}
|
||||
|
||||
export const useStoreFile = create<StoreFile>()((set) => ({
|
||||
prefix: "",
|
||||
files_list: [],
|
||||
files_get: async (conn: Connection, bucket: Bucket, prefix = '', filter = '') => {
|
||||
const res = await Dial<{ list: S3File[] }>('/api/bucket/files', {
|
||||
conn_id: conn.id,
|
||||
bucket: bucket.name,
|
||||
prefix: prefix + filter,
|
||||
})
|
||||
|
||||
if (res.status !== 200) {
|
||||
return
|
||||
}
|
||||
|
||||
set((state) => {
|
||||
return {files_list: res.data.list, prefix: prefix}
|
||||
})
|
||||
}
|
||||
}))
|
21
frontend/src/style.css
Normal file
21
frontend/src/style.css
Normal file
@ -0,0 +1,21 @@
|
||||
:root {
|
||||
font-size: 10px;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local(""),
|
||||
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
|
||||
}
|
||||
|
1
frontend/src/vite-env.d.ts
vendored
Normal file
1
frontend/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
31
frontend/tsconfig.json
Normal file
31
frontend/tsconfig.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"DOM",
|
||||
"DOM.Iterable",
|
||||
"ESNext"
|
||||
],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
11
frontend/tsconfig.node.json
Normal file
11
frontend/tsconfig.node.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts"
|
||||
]
|
||||
}
|
7
frontend/vite.config.ts
Normal file
7
frontend/vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import {defineConfig} from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()]
|
||||
})
|
7
frontend/wailsjs/go/controller/App.d.ts
vendored
Executable file
7
frontend/wailsjs/go/controller/App.d.ts
vendored
Executable file
@ -0,0 +1,7 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
import {context} from '../models';
|
||||
|
||||
export function Init(arg1:context.Context):Promise<void>;
|
||||
|
||||
export function Invoke(arg1:string,arg2:string):Promise<string>;
|
11
frontend/wailsjs/go/controller/App.js
Executable file
11
frontend/wailsjs/go/controller/App.js
Executable file
@ -0,0 +1,11 @@
|
||||
// @ts-check
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function Init(arg1) {
|
||||
return window['go']['controller']['App']['Init'](arg1);
|
||||
}
|
||||
|
||||
export function Invoke(arg1, arg2) {
|
||||
return window['go']['controller']['App']['Invoke'](arg1, arg2);
|
||||
}
|
24
frontend/wailsjs/runtime/package.json
Normal file
24
frontend/wailsjs/runtime/package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "@wailsapp/runtime",
|
||||
"version": "2.0.0",
|
||||
"description": "Wails Javascript runtime library",
|
||||
"main": "runtime.js",
|
||||
"types": "runtime.d.ts",
|
||||
"scripts": {
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/wailsapp/wails.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Wails",
|
||||
"Javascript",
|
||||
"Go"
|
||||
],
|
||||
"author": "Lea Anthony <lea.anthony@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/wailsapp/wails/issues"
|
||||
},
|
||||
"homepage": "https://github.com/wailsapp/wails#readme"
|
||||
}
|
249
frontend/wailsjs/runtime/runtime.d.ts
vendored
Normal file
249
frontend/wailsjs/runtime/runtime.d.ts
vendored
Normal file
@ -0,0 +1,249 @@
|
||||
/*
|
||||
_ __ _ __
|
||||
| | / /___ _(_) /____
|
||||
| | /| / / __ `/ / / ___/
|
||||
| |/ |/ / /_/ / / (__ )
|
||||
|__/|__/\__,_/_/_/____/
|
||||
The electron alternative for Go
|
||||
(c) Lea Anthony 2019-present
|
||||
*/
|
||||
|
||||
export interface Position {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface Size {
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
export interface Screen {
|
||||
isCurrent: boolean;
|
||||
isPrimary: boolean;
|
||||
width : number
|
||||
height : number
|
||||
}
|
||||
|
||||
// Environment information such as platform, buildtype, ...
|
||||
export interface EnvironmentInfo {
|
||||
buildType: string;
|
||||
platform: string;
|
||||
arch: string;
|
||||
}
|
||||
|
||||
// [EventsEmit](https://wails.io/docs/reference/runtime/events#eventsemit)
|
||||
// emits the given event. Optional data may be passed with the event.
|
||||
// This will trigger any event listeners.
|
||||
export function EventsEmit(eventName: string, ...data: any): void;
|
||||
|
||||
// [EventsOn](https://wails.io/docs/reference/runtime/events#eventson) sets up a listener for the given event name.
|
||||
export function EventsOn(eventName: string, callback: (...data: any) => void): () => void;
|
||||
|
||||
// [EventsOnMultiple](https://wails.io/docs/reference/runtime/events#eventsonmultiple)
|
||||
// sets up a listener for the given event name, but will only trigger a given number times.
|
||||
export function EventsOnMultiple(eventName: string, callback: (...data: any) => void, maxCallbacks: number): () => void;
|
||||
|
||||
// [EventsOnce](https://wails.io/docs/reference/runtime/events#eventsonce)
|
||||
// sets up a listener for the given event name, but will only trigger once.
|
||||
export function EventsOnce(eventName: string, callback: (...data: any) => void): () => void;
|
||||
|
||||
// [EventsOff](https://wails.io/docs/reference/runtime/events#eventsoff)
|
||||
// unregisters the listener for the given event name.
|
||||
export function EventsOff(eventName: string, ...additionalEventNames: string[]): void;
|
||||
|
||||
// [EventsOffAll](https://wails.io/docs/reference/runtime/events#eventsoffall)
|
||||
// unregisters all listeners.
|
||||
export function EventsOffAll(): void;
|
||||
|
||||
// [LogPrint](https://wails.io/docs/reference/runtime/log#logprint)
|
||||
// logs the given message as a raw message
|
||||
export function LogPrint(message: string): void;
|
||||
|
||||
// [LogTrace](https://wails.io/docs/reference/runtime/log#logtrace)
|
||||
// logs the given message at the `trace` log level.
|
||||
export function LogTrace(message: string): void;
|
||||
|
||||
// [LogDebug](https://wails.io/docs/reference/runtime/log#logdebug)
|
||||
// logs the given message at the `debug` log level.
|
||||
export function LogDebug(message: string): void;
|
||||
|
||||
// [LogError](https://wails.io/docs/reference/runtime/log#logerror)
|
||||
// logs the given message at the `error` log level.
|
||||
export function LogError(message: string): void;
|
||||
|
||||
// [LogFatal](https://wails.io/docs/reference/runtime/log#logfatal)
|
||||
// logs the given message at the `fatal` log level.
|
||||
// The application will quit after calling this method.
|
||||
export function LogFatal(message: string): void;
|
||||
|
||||
// [LogInfo](https://wails.io/docs/reference/runtime/log#loginfo)
|
||||
// logs the given message at the `info` log level.
|
||||
export function LogInfo(message: string): void;
|
||||
|
||||
// [LogWarning](https://wails.io/docs/reference/runtime/log#logwarning)
|
||||
// logs the given message at the `warning` log level.
|
||||
export function LogWarning(message: string): void;
|
||||
|
||||
// [WindowReload](https://wails.io/docs/reference/runtime/window#windowreload)
|
||||
// Forces a reload by the main application as well as connected browsers.
|
||||
export function WindowReload(): void;
|
||||
|
||||
// [WindowReloadApp](https://wails.io/docs/reference/runtime/window#windowreloadapp)
|
||||
// Reloads the application frontend.
|
||||
export function WindowReloadApp(): void;
|
||||
|
||||
// [WindowSetAlwaysOnTop](https://wails.io/docs/reference/runtime/window#windowsetalwaysontop)
|
||||
// Sets the window AlwaysOnTop or not on top.
|
||||
export function WindowSetAlwaysOnTop(b: boolean): void;
|
||||
|
||||
// [WindowSetSystemDefaultTheme](https://wails.io/docs/next/reference/runtime/window#windowsetsystemdefaulttheme)
|
||||
// *Windows only*
|
||||
// Sets window theme to system default (dark/light).
|
||||
export function WindowSetSystemDefaultTheme(): void;
|
||||
|
||||
// [WindowSetLightTheme](https://wails.io/docs/next/reference/runtime/window#windowsetlighttheme)
|
||||
// *Windows only*
|
||||
// Sets window to light theme.
|
||||
export function WindowSetLightTheme(): void;
|
||||
|
||||
// [WindowSetDarkTheme](https://wails.io/docs/next/reference/runtime/window#windowsetdarktheme)
|
||||
// *Windows only*
|
||||
// Sets window to dark theme.
|
||||
export function WindowSetDarkTheme(): void;
|
||||
|
||||
// [WindowCenter](https://wails.io/docs/reference/runtime/window#windowcenter)
|
||||
// Centers the window on the monitor the window is currently on.
|
||||
export function WindowCenter(): void;
|
||||
|
||||
// [WindowSetTitle](https://wails.io/docs/reference/runtime/window#windowsettitle)
|
||||
// Sets the text in the window title bar.
|
||||
export function WindowSetTitle(title: string): void;
|
||||
|
||||
// [WindowFullscreen](https://wails.io/docs/reference/runtime/window#windowfullscreen)
|
||||
// Makes the window full screen.
|
||||
export function WindowFullscreen(): void;
|
||||
|
||||
// [WindowUnfullscreen](https://wails.io/docs/reference/runtime/window#windowunfullscreen)
|
||||
// Restores the previous window dimensions and position prior to full screen.
|
||||
export function WindowUnfullscreen(): void;
|
||||
|
||||
// [WindowIsFullscreen](https://wails.io/docs/reference/runtime/window#windowisfullscreen)
|
||||
// Returns the state of the window, i.e. whether the window is in full screen mode or not.
|
||||
export function WindowIsFullscreen(): Promise<boolean>;
|
||||
|
||||
// [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
|
||||
// Sets the width and height of the window.
|
||||
export function WindowSetSize(width: number, height: number): Promise<Size>;
|
||||
|
||||
// [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
|
||||
// Gets the width and height of the window.
|
||||
export function WindowGetSize(): Promise<Size>;
|
||||
|
||||
// [WindowSetMaxSize](https://wails.io/docs/reference/runtime/window#windowsetmaxsize)
|
||||
// Sets the maximum window size. Will resize the window if the window is currently larger than the given dimensions.
|
||||
// Setting a size of 0,0 will disable this constraint.
|
||||
export function WindowSetMaxSize(width: number, height: number): void;
|
||||
|
||||
// [WindowSetMinSize](https://wails.io/docs/reference/runtime/window#windowsetminsize)
|
||||
// Sets the minimum window size. Will resize the window if the window is currently smaller than the given dimensions.
|
||||
// Setting a size of 0,0 will disable this constraint.
|
||||
export function WindowSetMinSize(width: number, height: number): void;
|
||||
|
||||
// [WindowSetPosition](https://wails.io/docs/reference/runtime/window#windowsetposition)
|
||||
// Sets the window position relative to the monitor the window is currently on.
|
||||
export function WindowSetPosition(x: number, y: number): void;
|
||||
|
||||
// [WindowGetPosition](https://wails.io/docs/reference/runtime/window#windowgetposition)
|
||||
// Gets the window position relative to the monitor the window is currently on.
|
||||
export function WindowGetPosition(): Promise<Position>;
|
||||
|
||||
// [WindowHide](https://wails.io/docs/reference/runtime/window#windowhide)
|
||||
// Hides the window.
|
||||
export function WindowHide(): void;
|
||||
|
||||
// [WindowShow](https://wails.io/docs/reference/runtime/window#windowshow)
|
||||
// Shows the window, if it is currently hidden.
|
||||
export function WindowShow(): void;
|
||||
|
||||
// [WindowMaximise](https://wails.io/docs/reference/runtime/window#windowmaximise)
|
||||
// Maximises the window to fill the screen.
|
||||
export function WindowMaximise(): void;
|
||||
|
||||
// [WindowToggleMaximise](https://wails.io/docs/reference/runtime/window#windowtogglemaximise)
|
||||
// Toggles between Maximised and UnMaximised.
|
||||
export function WindowToggleMaximise(): void;
|
||||
|
||||
// [WindowUnmaximise](https://wails.io/docs/reference/runtime/window#windowunmaximise)
|
||||
// Restores the window to the dimensions and position prior to maximising.
|
||||
export function WindowUnmaximise(): void;
|
||||
|
||||
// [WindowIsMaximised](https://wails.io/docs/reference/runtime/window#windowismaximised)
|
||||
// Returns the state of the window, i.e. whether the window is maximised or not.
|
||||
export function WindowIsMaximised(): Promise<boolean>;
|
||||
|
||||
// [WindowMinimise](https://wails.io/docs/reference/runtime/window#windowminimise)
|
||||
// Minimises the window.
|
||||
export function WindowMinimise(): void;
|
||||
|
||||
// [WindowUnminimise](https://wails.io/docs/reference/runtime/window#windowunminimise)
|
||||
// Restores the window to the dimensions and position prior to minimising.
|
||||
export function WindowUnminimise(): void;
|
||||
|
||||
// [WindowIsMinimised](https://wails.io/docs/reference/runtime/window#windowisminimised)
|
||||
// Returns the state of the window, i.e. whether the window is minimised or not.
|
||||
export function WindowIsMinimised(): Promise<boolean>;
|
||||
|
||||
// [WindowIsNormal](https://wails.io/docs/reference/runtime/window#windowisnormal)
|
||||
// Returns the state of the window, i.e. whether the window is normal or not.
|
||||
export function WindowIsNormal(): Promise<boolean>;
|
||||
|
||||
// [WindowSetBackgroundColour](https://wails.io/docs/reference/runtime/window#windowsetbackgroundcolour)
|
||||
// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
|
||||
export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
|
||||
|
||||
// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
|
||||
// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
|
||||
export function ScreenGetAll(): Promise<Screen[]>;
|
||||
|
||||
// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
|
||||
// Opens the given URL in the system browser.
|
||||
export function BrowserOpenURL(url: string): void;
|
||||
|
||||
// [Environment](https://wails.io/docs/reference/runtime/intro#environment)
|
||||
// Returns information about the environment
|
||||
export function Environment(): Promise<EnvironmentInfo>;
|
||||
|
||||
// [Quit](https://wails.io/docs/reference/runtime/intro#quit)
|
||||
// Quits the application.
|
||||
export function Quit(): void;
|
||||
|
||||
// [Hide](https://wails.io/docs/reference/runtime/intro#hide)
|
||||
// Hides the application.
|
||||
export function Hide(): void;
|
||||
|
||||
// [Show](https://wails.io/docs/reference/runtime/intro#show)
|
||||
// Shows the application.
|
||||
export function Show(): void;
|
||||
|
||||
// [ClipboardGetText](https://wails.io/docs/reference/runtime/clipboard#clipboardgettext)
|
||||
// Returns the current text stored on clipboard
|
||||
export function ClipboardGetText(): Promise<string>;
|
||||
|
||||
// [ClipboardSetText](https://wails.io/docs/reference/runtime/clipboard#clipboardsettext)
|
||||
// Sets a text on the clipboard
|
||||
export function ClipboardSetText(text: string): Promise<boolean>;
|
||||
|
||||
// [OnFileDrop](https://wails.io/docs/reference/runtime/draganddrop#onfiledrop)
|
||||
// OnFileDrop listens to drag and drop events and calls the callback with the coordinates of the drop and an array of path strings.
|
||||
export function OnFileDrop(callback: (x: number, y: number ,paths: string[]) => void, useDropTarget: boolean) :void
|
||||
|
||||
// [OnFileDropOff](https://wails.io/docs/reference/runtime/draganddrop#dragandddropoff)
|
||||
// OnFileDropOff removes the drag and drop listeners and handlers.
|
||||
export function OnFileDropOff() :void
|
||||
|
||||
// Check if the file path resolver is available
|
||||
export function CanResolveFilePaths(): boolean;
|
||||
|
||||
// Resolves file paths for an array of files
|
||||
export function ResolveFilePaths(files: File[]): void
|
238
frontend/wailsjs/runtime/runtime.js
Normal file
238
frontend/wailsjs/runtime/runtime.js
Normal file
@ -0,0 +1,238 @@
|
||||
/*
|
||||
_ __ _ __
|
||||
| | / /___ _(_) /____
|
||||
| | /| / / __ `/ / / ___/
|
||||
| |/ |/ / /_/ / / (__ )
|
||||
|__/|__/\__,_/_/_/____/
|
||||
The electron alternative for Go
|
||||
(c) Lea Anthony 2019-present
|
||||
*/
|
||||
|
||||
export function LogPrint(message) {
|
||||
window.runtime.LogPrint(message);
|
||||
}
|
||||
|
||||
export function LogTrace(message) {
|
||||
window.runtime.LogTrace(message);
|
||||
}
|
||||
|
||||
export function LogDebug(message) {
|
||||
window.runtime.LogDebug(message);
|
||||
}
|
||||
|
||||
export function LogInfo(message) {
|
||||
window.runtime.LogInfo(message);
|
||||
}
|
||||
|
||||
export function LogWarning(message) {
|
||||
window.runtime.LogWarning(message);
|
||||
}
|
||||
|
||||
export function LogError(message) {
|
||||
window.runtime.LogError(message);
|
||||
}
|
||||
|
||||
export function LogFatal(message) {
|
||||
window.runtime.LogFatal(message);
|
||||
}
|
||||
|
||||
export function EventsOnMultiple(eventName, callback, maxCallbacks) {
|
||||
return window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
|
||||
}
|
||||
|
||||
export function EventsOn(eventName, callback) {
|
||||
return EventsOnMultiple(eventName, callback, -1);
|
||||
}
|
||||
|
||||
export function EventsOff(eventName, ...additionalEventNames) {
|
||||
return window.runtime.EventsOff(eventName, ...additionalEventNames);
|
||||
}
|
||||
|
||||
export function EventsOnce(eventName, callback) {
|
||||
return EventsOnMultiple(eventName, callback, 1);
|
||||
}
|
||||
|
||||
export function EventsEmit(eventName) {
|
||||
let args = [eventName].slice.call(arguments);
|
||||
return window.runtime.EventsEmit.apply(null, args);
|
||||
}
|
||||
|
||||
export function WindowReload() {
|
||||
window.runtime.WindowReload();
|
||||
}
|
||||
|
||||
export function WindowReloadApp() {
|
||||
window.runtime.WindowReloadApp();
|
||||
}
|
||||
|
||||
export function WindowSetAlwaysOnTop(b) {
|
||||
window.runtime.WindowSetAlwaysOnTop(b);
|
||||
}
|
||||
|
||||
export function WindowSetSystemDefaultTheme() {
|
||||
window.runtime.WindowSetSystemDefaultTheme();
|
||||
}
|
||||
|
||||
export function WindowSetLightTheme() {
|
||||
window.runtime.WindowSetLightTheme();
|
||||
}
|
||||
|
||||
export function WindowSetDarkTheme() {
|
||||
window.runtime.WindowSetDarkTheme();
|
||||
}
|
||||
|
||||
export function WindowCenter() {
|
||||
window.runtime.WindowCenter();
|
||||
}
|
||||
|
||||
export function WindowSetTitle(title) {
|
||||
window.runtime.WindowSetTitle(title);
|
||||
}
|
||||
|
||||
export function WindowFullscreen() {
|
||||
window.runtime.WindowFullscreen();
|
||||
}
|
||||
|
||||
export function WindowUnfullscreen() {
|
||||
window.runtime.WindowUnfullscreen();
|
||||
}
|
||||
|
||||
export function WindowIsFullscreen() {
|
||||
return window.runtime.WindowIsFullscreen();
|
||||
}
|
||||
|
||||
export function WindowGetSize() {
|
||||
return window.runtime.WindowGetSize();
|
||||
}
|
||||
|
||||
export function WindowSetSize(width, height) {
|
||||
window.runtime.WindowSetSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetMaxSize(width, height) {
|
||||
window.runtime.WindowSetMaxSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetMinSize(width, height) {
|
||||
window.runtime.WindowSetMinSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetPosition(x, y) {
|
||||
window.runtime.WindowSetPosition(x, y);
|
||||
}
|
||||
|
||||
export function WindowGetPosition() {
|
||||
return window.runtime.WindowGetPosition();
|
||||
}
|
||||
|
||||
export function WindowHide() {
|
||||
window.runtime.WindowHide();
|
||||
}
|
||||
|
||||
export function WindowShow() {
|
||||
window.runtime.WindowShow();
|
||||
}
|
||||
|
||||
export function WindowMaximise() {
|
||||
window.runtime.WindowMaximise();
|
||||
}
|
||||
|
||||
export function WindowToggleMaximise() {
|
||||
window.runtime.WindowToggleMaximise();
|
||||
}
|
||||
|
||||
export function WindowUnmaximise() {
|
||||
window.runtime.WindowUnmaximise();
|
||||
}
|
||||
|
||||
export function WindowIsMaximised() {
|
||||
return window.runtime.WindowIsMaximised();
|
||||
}
|
||||
|
||||
export function WindowMinimise() {
|
||||
window.runtime.WindowMinimise();
|
||||
}
|
||||
|
||||
export function WindowUnminimise() {
|
||||
window.runtime.WindowUnminimise();
|
||||
}
|
||||
|
||||
export function WindowSetBackgroundColour(R, G, B, A) {
|
||||
window.runtime.WindowSetBackgroundColour(R, G, B, A);
|
||||
}
|
||||
|
||||
export function ScreenGetAll() {
|
||||
return window.runtime.ScreenGetAll();
|
||||
}
|
||||
|
||||
export function WindowIsMinimised() {
|
||||
return window.runtime.WindowIsMinimised();
|
||||
}
|
||||
|
||||
export function WindowIsNormal() {
|
||||
return window.runtime.WindowIsNormal();
|
||||
}
|
||||
|
||||
export function BrowserOpenURL(url) {
|
||||
window.runtime.BrowserOpenURL(url);
|
||||
}
|
||||
|
||||
export function Environment() {
|
||||
return window.runtime.Environment();
|
||||
}
|
||||
|
||||
export function Quit() {
|
||||
window.runtime.Quit();
|
||||
}
|
||||
|
||||
export function Hide() {
|
||||
window.runtime.Hide();
|
||||
}
|
||||
|
||||
export function Show() {
|
||||
window.runtime.Show();
|
||||
}
|
||||
|
||||
export function ClipboardGetText() {
|
||||
return window.runtime.ClipboardGetText();
|
||||
}
|
||||
|
||||
export function ClipboardSetText(text) {
|
||||
return window.runtime.ClipboardSetText(text);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for OnFileDrop returns a slice of file path strings when a drop is finished.
|
||||
*
|
||||
* @export
|
||||
* @callback OnFileDropCallback
|
||||
* @param {number} x - x coordinate of the drop
|
||||
* @param {number} y - y coordinate of the drop
|
||||
* @param {string[]} paths - A list of file paths.
|
||||
*/
|
||||
|
||||
/**
|
||||
* OnFileDrop listens to drag and drop events and calls the callback with the coordinates of the drop and an array of path strings.
|
||||
*
|
||||
* @export
|
||||
* @param {OnFileDropCallback} callback - Callback for OnFileDrop returns a slice of file path strings when a drop is finished.
|
||||
* @param {boolean} [useDropTarget=true] - Only call the callback when the drop finished on an element that has the drop target style. (--wails-drop-target)
|
||||
*/
|
||||
export function OnFileDrop(callback, useDropTarget) {
|
||||
return window.runtime.OnFileDrop(callback, useDropTarget);
|
||||
}
|
||||
|
||||
/**
|
||||
* OnFileDropOff removes the drag and drop listeners and handlers.
|
||||
*/
|
||||
export function OnFileDropOff() {
|
||||
return window.runtime.OnFileDropOff();
|
||||
}
|
||||
|
||||
export function CanResolveFilePaths() {
|
||||
return window.runtime.CanResolveFilePaths();
|
||||
}
|
||||
|
||||
export function ResolveFilePaths(files) {
|
||||
return window.runtime.ResolveFilePaths(files);
|
||||
}
|
Reference in New Issue
Block a user