Merge pull request #15272 from Budibase/typing/stores-grid-resize

Typing grid resize store
Budibase · Dec 31, 2024 · 2bc5b72 · 2bc5b72
2 parents 5019b0e + 3483e06
commit 2bc5b72
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/packages/frontend-core/src/components/grid/stores/index.ts b/packages/frontend-core/src/components/grid/stores/index.ts
@@ -85,7 +85,8 @@ export type Store = BaseStore &
     bounds: Readable<any>
     height: Readable<number>
   } & Rows.Store &
-  Reorder.Store
+  Reorder.Store &
+  Resize.Store
 
 export const attachStores = (context: Store): Store => {
   // Atomic store creation

diff --git a/...core/src/components/grid/stores/resize.js → ...core/src/components/grid/stores/resize.ts b/...core/src/components/grid/stores/resize.js → ...core/src/components/grid/stores/resize.ts
@@ -1,16 +1,34 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { MinColumnWidth, DefaultColumnWidth } from "../lib/constants"
 import { parseEventLocation } from "../lib/utils"
+import { Store as StoreContext } from "."
+import { UIColumn } from "@budibase/types"
 
-const initialState = {
+interface ResizeInitialStoreData {
+  initialMouseX: number | null
+  initialWidth: number | null
+  column: string | null
+  width: number
+  left: number
+  related?: UIColumn["related"]
+}
+
+const initialState: ResizeInitialStoreData = {
   initialMouseX: null,
   initialWidth: null,
   column: null,
   width: 0,
   left: 0,
 }
 
-export const createStores = () => {
+interface ResizeInitialStore {
+  resize: Writable<ResizeInitialStoreData>
+  isResizing: Readable<boolean>
+}
+
+export type Store = ResizeInitialStore
+
+export const createStores = (): ResizeInitialStore => {
   const resize = writable(initialState)
   const isResizing = derived(resize, $resize => $resize.column != null, false)
   return {
@@ -19,11 +37,11 @@ export const createStores = () => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const { resize, ui, datasource } = context
 
   // Starts resizing a certain column
-  const startResizing = (column, e) => {
+  const startResizing = (column: UIColumn, e: MouseEvent | TouchEvent) => {
     const { x } = parseEventLocation(e)
 
     // Prevent propagation to stop reordering triggering
@@ -50,11 +68,11 @@ export const createActions = context => {
   }
 
   // Handler for moving the mouse to resize columns
-  const onResizeMouseMove = e => {
+  const onResizeMouseMove = (e: MouseEvent | TouchEvent) => {
     const { initialMouseX, initialWidth, width, column, related } = get(resize)
     const { x } = parseEventLocation(e)
-    const dx = x - initialMouseX
-    const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
+    const dx = x - initialMouseX!
+    const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth! + dx))
 
     // Ignore small changes
     if (Math.abs(width - newWidth) < 5) {
@@ -63,7 +81,7 @@ export const createActions = context => {
 
     // Update column state
     if (!related) {
-      datasource.actions.addSchemaMutation(column, { width })
+      datasource.actions.addSchemaMutation(column!, { width })
     } else {
       datasource.actions.addSubSchemaMutation(related.subField, related.field, {
         width,
@@ -95,7 +113,7 @@ export const createActions = context => {
   }
 
   // Resets a column size back to default
-  const resetSize = async column => {
+  const resetSize = async (column: { name: string }) => {
     datasource.actions.addSchemaMutation(column.name, {
       width: DefaultColumnWidth,
     })

diff --git a/packages/frontend-core/src/components/grid/stores/ui.ts b/packages/frontend-core/src/components/grid/stores/ui.ts
@@ -52,6 +52,11 @@ interface UIActionStore {
       selectRange: (source: string | null, target: string | null) => void
     }
   }
+  ui: {
+    actions: {
+      blur: () => void
+    }
+  }
 }
 
 export type Store = UIStore & UIDerivedStore & UIActionStore