fix(front/checkbox): change value to boolean and use handleInput

This commit is contained in:
Alice Gaudon 2022-02-19 11:30:06 +01:00
parent 535c8afdb1
commit 231aa8dcd7

View File

@ -8,7 +8,7 @@
export let type: string;
export let name: string;
type FieldValue = string | number | Record<string, FieldValue>;
type FieldValue = string | number | boolean | Record<string, FieldValue>;
export let value: FieldValue | undefined = undefined;
export let initialValue: FieldValue | undefined = undefined;
export let placeholder: string | undefined = undefined;
@ -58,18 +58,23 @@
}
function handleInput() {
// in here, you can switch on type and implement
// whatever behaviour you need
value = type.match(/^(number|range)$/)
? +this.value
: this.value;
if (this.type === 'file') {
handleFileInput();
}
if (this.type === 'datetime-local') {
value = dateToIsoString(new Date(this.value));
switch (this.type) {
case 'number':
case 'range':
value = +this.value;
break;
case 'file':
handleFileInput();
break;
case 'datetime-local':
value = dateToIsoString(new Date(this.value));
break;
case 'checkbox':
value = !!this.checked;
break;
default:
value = this.value;
break;
}
}
@ -423,7 +428,8 @@
on:focusout={() => focused = false}></textarea>
</div>
{:else if type === 'checkbox'}
<input {type} {name} id={fieldId} checked={value === 'on'} {...$$restProps} bind:this={input}>
<input {type} {name} id={fieldId} checked={!!value} {...$$restProps} bind:this={input}
on:change={handleInput}>
{:else if type === 'datetime-local'}
<input {type} bind:this={input} on:input={handleInput} value={initialDatetimeLocalValue}>
<input type="hidden" {name} {value}>