Merge pull request #978 from 3YOURMIND/refact-table-body-to-compositi…

…on-api refactor(KtTable): use Composition API in TableBody component
3YOURMIND · Jul 25, 2024 · be09cd3 · be09cd3
2 parents b8fe397 + 2fa0a36
commit be09cd3
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 50 deletions.
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBody.ts b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement } from 'vue'
+import { computed, defineComponent, h, inject } from 'vue'
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
 
 import { TableBodyEmptyRow } from './TableBodyEmptyRow'
@@ -8,61 +8,54 @@ import { TableBodyLoadingRow } from './TableBodyLoadingRow'
 import { TableRow } from './TableRow'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableBody: any = {
+export const TableBody = defineComponent({
 	name: 'TableBody',
 	components: { TableRow },
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	computed: {
-		rows(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].state.rows
-		},
-		loading(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].loading
-		},
-		showEmptyText(): unknown {
-			return this.rows.length === 0 && !this.loading
-		},
-		isExpandable(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].isExpandable
-		},
-	},
-	methods: {
-		getRowKey(row: unknown): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('getRowKey', row)
-		},
-	},
-	render(h: CreateElement) {
-		const { showEmptyText, loading, rows, isExpandable, getRowKey } = this
-		return h('tbody', {}, [
-			showEmptyText && h(TableBodyEmptyRow),
-			...(loading
-				? [h(TableBodyLoadingRow)]
-				: rows.flatMap((row: any, rowIndex: number) => {
-						const key = getRowKey(row) || rowIndex
+	setup() {
+		const tableState = inject(KT_TABLE)
+		const tableStore = inject(KT_STORE)
+		const tableLayout = inject(KT_LAYOUT)
+
+		if (!tableState || !tableStore || !tableLayout)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const rows = computed(() => tableStore.state.rows)
+		const loading = computed(() => tableState.loading)
+		const isExpandable = computed(() => tableState.isExpandable)
+		const showEmptyText = computed(
+			() => rows.value.length === 0 && !loading.value,
+		)
+
+		const getRowKey = (row: unknown) => tableStore.get('getRowKey', row)
+
+		return () =>
+			h('tbody', {}, [
+				showEmptyText.value && h(TableBodyEmptyRow),
+				...(loading.value
+					? [h(TableBodyLoadingRow)]
+					: rows.value.flatMap((row: any, rowIndex: number) => {
+							const key = getRowKey(row) || rowIndex
 
-						return [
-							h(TableRow, {
-								key,
-								props: {
-									row,
-									rowIndex,
-								},
-							}),
-							isExpandable &&
-								h(TableBodyExpandRow, {
-									// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-									key: `${key}-expansion`,
+							return [
+								h(TableRow, {
+									key,
 									props: {
 										row,
 										rowIndex,
 									},
 								}),
-						]
-					})),
-		])
+								isExpandable.value &&
+									h(TableBodyExpandRow, {
+										key: `${key}-expansion`,
+										props: {
+											row,
+											rowIndex,
+										},
+									}),
+							]
+						})),
+			])
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -47,6 +47,7 @@ interface KottiTableContext {
 	headerClass: string | string[] | Record<string, unknown> | null
 	isExpandable: boolean
 	isSelectable: boolean
+	loading: boolean
 	tdClasses: string | string[] | Record<string, unknown> | null
 	thClasses: string | string[] | Record<string, unknown> | null
 	useColumnDragToOrder: boolean