MapComplete/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";

    export let type: ValidatorType
    export let feedback: UIEventSource<Translation> | 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 && isNaN(Number(v))) {
            value.setData(undefined)
            return
        }

        feedback?.setData(undefined)
        value.setData(v + (selectedUnit.data ?? ""))
    }

    onDestroy(_value.addCallbackAndRun((_) => setValues()))
    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")
        }
    }
</script>

{#if validator?.textArea}
    <form on:submit|preventDefault={() => dispatch("submit")}>
    
  <textarea
          class="w-full"
          bind:value={$_value}
          inputmode={validator?.inputmode ?? "text"}
          placeholder={_placeholder}></textarea>
    </form>
{:else}
    <form class="inline-flex" on:submit={() => dispatch("submit")}>
        <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}