Merge master

src/UI/InputElement/ValidatedInput.svelte

@@ -0,0 +1,128 @@
+<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(value.addCallbackAndRunD(fromUpstream => {
+        if(_value.data !== 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")
+        }
+    }
+</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}