CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-08 21:51:58 +12:00
Code Issues Projects Releases Wiki Activity

Fix scroll state not resetting

Browse source
This commit is contained in:
Andrew Kingston 2021-04-13 15:10:27 +01:00
parent 6ba2d7a0ef
commit 0f56ed3c95
1 changed files with 117 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/bbui/src/Table/Table.svelte
View file

@ -50,6 +50,15 @@
rows.length rows.length
) )
// Reset state when data chanegs
$: data.length, reset()
const reset = () => {
nextScrollTop = 0
scrollTop = 0
clearTimeout(timeout)
timeout = null
}
const getVisibleRowCount = (loaded, height, allRows, rowCount) => { const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
if (!loaded) { if (!loaded) {
return rowCount || 0 return rowCount || 0
@ -175,15 +184,15 @@
} }
</script> </script>
<div <div class="wrapper" bind:offsetHeight={height}>
bind:offsetHeight={height} {#if !loaded}
<div class="loading" style={contentStyle} />
{:else}
<div
on:scroll={onScroll} on:scroll={onScroll}
class:quiet class:quiet
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`} style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
class="container"> class="container">
{#if !loaded}
<div class="loading" style={contentStyle} />
{:else}
<div style={contentStyle}> <div style={contentStyle}>
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}> <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
{#if sortedRows?.length} {#if sortedRows?.length}
@ -199,7 +208,7 @@
{#each fields as field} {#each fields as field}
<th <th
class="spectrum-Table-headCell" class="spectrum-Table-headCell"
class:is-sortable={field.sortable !== false} class:is-sortable={schema[field].sortable !== false}
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'} class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'} class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
on:click={() => sortBy(schema[field])}> on:click={() => sortBy(schema[field])}>
@ -286,17 +295,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
{/if} {/if}
</div> </div>
<style> <style>
.loading, .wrapper {
.container,
th {
background-color: var(--spectrum-global-color-gray-100); background-color: var(--spectrum-global-color-gray-100);
overflow: hidden;
} }
.container { .container {
height: 100%;
position: relative; position: relative;
overflow: auto; overflow: auto;
border: 1px solid border: 1px solid
@ -358,6 +368,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
background-color: var(--spectrum-global-color-gray-100);
} }
.spectrum-Table-headCell-content { .spectrum-Table-headCell-content {
white-space: nowrap; white-space: nowrap;