Initial ui conversion

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

@@ -64,7 +64,8 @@ export type Store = BaseStore &
   Validation.Store &
   Users.Store &
   Menu.Store &
-  Filter.Store & {
+  Filter.Store &
+  UI.Store & {
     // TODO while typing the rest of stores
     fetch: Writable<any>
     sort: Writable<any>
@@ -77,14 +78,11 @@ export type Store = BaseStore &
     dispatch: (event: string, data: any) => any
     notifications: Writable<any>
     schemaOverrides: Writable<any>
-    focusedCellId: Writable<any>
-    previousFocusedRowId: Writable<string>
     gridID: string
-    selectedRows: Writable<any>
-    selectedRowCount: Writable<any>
-    selectedCellMap: Writable<any>
-    selectedCellCount: Writable<any>
     props: Writable<any>
+    rowLookupMap: Writable<any>
+    width: Writable<number>
+    fixedRowHeight: Writable<number>
   }
 
 export const attachStores = (context: Store): Store => {

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

@@ -15,7 +15,16 @@ interface MenuStore {
   menu: Writable<MenuStoreData>
 }
 
-export type Store = MenuStore
+interface MenuActions {
+  menu: MenuStore["menu"] & {
+    actions: {
+      open: (cellId: string, e: MouseEvent) => void
+      close: () => void
+    }
+  }
+}
+
+export type Store = MenuStore & MenuActions
 
 export const createStores = () => {
   const menu = writable<MenuStoreData>({
@@ -30,7 +39,7 @@ export const createStores = () => {
   }
 }
 
-export const createActions = (context: StoreContext) => {
+export const createActions = (context: StoreContext): MenuActions => {
   const {
     menu,
     focusedCellId,

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

@@ -1,4 +1,4 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable } from "svelte/store"
 import { tick } from "svelte"
 import {
   DefaultRowHeight,
@@ -7,8 +7,42 @@ import {
   NewRowID,
 } from "../lib/constants"
 import { getCellID, parseCellID } from "../lib/utils"
+import { Store as StoreContext } from "."
 
-export const createStores = context => {
+export interface UIStore {
+  focusedCellId: Writable<string | null>
+  focusedCellAPI: Writable<any>
+  selectedRows: Writable<any>
+  hoveredRowId: Writable<string | null>
+  rowHeight: Writable<number>
+  previousFocusedRowId: Writable<string | null>
+  previousFocusedCellId: Writable<string | null>
+  gridFocused: Writable<boolean>
+  keyboardBlocked: Writable<boolean>
+  isDragging: Writable<boolean>
+  buttonColumnWidth: Writable<number>
+  cellSelection: Writable<{
+    active: boolean
+    sourceCellId: string | null
+    targetCellId: string | null
+  }>
+}
+
+export interface UIDerivedStore {
+  focusedRowId: Writable<string | null>
+  focusedRow: Writable<any>
+  contentLines: Writable<any>
+  compact: Writable<any>
+  selectedRowCount: Writable<any>
+  isSelectingCells: Writable<any>
+  selectedCells: Writable<any> & { actions: any }
+  selectedCellMap: Writable<any>
+  selectedCellCount: Writable<any>
+}
+
+export type Store = UIStore & UIDerivedStore
+
+export const createStores = (context: StoreContext): UIStore => {
   const { props } = context
   const focusedCellId = writable(null)
   const focusedCellAPI = writable(null)
@@ -43,7 +77,7 @@ export const createStores = context => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext) => {
   const {
     focusedCellId,
     rows,
@@ -128,8 +162,8 @@ export const deriveStores = context => {
       upperRowIndex = Math.min(upperRowIndex, lowerRowIndex + 49)
 
       // Column indices
-      const sourceColIndex = $columnLookupMap[sourceInfo.field].__idx
-      const targetColIndex = $columnLookupMap[targetInfo.field].__idx
+      const sourceColIndex = $columnLookupMap[sourceInfo.field].__idx || 0
+      const targetColIndex = $columnLookupMap[targetInfo.field].__idx || 0
       const lowerColIndex = Math.min(sourceColIndex, targetColIndex)
       const upperColIndex = Math.max(sourceColIndex, targetColIndex)
 
@@ -151,7 +185,7 @@ export const deriveStores = context => {
 
   // Derive a quick lookup map of the selected cells
   const selectedCellMap = derived(selectedCells, $selectedCells => {
-    let map = {}
+    let map: Record<string, boolean> = {}
     for (let row of $selectedCells) {
       for (let cell of row) {
         map[cell] = true
@@ -178,7 +212,7 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const {
     focusedCellId,
     hoveredRowId,
@@ -190,7 +224,7 @@ export const createActions = context => {
     selectedCells,
   } = context
   // Keep the last selected index to use with bulk selection
-  let lastSelectedIndex = null
+  let lastSelectedIndex: number | null = null
 
   // Callback when leaving the grid, deselecting all focussed or selected items
   const blur = () => {
@@ -200,7 +234,7 @@ export const createActions = context => {
   }
 
   // Toggles whether a certain row ID is selected or not
-  const toggleSelectedRow = id => {
+  const toggleSelectedRow = (id: string) => {
     selectedRows.update(state => {
       let newState = {
         ...state,
@@ -215,7 +249,7 @@ export const createActions = context => {
     })
   }
 
-  const bulkSelectRows = id => {
+  const bulkSelectRows = (id: string) => {
     if (!get(selectedRowCount)) {
       toggleSelectedRow(id)
       return
@@ -241,7 +275,7 @@ export const createActions = context => {
     })
   }
 
-  const startCellSelection = sourceCellId => {
+  const startCellSelection = (sourceCellId: string) => {
     cellSelection.set({
       active: true,
       sourceCellId,
@@ -249,7 +283,7 @@ export const createActions = context => {
     })
   }
 
-  const updateCellSelection = targetCellId => {
+  const updateCellSelection = (targetCellId: string) => {
     cellSelection.update(state => ({
       ...state,
       targetCellId,
@@ -263,7 +297,7 @@ export const createActions = context => {
     }))
   }
 
-  const selectCellRange = (source, target) => {
+  const selectCellRange = (source: string, target: string) => {
     cellSelection.set({
       active: false,
       sourceCellId: source,
@@ -305,7 +339,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     focusedRowId,
     previousFocusedRowId,
@@ -332,7 +366,7 @@ export const initialise = context => {
     const $focusedRowId = get(focusedRowId)
     const $selectedRows = get(selectedRows)
     const $hoveredRowId = get(hoveredRowId)
-    const hasRow = id => $rowLookupMap[id] != null
+    const hasRow = (id: string) => $rowLookupMap[id] != null
 
     // Check focused cell
     if ($focusedRowId && !hasRow($focusedRowId)) {
@@ -362,13 +396,13 @@ export const initialise = context => {
   })
 
   // Remember the last focused row ID so that we can store the previous one
-  let lastFocusedRowId = null
+  let lastFocusedRowId: string | null = null
   focusedRowId.subscribe(id => {
     previousFocusedRowId.set(lastFocusedRowId)
     lastFocusedRowId = id
   })
 
-  let lastFocusedCellId = null
+  let lastFocusedCellId: string | null = null
   focusedCellId.subscribe(id => {
     // Remember the last focused cell ID so that we can store the previous one
     previousFocusedCellId.set(lastFocusedCellId)

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

@@ -16,4 +16,6 @@ export type UIColumn = FieldSchema & {
     autocolumn: boolean
   }
   calculationType: CalculationType
+  __idx?: number
+  __left?: number
 }

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

@@ -2,6 +2,7 @@ import { UITable, UIView } from "@budibase/types"
 
 export type UIDatasource = (UITable | UIView) & {
   type: string
+  rowHeight?: number
 }
 
 export interface UIFieldMutation {