chore: added button component
Signed-off-by: mellobacon <mellodev@outlook.com>
mellobacon committed
Jan 19, 2024 at 17:36 UTC
e0657dac92ddb5878caac209c74a43fa0a4089bf
3 files changed
+55
-34
src/lib/Modals/InputModal.svelte
+18
-17
@@ -2,6 +2,7 @@
2
import { onMount } from "svelte";
3
import Input from "../utility/Input.svelte";
4
import Popup from "../utility/Popup.svelte";
5
+ import Button from "../utility/Button.svelte";
6
import { _openPopup } from "../../App.svelte";
7
import { checkValidFileName } from "../File";
8
import { fs, invoke, path as p } from "@tauri-apps/api";
@@ -28,28 +29,28 @@
29
_openPopup.set(false);
30
}
31
}
31
-
32
+ async function validateInput(button) {
33
+ if (!button.cancel && (!checkValidFileName(value) || value === undefined || !value)) {
34
+ invalid = true;
35
+ invalidText = `{${value === "" ? "null" : value}} is not a valid file or directory name`;
36
+ return;
37
+ }
38
+ if (!button.cancel && await fs.exists(`${path}${p.sep}${value}`)) {
39
+ invalid = true;
40
+ if (await invoke("is_file", {path: path})) {
41
+ path = path.slice(0, path.indexOf(value));
42
+ }
43
+ invalidText = `${value} in ${path} already exists`;
44
+ return;
45
+ }
46
+ await handleButtonClick(button.action, button.cancel);
47
+ }
48
</script>
49
<Popup bind:open={$_openPopup} {title} {description}>
50
<Input bind:value bind:invalid label={options.label} placeholder={options.placeholder} hintText={helpText} invalidText={invalidText} />
51
<svelte:fragment slot="buttons">
52
{#each buttons as button}
37
- <button on:click={async () => {
38
- if (!button.cancel && (!checkValidFileName(value) || value === undefined || !value)) {
39
- invalid = true;
40
- invalidText = `{${value === "" ? "null" : value}} is not a valid file or directory name`;
41
- return;
42
- }
43
- if (!button.cancel && await fs.exists(`${path}${p.sep}${value}`)) {
44
- invalid = true;
45
- if (await invoke("is_file", {path: path})) {
46
- path = path.slice(0, path.indexOf(value));
47
- }
48
- invalidText = `${value} in ${path} already exists`;
49
- return;
50
- }
51
- await handleButtonClick(button.action, button.cancel);
52
- }}>{button.name}</button>
53
+ <Button label={button.name} style={button.style} on:click={() => {validateInput(button)}} />
54
{/each}
55
</svelte:fragment>
56
</Popup>
src/lib/Modals/RenameModal.svelte
+19
-17
@@ -2,6 +2,7 @@
2
import { onMount } from "svelte";
3
import Input from "../utility/Input.svelte";
4
import Popup from "../utility/Popup.svelte";
5
+ import Button from "../utility/Button.svelte";
6
import { _openPopup } from "../../App.svelte";
7
import { checkValidFileName } from "../File";
8
import { fs, path as p, invoke } from "@tauri-apps/api";
@@ -28,7 +29,23 @@
29
_openPopup.set(false);
30
}
31
}
31
-
32
+ async function validateInput(button) {
33
+ if (!button.cancel && (!checkValidFileName(value) || value === undefined || !value)) {
34
+ invalid = true;
35
+ invalidText = `{${value === "" ? "null" : value}} is not a valid file name`;
36
+ return;
37
+ }
38
+ if (!button.cancel && await fs.exists(`${path}${p.sep}${value}`)) {
39
+ invalid = true;
40
+ if (await invoke("is_file", {path: path})) {
41
+ path = path.slice(0, path.indexOf(value));
42
+ }
43
+ invalidText = `${value} in ${path} already exists`;
44
+ return;
45
+ }
46
+ await handleButtonClick(button.action, button.cancel);
47
+ }
48
+// {name: "Cancel", cancel: true, style: "danger", action: () => {}}
49
</script>
50
<Popup bind:open={$_openPopup} {title} {description}>
51
<div class="rename-input">
@@ -36,22 +53,7 @@
53
</div>
54
<svelte:fragment slot="buttons">
55
{#each buttons as button}
39
- <button on:click={async () => {
40
- if (!button.cancel && (!checkValidFileName(value) || value === undefined || !value)) {
41
- invalid = true;
42
- invalidText = `{${value === "" ? "null" : value}} is not a valid file name`;
43
- return;
44
- }
45
- if (!button.cancel && await fs.exists(`${path}${p.sep}${value}`)) {
46
- invalid = true;
47
- if (await invoke("is_file", {path: path})) {
48
- path = path.slice(0, path.indexOf(value));
49
- }
50
- invalidText = `${value} in ${path} already exists`;
51
- return;
52
- }
53
- await handleButtonClick(button.action, button.cancel);
54
- }}>{button.name}</button>
56
+ <Button label={button.name} style={button.style} on:click={() => {validateInput(button)}} />
57
{/each}
58
</svelte:fragment>
59
</Popup>
src/lib/utility/Button.svelte
new
+18
@@ -0,0 +1,18 @@
1
+<script lang="ts">
2
+ import { createEventDispatcher, onMount } from "svelte";
3
+
4
+ export let label = "Button";
5
+ export let type: "button" | "submit" | "reset" = "button";
6
+ export let style: "primary" | "secondary" | "accent" | "danger" = "primary";
7
+ export let _class = "";
8
+
9
+ export let disabled = false;
10
+</script>
11
+
12
+<button class="action-button {style} {_class}" type="{type}" disabled={disabled} on:click on:submit>{label}</button>
13
+
14
+<style>
15
+.action-button {
16
+ border-radius: 3px;
17
+}
18
+</style>