Merge pull request #15339 from Budibase/ts/grid-libs

Convert grid libs to typescript

packages/frontend-core/src/components/grid/lib/renderers.ts

@@ -1,4 +1,4 @@
-import { FieldType } from "@budibase/types"
+import { FieldType, UIColumn } from "@budibase/types"
 
 import OptionsCell from "../cells/OptionsCell.svelte"
 import DateCell from "../cells/DateCell.svelte"
@@ -40,13 +40,23 @@ const TypeComponentMap = {
   // Custom types for UI only
   role: RoleCell,
 }
-export const getCellRenderer = column => {
+
+function getCellRendererByType(type: FieldType | "role" | undefined) {
+  if (!type) {
+    return
+  }
+
+  return TypeComponentMap[type as keyof typeof TypeComponentMap]
+}
+
+export const getCellRenderer = (column: UIColumn) => {
   if (column.calculationType) {
     return NumberCell
   }
+
   return (
-    TypeComponentMap[column?.schema?.cellRenderType] ||
-    TypeComponentMap[column?.schema?.type] ||
+    getCellRendererByType(column.schema?.cellRenderType) ||
+    getCellRendererByType(column.schema?.type) ||
     TextCell
   )
 }

packages/frontend-core/src/components/grid/lib/utils.js

@@ -1,32 +0,0 @@
-// TODO: remove when all stores are typed
-
-import { GeneratedIDPrefix, CellIDSeparator } from "./constants"
-import { Helpers } from "@budibase/bbui"
-
-export const parseCellID = cellId => {
-  if (!cellId) {
-    return { rowId: undefined, field: undefined }
-  }
-  const parts = cellId.split(CellIDSeparator)
-  const field = parts.pop()
-  return { rowId: parts.join(CellIDSeparator), field }
-}
-
-export const getCellID = (rowId, fieldName) => {
-  return `${rowId}${CellIDSeparator}${fieldName}`
-}
-
-export const parseEventLocation = e => {
-  return {
-    x: e.clientX ?? e.touches?.[0]?.clientX,
-    y: e.clientY ?? e.touches?.[0]?.clientY,
-  }
-}
-
-export const generateRowID = () => {
-  return `${GeneratedIDPrefix}${Helpers.uuid()}`
-}
-
-export const isGeneratedRowID = id => {
-  return id?.startsWith(GeneratedIDPrefix)
-}

packages/frontend-core/src/components/grid/lib/websocket.ts

@@ -1,12 +1,14 @@
 import { get } from "svelte/store"
 import { createWebsocket } from "../../../utils"
 import { SocketEvent, GridSocketEvent } from "@budibase/shared-core"
+import { Store } from "../stores"
+import { UIDatasource, UIUser } from "@budibase/types"
 
-export const createGridWebsocket = context => {
+export const createGridWebsocket = (context: Store) => {
   const { rows, datasource, users, focusedCellId, definition, API } = context
   const socket = createWebsocket("/socket/grid")
 
-  const connectToDatasource = datasource => {
+  const connectToDatasource = (datasource: UIDatasource) => {
     if (!socket.connected) {
       return
     }
@@ -18,7 +20,7 @@ export const createGridWebsocket = context => {
         datasource,
         appId,
       },
-      ({ users: gridUsers }) => {
+      ({ users: gridUsers }: { users: UIUser[] }) => {
         users.set(gridUsers)
       }
     )
@@ -65,7 +67,7 @@ export const createGridWebsocket = context => {
     GridSocketEvent.DatasourceChange,
     ({ datasource: newDatasource }) => {
       // Listen builder renames, as these aren't handled otherwise
-      if (newDatasource?.name !== get(definition).name) {
+      if (newDatasource?.name !== get(definition)?.name) {
         definition.set(newDatasource)
       }
     }

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

@@ -14,6 +14,7 @@ export type UIColumn = FieldSchema & {
     type: FieldType
     readonly: boolean
     autocolumn: boolean
+    cellRenderType?: FieldType | "role"
   }
   calculationType: CalculationType
   __idx: number