Initial reorder conversion

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

@@ -84,7 +84,8 @@ export type Store = BaseStore &
     fixedRowHeight: Writable<number>
     bounds: Readable<any>
     height: Readable<number>
-  } & Rows.Store
+  } & Rows.Store &
+  Reorder.Store
 
 export const attachStores = (context: Store): Store => {
   // Atomic store creation

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

@@ -1,7 +1,18 @@
-import { get, writable, derived } from "svelte/store"
+import { get, writable, derived, Writable, Readable } from "svelte/store"
 import { parseEventLocation } from "../lib/utils"
+import { Store as StoreContext } from "."
 
-const reorderInitialState = {
+interface ReorderInitialStoreData {
+  sourceColumn: any
+  targetColumn: any
+  insertAfter?: boolean
+  breakpoints: any[]
+  gridLeft: number
+  width: number
+  increment?: number
+}
+
+const reorderInitialState: ReorderInitialStoreData = {
   sourceColumn: null,
   targetColumn: null,
   insertAfter: false,
@@ -11,7 +22,14 @@ const reorderInitialState = {
   increment: 0,
 }
 
-export const createStores = () => {
+interface ReorderInitialStore {
+  reorder: Writable<ReorderInitialStoreData>
+  isReordering: Readable<boolean>
+}
+
+export type Store = ReorderInitialStore
+
+export const createStores = (): ReorderInitialStore => {
   const reorder = writable(reorderInitialState)
   const isReordering = derived(
     reorder,
@@ -24,7 +42,7 @@ export const createStores = () => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const {
     reorder,
     columns,
@@ -40,11 +58,11 @@ export const createActions = context => {
     maxScrollLeft,
   } = context
   let latestX = 0
-  let autoScrollInterval
+  let autoScrollInterval: any
-  let isAutoScrolling
+  let isAutoScrolling: boolean
 
   // Callback when dragging on a colum header and starting reordering
-  const startReordering = (column, e) => {
+  const startReordering = (column: any, e: any) => {
     const $scrollableColumns = get(scrollableColumns)
     const $bounds = get(bounds)
     const $stickyWidth = get(stickyWidth)
@@ -87,9 +105,9 @@ export const createActions = context => {
   }
 
   // Callback when moving the mouse when reordering columns
-  const onReorderMouseMove = e => {
+  const onReorderMouseMove = (e: MouseEvent | TouchEvent) => {
     // Immediately handle the current position
-    const { x } = parseEventLocation(e)
+    const { x } = parseEventLocation(e as any)
     latestX = x
     considerReorderPosition()
 
@@ -122,7 +140,7 @@ export const createActions = context => {
     const $scrollLeft = get(scrollLeft)
 
     // Compute the closest breakpoint to the current position
-    let breakpoint
+    let breakpoint: any
     let minDistance = Number.MAX_SAFE_INTEGER
     const mouseX = latestX - $reorder.gridLeft + $scrollLeft
     $reorder.breakpoints.forEach(point => {
@@ -157,7 +175,7 @@ export const createActions = context => {
       const { increment } = get(reorder)
       scroll.update(state => ({
         ...state,
-        left: Math.max(0, Math.min($maxLeft, state.left + increment)),
+        left: Math.max(0, Math.min($maxLeft, state.left + increment!)),
       }))
       considerReorderPosition()
     }, 10)
@@ -195,7 +213,7 @@ export const createActions = context => {
     sourceColumn,
     targetColumn,
     insertAfter = false,
-  }) => {
+  }: any) => {
     // Find the indices in the overall columns array
     const $columns = get(columns)
     let sourceIdx = $columns.findIndex(col => col.name === sourceColumn)
@@ -232,7 +250,7 @@ export const createActions = context => {
   }
 
   // Moves a column one place left (as appears visually)
-  const moveColumnLeft = async column => {
+  const moveColumnLeft = async (column: string) => {
     const $visibleColumns = get(visibleColumns)
     const $columnLookupMap = get(columnLookupMap)
     const sourceIdx = $columnLookupMap[column].__idx
@@ -243,7 +261,7 @@ export const createActions = context => {
   }
 
   // Moves a column one place right (as appears visually)
-  const moveColumnRight = async column => {
+  const moveColumnRight = async (column: string) => {
     const $visibleColumns = get(visibleColumns)
     const $columnLookupMap = get(columnLookupMap)
     const sourceIdx = $columnLookupMap[column].__idx

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

@@ -8,4 +8,5 @@ export interface UIFieldMutation {
   visible?: boolean
   readonly?: boolean
   width?: number
+  order?: number
 }