@budibase/frontend-core 3.2.29 → 3.2.31

package/src/components/grid/stores/{filter.js → filter.ts}

@@ -1,12 +1,32 @@
-import { get, derived } from "svelte/store"
-import { FieldType, UILogicalOperator } from "@budibase/types"
+import { get, derived, Writable, Readable } from "svelte/store"
+import {
+  ArrayOperator,
+  BasicOperator,
+  FieldType,
+  UIColumn,
+  UILegacyFilter,
+  UILogicalOperator,
+  UISearchFilter,
+} from "@budibase/types"
+import { Store as StoreContext } from "."
 import { memo } from "../../../utils/memo"
 
-export const createStores = context => {
+export interface FilterStore {
+  filter: Writable<UISearchFilter | undefined>
+  inlineFilters: Writable<UILegacyFilter[]>
+}
+
+export interface FilterDerivedStore {
+  allFilters: Readable<UISearchFilter | undefined>
+}
+
+export type Store = FilterStore & FilterDerivedStore
+
+export const createStores = (context: StoreContext): FilterStore => {
   const { props } = context
 
   // Initialise to default props
-  const filter = memo(get(props).initialFilter)
+  const filter = memo(get(props).initialFilter ?? undefined)
   const inlineFilters = memo([])
 
   return {
@@ -15,7 +35,7 @@ export const createStores = context => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): FilterDerivedStore => {
   const { filter, inlineFilters } = context
   const allFilters = derived(
     [filter, inlineFilters],
@@ -24,7 +44,7 @@ export const deriveStores = context => {
       if (!$inlineFilters?.length) {
         return $filter
       }
-      let allFilters = {
+      const allFilters: UISearchFilter = {
         logicalOperator: UILogicalOperator.ALL,
         groups: [
           {
@@ -33,12 +53,13 @@ export const deriveStores = context => {
           },
         ],
       }
+
       // Just use inline if no filter
       if (!$filter?.groups?.length) {
         return allFilters
       }
       // Join them together if both
-      allFilters.groups = [...allFilters.groups, ...$filter.groups]
+      allFilters.groups = [...allFilters.groups!, ...$filter.groups]
       return allFilters
     }
   )
@@ -48,16 +69,16 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const { filter, inlineFilters } = context
 
-  const addInlineFilter = (column, value) => {
+  const addInlineFilter = (column: UIColumn, value: string) => {
     const filterId = `inline-${column.name}`
     const type = column.schema.type
-    let inlineFilter = {
+    const inlineFilter: UILegacyFilter = {
       field: column.name,
       id: filterId,
-      operator: "string",
+      operator: BasicOperator.STRING,
       valueType: "value",
       type,
       value,
@@ -66,11 +87,11 @@ export const createActions = context => {
     // Add overrides specific so the certain column type
     if (type === FieldType.NUMBER) {
       inlineFilter.value = parseFloat(value)
-      inlineFilter.operator = "equal"
+      inlineFilter.operator = BasicOperator.EQUAL
     } else if (type === FieldType.BIGINT) {
-      inlineFilter.operator = "equal"
+      inlineFilter.operator = BasicOperator.EQUAL
     } else if (type === FieldType.ARRAY) {
-      inlineFilter.operator = "contains"
+      inlineFilter.operator = ArrayOperator.CONTAINS
     }
 
     inlineFilters.update($inlineFilters => {
@@ -95,9 +116,11 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { filter, initialFilter } = context
 
   // Reset filter when initial filter prop changes
-  initialFilter.subscribe(filter.set)
+  initialFilter.subscribe($initialFilter =>
+    filter.set($initialFilter ?? undefined)
+  )
 }

package/src/components/grid/stores/index.ts

@@ -0,0 +1,143 @@
+import { Writable } from "svelte/store"
+import type { APIClient } from "../../../api/types"
+
+import * as Bounds from "./bounds"
+import * as Columns from "./columns"
+import * as Menu from "./menu"
+import * as Pagination from "./pagination"
+import * as Reorder from "./reorder"
+import * as Resize from "./resize"
+import * as Rows from "./rows"
+import * as Scroll from "./scroll"
+import * as UI from "./ui"
+import * as Users from "./users"
+import * as Validation from "./validation"
+import * as Viewport from "./viewport"
+import * as Clipboard from "./clipboard"
+import * as Config from "./config"
+import * as Sort from "./sort"
+import * as Filter from "./filter"
+import * as Notifications from "./notifications"
+import * as Datasource from "./datasource"
+import * as Table from "./datasources/table"
+import * as ViewV2 from "./datasources/viewV2"
+import * as NonPlus from "./datasources/nonPlus"
+import * as Cache from "./cache"
+import * as Conditions from "./conditions"
+import { SortOrder, UIDatasource, UISearchFilter } from "@budibase/types"
+import * as Constants from "../lib/constants"
+
+const DependencyOrderedStores = [
+  Sort,
+  Filter,
+  Bounds,
+  Table,
+  ViewV2,
+  NonPlus,
+  Datasource,
+  Columns,
+  Scroll,
+  Validation,
+  Rows,
+  Conditions,
+  UI,
+  Resize,
+  Viewport,
+  Reorder,
+  Users,
+  Menu,
+  Pagination,
+  Config as any,
+  Clipboard,
+  Notifications,
+  Cache,
+]
+
+export interface BaseStoreProps {
+  datasource: UIDatasource
+  initialSortColumn: string | null
+  initialSortOrder: SortOrder | null
+  initialFilter: UISearchFilter | null
+  fixedRowHeight: number | null
+  schemaOverrides: Record<
+    string,
+    {
+      displayName?: string
+      disabled?: boolean
+    }
+  > | null
+  notifySuccess: (message: string) => void
+  notifyError: (message: string) => void
+  canAddRows?: boolean
+  canEditRows?: boolean
+  canDeleteRows?: boolean
+  canEditColumns?: boolean
+  canExpandRows?: boolean
+  canSaveSchema?: boolean
+  minHeight?: number
+}
+
+export interface BaseStore {
+  API: APIClient
+  gridID: string
+  props: Writable<BaseStoreProps>
+  subscribe: any
+  dispatch: (event: string, data: any) => any
+  Constants: typeof Constants
+}
+
+export type Store = BaseStore &
+  Columns.Store &
+  Table.Store &
+  ViewV2.Store &
+  NonPlus.Store &
+  Datasource.Store &
+  Validation.Store &
+  Users.Store &
+  Menu.Store &
+  Filter.Store &
+  UI.Store &
+  Clipboard.Store &
+  Scroll.Store &
+  Rows.Store &
+  Reorder.Store &
+  Resize.Store &
+  Config.Store &
+  Conditions.Store &
+  Cache.Store &
+  Viewport.Store &
+  Notifications.Store &
+  Sort.Store &
+  Bounds.Store
+
+export const attachStores = (context: BaseStore): Store => {
+  // Atomic store creation
+  for (let store of DependencyOrderedStores) {
+    if ("createStores" in store) {
+      context = { ...context, ...store.createStores?.(context) }
+    }
+  }
+
+  // Derived store creation
+  for (let store of DependencyOrderedStores) {
+    if ("deriveStores" in store) {
+      context = { ...context, ...store.deriveStores?.(context) }
+    }
+  }
+
+  // Action creation
+  for (let store of DependencyOrderedStores) {
+    if ("createActions" in store) {
+      context = { ...context, ...store.createActions?.(context) }
+    }
+  }
+
+  // Initialise any store logic
+  for (let store of DependencyOrderedStores) {
+    if ("initialise" in store) {
+      store.initialise?.(context)
+    }
+  }
+
+  return context as Store
+}

package/src/components/grid/stores/{menu.js → menu.ts}

@@ -1,8 +1,33 @@
-import { writable, get } from "svelte/store"
+import { writable, get, Writable } from "svelte/store"
+
+import { Store as StoreContext } from "."
 import { parseCellID } from "../lib/utils"
 
+interface MenuStoreData {
+  left: number
+  top: number
+  visible: boolean
+  multiRowMode: boolean
+  multiCellMode: boolean
+}
+
+interface MenuStore {
+  menu: Writable<MenuStoreData>
+}
+
+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({
+  const menu = writable<MenuStoreData>({
     left: 0,
     top: 0,
     visible: false,
@@ -14,7 +39,7 @@ export const createStores = () => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): MenuActions => {
   const {
     menu,
     focusedCellId,
@@ -25,7 +50,7 @@ export const createActions = context => {
     selectedCellCount,
   } = context
 
-  const open = (cellId, e) => {
+  const open = (cellId: string, e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
 
@@ -37,14 +62,14 @@ export const createActions = context => {
     }
 
     // Compute bounds of cell relative to outer data node
-    const targetBounds = e.target.getBoundingClientRect()
+    const targetBounds = (e.target as HTMLElement).getBoundingClientRect()
     const dataBounds = dataNode.getBoundingClientRect()
 
     // Check if there are multiple rows selected, and if this is one of them
     let multiRowMode = false
     if (get(selectedRowCount) > 1) {
       const { rowId } = parseCellID(cellId)
-      if (get(selectedRows)[rowId]) {
+      if (rowId !== undefined && get(selectedRows)[rowId]) {
         multiRowMode = true
       }
     }

package/src/components/grid/stores/{notifications.js → notifications.ts}

@@ -1,7 +1,17 @@
 import { notifications as BBUINotifications } from "@budibase/bbui"
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
+import { Store as StoreContext } from "."
 
-export const createStores = context => {
+interface NotificationStore {
+  notifications: Readable<{
+    success: (message: string) => void
+    error: (message: string) => void
+  }>
+}
+
+export type Store = NotificationStore
+
+export const createStores = (context: StoreContext): NotificationStore => {
   const { notifySuccess, notifyError } = context
 
   // Normally we would not derive a store in "createStores" as it should be

package/src/components/grid/stores/{pagination.js → pagination.ts}

@@ -1,6 +1,7 @@
 import { derived } from "svelte/store"
+import { Store as StoreContext } from "."
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { scrolledRowCount, rows, visualRowCapacity } = context
 
   // Derive how many rows we have in total

package/src/components/grid/stores/{reorder.js → reorder.ts}

@@ -1,7 +1,24 @@
-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 Breakpoint {
+  x: number
+  column: string
+  insertAfter: boolean
+}
+
+interface ReorderInitialStoreData {
+  sourceColumn: string | null
+  targetColumn: string | null
+  insertAfter?: boolean
+  breakpoints: Breakpoint[]
+  gridLeft: number
+  width: number
+  increment?: number
+}
+
+const reorderInitialState: ReorderInitialStoreData = {
   sourceColumn: null,
   targetColumn: null,
   insertAfter: false,
@@ -11,7 +28,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 +48,7 @@ export const createStores = () => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const {
     reorder,
     columns,
@@ -40,11 +64,11 @@ export const createActions = context => {
     maxScrollLeft,
   } = context
   let latestX = 0
-  let autoScrollInterval
-  let isAutoScrolling
+  let autoScrollInterval: NodeJS.Timeout
+  let isAutoScrolling: boolean
 
   // Callback when dragging on a colum header and starting reordering
-  const startReordering = (column, e) => {
+  const startReordering = (column: string, e: MouseEvent | TouchEvent) => {
     const $scrollableColumns = get(scrollableColumns)
     const $bounds = get(bounds)
     const $stickyWidth = get(stickyWidth)
@@ -87,7 +111,7 @@ 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)
     latestX = x
@@ -122,7 +146,7 @@ export const createActions = context => {
     const $scrollLeft = get(scrollLeft)
 
     // Compute the closest breakpoint to the current position
-    let breakpoint
+    let breakpoint: Breakpoint | undefined
     let minDistance = Number.MAX_SAFE_INTEGER
     const mouseX = latestX - $reorder.gridLeft + $scrollLeft
     $reorder.breakpoints.forEach(point => {
@@ -139,8 +163,8 @@ export const createActions = context => {
     ) {
       reorder.update(state => ({
         ...state,
-        targetColumn: breakpoint.column,
-        insertAfter: breakpoint.insertAfter,
+        targetColumn: breakpoint!.column,
+        insertAfter: breakpoint!.insertAfter,
       }))
     }
   }
@@ -157,7 +181,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)
@@ -185,7 +209,11 @@ export const createActions = context => {
     const { sourceColumn, targetColumn, insertAfter } = get(reorder)
     reorder.set(reorderInitialState)
     if (sourceColumn !== targetColumn) {
-      await moveColumn({ sourceColumn, targetColumn, insertAfter })
+      await moveColumn({
+        sourceColumn: sourceColumn!,
+        targetColumn: targetColumn!,
+        insertAfter,
+      })
     }
   }
 
@@ -195,6 +223,10 @@ export const createActions = context => {
     sourceColumn,
     targetColumn,
     insertAfter = false,
+  }: {
+    sourceColumn: string
+    targetColumn: string
+    insertAfter?: boolean
   }) => {
     // Find the indices in the overall columns array
     const $columns = get(columns)
@@ -232,7 +264,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 +275,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

package/src/components/grid/stores/{resize.js → resize.ts}

@@ -1,8 +1,19 @@
-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,
@@ -10,7 +21,14 @@ const initialState = {
   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,
     })