fix(Table): removed needless context

N00nDay · Feb 5, 2023 · af36615 · af36615
1 parent e875a33
commit af36615
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 64 deletions.
diff --git a/src/lib/components/table/Body.svelte b/src/lib/components/table/Body.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { TABLE_CONTEXT_ID } from './Table.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
@@ -12,12 +10,7 @@
 
 	export let id = 'table-body';
 
-	useContext({
-		context_id: TABLE_CONTEXT_ID,
-		parent: 'Table',
-		component: 'Table.Body'
-	});
-	let { header }: { header: Writable<boolean> } = getContext(TABLE_CONTEXT_ID);
+	const header: Writable<boolean> = getContext('table-header');
 
 	let headerHeight = $header ? 61 : 0;
 

diff --git a/src/lib/components/table/Cell.svelte b/src/lib/components/table/Cell.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { TABLE_CONTEXT_ID } from './Table.svelte';
 	import { getContext } from 'svelte';
 	import type { TableColumn } from '../../types/table-column';
 	import { twMerge } from 'tailwind-merge';
@@ -11,7 +10,7 @@
 
 	export let column: number;
 
-	let { columns }: { columns: TableColumn[] } = getContext(TABLE_CONTEXT_ID);
+	const columns: TableColumn[] = getContext('table-columns');
 	$: columnWidth = 100 / columns.length;
 
 	let defaultClass =

diff --git a/src/lib/components/table/Footer.svelte b/src/lib/components/table/Footer.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { TABLE_CONTEXT_ID } from './Table.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
@@ -10,12 +8,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	useContext({
-		context_id: TABLE_CONTEXT_ID,
-		parent: 'Table',
-		component: 'TableFooter'
-	});
-	let { footer }: { footer: Writable<boolean> } = getContext(TABLE_CONTEXT_ID);
+	const footer: Writable<boolean> = getContext('table-footer');
 	footer.set(true);
 
 	const defaultClass =

diff --git a/src/lib/components/table/Header.svelte b/src/lib/components/table/Header.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { TABLE_CONTEXT_ID } from './Table.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import HeaderRow from './HeaderRow.svelte';
 	import type { Writable } from 'svelte/store';
@@ -16,13 +14,8 @@
 	export let order: 'asc' | 'desc' = 'asc';
 	export let onColumnHeaderClick: ((column: string) => void) | undefined = undefined;
 
-	useContext({
-		context_id: TABLE_CONTEXT_ID,
-		parent: 'Table',
-		component: 'Table.Header'
-	});
-	let { header, columns }: { header: Writable<boolean>; columns: TableColumn[] } =
-		getContext(TABLE_CONTEXT_ID);
+	const header: Writable<boolean> = getContext('table-header');
+	const columns: TableColumn[] = getContext('table-columns');
 	header.set(true);
 
 	const defaultClass =

diff --git a/src/lib/components/table/HeaderRow.svelte b/src/lib/components/table/HeaderRow.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
-	// import { goto } from '$app/navigation';
-	// import { page } from '$app/stores';
 	import { sort } from '$lib/icons';
 	import { twMerge } from 'tailwind-merge';
-
 	import type { TableColumn } from '../../types/table-column';
 	import Icon from '../icon';
-
 	export let column: TableColumn;
 	export let columnCount: number;
-	// export let sortable = true;
 
 	export let orderBy: string;
 	export let order: 'asc' | 'desc' = 'asc';
@@ -22,28 +17,6 @@
 			onColumnHeaderClick(column.column);
 		}
 	}
-	// $: baseRoute = $page.url.pathname;
-	// $: orderBy = $page.url.searchParams.get('orderBy');
-	// $: order = $page.url.searchParams.get('order');
-
-	// async function changeOrder() {
-	// 	try {
-	// 		if (sortable) {
-	// 			const route =
-	// 				`${baseRoute}?` +
-	// 				new URLSearchParams({
-	// 					orderBy: column.column,
-	// 					order: column.column === orderBy && order === 'asc' ? 'desc' : 'asc',
-	// 					page: '1'
-	// 				});
-
-	// 			goto(route);
-	// 		}
-	// 		return;
-	// 	} catch (err) {
-	// 		console.log('changeOrder err', err);
-	// 	}
-	// }
 
 	const defaultClass =
 		'sticky top-0 py-4 last:hover:active last:focus:active last:active:active first:pl-4 last:pl-3 last:pr-4 last:sm:pr-6 text-sm sm:pl-6';

diff --git a/src/lib/components/table/Table.svelte b/src/lib/components/table/Table.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export const TABLE_CONTEXT_ID = 'table-context-id';
-</script>
-
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import { setContext } from 'svelte';
@@ -18,12 +14,9 @@
 	let header = writable(false);
 	let footer = writable(false);
 
-	setContext(TABLE_CONTEXT_ID, {
-		table: true,
-		columns,
-		header,
-		footer
-	});
+	setContext('table-columns', columns);
+	setContext('table-header', header);
+	setContext('table-footer', footer);
 
 	const defaultClass = 'bg-light-surface dark:bg-dark-surface';
 	$: finalClass = twMerge(defaultClass, $$props.class);