From 1f957421d687f8d5d5ddf3ef12e6430f2c258ba1 Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Fri, 27 Dec 2024 08:40:37 +0100 Subject: [PATCH] Initial ui conversion --- .../src/components/grid/stores/index.ts | 12 ++-- .../src/components/grid/stores/menu.ts | 13 +++- .../components/grid/stores/{ui.js => ui.ts} | 68 ++++++++++++++----- packages/types/src/ui/stores/grid/columns.ts | 2 + .../types/src/ui/stores/grid/datasource.ts | 1 + 5 files changed, 70 insertions(+), 26 deletions(-) rename packages/frontend-core/src/components/grid/stores/{ui.js => ui.ts} (85%) diff --git a/packages/frontend-core/src/components/grid/stores/index.ts b/packages/frontend-core/src/components/grid/stores/index.ts index 659f45d56a..81e0e824b0 100644 --- a/packages/frontend-core/src/components/grid/stores/index.ts +++ b/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 sort: Writable @@ -77,14 +78,11 @@ export type Store = BaseStore & dispatch: (event: string, data: any) => any notifications: Writable schemaOverrides: Writable - focusedCellId: Writable - previousFocusedRowId: Writable gridID: string - selectedRows: Writable - selectedRowCount: Writable - selectedCellMap: Writable - selectedCellCount: Writable props: Writable + rowLookupMap: Writable + width: Writable + fixedRowHeight: Writable } export const attachStores = (context: Store): Store => { diff --git a/packages/frontend-core/src/components/grid/stores/menu.ts b/packages/frontend-core/src/components/grid/stores/menu.ts index 27e41c412b..77ce2c6667 100644 --- a/packages/frontend-core/src/components/grid/stores/menu.ts +++ b/packages/frontend-core/src/components/grid/stores/menu.ts @@ -15,7 +15,16 @@ interface MenuStore { menu: Writable } -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({ @@ -30,7 +39,7 @@ export const createStores = () => { } } -export const createActions = (context: StoreContext) => { +export const createActions = (context: StoreContext): MenuActions => { const { menu, focusedCellId, diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.ts similarity index 85% rename from packages/frontend-core/src/components/grid/stores/ui.js rename to packages/frontend-core/src/components/grid/stores/ui.ts index 7f39116b05..33bf8d40aa 100644 --- a/packages/frontend-core/src/components/grid/stores/ui.js +++ b/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 + focusedCellAPI: Writable + selectedRows: Writable + hoveredRowId: Writable + rowHeight: Writable + previousFocusedRowId: Writable + previousFocusedCellId: Writable + gridFocused: Writable + keyboardBlocked: Writable + isDragging: Writable + buttonColumnWidth: Writable + cellSelection: Writable<{ + active: boolean + sourceCellId: string | null + targetCellId: string | null + }> +} + +export interface UIDerivedStore { + focusedRowId: Writable + focusedRow: Writable + contentLines: Writable + compact: Writable + selectedRowCount: Writable + isSelectingCells: Writable + selectedCells: Writable & { actions: any } + selectedCellMap: Writable + selectedCellCount: Writable +} + +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 = {} 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) diff --git a/packages/types/src/ui/stores/grid/columns.ts b/packages/types/src/ui/stores/grid/columns.ts index a8be3b21b4..5f02efa8cb 100644 --- a/packages/types/src/ui/stores/grid/columns.ts +++ b/packages/types/src/ui/stores/grid/columns.ts @@ -16,4 +16,6 @@ export type UIColumn = FieldSchema & { autocolumn: boolean } calculationType: CalculationType + __idx?: number + __left?: number } diff --git a/packages/types/src/ui/stores/grid/datasource.ts b/packages/types/src/ui/stores/grid/datasource.ts index 1d9b6740a4..b1231ab4b3 100644 --- a/packages/types/src/ui/stores/grid/datasource.ts +++ b/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 {