Refactor: keyboard navigation

Refs: #6567
public-ui · Sep 17, 2024 · 2af39fa · 2af39fa
1 parent e8241dd
commit 2af39fa
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 25 deletions.
diff --git a/packages/components/src/components/table-stateless/component.tsx b/packages/components/src/components/table-stateless/component.tsx
@@ -18,7 +18,6 @@ import type {
 	TableStatelessStates,
 } from '../../schema';
 import {
-	Log,
 	validateLabel,
 	validateTableCallbacks,
 	validateTableData,
@@ -145,24 +144,16 @@ export class KolTableStateless implements TableStatelessAPI {
 			const focusedElement = this.tableDivElement?.querySelector(':focus') as HTMLInputElement;
 			let index = this.checkboxRefs.indexOf(focusedElement);
 
-			if (focusedElement && this.checkboxRefs.includes(focusedElement)) {
+			if (index > -1) {
 				event.preventDefault();
 
 				if (event.key === 'ArrowDown') {
 					index = (index + 1) % this.checkboxRefs.length;
-					try {
-						this.checkboxRefs[index].focus();
-					} catch (e) {
-						Log.debug(e);
-					}
+					this.checkboxRefs[index].focus();
 				} else if (event.key === 'ArrowUp') {
 					event.preventDefault();
 					index = (index + this.checkboxRefs.length - 1) % this.checkboxRefs.length;
-					try {
-						this.checkboxRefs[index].focus();
-					} catch (e) {
-						Log.debug(e);
-					}
+					this.checkboxRefs[index].focus();
 				}
 			}
 		}

diff --git a/packages/samples/react/src/components/table/stateful-with-selection.tsx b/packages/samples/react/src/components/table/stateful-with-selection.tsx
@@ -4,6 +4,7 @@ import { KolButton, KolTableStateful, createReactRenderElement } from '@public-u
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
+import { KoliBriTableCell } from '@public-ui/components/src/schema';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -44,8 +45,8 @@ export const TableStatefulWithSelection: FC = () => {
 		};
 	}, [kolTableStatefulRef]);
 
-	const renderButton = (element: HTMLElement) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Button`}></KolButton>);
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
 	};
 
 	return (
@@ -61,11 +62,11 @@ export const TableStatefulWithSelection: FC = () => {
 						[
 							{ key: 'id', label: '#ID', textAlign: 'left' },
 							{ key: 'name', label: 'Name', textAlign: 'left' },
-							{ key: 'action', label: 'Action', textAlign: 'left', render: (element) => renderButton(element) },
+							{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
 						],
 					],
 				}}
-				_data={DATA.map((item) => ({ ...item, action: <KolButton _label={`click ${item.id}`}></KolButton> }))}
+				_data={DATA}
 				_selection={selection}
 				_on={{ onSelectionChange: handleSelectionChangeCallback }}
 				className="block"

diff --git a/packages/samples/react/src/components/table/stateful-with-single-selection.tsx b/packages/samples/react/src/components/table/stateful-with-single-selection.tsx
@@ -4,6 +4,7 @@ import { KolButton, KolTableStateful, createReactRenderElement } from '@public-u
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
+import { KoliBriTableCell } from '@public-ui/components/src/schema';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -46,8 +47,8 @@ export const TableStatefulWithSingleSelection: FC = () => {
 		};
 	}, [kolTableStatefulRef]);
 
-	const renderButton = (element: HTMLElement) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Button`}></KolButton>);
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
 	};
 
 	return (
@@ -63,7 +64,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 						[
 							{ key: 'id', label: '#ID', textAlign: 'left' },
 							{ key: 'name', label: 'Name', textAlign: 'left' },
-							{ key: 'action', label: 'Action', textAlign: 'left', render: (element) => renderButton(element) },
+							{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
 						],
 					],
 				}}

diff --git a/packages/samples/react/src/components/table/stateless-with-selection.tsx b/packages/samples/react/src/components/table/stateless-with-selection.tsx
@@ -4,6 +4,7 @@ import { KolButton, KolTableStateless, createReactRenderElement } from '@public-
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
+import { KoliBriTableCell } from '@public-ui/components/src/schema';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -40,8 +41,8 @@ export const TableStatelessWithSelection: FC = () => {
 		};
 	}, [kolTableStatelessRef]);
 
-	const renderButton = (element: HTMLElement) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Button`}></KolButton>);
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
 	};
 
 	return (
@@ -57,7 +58,7 @@ export const TableStatelessWithSelection: FC = () => {
 						[
 							{ key: 'id', label: '#ID', textAlign: 'left' },
 							{ key: 'name', label: 'Name', textAlign: 'left' },
-							{ key: 'action', label: 'Action', textAlign: 'left', render: (element) => renderButton(element) },
+							{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
 						],
 					],
 				}}

diff --git a/packages/samples/react/src/components/table/stateless-with-single-selection.tsx b/packages/samples/react/src/components/table/stateless-with-single-selection.tsx
@@ -4,6 +4,7 @@ import { KolButton, KolTableStateless, createReactRenderElement } from '@public-
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
+import { KoliBriTableCell } from '@public-ui/components/src/schema';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -41,8 +42,8 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		};
 	}, [kolTableStatelessRef]);
 
-	const renderButton = (element: HTMLElement) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Button`}></KolButton>);
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
 	};
 
 	return (
@@ -58,7 +59,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 						[
 							{ key: 'id', label: '#ID', textAlign: 'left' },
 							{ key: 'name', label: 'Name', textAlign: 'left' },
-							{ key: 'action', label: 'Action', textAlign: 'left', render: (element) => renderButton(element) },
+							{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
 						],
 					],
 				}}