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"
  import type { ValueRange } from "../../Models/ThemeConfig/TagRenderingConfig"
  import Translations from "../i18n/Translations"
  import BaseUIElement from "../BaseUIElement"

  export let type: ValidatorType
  export let feedback: UIEventSource<Translation> | undefined = undefined
  export let cls: string = undefined
  export let getCountry: () => string | undefined = undefined
  export let placeholder: string | Translation | undefined = undefined
  export let autofocus: boolean = false
  export let unit: Unit = undefined
  export let range: ValueRange = undefined
  /**
   * Valid state, exported to the calling component
   */
  export let value: UIEventSource<string | undefined>
  /**
   * 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
   */
  export let unvalidatedText = new UIEventSource(value.data ?? "")

  if (unvalidatedText == /*Compare by reference!*/ value) {
    throw "Value and unvalidatedText may not be the same store!"
  }
  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) {
        unvalidatedText.setData(v)
        selectedUnit.setData(denom.canonical)
      } else {
        unvalidatedText.setData(value.data ?? "")
      }
    } else {
      unvalidatedText.setData(value.data ?? "")
    }
  }

  function onKeyPress(e: KeyboardEvent) {
    if (e.key === "Enter" && (!validator.textArea || e.ctrlKey)) {
      e.stopPropagation()
      e.preventDefault()
      dispatch("submit")
    }
  }
  initValueAndDenom()
  $: {
    // The type changed -> reset some values
    validator = Validators.get(type ?? "string")

    _placeholder = placeholder ?? validator?.getPlaceholder() ?? type
    if (unvalidatedText.data?.length > 0) {
      feedback?.setData(validator?.getFeedback(unvalidatedText.data, getCountry))
    } else {
      feedback?.setData(undefined)
    }

    initValueAndDenom()
  }

  const t = Translations.t.validation.generic

  /**
   * Side effect: sets the feedback, returns true/false if valid
   * @param canonicalValue
   */
  function validateRange(canonicalValue: number): boolean {
    if (!range) {
      return true
    }
    if (canonicalValue < range.warnBelow) {
      feedback.set(t.suspiciouslyLow)
    }
    if (canonicalValue > range.warnAbove) {
      feedback.set(t.suspiciouslyHigh)
    }
    if (canonicalValue > range.max) {
      let max: number | string | BaseUIElement = range.max
      if (unit) {
        max = unit.asHumanLongValue(max)
      }
      feedback.set(t.tooHigh.Subs({ max }))
      return false
    }
    if (canonicalValue < range.min) {
      let min: number | string | BaseUIElement = range.min
      if (unit) {
        min = unit.asHumanLongValue(min)
      }
      feedback.set(t.tooLow.Subs({ min }))
      return false
    }
    return true
  }

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

    if (selectedUnit.data) {
      const canonicalValue = unit.valueInCanonical(v + selectedUnit.data)
      if (validateRange(canonicalValue)) {
        value.setData(unit.toOsm(v, selectedUnit.data))
      } else {
        value.set(undefined)
      }
    } else {
      if (validateRange(v)) {
        value.setData(v)
      } else {
        value.set(undefined)
      }
    }
  }

  onDestroy(unvalidatedText.addCallbackAndRun(() => setValues()))
  if (unit === undefined) {
    onDestroy(
      value.addCallbackAndRunD((fromUpstream) => {
        if (unvalidatedText.data !== fromUpstream && fromUpstream !== "") {
          unvalidatedText.setData(fromUpstream)
        }
      })
    )
  } else {
    // Handled by the UnitInput
  }
  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 = unvalidatedText.map((v) => validator?.isValid(v, getCountry) ?? true)

  let htmlElem: HTMLInputElement | HTMLTextAreaElement

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

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

    {#if unit !== undefined}
      <UnitInput
        {unit}
        {selectedUnit}
        textValue={unvalidatedText}
        upstreamValue={value}
        {getCountry}
      />
    {/if}
  </div>
{/if}