MapComplete/src/UI/InputElement/ValidatedInput.svelte

<script lang="ts">
  import { UIEventSource } from "../../Logic/UIEventSource"
  import type { ValidatorType } from "./Validators"
  import Validators from "./Validators"
  import { ExclamationIcon } from "@rgossiaux/svelte-heroicons/solid"
  import { Translation } from "../i18n/Translation"
  import { createEventDispatcher, onDestroy } from "svelte"
  import { Validator } from "./Validator"
  import { Unit } from "../../Models/Unit"
  import UnitInput from "../Popup/UnitInput.svelte"
  import { Utils } from "../../Utils"
  import { twMerge } from "tailwind-merge"

  export let type: ValidatorType
  export let feedback: UIEventSource<Translation> | undefined = undefined
  export let cls: string = undefined
  export let getCountry: () => string | undefined
  export let placeholder: string | Translation | undefined
  export let unit: Unit = undefined
  export let value: UIEventSource<string>
  /**
   * Internal state bound to the input element.
   *
   * This is only copied to 'value' when appropriate so that no invalid values leak outside;
   * Additionally, the unit is added when copying
   */
  let _value = new UIEventSource(value.data ?? "")

  let validator: Validator = Validators.get(type ?? "string")
  if (validator === undefined) {
    console.warn("Didn't find a validator for type", type)
  }
  let selectedUnit: UIEventSource<string> = new UIEventSource<string>(undefined)
  let _placeholder = placeholder ?? validator?.getPlaceholder() ?? type

  function initValueAndDenom() {
    if (unit && value.data) {
      const [v, denom] = unit?.findDenomination(value.data, getCountry)
      if (denom) {
        _value.setData(v)
        selectedUnit.setData(denom.canonical)
      } else {
        _value.setData(value.data ?? "")
      }
    } else {
      _value.setData(value.data ?? "")
    }
  }

  initValueAndDenom()

  $: {
    // The type changed -> reset some values
    validator = Validators.get(type ?? "string")

    _placeholder = placeholder ?? validator?.getPlaceholder() ?? type
    feedback?.setData(validator?.getFeedback(_value.data, getCountry))

    initValueAndDenom()
  }

  function setValues() {
    // Update the value stores
    const v = _value.data
    if (!validator?.isValid(v, getCountry) || v === "") {
      feedback?.setData(validator?.getFeedback(v, getCountry))
      value.setData("")
      return
    }

    if (unit !== undefined && isNaN(Number(v))) {
      value.setData(undefined)
      return
    }

    feedback?.setData(undefined)
    if (selectedUnit.data) {
      value.setData(v + selectedUnit.data)
    } else {
      value.setData(v)
    }
  }

  onDestroy(_value.addCallbackAndRun((_) => setValues()))
  onDestroy(
    value.addCallbackAndRunD((fromUpstream) => {
      if (_value.data !== fromUpstream && fromUpstream !== "") {
        _value.setData(fromUpstream)
      }
    })
  )
  onDestroy(selectedUnit.addCallback((_) => setValues()))
  if (validator === undefined) {
    throw (
      "Not a valid type (no validator found) for type '" +
      type +
      "'; did you perhaps mean one of: " +
      Utils.sortedByLevenshteinDistance(
        type,
        Validators.AllValidators.map((v) => v.name),
        (v) => v
      )
        .slice(0, 5)
        .join(", ")
    )
  }

  const isValid = _value.map((v) => validator?.isValid(v, getCountry) ?? true)

  let htmlElem: HTMLInputElement

  let dispatch = createEventDispatcher<{ selected; submit }>()
  $: {
    if (htmlElem !== undefined) {
      htmlElem.onfocus = () => dispatch("selected")
    }
  }

  /**
   * Dispatches the submit, but only if the value is valid
   */
  function sendSubmit() {
    if (feedback?.data) {
      console.log("Not sending a submit as there is feedback")
    }
    dispatch("submit")
  }
</script>

{#if validator?.textArea}
  <form on:submit|preventDefault={() => sendSubmit()}>
    <textarea
      class="w-full"
      bind:value={$_value}
      inputmode={validator?.inputmode ?? "text"}
      placeholder={_placeholder}
    />
  </form>
{:else}
  <form class={twMerge("inline-flex", cls)} on:submit|preventDefault={() => sendSubmit()}>
    <input
      bind:this={htmlElem}
      bind:value={$_value}
      class="w-full"
      inputmode={validator?.inputmode ?? "text"}
      placeholder={_placeholder}
    />
    {#if !$isValid}
      <ExclamationIcon class="-ml-6 h-6 w-6" />
    {/if}

    {#if unit !== undefined}
      <UnitInput {unit} {selectedUnit} textValue={_value} upstreamValue={value} />
    {/if}
  </form>
{/if}