aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Tools/InputTemplate.svelte
blob: 48913646cfa921ba08af35e563e6627818ba460e (plain) (blame)
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
<script lang="ts">
  import Spacer from '$lib/Layout/Spacer.svelte';
  import { clearAllParameters } from '$lib/Utility/parameters';
  import { onMount } from 'svelte';
  import SettingHint from '$lib/Settings/SettingHint.svelte';

  export let field: string;
  export let submission: string;
  export let event: string | undefined = undefined;
  export let submitText: string;
  export let saveParameters: string[] = [];
  export let onSubmit = () => {
    return;
  };
  export let preserveCase = false;
  export let prompt = `Enter a ${
    preserveCase ? field : field.toLowerCase()
  } to search for to continue.`;
  export let hint: string | undefined = undefined;

  let input = '';

  onMount(() => clearAllParameters(saveParameters));
</script>

<div class="card">
  <div>
    <input
      type="text"
      placeholder={field}
      bind:value={input}
      onkeypress={(e) => {
        if (e.key === 'Enter') {
          submission = input;

          onSubmit();

          // eslint-disable-next-line no-undef
          if (event) umami.track(event);
        }
      }}
    />
    <button
      class="button-lined"
      onclick={() => {
        submission = input;

        onSubmit();
      }}
      title="Or click your Enter key"
      data-umami-event={event}
    >
      {submitText}
    </button>

    {#if hint !== undefined}
      <br />
      <div style="margin-top: .25rem;">
        <SettingHint>{hint}</SettingHint>
      </div>
    {/if}
  </div>

  {#if submission !== ''}
    <slot />
  {:else}
    <Spacer />

    {prompt}
  {/if}
</div>