Merge pull request #930 from 3YOURMIND/gather-table-stare-state-types

refact(KtTable): declare table store's state types

packages/kotti-ui/source/kotti-table/KtTable.vue

@@ -39,19 +39,20 @@ import {
 import { KtTableColumn } from './KtTableColumn'
 import { TableStore } from './logic/store'
 import { TableLayout } from './table-layout'
-import type { CreateElement } from 'vue'
+import type { CreateElement, PropType } from 'vue'
+import type { KottiTable } from './types'
 
 let tableIdSeed = 1
 
 export const INITIAL_TABLE_STORE_PROPS = [
-	'rowKey',
-	'sortMultiple',
 	'expandMultiple',
+	'filteredColumns',
+	'hiddenColumns',
 	'remoteSort',
+	'rowKey',
 	'sortable',
 	'sortedColumns',
-	'hiddenColumns',
-	'filteredColumns',
+	'sortMultiple',
 ]
 
 export default {
@@ -80,7 +81,10 @@ export default {
 		emptyText: { default: 'No Data', type: String },
 		id: { default: null, type: String },
 		// FIXME: Props should either be required or have a default
-		rowKey: { required: false, type: [String, Function] },
+		rowKey: {
+			required: false,
+			type: [String, Function] as PropType<KottiTable.RowKey>,
+		},
 		rows: { default: () => [], type: Array },
 		useColumnDragToOrder: { default: false, type: Boolean },
 

packages/kotti-ui/source/kotti-table/logic/column.ts

@@ -10,6 +10,7 @@ import { setFilteredColumn } from './filter'
 import { setHiddenColumn, getResolvedHiddenColumns } from './hide'
 import { resolveColumnsOrder, getOrderedColumns } from './order'
 import { setSortedColumn } from './sort'
+import type { Store } from './types'
 
 export function getColumnRealIndex(state: any, column: any) {
 	return state._columnsArray.findIndex(({ id }: any) => id == column.id)
@@ -101,12 +102,12 @@ function didRestoreDestroyedColumns({
 	)
 }
 
-export const defaultState = {
-	_destroyedColumns: {},
-	refreshColumnArray: true,
+export const defaultState: Store.StateComponents.Column = {
 	_columns: {},
 	_columnsArray: [],
+	_destroyedColumns: {},
 	columns: [],
+	refreshColumnArray: true,
 }
 
 export const mutations = {

packages/kotti-ui/source/kotti-table/logic/disable.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import negate from 'lodash/negate'
+import type { Store } from './types'
 
-export const defaultState = {
+export const defaultState: Store.StateComponents.Disable = {
 	enabledRows: [],
 	isAllRowsDisabled: false,
 }

packages/kotti-ui/source/kotti-table/logic/expand.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import isEqual from 'lodash/isEqual'
+import type { Store } from './types'
 
-export const defaultState = {
+export const defaultState: Store.StateComponents.Expand = {
 	expandMultiple: false,
 	expanded: [],
 }

packages/kotti-ui/source/kotti-table/logic/filter.ts

@@ -1,14 +1,15 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { setColumnsArray } from './column'
+import type { Store } from './types'
 
 function getFilteredColumnIndex(state: any, column: any) {
 	return state.filteredColumns.findIndex(
 		({ prop }: any) => prop === column.prop,
 	)
 }
 
-export const defaultState = {
+export const defaultState: Store.StateComponents.Filter = {
 	filteredColumns: [],
 }
 

packages/kotti-ui/source/kotti-table/logic/hide.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { setColumnsArray } from './column'
+import type { Store } from './types'
 
 function getHiddenColumnIndex(state: any, column: any) {
 	return state.hiddenColumns.findIndex(({ prop }: any) => prop === column.prop)
@@ -26,7 +27,7 @@ export function setHiddenColumn(state: any, column: any) {
 	}
 }
 
-export const defaultState = {
+export const defaultState: Store.StateComponents.Hide = {
 	hiddenColumns: [],
 }
 

packages/kotti-ui/source/kotti-table/logic/order.ts

@@ -3,6 +3,7 @@
 import pick from 'lodash/pick'
 
 import { setColumnsArray, getColumnIndex, getColumnRealIndex } from './column'
+import type { Store } from './types'
 
 function byOrder(a: any, b: any) {
 	return a.order < b.order
@@ -48,7 +49,7 @@ export function resolveColumnsOrder({
 		})
 }
 
-export const defaultState = {
+export const defaultState: Store.StateComponents.Order = {
 	orderedColumns: [],
 }
 

packages/kotti-ui/source/kotti-table/logic/row.ts

@@ -2,8 +2,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { updateAllSelected, cleanSelection, clearSelection } from './select'
 import { sortData } from './sort'
+import type { Store } from './types'
 
-export const defaultState = {
+export const defaultState: Store.StateComponents.Row = {
 	_data: [],
 	filteredData: null,
 	focusedRow: null,

packages/kotti-ui/source/kotti-table/logic/select.ts

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import debounce from 'lodash/debounce'
 import isEqual from 'lodash/isEqual'
+import type { Store } from './types'
 
 function toggleRowSelection(state: any, row: any, selected: any) {
 	let changed = false
@@ -64,10 +65,10 @@ export function clearSelection(store: any) {
 	}
 }
 
-export const defaultState = {
-	selection: [],
+export const defaultState: Store.StateComponents.Select = {
 	isAllSelected: false,
 	reserveSelection: false,
+	selection: [],
 }
 
 export const mutations = {

packages/kotti-ui/source/kotti-table/logic/sort.ts

@@ -9,6 +9,7 @@ import { IS_ASC, IS_DSC, PUBLIC_SORT_PROPS } from '../constants'
 import { KottiTable } from '../types'
 
 import { setColumnsArray } from './column'
+import type { Store } from './types'
 
 function getSortedColumnIndex(state: any, column: any) {
 	return state.sortedColumns.findIndex(({ prop }: any) => prop === column.prop)
@@ -113,11 +114,11 @@ export function sortData(data: any, state: any) {
 	return orderBy(data, state.sortedColumns)
 }
 
-export const defaultState = {
-	sortMultiple: false,
+export const defaultState: Store.StateComponents.Sort = {
 	remoteSort: false,
 	sortable: false,
 	sortedColumns: [],
+	sortMultiple: false,
 }
 
 export const mutations = {

packages/kotti-ui/source/kotti-table/logic/store.ts

@@ -14,15 +14,16 @@ import * as order from './order'
 import * as rows from './row'
 import * as select from './select'
 import * as sort from './sort'
+import type { Store } from './types'
 
 export class TableStore {
 	getters: any
 	mutations: any
-	state: any
+	state: Store.State
 	table: any
 	id: string | undefined
 
-	constructor(table: any, initialState: any = {}) {
+	constructor(table: any, initialState: Partial<Store.State> = {}) {
 		this.setTable(table)
 		// we deep clone initial state in order to not refer to the same objects
 		this.state = cloneDeep({
@@ -67,7 +68,7 @@ export class TableStore {
 		// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
 		this.id = table.tableId + '_store'
 	}
-	setInitialState(initialState: any) {
+	setInitialState(initialState: Partial<Store.State>) {
 		this.state = cloneDeep({
 			...this.state,
 			...pickBy(initialState, negate(isUndefined)),

packages/kotti-ui/source/kotti-table/logic/types.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { Kotti } from '../../types'
+
+export module Store {
+	export module StateComponents {
+		export type Column = {
+			_columns: any
+			_columnsArray: any
+			_destroyedColumns: Record<string, number>
+			columns: any
+			refreshColumnArray: boolean
+		}
+
+		export type Disable = {
+			enabledRows: any
+			isAllRowsDisabled: boolean
+		}
+
+		export type Expand = {
+			expanded: any
+			expandMultiple: boolean
+		}
+
+		export type Filter = {
+			filteredColumns: any
+		}
+
+		export type Hide = {
+			hiddenColumns: any
+		}
+
+		export type Order = {
+			orderedColumns: any
+		}
+
+		export type Row = {
+			_data: any
+			filteredData: any
+			focusedRow: any
+			rows: any
+		}
+
+		export type Select = {
+			isAllSelected: boolean
+			reserveSelection: boolean
+			selection: any
+		}
+
+		export type Sort = {
+			remoteSort: boolean
+			sortable: boolean | string
+			sortedColumns: any
+			sortMultiple: boolean
+		}
+	}
+
+	export type State = StateComponents.Column &
+		StateComponents.Disable &
+		StateComponents.Expand &
+		StateComponents.Filter &
+		StateComponents.Hide &
+		StateComponents.Order &
+		StateComponents.Row &
+		StateComponents.Select &
+		StateComponents.Sort & {
+			/**
+			 * This is passed to state exclusively via `setInitialState` and thus is not defined
+			 * in any of the above objects.
+			 *
+			 * Note: rowKey is right now not a required prop of KtTable, but from what I can see
+			 * the store either depends on its existence or at least has better performance if
+			 * it exists.
+			 *
+			 * TODO: investigate if rowKey should be a required prop.
+			 */
+			rowKey?: Kotti.Table.RowKey
+		}
+}

packages/kotti-ui/source/kotti-table/types.ts

@@ -136,6 +136,8 @@ export module KottiTable {
 		}
 	}
 
+	export type RowKey = string | ((row: Row.Props) => string | number)
+
 	export type Props = {
 		columns: Column.Props[] | null
 		emptyText: string