Fix the rest of the nasty flashing when working with importing CSVs
This commit is contained in:
parent
1f6466f0eb
commit
bac7a253c2
1 changed files with 19 additions and 24 deletions
|
@ -53,6 +53,15 @@
|
||||||
$: displayColumnOptions = Object.keys(schema || {}).filter(column => {
|
$: displayColumnOptions = Object.keys(schema || {}).filter(column => {
|
||||||
return validation[column]
|
return validation[column]
|
||||||
})
|
})
|
||||||
|
$: {
|
||||||
|
// binding in consumer is causing double renders here
|
||||||
|
const newValidateHash = JSON.stringify(rows) + JSON.stringify(schema)
|
||||||
|
if (newValidateHash !== validateHash) {
|
||||||
|
validate(rows, schema)
|
||||||
|
}
|
||||||
|
validateHash = newValidateHash
|
||||||
|
}
|
||||||
|
$: openFileUpload(promptUpload, fileInput)
|
||||||
|
|
||||||
async function handleFile(e) {
|
async function handleFile(e) {
|
||||||
loading = true
|
loading = true
|
||||||
|
@ -73,7 +82,6 @@
|
||||||
|
|
||||||
async function validate(rows, schema) {
|
async function validate(rows, schema) {
|
||||||
loading = true
|
loading = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (rows.length > 0) {
|
if (rows.length > 0) {
|
||||||
const response = await API.validateNewTableImport({ rows, schema })
|
const response = await API.validateNewTableImport({ rows, schema })
|
||||||
|
@ -88,21 +96,9 @@
|
||||||
allValid = false
|
allValid = false
|
||||||
errors = {}
|
errors = {}
|
||||||
}
|
}
|
||||||
|
|
||||||
loading = false
|
loading = false
|
||||||
}
|
}
|
||||||
|
|
||||||
$: {
|
|
||||||
// binding in consumer is causing double renders here
|
|
||||||
const newValidateHash = JSON.stringify(rows) + JSON.stringify(schema)
|
|
||||||
|
|
||||||
if (newValidateHash !== validateHash) {
|
|
||||||
validate(rows, schema)
|
|
||||||
}
|
|
||||||
|
|
||||||
validateHash = newValidateHash
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleChange = (name, e) => {
|
const handleChange = (name, e) => {
|
||||||
schema[name].type = e.detail
|
schema[name].type = e.detail
|
||||||
schema[name].constraints = FIELDS[e.detail.toUpperCase()].constraints
|
schema[name].constraints = FIELDS[e.detail.toUpperCase()].constraints
|
||||||
|
@ -114,7 +110,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: openFileUpload(promptUpload, fileInput)
|
const deleteColumn = name => {
|
||||||
|
if (loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
delete schema[name]
|
||||||
|
schema = schema
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="dropzone">
|
<div class="dropzone">
|
||||||
|
@ -127,10 +129,8 @@
|
||||||
on:change={handleFile}
|
on:change={handleFile}
|
||||||
/>
|
/>
|
||||||
<label for="file-upload" class:uploaded={rows.length > 0}>
|
<label for="file-upload" class:uploaded={rows.length > 0}>
|
||||||
{#if loading}
|
{#if error}
|
||||||
loading...
|
Error: {error}
|
||||||
{:else if error}
|
|
||||||
error: {error}
|
|
||||||
{:else if fileName}
|
{:else if fileName}
|
||||||
{fileName}
|
{fileName}
|
||||||
{:else}
|
{:else}
|
||||||
|
@ -150,7 +150,6 @@
|
||||||
placeholder={null}
|
placeholder={null}
|
||||||
getOptionLabel={option => option.label}
|
getOptionLabel={option => option.label}
|
||||||
getOptionValue={option => option.value}
|
getOptionValue={option => option.value}
|
||||||
disabled={loading}
|
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
class={validation[column.name]
|
class={validation[column.name]
|
||||||
|
@ -169,12 +168,8 @@
|
||||||
<Icon
|
<Icon
|
||||||
size="S"
|
size="S"
|
||||||
name="Close"
|
name="Close"
|
||||||
disabled={loading}
|
|
||||||
hoverable
|
hoverable
|
||||||
on:click={() => {
|
on:click={() => deleteColumn(column.name)}
|
||||||
delete schema[column.name]
|
|
||||||
schema = schema
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
Loading…
Reference in a new issue