From 3b8225dedeb0ae170db96e119302a9454c4f87b9 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Fri, 6 Sep 2024 11:14:05 +0200 Subject: [PATCH 1/2] Table stateless selection samples: Remove redundant state update Refs: #6682 --- .../react/src/components/table/stateless-with-selection.tsx | 1 - .../src/components/table/stateless-with-single-selection.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/samples/react/src/components/table/stateless-with-selection.tsx b/packages/samples/react/src/components/table/stateless-with-selection.tsx index 09ab809422..64c332d632 100644 --- a/packages/samples/react/src/components/table/stateless-with-selection.tsx +++ b/packages/samples/react/src/components/table/stateless-with-selection.tsx @@ -23,7 +23,6 @@ export const TableStatelessWithSelection: FC = () => { const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => { console.log('Selection change via event', selection); - setSelectedKeys(selection); }; const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => { console.log('Selection change via callback', selection); 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 index 9b475d74c8..ca0ba1ac11 100644 --- a/packages/samples/react/src/components/table/stateless-with-single-selection.tsx +++ b/packages/samples/react/src/components/table/stateless-with-single-selection.tsx @@ -24,7 +24,6 @@ export const TableStatelessWithSingleSelection: FC = () => { const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => { console.log('Selection change via event', selection); - setSelectedKeys(selection); }; const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => { console.log('Selection change via callback', selection); From f8252a2bb67fc7ca4ebeca2d0bd1d6ea9e72296d Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Fri, 6 Sep 2024 11:14:53 +0200 Subject: [PATCH 2/2] Table stateless selection: Support key property that's not part of the table headers Also update samples to use an internal (not visible) ID for selection. Refs: #6682 --- .../src/components/table-stateless/component.tsx | 8 ++++---- .../src/components/table/stateful-with-selection.tsx | 8 ++++---- .../components/table/stateful-with-single-selection.tsx | 8 ++++---- .../src/components/table/stateless-with-selection.tsx | 8 ++++---- .../components/table/stateless-with-single-selection.tsx | 6 +++--- 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/components/src/components/table-stateless/component.tsx b/packages/components/src/components/table-stateless/component.tsx index 776b77b7d4..e717eb44fd 100644 --- a/packages/components/src/components/table-stateless/component.tsx +++ b/packages/components/src/components/table-stateless/component.tsx @@ -382,13 +382,13 @@ export class KolTableStateless implements TableStatelessAPI { const selection = this.state._selection; if (!selection) return ''; const keyPropertyName = selection.keyPropertyName ?? 'id'; - const keyCell = row.find((cell) => cell.key === keyPropertyName); + const firstCellData = row[0]?.data; - if (!keyCell) return ''; + if (!firstCellData) return ''; + const keyProperty = firstCellData[keyPropertyName] as string; const isMultiple = selection.multiple || selection.multiple === undefined; - const keyProperty = (keyCell?.data as KoliBriTableDataType)[keyPropertyName] as string; const selected = selection?.selectedKeys?.includes(keyProperty); - const label = selection.label(keyCell.data as KoliBriTableDataType); + const label = selection.label(firstCellData); const props = { name: 'selection', checked: selected, diff --git a/packages/samples/react/src/components/table/stateful-with-selection.tsx b/packages/samples/react/src/components/table/stateful-with-selection.tsx index 2be00862af..b642edaf25 100644 --- a/packages/samples/react/src/components/table/stateful-with-selection.tsx +++ b/packages/samples/react/src/components/table/stateful-with-selection.tsx @@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription'; import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components'; const DATA = [ - { id: '1001', name: 'Foo Bar' }, - { id: '1002', name: 'Foo Baz' }, + { id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` }, + { id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` }, ]; type Data = (typeof DATA)[0]; @@ -15,8 +15,8 @@ export const TableStatefulWithSelection: FC = () => { const selection: KoliBriTableSelection = { label: (row) => `Selection for ${(row as Data).name}`, - selectedKeys: selectedValue ? selectedValue.map((element) => element.id) : [], - keyPropertyName: 'id', + selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : [], + keyPropertyName: 'internalIdentifier', }; const kolTableStatefulRef = useRef(null); 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 index 6943b757b9..af0da08481 100644 --- a/packages/samples/react/src/components/table/stateful-with-single-selection.tsx +++ b/packages/samples/react/src/components/table/stateful-with-single-selection.tsx @@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription'; import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components'; const DATA = [ - { id: '1001', name: 'Foo Bar' }, - { id: '1002', name: 'Foo Baz' }, + { id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` }, + { id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` }, ]; type Data = (typeof DATA)[0]; @@ -17,8 +17,8 @@ export const TableStatefulWithSingleSelection: FC = () => { const selection: KoliBriTableSelection = { label: (row) => `Selection for ${(row as Data).name}`, multiple: false, - selectedKeys: selectedValue ? [selectedValue.id] : [], - keyPropertyName: 'id', + selectedKeys: selectedValue ? [selectedValue.internalIdentifier] : [], + keyPropertyName: 'internalIdentifier', }; const kolTableStatefulRef = useRef(null); diff --git a/packages/samples/react/src/components/table/stateless-with-selection.tsx b/packages/samples/react/src/components/table/stateless-with-selection.tsx index 64c332d632..b13cb4b5c2 100644 --- a/packages/samples/react/src/components/table/stateless-with-selection.tsx +++ b/packages/samples/react/src/components/table/stateless-with-selection.tsx @@ -5,18 +5,18 @@ import { SampleDescription } from '../SampleDescription'; import type { KoliBriTableSelection } from '@public-ui/components'; const DATA = [ - { id: '1001', name: 'Foo Bar' }, - { id: '1002', name: 'Foo Baz' }, + { id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` }, + { id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` }, ]; type Data = (typeof DATA)[0]; export const TableStatelessWithSelection: FC = () => { - const [selectedKeys, setSelectedKeys] = useState(['1002']); + const [selectedKeys, setSelectedKeys] = useState(['AAA1002']); const selection: KoliBriTableSelection = { label: (row) => `Selection for ${(row as Data).name}`, selectedKeys, - keyPropertyName: 'id', + keyPropertyName: 'internalIdentifier', }; const kolTableStatelessRef = useRef(null); 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 index ca0ba1ac11..4a8c78972e 100644 --- a/packages/samples/react/src/components/table/stateless-with-single-selection.tsx +++ b/packages/samples/react/src/components/table/stateless-with-single-selection.tsx @@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription'; import type { KoliBriTableSelection } from '@public-ui/components'; const DATA = [ - { id: '1001', name: 'Foo Bar' }, - { id: '1002', name: 'Foo Baz' }, + { id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` }, + { id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` }, ]; type Data = (typeof DATA)[0]; @@ -17,7 +17,7 @@ export const TableStatelessWithSingleSelection: FC = () => { label: (row) => `Selection for ${(row as Data).name}`, multiple: false, selectedKeys, - keyPropertyName: 'id', + keyPropertyName: 'internalIdentifier', }; const kolTableStatelessRef = useRef(null);