Merge pull request #15251 from Budibase/typing/stores-grid-scroll

Typing grid scroll store

packages/frontend-core/src/components/grid/stores/columns.ts

@@ -180,6 +180,7 @@ export const initialise = (context: StoreContext) => {
             conditions: fieldSchema.conditions,
             related: fieldSchema.related,
             calculationType: fieldSchema.calculationType,
+            __left: undefined as any, // TODO
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {

packages/frontend-core/src/components/grid/stores/index.ts

@@ -66,7 +66,8 @@ export type Store = BaseStore &
   Menu.Store &
   Filter.Store &
   UI.Store &
-  Clipboard.Store & {
+  Clipboard.Store &
+  Scroll.Store & {
     // TODO while typing the rest of stores
     fetch: Writable<any>
     sort: Writable<any>
@@ -85,6 +86,8 @@ export type Store = BaseStore &
     width: Writable<number>
     fixedRowHeight: Writable<number>
     rowChangeCache: Readable<any>
+    bounds: Readable<any>
+    height: Readable<number>
   }
 
 export const attachStores = (context: Store): Store => {

packages/frontend-core/src/components/grid/stores/scroll.ts

@@ -1,4 +1,4 @@
-import { writable, derived, get } from "svelte/store"
+import { writable, derived, get, Writable, Readable } from "svelte/store"
 import { tick } from "svelte"
 import {
   GutterWidth,
@@ -8,8 +8,31 @@ import {
   VPadding,
 } from "../lib/constants"
 import { parseCellID } from "../lib/utils"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
+interface ScrollStore {
+  scroll: Writable<{
+    left: number
+    top: number
+  }>
+  scrollTop: Readable<number>
+  scrollLeft: Readable<number>
+}
+
+interface ScrollDerivedStore {
+  stickyWidth: Readable<number>
+  contentHeight: Readable<number>
+  contentWidth: Readable<number>
+  screenWidth: Readable<number>
+  maxScrollTop: Readable<number>
+  maxScrollLeft: Readable<number>
+  showHScrollbar: Readable<number>
+  showVScrollbar: Readable<number>
+}
+
+export type Store = ScrollStore & ScrollDerivedStore
+
+export const createStores = (): ScrollStore => {
   const scroll = writable({
     left: 0,
     top: 0,
@@ -26,7 +49,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext) => {
   const {
     rows,
     visibleColumns,
@@ -107,7 +130,7 @@ export const deriveStores = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     focusedCellId,
     focusedRow,
@@ -189,7 +212,7 @@ export const initialise = context => {
     // Ensure horizontal position is viewable
     // Check horizontal position of columns next
     const { field } = parseCellID($focusedCellId)
-    const column = get(columnLookupMap)[field]
+    const column = get(columnLookupMap)[field!]
     if (!column || column.primaryDisplay) {
       return
     }

packages/frontend-core/src/components/grid/stores/ui.ts

@@ -8,6 +8,7 @@ import {
 } from "../lib/constants"
 import { getCellID, parseCellID } from "../lib/utils"
 import { Store as StoreContext } from "."
+import { Row } from "@budibase/types"
 
 export interface UIStore {
   focusedCellId: Writable<string | null>
@@ -34,7 +35,7 @@ export interface UIStore {
 
 export interface UIDerivedStore {
   focusedRowId: Readable<string | null>
-  focusedRow: Readable<string | undefined>
+  focusedRow: Readable<Row | undefined>
   contentLines: Readable<3 | 2 | 1>
   compact: Readable<boolean>
   selectedRowCount: Readable<number>

packages/types/src/ui/stores/grid/columns.ts

@@ -17,5 +17,6 @@ export type UIColumn = FieldSchema & {
   }
   calculationType: CalculationType
   __idx?: number
-  __left?: number
+  __left: number
+  width: number
 }