blob: f5f9d5b4f214bf78d95f145b1b20a77fae9357d1 (
plain)
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
|
import { TranslatedString } from "@gnu-taler/taler-util";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
export function JumpToElementById({ testIfExist, onSelect, placeholder, description }: { placeholder: TranslatedString, description: TranslatedString, testIfExist: (id: string) => Promise<boolean>, onSelect: (id: string) => void }): VNode {
const { i18n } = useTranslationContext()
const [error, setError] = useState<string | undefined>(
undefined,
);
const [id, setId] = useState<string>()
async function check(currentId: string | undefined): Promise<void> {
if (!currentId) {
setError(i18n.str`missing id`);
return;
}
try {
const exi = await testIfExist(currentId);
if (exi) {
onSelect(currentId);
setError(undefined);
} else {
setError(i18n.str`not found`);
}
} catch {
setError(i18n.str`not found`);
}
}
return <div class="level">
<div class="level-left">
<div class="level-item">
<div class="field has-addons">
<div class="control">
<input
class={error ? "input is-danger" : "input"}
type="text"
value={id ?? ""}
onChange={(e) => setId(e.currentTarget.value)}
placeholder={placeholder}
/>
{error && <p class="help is-danger">{error}</p>}
</div>
<span
class="has-tooltip-bottom"
data-tooltip={description}
>
<button
class="button"
onClick={(e) => check(id)}
>
<span class="icon">
<i class="mdi mdi-arrow-right" />
</span>
</button>
</span>
</div>
</div>
</div>
</div>
}
|
