-
-
Notifications
You must be signed in to change notification settings - Fork 9
/
FileList.svelte
90 lines (78 loc) · 2.33 KB
/
FileList.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<script>
import api from "@/api/files";
import { _ } from "@/libs/i18next";
import { fade } from "svelte/transition";
import { createEventDispatcher, onMount } from "svelte";
import { store, refresh } from "@/stores/files";
import Button from "@/components/UI/Button.svelte";
import FileIcon from "@/components/UI/FileIcon.svelte";
import MdDelete from "svelte-icons/md/MdDeleteForever.svelte";
import ConfirmModal from "@/components/UI/ConfirmModal.svelte";
export let acceptTypes;
let confirmRemoveModal = false;
let currentFile = null;
const dispatch = createEventDispatcher();
$: files = $store.filter((file) => acceptTypes[file.type]);
function removeFile(file) {
api.remove(file);
}
function onRemoveFile(file) {
currentFile = file;
confirmRemoveModal = true;
}
function onConfirmRemove({ detail: confirm }) {
confirmRemoveModal = false;
confirm && removeFile(currentFile);
}
function selectFile(file) {
dispatch("select", file);
}
function bgImage(file) {
return `background-image: url(files/${file.filename});`;
}
onMount(() => refresh());
</script>
{#each files as file}
<div
in:fade
out:fade
class="flex items-center bg-dark-darker rounded cursor-pointer"
>
<div
class="flex flex-auto truncate items-center"
on:click="{selectFile.bind(null, file)}"
>
<div class="p-2">
<FileIcon type="{file.type}" />
</div>
<div class="p-2 flex-auto truncate">{file.filename}</div>
{#if file.type === 'image'}
<div
style="{bgImage(file)}"
class="w-10 h-10 mr-1 flex-shrink-0 bg-center bg-no-repeat bg-cover rounded"
></div>
{/if}
</div>
<Button
icon="{MdDelete}"
class="bg-red-600 rounded-r"
on:click="{onRemoveFile.bind(null, file)}"
>
<span class="hidden md:inline-block">{_('words.delete')}</span>
</Button>
</div>
{:else}
<div>{_('sentences.file-list-empty')}</div>
{/each}
<ConfirmModal
question="{_('sentences.ask-remove-file', {
filename: currentFile && currentFile.filename,
})}"
bind:opened="{confirmRemoveModal}"
on:confirm="{onConfirmRemove}"
>
<div class="p-2 bg-orange-600">
<span class="uppercase font-bold">{_('words.warning')}:</span>
{_('sentences.file-can-be-used-by-other-widgets')}
</div>
</ConfirmModal>