@open-pioneer/result-list 0.9.0-dev.20250220091855 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +99 -90
- package/DataTable/ColumnResizer.d.ts +2 -1
- package/DataTable/ColumnResizer.js.map +1 -1
- package/DataTable/ColumnSortIndicator.d.ts +2 -1
- package/DataTable/ColumnSortIndicator.js.map +1 -1
- package/DataTable/DataTable.js +1 -1
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/SelectComponent.js +1 -1
- package/DataTable/SelectComponent.js.map +1 -1
- package/DataTable/createColumns.d.ts +1 -1
- package/DataTable/createColumns.js.map +1 -1
- package/DataTable/useSetupTable.js +1 -1
- package/DataTable/useSetupTable.js.map +1 -1
- package/README.md +5 -5
- package/ResultList.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,96 +1,105 @@
|
|
|
1
1
|
# @open-pioneer/result-list
|
|
2
2
|
|
|
3
|
-
## 0.9.0
|
|
3
|
+
## 0.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- cb94c75: update dependencies
|
|
4
8
|
|
|
5
9
|
### Patch Changes
|
|
6
10
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
|
|
11
|
+
- Updated dependencies [e7fdc5d]
|
|
12
|
+
- Updated dependencies [cb94c75]
|
|
13
|
+
- Updated dependencies [37cd707]
|
|
14
|
+
- Updated dependencies [32ed2cd]
|
|
15
|
+
- Updated dependencies [f327eec]
|
|
16
|
+
- Updated dependencies [f327eec]
|
|
17
|
+
- Updated dependencies [209eb8e]
|
|
18
|
+
- Updated dependencies [d72e42c]
|
|
19
|
+
- @open-pioneer/map@0.9.0
|
|
11
20
|
|
|
12
21
|
## 0.8.0
|
|
13
22
|
|
|
14
23
|
### Minor Changes
|
|
15
24
|
|
|
16
|
-
-
|
|
25
|
+
- 2fa8020: Update trails core package dependencies.
|
|
17
26
|
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
|
|
27
|
+
- Also updates Chakra UI to the latest 2.x version and Chakra React Select to version 5.
|
|
28
|
+
- Removes any obsolete references to `@chakra-ui/system`.
|
|
29
|
+
This dependency seems to be no longer required and may lead to duplicate packages in your dependency tree.
|
|
21
30
|
|
|
22
31
|
### Patch Changes
|
|
23
32
|
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
33
|
+
- 49f0207: Update trails core packages to version 2.4.0
|
|
34
|
+
- Updated dependencies [b717121]
|
|
35
|
+
- Updated dependencies [e7978a8]
|
|
36
|
+
- Updated dependencies [7a5f1e1]
|
|
37
|
+
- Updated dependencies [7ae9f90]
|
|
38
|
+
- Updated dependencies [d8337a6]
|
|
39
|
+
- Updated dependencies [49f0207]
|
|
40
|
+
- Updated dependencies [b2127df]
|
|
41
|
+
- Updated dependencies [2fa8020]
|
|
42
|
+
- Updated dependencies [7ae9f90]
|
|
43
|
+
- Updated dependencies [d8337a6]
|
|
44
|
+
- @open-pioneer/map@0.8.0
|
|
36
45
|
|
|
37
46
|
## 0.7.0
|
|
38
47
|
|
|
39
48
|
### Minor Changes
|
|
40
49
|
|
|
41
|
-
-
|
|
50
|
+
- 310800c: Switch from `peerDependencies` to normal `dependencies`. Peer dependencies have some usability problems when used at scale.
|
|
42
51
|
|
|
43
52
|
### Patch Changes
|
|
44
53
|
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
|
|
54
|
+
- 310800c: Update core packages version.
|
|
55
|
+
- 583f1d6: The `mapId` or `map` properties are now optional on individual components.
|
|
56
|
+
You can use the `DefaultMapProvider` to configure an implicit default value.
|
|
48
57
|
|
|
49
58
|
Note that configuring _neither_ a default _nor_ an explicit `map` or `mapId` will trigger a runtime error.
|
|
50
59
|
|
|
51
|
-
-
|
|
52
|
-
-
|
|
53
|
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
-
|
|
57
|
-
-
|
|
58
|
-
-
|
|
59
|
-
-
|
|
60
|
-
-
|
|
61
|
-
-
|
|
62
|
-
-
|
|
63
|
-
-
|
|
64
|
-
-
|
|
65
|
-
-
|
|
60
|
+
- 583f1d6: All UI components in this project now accept the `mapId` (a `string`) _or_ the `map` (a `MapModel`) directly.
|
|
61
|
+
- a8b3449: Switch to a new versioning strategy.
|
|
62
|
+
From now on, packages released by this repository share a common version number.
|
|
63
|
+
- 900eb11: Update dependencies.
|
|
64
|
+
- Updated dependencies [310800c]
|
|
65
|
+
- Updated dependencies [2502050]
|
|
66
|
+
- Updated dependencies [583f1d6]
|
|
67
|
+
- Updated dependencies [583f1d6]
|
|
68
|
+
- Updated dependencies [397d617]
|
|
69
|
+
- Updated dependencies [a8b3449]
|
|
70
|
+
- Updated dependencies [310800c]
|
|
71
|
+
- Updated dependencies [900eb11]
|
|
72
|
+
- Updated dependencies [583f1d6]
|
|
73
|
+
- Updated dependencies [397d617]
|
|
74
|
+
- @open-pioneer/map@0.7.0
|
|
66
75
|
|
|
67
76
|
## 0.3.2
|
|
68
77
|
|
|
69
78
|
### Patch Changes
|
|
70
79
|
|
|
71
|
-
-
|
|
72
|
-
-
|
|
73
|
-
-
|
|
74
|
-
-
|
|
80
|
+
- b152428: Update trails dependencies
|
|
81
|
+
- Updated dependencies [b152428]
|
|
82
|
+
- Updated dependencies [291ccb6]
|
|
83
|
+
- @open-pioneer/map@0.6.1
|
|
75
84
|
|
|
76
85
|
## 0.3.1
|
|
77
86
|
|
|
78
87
|
### Patch Changes
|
|
79
88
|
|
|
80
|
-
-
|
|
81
|
-
-
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
-
|
|
89
|
+
- 28e092a: Update dependencies
|
|
90
|
+
- Updated dependencies [28e092a]
|
|
91
|
+
- Updated dependencies [0d51d2f]
|
|
92
|
+
- Updated dependencies [76f8863]
|
|
93
|
+
- @open-pioneer/map@0.6.0
|
|
85
94
|
|
|
86
95
|
## 0.3.0
|
|
87
96
|
|
|
88
97
|
### Minor Changes
|
|
89
98
|
|
|
90
|
-
-
|
|
91
|
-
-
|
|
92
|
-
|
|
93
|
-
|
|
99
|
+
- fbd12d6: Added the possibility to configure single or multi row selection mode.
|
|
100
|
+
- 9a0c1a9: Added a new optional parameter `memoizeRows` to improve render performance.
|
|
101
|
+
When rows are memoized, they are only rerendered under certain conditions (e.g. selection changes, sort order changes), which can
|
|
102
|
+
greatly improve performance in some circumstances.
|
|
94
103
|
|
|
95
104
|
Example:
|
|
96
105
|
|
|
@@ -98,59 +107,59 @@
|
|
|
98
107
|
<ResultList mapId={mapId} input={input} memoizeRows={true} />
|
|
99
108
|
```
|
|
100
109
|
|
|
101
|
-
-
|
|
110
|
+
- 5623b5e: Changed ResultListProps interface to differentiate between highlightOptions and zoomOptions.
|
|
102
111
|
|
|
103
112
|
### Patch Changes
|
|
104
113
|
|
|
105
|
-
-
|
|
106
|
-
-
|
|
107
|
-
-
|
|
108
|
-
-
|
|
109
|
-
-
|
|
110
|
-
-
|
|
111
|
-
-
|
|
112
|
-
-
|
|
113
|
-
-
|
|
114
|
-
-
|
|
115
|
-
-
|
|
116
|
-
-
|
|
117
|
-
-
|
|
114
|
+
- 4140646: Fix imports.
|
|
115
|
+
- 4140646: Update trails dependencies
|
|
116
|
+
- 4140646: Update to react 18.3.1
|
|
117
|
+
- 81bc7da: Update trails dependencies
|
|
118
|
+
- 2c092dc: Update dependencies
|
|
119
|
+
- Updated dependencies [4140646]
|
|
120
|
+
- Updated dependencies [4140646]
|
|
121
|
+
- Updated dependencies [b5bb7a1]
|
|
122
|
+
- Updated dependencies [81bc7da]
|
|
123
|
+
- Updated dependencies [2c092dc]
|
|
124
|
+
- Updated dependencies [4140646]
|
|
125
|
+
- @open-pioneer/react-utils@0.2.3
|
|
126
|
+
- @open-pioneer/map@0.5.1
|
|
118
127
|
|
|
119
128
|
## 0.2.0
|
|
120
129
|
|
|
121
130
|
### Minor Changes
|
|
122
131
|
|
|
123
|
-
-
|
|
124
|
-
-
|
|
125
|
-
-
|
|
132
|
+
- 520a97b: Add `ZoomOptions` prop in map package
|
|
133
|
+
- 48bdf81: Add highlight functionality
|
|
134
|
+
- 8e764ce: Zoom to features loaded into the result-list
|
|
126
135
|
|
|
127
136
|
### Patch Changes
|
|
128
137
|
|
|
129
|
-
-
|
|
130
|
-
-
|
|
138
|
+
- Updated dependencies [520a97b]
|
|
139
|
+
- @open-pioneer/map@0.5.0
|
|
131
140
|
|
|
132
141
|
## 0.1.0
|
|
133
142
|
|
|
134
143
|
### Minor Changes
|
|
135
144
|
|
|
136
|
-
-
|
|
137
|
-
-
|
|
138
|
-
-
|
|
139
|
-
-
|
|
145
|
+
- ca6c2fd: Added formatting support of result list table cells depending on the type of value including support of cell render functions.
|
|
146
|
+
- 6f0fc0c: add changeevent for selection
|
|
147
|
+
- 13ea342: Initial release
|
|
148
|
+
- 9334e81: Update to OpenLayers 9
|
|
140
149
|
|
|
141
150
|
### Patch Changes
|
|
142
151
|
|
|
143
|
-
-
|
|
144
|
-
-
|
|
145
|
-
-
|
|
146
|
-
-
|
|
147
|
-
-
|
|
148
|
-
-
|
|
149
|
-
-
|
|
150
|
-
-
|
|
151
|
-
-
|
|
152
|
-
-
|
|
153
|
-
-
|
|
154
|
-
-
|
|
155
|
-
-
|
|
156
|
-
-
|
|
152
|
+
- ca6c2fd: Don't remove uppercase characters in slugs
|
|
153
|
+
- 1a8ad89: Update package.json metadata
|
|
154
|
+
- 87f6bda: Export selection change event type.
|
|
155
|
+
- 6162979: Update versions of core packages
|
|
156
|
+
- Updated dependencies [1a8ad89]
|
|
157
|
+
- Updated dependencies [a11bf72]
|
|
158
|
+
- Updated dependencies [fc6bf82]
|
|
159
|
+
- Updated dependencies [a0d8882]
|
|
160
|
+
- Updated dependencies [6162979]
|
|
161
|
+
- Updated dependencies [9334e81]
|
|
162
|
+
- Updated dependencies [ac7fdd1]
|
|
163
|
+
- Updated dependencies [13ea342]
|
|
164
|
+
- @open-pioneer/react-utils@0.2.2
|
|
165
|
+
- @open-pioneer/map@0.4.0
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
1
2
|
export declare function ColumnResizer(props: {
|
|
2
3
|
onDoubleClick: React.MouseEventHandler<HTMLElement>;
|
|
3
4
|
onMouseDown: React.MouseEventHandler<HTMLElement>;
|
|
4
5
|
onTouchStart: React.TouchEventHandler<HTMLElement>;
|
|
5
6
|
isResizing: boolean;
|
|
6
|
-
}):
|
|
7
|
+
}): ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnResizer.js","sources":["ColumnResizer.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport classNames from \"classnames\";\n\nexport function ColumnResizer(props: {\n onDoubleClick: React.MouseEventHandler<HTMLElement>;\n onMouseDown: React.MouseEventHandler<HTMLElement>;\n onTouchStart: React.TouchEventHandler<HTMLElement>;\n isResizing: boolean;\n}):
|
|
1
|
+
{"version":3,"file":"ColumnResizer.js","sources":["ColumnResizer.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport classNames from \"classnames\";\nimport { ReactNode } from \"react\";\n\nexport function ColumnResizer(props: {\n onDoubleClick: React.MouseEventHandler<HTMLElement>;\n onMouseDown: React.MouseEventHandler<HTMLElement>;\n onTouchStart: React.TouchEventHandler<HTMLElement>;\n isResizing: boolean;\n}): ReactNode {\n const { onDoubleClick, onMouseDown, onTouchStart, isResizing } = props;\n return (\n <chakra.span\n className={classNames(\n \"result-list-resizer\",\n isResizing && \"result-list-resizer--is-resizing\"\n )}\n onDoubleClick={onDoubleClick}\n onMouseDown={onMouseDown}\n onTouchStart={onTouchStart}\n onClick={(e) => e.stopPropagation()}\n />\n );\n}\n"],"names":[],"mappings":";;;;AAMO,SAAS,cAAc,KAKhB,EAAA;AACV,EAAA,MAAM,EAAE,aAAA,EAAe,WAAa,EAAA,YAAA,EAAc,YAAe,GAAA,KAAA;AACjE,EACI,uBAAA,GAAA;AAAA,IAAC,MAAO,CAAA,IAAA;AAAA,IAAP;AAAA,MACG,SAAW,EAAA,UAAA;AAAA,QACP,qBAAA;AAAA,QACA,UAAc,IAAA;AAAA,OAClB;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAS,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,eAAgB;AAAA;AAAA,GACtC;AAER;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnSortIndicator.js","sources":["ColumnSortIndicator.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { TriangleDownIcon, TriangleUpIcon } from \"@chakra-ui/icons\";\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { SortDirection } from \"@tanstack/react-table\";\n\nexport function ColumnSortIndicator(props: { isSorted: false | SortDirection }):
|
|
1
|
+
{"version":3,"file":"ColumnSortIndicator.js","sources":["ColumnSortIndicator.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { TriangleDownIcon, TriangleUpIcon } from \"@chakra-ui/icons\";\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { SortDirection } from \"@tanstack/react-table\";\nimport { ReactNode } from \"react\";\n\nexport function ColumnSortIndicator(props: { isSorted: false | SortDirection }): ReactNode {\n const { isSorted } = props;\n return (\n <chakra.span ml=\"4\" className=\"result-list-sort-indicator\">\n {isSorted ? isSorted === \"desc\" ? <TriangleDownIcon /> : <TriangleUpIcon /> : null}\n </chakra.span>\n );\n}\n"],"names":[],"mappings":";;;;AAOO,SAAS,oBAAoB,KAAuD,EAAA;AACvF,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AACrB,EAAA,2BACK,MAAO,CAAA,IAAA,EAAP,EAAY,EAAA,EAAG,KAAI,SAAU,EAAA,4BAAA,EACzB,QAAW,EAAA,QAAA,GAAA,QAAA,KAAa,yBAAU,GAAA,CAAA,gBAAA,EAAA,EAAiB,oBAAM,GAAA,CAAA,cAAA,EAAA,EAAe,IAAK,IAClF,EAAA,CAAA;AAER;;;;"}
|
package/DataTable/DataTable.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { chakra, Table, Thead, Tbody, useToken, Tr,
|
|
2
|
+
import { chakra, Table, Thead, Tbody, useToken, Tr, Td, Th } from '@open-pioneer/chakra-integration';
|
|
3
3
|
import { createLogger } from '@open-pioneer/core';
|
|
4
4
|
import { flexRender } from '@tanstack/react-table';
|
|
5
5
|
import classNames from 'classnames';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["DataTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n Table,\n Tbody,\n Td,\n Th,\n Thead,\n Tr,\n chakra,\n useToken\n} from \"@open-pioneer/chakra-integration\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport {\n ColumnDef,\n Header,\n HeaderGroup,\n SortDirection,\n Table as TanstackTable,\n flexRender\n} from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport React, { ReactNode, useEffect, useMemo, useState } from \"react\";\nimport { ColumnResizer } from \"./ColumnResizer\";\nimport { ColumnSortIndicator } from \"./ColumnSortIndicator\";\nimport { useSetupTable } from \"./useSetupTable\";\nimport { ResultListSelectionChangeEvent, SelectionMode } from \"../ResultList\";\nconst LOG = createLogger(\"result-list:DataTable\");\n\nexport interface DataTableProps<Data extends BaseFeature> {\n data: Data[];\n columns: ColumnDef<Data>[];\n memoizeRows: boolean;\n selectionMode: SelectionMode;\n onSelectionChange?(event: ResultListSelectionChangeEvent): void;\n}\n\nexport function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n const intl = useIntl();\n const { memoizeRows } = props;\n const { table } = useSetupTable(props);\n const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;\n const columnSizeVars = useColumnSizeVars(table);\n const [isClickBlocked, setIsClickBlocked] = useState(false);\n\n useEffect(() => {\n setIsClickBlocked(isResizing);\n }, [isResizing]);\n\n if (!table.getRowModel().rows.length) {\n return (\n <chakra.div className={\"result-list-no-data-message\"}>\n {intl.formatMessage({ id: \"noDataMessage\" })}\n </chakra.div>\n );\n }\n\n return (\n <Table\n className={classNames(\"result-list-table\", {\n \"result-list-table--is-resizing\": isResizing\n })}\n style={columnSizeVars}\n width=\"99.9%\"\n // An attempt to block click events while dragging the resize handle.\n // If the click event gets through, the user may accidentally trigger column sorting on mouse release\n onClickCapture={(e) => {\n if (isClickBlocked) {\n LOG.debug(\"Blocking click event because resizing is active\");\n e.stopPropagation();\n e.preventDefault();\n }\n }}\n >\n <Thead>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableHeaderGroup key={headerGroup.id} headerGroup={headerGroup} />\n ))}\n </Thead>\n <Tbody className=\"result-list-table-body\">\n {memoizeRows || isResizing ? (\n <MemoizedTableRows table={table} />\n ) : (\n <TableRows table={table} />\n )}\n </Tbody>\n </Table>\n );\n}\n\nfunction TableHeaderGroup<Data>(props: { headerGroup: HeaderGroup<Data> }) {\n const { headerGroup } = props;\n const borderColor = useToken(\"colors\", \"trails.100\");\n return (\n <Tr key={headerGroup.id} className=\"result-list-headers\">\n {headerGroup.headers.map((header, index) => {\n return (\n <TableHeader\n key={header.id}\n header={header}\n index={index}\n borderColor={borderColor}\n />\n );\n })}\n </Tr>\n );\n}\n\nfunction TableHeader<Data>(props: {\n header: Header<Data, unknown>;\n index: number;\n borderColor: string;\n}) {\n const { header, index, borderColor } = props;\n const width = `calc(var(--header-${header.id}-size) * 1px)`;\n return (\n <Th\n className=\"result-list-header\"\n tabIndex={0}\n aria-sort={mapAriaSorting(header.column.getIsSorted())}\n onClick={() => header.column.getCanSort() && header.column.toggleSorting()}\n cursor={header.column.getCanSort() ? \"pointer\" : \"unset\"}\n style={{ width: index === 0 ? \"50px\" : width }}\n onKeyDown={(evt) => {\n if (evt.key === \"Enter\" && header.column.getCanSort()) {\n header.column.toggleSorting(undefined);\n }\n }}\n /* use box shadow instead of border because it works better with position: sticky */\n border=\"none\"\n boxShadow={`inset 0 -2px 0 0 ${borderColor}`}\n _focusVisible={{ textDecorationLine: \"underline\" }}\n _focus={{ outline: \"none\" }}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {header.column.getCanSort() && (\n <ColumnSortIndicator isSorted={header.column.getIsSorted()} />\n )}\n <ColumnResizer\n onDoubleClick={() => header.column.resetSize()}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n isResizing={header.column.getIsResizing()}\n />\n </Th>\n );\n}\n\nfunction TableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n return table.getRowModel().rows.map((row) => {\n return (\n <Tr key={row.id} className=\"result-list-table-row\">\n {row.getVisibleCells().map((cell) => {\n const width = `calc(var(--header-${cell.column.id}-size) * 1px)`;\n return (\n <Td\n key={cell.id}\n style={{ width: width }}\n className=\"result-list-table-row\"\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Td>\n );\n })}\n </Tr>\n );\n });\n}\n\n/**\n * Rows are memoized and only updating on changes due to sorting columns or selecting rows.\n * Removed full Memoization on Resizing because it does not have an additional effect.\n */\nfunction MemoizedTableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n const memoizedRows = React.useMemo<ReactNode>(() => {\n return <TableRows table={table} />;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [table, table.getSortedRowModel().rows, table.getSelectedRowModel().rows]);\n return memoizedRows;\n}\n\n/**\n * Instead of calling `column.getSize()` on every render for every header\n * and especially every data cell (very expensive),\n * we will calculate all column sizes at once at the root table level in a useMemo\n * and pass the column sizes down as CSS variables to the <table> element.\n */\nfunction useColumnSizeVars<Data>(table: TanstackTable<Data>) {\n const columnSizingInfo = table.getState().columnSizingInfo;\n const columnSizing = table.getState().columnSizing;\n const tableHeaders = table.getFlatHeaders();\n\n // Needs to be useMemo, not useEffect, to avoid multiple render calls?\n // Need to add columnSizingInfo to the dependency array to make resizing work\n return useMemo(() => {\n // Not used directly, but the memo must re-execute whenever this changes.\n // Not: columnSizing seems to be needed as well, because otherwise resetting the column size (header.column.resetSize())\n // won't to anything.\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n void columnSizingInfo, columnSizing;\n const colSizes: { [key: string]: number } = {};\n for (let i = 0; i < tableHeaders.length; i++) {\n const header = tableHeaders[i]!;\n colSizes[`--header-${header.id}-size`] = header.getSize();\n colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n }\n return colSizes;\n }, [tableHeaders, columnSizingInfo, columnSizing]);\n}\n\ntype SortState = SortDirection | false;\nfunction mapAriaSorting(sortState: SortState) {\n switch (sortState) {\n case \"asc\":\n return \"ascending\";\n case \"desc\":\n return \"descending\";\n default:\n return \"none\";\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["DataTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n Table,\n Tbody,\n Td,\n Th,\n Thead,\n Tr,\n chakra,\n useToken\n} from \"@open-pioneer/chakra-integration\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport {\n ColumnDef,\n Header,\n HeaderGroup,\n SortDirection,\n Table as TanstackTable,\n flexRender\n} from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport React, { ReactNode, useEffect, useMemo, useState } from \"react\";\nimport { ColumnResizer } from \"./ColumnResizer\";\nimport { ColumnSortIndicator } from \"./ColumnSortIndicator\";\nimport { useSetupTable } from \"./useSetupTable\";\nimport { ResultListSelectionChangeEvent, SelectionMode } from \"../ResultList\";\nconst LOG = createLogger(\"result-list:DataTable\");\n\nexport interface DataTableProps<Data extends BaseFeature> {\n data: Data[];\n columns: ColumnDef<Data>[];\n memoizeRows: boolean;\n selectionMode: SelectionMode;\n onSelectionChange?(event: ResultListSelectionChangeEvent): void;\n}\n\nexport function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n const intl = useIntl();\n const { memoizeRows } = props;\n const { table } = useSetupTable(props);\n const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;\n const columnSizeVars = useColumnSizeVars(table);\n const [isClickBlocked, setIsClickBlocked] = useState(false);\n\n useEffect(() => {\n setIsClickBlocked(isResizing);\n }, [isResizing]);\n\n if (!table.getRowModel().rows.length) {\n return (\n <chakra.div className={\"result-list-no-data-message\"}>\n {intl.formatMessage({ id: \"noDataMessage\" })}\n </chakra.div>\n );\n }\n\n return (\n <Table\n className={classNames(\"result-list-table\", {\n \"result-list-table--is-resizing\": isResizing\n })}\n style={columnSizeVars}\n width=\"99.9%\"\n // An attempt to block click events while dragging the resize handle.\n // If the click event gets through, the user may accidentally trigger column sorting on mouse release\n onClickCapture={(e) => {\n if (isClickBlocked) {\n LOG.debug(\"Blocking click event because resizing is active\");\n e.stopPropagation();\n e.preventDefault();\n }\n }}\n >\n <Thead>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableHeaderGroup key={headerGroup.id} headerGroup={headerGroup} />\n ))}\n </Thead>\n <Tbody className=\"result-list-table-body\">\n {memoizeRows || isResizing ? (\n <MemoizedTableRows table={table} />\n ) : (\n <TableRows table={table} />\n )}\n </Tbody>\n </Table>\n );\n}\n\nfunction TableHeaderGroup<Data>(props: { headerGroup: HeaderGroup<Data> }) {\n const { headerGroup } = props;\n const borderColor = useToken(\"colors\", \"trails.100\");\n return (\n <Tr key={headerGroup.id} className=\"result-list-headers\">\n {headerGroup.headers.map((header, index) => {\n return (\n <TableHeader\n key={header.id}\n header={header}\n index={index}\n borderColor={borderColor}\n />\n );\n })}\n </Tr>\n );\n}\n\nfunction TableHeader<Data>(props: {\n header: Header<Data, unknown>;\n index: number;\n borderColor: string;\n}) {\n const { header, index, borderColor } = props;\n const width = `calc(var(--header-${header.id}-size) * 1px)`;\n return (\n <Th\n className=\"result-list-header\"\n tabIndex={0}\n aria-sort={mapAriaSorting(header.column.getIsSorted())}\n onClick={() => header.column.getCanSort() && header.column.toggleSorting()}\n cursor={header.column.getCanSort() ? \"pointer\" : \"unset\"}\n style={{ width: index === 0 ? \"50px\" : width }}\n onKeyDown={(evt) => {\n if (evt.key === \"Enter\" && header.column.getCanSort()) {\n header.column.toggleSorting(undefined);\n }\n }}\n /* use box shadow instead of border because it works better with position: sticky */\n border=\"none\"\n boxShadow={`inset 0 -2px 0 0 ${borderColor}`}\n _focusVisible={{ textDecorationLine: \"underline\" }}\n _focus={{ outline: \"none\" }}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {header.column.getCanSort() && (\n <ColumnSortIndicator isSorted={header.column.getIsSorted()} />\n )}\n <ColumnResizer\n onDoubleClick={() => header.column.resetSize()}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n isResizing={header.column.getIsResizing()}\n />\n </Th>\n );\n}\n\nfunction TableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n return table.getRowModel().rows.map((row) => {\n return (\n <Tr key={row.id} className=\"result-list-table-row\">\n {row.getVisibleCells().map((cell) => {\n const width = `calc(var(--header-${cell.column.id}-size) * 1px)`;\n return (\n <Td\n key={cell.id}\n style={{ width: width }}\n className=\"result-list-table-row\"\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Td>\n );\n })}\n </Tr>\n );\n });\n}\n\n/**\n * Rows are memoized and only updating on changes due to sorting columns or selecting rows.\n * Removed full Memoization on Resizing because it does not have an additional effect.\n */\nfunction MemoizedTableRows<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n const memoizedRows = React.useMemo<ReactNode>(() => {\n return <TableRows table={table} />;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [table, table.getSortedRowModel().rows, table.getSelectedRowModel().rows]);\n return memoizedRows;\n}\n\n/**\n * Instead of calling `column.getSize()` on every render for every header\n * and especially every data cell (very expensive),\n * we will calculate all column sizes at once at the root table level in a useMemo\n * and pass the column sizes down as CSS variables to the <table> element.\n */\nfunction useColumnSizeVars<Data>(table: TanstackTable<Data>) {\n const columnSizingInfo = table.getState().columnSizingInfo;\n const columnSizing = table.getState().columnSizing;\n const tableHeaders = table.getFlatHeaders();\n\n // Needs to be useMemo, not useEffect, to avoid multiple render calls?\n // Need to add columnSizingInfo to the dependency array to make resizing work\n return useMemo(() => {\n // Not used directly, but the memo must re-execute whenever this changes.\n // Not: columnSizing seems to be needed as well, because otherwise resetting the column size (header.column.resetSize())\n // won't to anything.\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n void columnSizingInfo, columnSizing;\n const colSizes: { [key: string]: number } = {};\n for (let i = 0; i < tableHeaders.length; i++) {\n const header = tableHeaders[i]!;\n colSizes[`--header-${header.id}-size`] = header.getSize();\n colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n }\n return colSizes;\n }, [tableHeaders, columnSizingInfo, columnSizing]);\n}\n\ntype SortState = SortDirection | false;\nfunction mapAriaSorting(sortState: SortState) {\n switch (sortState) {\n case \"asc\":\n return \"ascending\";\n case \"desc\":\n return \"descending\";\n default:\n return \"none\";\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { Tooltip, chakra,
|
|
2
|
+
import { Checkbox, Tooltip, chakra, Radio } from '@open-pioneer/chakra-integration';
|
|
3
3
|
import { useMemo, useId } from 'react';
|
|
4
4
|
|
|
5
5
|
function SelectComponent({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectComponent.js","sources":["SelectComponent.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Checkbox, Radio, Tooltip, chakra } from \"@open-pioneer/chakra-integration\";\nimport { ChangeEvent, useId, useMemo } from \"react\";\n\nexport interface SelectComponentProps {\n mode?: \"checkbox\" | \"radio\";\n toolTipLabel?: string;\n\n className?: string;\n \"aria-label\"?: string;\n isIndeterminate?: boolean;\n isChecked?: boolean;\n isDisabled?: boolean;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport function SelectComponent({\n mode = \"checkbox\",\n toolTipLabel,\n ...props\n}: SelectComponentProps) {\n const Component = mode === \"checkbox\" ? Checkbox : SelectRadio;\n const renderedComponent = useMemo(() => {\n return <Component {...props} />;\n }, [Component, props]);\n if (!toolTipLabel) {\n return renderedComponent;\n }\n\n return (\n <Tooltip label={toolTipLabel} placement=\"right\" closeOnClick={false}>\n <chakra.span\n /* \n wrap into span to fix tooltip around checkbox, see https://github.com/chakra-ui/chakra-ui/issues/6353\n not using \"shouldWrapChildren\" because that also introduces a _focusable_ span (we only want the checkbox)\n */\n >\n {renderedComponent}\n </chakra.span>\n </Tooltip>\n );\n}\n\nfunction SelectRadio(props: Omit<SelectComponentProps, \"mode\">) {\n const id = useId();\n const { isIndeterminate, ...rest } = props;\n void isIndeterminate; // ignored, not supported by radio button\n\n /** Name seems to be required for screen reader tabbing support. */\n return <Radio name={id} {...rest} />;\n}\n"],"names":[],"mappings":";;;;AAiBO,SAAS,eAAgB,CAAA;AAAA,EAC5B,IAAO,GAAA,UAAA;AAAA,EACP,YAAA;AAAA,EACA,GAAG
|
|
1
|
+
{"version":3,"file":"SelectComponent.js","sources":["SelectComponent.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Checkbox, Radio, Tooltip, chakra } from \"@open-pioneer/chakra-integration\";\nimport { ChangeEvent, useId, useMemo } from \"react\";\n\nexport interface SelectComponentProps {\n mode?: \"checkbox\" | \"radio\";\n toolTipLabel?: string;\n\n className?: string;\n \"aria-label\"?: string;\n isIndeterminate?: boolean;\n isChecked?: boolean;\n isDisabled?: boolean;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport function SelectComponent({\n mode = \"checkbox\",\n toolTipLabel,\n ...props\n}: SelectComponentProps) {\n const Component = mode === \"checkbox\" ? Checkbox : SelectRadio;\n const renderedComponent = useMemo(() => {\n return <Component {...props} />;\n }, [Component, props]);\n if (!toolTipLabel) {\n return renderedComponent;\n }\n\n return (\n <Tooltip label={toolTipLabel} placement=\"right\" closeOnClick={false}>\n <chakra.span\n /* \n wrap into span to fix tooltip around checkbox, see https://github.com/chakra-ui/chakra-ui/issues/6353\n not using \"shouldWrapChildren\" because that also introduces a _focusable_ span (we only want the checkbox)\n */\n >\n {renderedComponent}\n </chakra.span>\n </Tooltip>\n );\n}\n\nfunction SelectRadio(props: Omit<SelectComponentProps, \"mode\">) {\n const id = useId();\n const { isIndeterminate, ...rest } = props;\n void isIndeterminate; // ignored, not supported by radio button\n\n /** Name seems to be required for screen reader tabbing support. */\n return <Radio name={id} {...rest} />;\n}\n"],"names":[],"mappings":";;;;AAiBO,SAAS,eAAgB,CAAA;AAAA,EAC5B,IAAO,GAAA,UAAA;AAAA,EACP,YAAA;AAAA,EACA,GAAG;AACP,CAAyB,EAAA;AACrB,EAAM,MAAA,SAAA,GAAY,IAAS,KAAA,UAAA,GAAa,QAAW,GAAA,WAAA;AACnD,EAAM,MAAA,iBAAA,GAAoB,QAAQ,MAAM;AACpC,IAAO,uBAAA,GAAA,CAAC,SAAW,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA,GAC9B,EAAA,CAAC,SAAW,EAAA,KAAK,CAAC,CAAA;AACrB,EAAA,IAAI,CAAC,YAAc,EAAA;AACf,IAAO,OAAA,iBAAA;AAAA;AAGX,EAAA,2BACK,OAAQ,EAAA,EAAA,KAAA,EAAO,cAAc,SAAU,EAAA,OAAA,EAAQ,cAAc,KAC1D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAO,CAAA,IAAA;AAAA,IAAP;AAAA,MAMI,QAAA,EAAA;AAAA;AAAA,GAET,EAAA,CAAA;AAER;AAEA,SAAS,YAAY,KAA2C,EAAA;AAC5D,EAAA,MAAM,KAAK,KAAM,EAAA;AACjB,EAAA,MAAM,EAAE,eAAA,EAAiB,GAAG,IAAA,EAAS,GAAA,KAAA;AAIrC,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAM,IAAM,EAAA,EAAA,EAAK,GAAG,IAAM,EAAA,CAAA;AACtC;;;;"}
|
|
@@ -10,4 +10,4 @@ export interface CreateColumnsOptions {
|
|
|
10
10
|
selectionMode: SelectionMode;
|
|
11
11
|
selectionStyle: "radio" | "checkbox";
|
|
12
12
|
}
|
|
13
|
-
export declare function createColumns(options: CreateColumnsOptions): ((import("@tanstack/react-table").ColumnDefBase<BaseFeature, unknown> & import("@tanstack/react-table").StringHeaderIdentifier) | (import("@tanstack/react-table").ColumnDefBase<BaseFeature, unknown> & import("@tanstack/react-table").IdIdentifier<BaseFeature, unknown>))[];
|
|
13
|
+
export declare function createColumns(options: CreateColumnsOptions): ((import("@tanstack/react-table").ColumnDefBase<BaseFeature<Readonly<Record<string, unknown>>>, unknown> & import("@tanstack/react-table").StringHeaderIdentifier) | (import("@tanstack/react-table").ColumnDefBase<BaseFeature<Readonly<Record<string, unknown>>>, unknown> & import("@tanstack/react-table").IdIdentifier<BaseFeature<Readonly<Record<string, unknown>>>, unknown>))[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createColumns.js","sources":["createColumns.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { createColumnHelper, Table as TanstackTable } from \"@tanstack/react-table\";\nimport { FormatOptions, ResultColumn, SelectionMode } from \"../ResultList\";\nimport { SelectComponent } from \"./SelectComponent\";\n\nexport const SELECT_COLUMN_SIZE = 70;\n\nconst columnHelper = createColumnHelper<BaseFeature>();\n\nexport interface CreateColumnsOptions {\n columns: ResultColumn[];\n intl: PackageIntl;\n tableWidth?: number;\n formatOptions?: FormatOptions;\n selectionMode: SelectionMode;\n selectionStyle: \"radio\" | \"checkbox\";\n}\n\nexport function createColumns(options: CreateColumnsOptions) {\n const { columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle } = options;\n const remainingColumnWidth: number | undefined =\n tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);\n const selectionColumn = createSelectionColumn(intl, selectionMode, selectionStyle);\n const columnDefs = columns.map((column, index) => {\n const columnWidth = column.width || remainingColumnWidth;\n const configuredId =\n column.id || (column.propertyName && slug(column.propertyName)) || String(index);\n return createColumn({\n id: \"result-list-col_\" + configuredId,\n column: column,\n intl: intl,\n columnWidth: columnWidth,\n formatOptions: formatOptions\n });\n });\n return [selectionColumn, ...columnDefs];\n}\n\ninterface CreateColumnOptions {\n id: string;\n column: ResultColumn;\n intl: PackageIntl;\n columnWidth?: number;\n formatOptions?: FormatOptions;\n}\n\nfunction createColumn(options: CreateColumnOptions) {\n const { id, column, columnWidth, formatOptions, intl } = options;\n const { propertyName, getPropertyValue } = column;\n const hasPropertyValue = getPropertyValue != null || propertyName != null;\n\n if (!hasPropertyValue) {\n throw new Error(\n \"Display columns are not yet implemented. You must either specify 'propertyName' or 'getPropertyValue'.\"\n );\n }\n\n return columnHelper.accessor(\n (feature: BaseFeature) => {\n return getPropertyValue?.(feature) ?? feature.properties?.[propertyName!];\n },\n {\n id: id,\n cell: (info) => {\n const cellValue = info.getValue();\n if (column.renderCell) {\n return column.renderCell({\n feature: info.row.original,\n value: cellValue\n });\n }\n return renderFunc(cellValue, intl, formatOptions);\n },\n header: column.displayName ?? column.propertyName,\n size: columnWidth\n }\n );\n}\n\nfunction renderFunc(cellValue: unknown, intl: PackageIntl, formatOptions?: FormatOptions) {\n if (cellValue === null || cellValue === undefined) return \"\";\n const type = typeof cellValue;\n const formatNumber = (num: number | bigint) => {\n if (Number.isNaN(num)) return \"\";\n return intl.formatNumber(num, formatOptions?.numberOptions);\n };\n\n switch (type) {\n case \"number\": {\n return formatNumber(cellValue as number);\n }\n case \"bigint\": {\n return formatNumber(cellValue as bigint);\n }\n case \"boolean\": {\n return intl.formatMessage({ id: `displayBoolean.${cellValue}` });\n }\n case \"string\": {\n return cellValue as string;\n }\n case \"object\": {\n if (cellValue instanceof Date)\n return intl.formatDate(cellValue, formatOptions?.dateOptions);\n return cellValue.toString();\n }\n default:\n return String(cellValue);\n }\n}\n\nfunction createSelectionColumn(\n intl: PackageIntl,\n selectionMode: SelectionMode,\n selectionStyle: \"radio\" | \"checkbox\"\n) {\n return columnHelper.display({\n id: \"selection-buttons\",\n size: SELECT_COLUMN_SIZE,\n enableSorting: false,\n header: ({ table }) => {\n if (selectionMode !== \"multi\") return;\n return (\n <chakra.div\n display=\"inline-block\"\n onClick={(e) => {\n e.stopPropagation();\n }}\n className=\"result-list-select-all-container\"\n >\n <SelectComponent\n className=\"result-list-select-all-checkbox\"\n isChecked={table.getIsAllRowsSelected()}\n isIndeterminate={table.getIsSomeRowsSelected()}\n onChange={table.getToggleAllRowsSelectedHandler()}\n toolTipLabel={getCheckboxToolTip(table, intl)}\n />\n </chakra.div>\n );\n },\n cell: ({ row }) => {\n const className =\n selectionStyle === \"radio\"\n ? \"result-list-select-row-radio\"\n : \"result-list-select-row-checkbox\";\n return (\n <chakra.div\n display=\"inline-block\"\n onClick={(e) => {\n e.stopPropagation();\n }}\n className=\"result-list-select-row-container\"\n >\n <SelectComponent\n mode={selectionStyle}\n className={className}\n isChecked={row.getIsSelected()}\n isDisabled={!row.getCanSelect()}\n isIndeterminate={row.getIsSomeSelected()}\n onChange={row.getToggleSelectedHandler()}\n aria-label={intl.formatMessage({\n id: \"ariaLabel.selectSingle\"\n })}\n />\n </chakra.div>\n );\n }\n });\n}\n\nfunction calcRemainingColumnWidth(\n columns: ResultColumn[],\n tableWidth: number,\n selectColumnWidth: number = SELECT_COLUMN_SIZE\n) {\n const fullWidth = columns.reduce((sum, column) => (column.width ?? 0) + sum, 0);\n const undefinedWidthCount = columns.reduce(\n (sum, column) => (column.width === undefined ? sum + 1 : sum),\n 0\n );\n const remainingWidth = tableWidth - selectColumnWidth - fullWidth;\n return remainingWidth / undefinedWidthCount;\n}\n\nfunction getCheckboxToolTip<Data>(table: TanstackTable<Data>, intl: PackageIntl) {\n if (table.getIsAllRowsSelected()) {\n return intl.formatMessage({ id: \"deSelectAllTooltip\" });\n } else {\n return intl.formatMessage({ id: \"selectAllTooltip\" });\n }\n}\n\nfunction slug(id: string) {\n return id\n .toLowerCase()\n .replace(/[^a-z0-9 -]/g, \"\")\n .replace(/\\s+/g, \"-\")\n .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"createColumns.js","sources":["createColumns.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { createColumnHelper, Table as TanstackTable } from \"@tanstack/react-table\";\nimport { FormatOptions, ResultColumn, SelectionMode } from \"../ResultList\";\nimport { SelectComponent } from \"./SelectComponent\";\n\nexport const SELECT_COLUMN_SIZE = 70;\n\nconst columnHelper = createColumnHelper<BaseFeature>();\n\nexport interface CreateColumnsOptions {\n columns: ResultColumn[];\n intl: PackageIntl;\n tableWidth?: number;\n formatOptions?: FormatOptions;\n selectionMode: SelectionMode;\n selectionStyle: \"radio\" | \"checkbox\";\n}\n\nexport function createColumns(options: CreateColumnsOptions) {\n const { columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle } = options;\n const remainingColumnWidth: number | undefined =\n tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);\n const selectionColumn = createSelectionColumn(intl, selectionMode, selectionStyle);\n const columnDefs = columns.map((column, index) => {\n const columnWidth = column.width || remainingColumnWidth;\n const configuredId =\n column.id || (column.propertyName && slug(column.propertyName)) || String(index);\n return createColumn({\n id: \"result-list-col_\" + configuredId,\n column: column,\n intl: intl,\n columnWidth: columnWidth,\n formatOptions: formatOptions\n });\n });\n return [selectionColumn, ...columnDefs];\n}\n\ninterface CreateColumnOptions {\n id: string;\n column: ResultColumn;\n intl: PackageIntl;\n columnWidth?: number;\n formatOptions?: FormatOptions;\n}\n\nfunction createColumn(options: CreateColumnOptions) {\n const { id, column, columnWidth, formatOptions, intl } = options;\n const { propertyName, getPropertyValue } = column;\n const hasPropertyValue = getPropertyValue != null || propertyName != null;\n\n if (!hasPropertyValue) {\n throw new Error(\n \"Display columns are not yet implemented. You must either specify 'propertyName' or 'getPropertyValue'.\"\n );\n }\n\n return columnHelper.accessor(\n (feature: BaseFeature) => {\n return getPropertyValue?.(feature) ?? feature.properties?.[propertyName!];\n },\n {\n id: id,\n cell: (info) => {\n const cellValue = info.getValue();\n if (column.renderCell) {\n return column.renderCell({\n feature: info.row.original,\n value: cellValue\n });\n }\n return renderFunc(cellValue, intl, formatOptions);\n },\n header: column.displayName ?? column.propertyName,\n size: columnWidth\n }\n );\n}\n\nfunction renderFunc(cellValue: unknown, intl: PackageIntl, formatOptions?: FormatOptions) {\n if (cellValue === null || cellValue === undefined) return \"\";\n const type = typeof cellValue;\n const formatNumber = (num: number | bigint) => {\n if (Number.isNaN(num)) return \"\";\n return intl.formatNumber(num, formatOptions?.numberOptions);\n };\n\n switch (type) {\n case \"number\": {\n return formatNumber(cellValue as number);\n }\n case \"bigint\": {\n return formatNumber(cellValue as bigint);\n }\n case \"boolean\": {\n return intl.formatMessage({ id: `displayBoolean.${cellValue}` });\n }\n case \"string\": {\n return cellValue as string;\n }\n case \"object\": {\n if (cellValue instanceof Date)\n return intl.formatDate(cellValue, formatOptions?.dateOptions);\n return cellValue.toString();\n }\n default:\n return String(cellValue);\n }\n}\n\nfunction createSelectionColumn(\n intl: PackageIntl,\n selectionMode: SelectionMode,\n selectionStyle: \"radio\" | \"checkbox\"\n) {\n return columnHelper.display({\n id: \"selection-buttons\",\n size: SELECT_COLUMN_SIZE,\n enableSorting: false,\n header: ({ table }) => {\n if (selectionMode !== \"multi\") return;\n return (\n <chakra.div\n display=\"inline-block\"\n onClick={(e) => {\n e.stopPropagation();\n }}\n className=\"result-list-select-all-container\"\n >\n <SelectComponent\n className=\"result-list-select-all-checkbox\"\n isChecked={table.getIsAllRowsSelected()}\n isIndeterminate={table.getIsSomeRowsSelected()}\n onChange={table.getToggleAllRowsSelectedHandler()}\n toolTipLabel={getCheckboxToolTip(table, intl)}\n />\n </chakra.div>\n );\n },\n cell: ({ row }) => {\n const className =\n selectionStyle === \"radio\"\n ? \"result-list-select-row-radio\"\n : \"result-list-select-row-checkbox\";\n return (\n <chakra.div\n display=\"inline-block\"\n onClick={(e) => {\n e.stopPropagation();\n }}\n className=\"result-list-select-row-container\"\n >\n <SelectComponent\n mode={selectionStyle}\n className={className}\n isChecked={row.getIsSelected()}\n isDisabled={!row.getCanSelect()}\n isIndeterminate={row.getIsSomeSelected()}\n onChange={row.getToggleSelectedHandler()}\n aria-label={intl.formatMessage({\n id: \"ariaLabel.selectSingle\"\n })}\n />\n </chakra.div>\n );\n }\n });\n}\n\nfunction calcRemainingColumnWidth(\n columns: ResultColumn[],\n tableWidth: number,\n selectColumnWidth: number = SELECT_COLUMN_SIZE\n) {\n const fullWidth = columns.reduce((sum, column) => (column.width ?? 0) + sum, 0);\n const undefinedWidthCount = columns.reduce(\n (sum, column) => (column.width === undefined ? sum + 1 : sum),\n 0\n );\n const remainingWidth = tableWidth - selectColumnWidth - fullWidth;\n return remainingWidth / undefinedWidthCount;\n}\n\nfunction getCheckboxToolTip<Data>(table: TanstackTable<Data>, intl: PackageIntl) {\n if (table.getIsAllRowsSelected()) {\n return intl.formatMessage({ id: \"deSelectAllTooltip\" });\n } else {\n return intl.formatMessage({ id: \"selectAllTooltip\" });\n }\n}\n\nfunction slug(id: string) {\n return id\n .toLowerCase()\n .replace(/[^a-z0-9 -]/g, \"\")\n .replace(/\\s+/g, \"-\")\n .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEvent } from '@open-pioneer/react-utils';
|
|
2
|
-
import { useReactTable,
|
|
2
|
+
import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
|
|
3
3
|
import { useState, useMemo, useEffect } from 'react';
|
|
4
4
|
import { usePrevious } from 'react-use';
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSetupTable.js","sources":["useSetupTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport {\n RowSelectionState,\n SortingState,\n Updater,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { usePrevious } from \"react-use\";\nimport { DataTableProps } from \"./DataTable\";\n\nexport function useSetupTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n const { data, columns, onSelectionChange: onSelectionChange, selectionMode } = props;\n const [sorting, setSorting] = useState<SortingState>([]);\n const previousSelectionMode = usePrevious(props.selectionMode);\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n // Only sort by columns which actually exist\n const actualSort = useMemo(() => {\n return sorting.filter((sort) => columns.some((c) => c.id === sort.id));\n }, [sorting, columns]);\n\n const updateSelection = useEvent((updaterOrValue: Updater<RowSelectionState>) => {\n const newSelection = applyUpdate(rowSelection, updaterOrValue);\n if (newSelection === rowSelection) {\n return;\n }\n\n setRowSelection(newSelection);\n\n if (onSelectionChange) {\n const rowsById = table.getCoreRowModel().rowsById;\n const selectedFeatures: BaseFeature[] = [];\n for (const rowId of Object.keys(newSelection)) {\n if (!newSelection[rowId]) {\n continue;\n }\n\n const row = rowsById[rowId];\n if (!row) {\n continue;\n }\n\n selectedFeatures.push(row.original);\n }\n\n onSelectionChange({\n features: selectedFeatures,\n getFeatureIds: () => {\n return selectedFeatures.map((feature: BaseFeature) => feature.id);\n }\n });\n }\n });\n\n const table = useReactTable({\n columns: columns,\n data,\n getRowId(feature) {\n return String(feature.id);\n },\n columnResizeMode: \"onChange\",\n getCoreRowModel: getCoreRowModel(),\n enableRowSelection: true,\n enableMultiRowSelection: selectionMode === \"multi\",\n onRowSelectionChange: updateSelection,\n onSortingChange: setSorting,\n getSortedRowModel: getSortedRowModel(),\n state: {\n sorting: actualSort,\n rowSelection\n }\n });\n\n useEffect(() => {\n if (previousSelectionMode && selectionMode !== previousSelectionMode) {\n table.resetRowSelection();\n }\n }, [table, previousSelectionMode, selectionMode]);\n\n return { table, sorting, rowSelection };\n}\n\nfunction applyUpdate<T>(current: T, updaterOrValue: Updater<T>): T {\n if (typeof updaterOrValue === \"function\") {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (updaterOrValue as any)(current);\n }\n return updaterOrValue;\n}\n"],"names":[],"mappings":";;;;;AAgBO,SAAS,cAAwC,KAA6B,EAAA;AACjF,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,iBAAA,EAAsC,eAAkB,GAAA,KAAA
|
|
1
|
+
{"version":3,"file":"useSetupTable.js","sources":["useSetupTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport {\n RowSelectionState,\n SortingState,\n Updater,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { usePrevious } from \"react-use\";\nimport { DataTableProps } from \"./DataTable\";\n\nexport function useSetupTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n const { data, columns, onSelectionChange: onSelectionChange, selectionMode } = props;\n const [sorting, setSorting] = useState<SortingState>([]);\n const previousSelectionMode = usePrevious(props.selectionMode);\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n // Only sort by columns which actually exist\n const actualSort = useMemo(() => {\n return sorting.filter((sort) => columns.some((c) => c.id === sort.id));\n }, [sorting, columns]);\n\n const updateSelection = useEvent((updaterOrValue: Updater<RowSelectionState>) => {\n const newSelection = applyUpdate(rowSelection, updaterOrValue);\n if (newSelection === rowSelection) {\n return;\n }\n\n setRowSelection(newSelection);\n\n if (onSelectionChange) {\n const rowsById = table.getCoreRowModel().rowsById;\n const selectedFeatures: BaseFeature[] = [];\n for (const rowId of Object.keys(newSelection)) {\n if (!newSelection[rowId]) {\n continue;\n }\n\n const row = rowsById[rowId];\n if (!row) {\n continue;\n }\n\n selectedFeatures.push(row.original);\n }\n\n onSelectionChange({\n features: selectedFeatures,\n getFeatureIds: () => {\n return selectedFeatures.map((feature: BaseFeature) => feature.id);\n }\n });\n }\n });\n\n const table = useReactTable({\n columns: columns,\n data,\n getRowId(feature) {\n return String(feature.id);\n },\n columnResizeMode: \"onChange\",\n getCoreRowModel: getCoreRowModel(),\n enableRowSelection: true,\n enableMultiRowSelection: selectionMode === \"multi\",\n onRowSelectionChange: updateSelection,\n onSortingChange: setSorting,\n getSortedRowModel: getSortedRowModel(),\n state: {\n sorting: actualSort,\n rowSelection\n }\n });\n\n useEffect(() => {\n if (previousSelectionMode && selectionMode !== previousSelectionMode) {\n table.resetRowSelection();\n }\n }, [table, previousSelectionMode, selectionMode]);\n\n return { table, sorting, rowSelection };\n}\n\nfunction applyUpdate<T>(current: T, updaterOrValue: Updater<T>): T {\n if (typeof updaterOrValue === \"function\") {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (updaterOrValue as any)(current);\n }\n return updaterOrValue;\n}\n"],"names":[],"mappings":"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"}
|
package/README.md
CHANGED
|
@@ -129,9 +129,9 @@ The default value is `false`.
|
|
|
129
129
|
|
|
130
130
|
If memoization is turned on, the result list only rerenders if
|
|
131
131
|
|
|
132
|
-
-
|
|
133
|
-
-
|
|
134
|
-
-
|
|
132
|
+
- direct properties of the result list table changes,
|
|
133
|
+
- a row is selected (or deselected), or
|
|
134
|
+
- the sort order is changed,
|
|
135
135
|
|
|
136
136
|
but the performance of the result list is greatly improved, especially for high row counts.
|
|
137
137
|
|
|
@@ -215,8 +215,8 @@ For example, when `data` or `columns` is modified, the scroll position, the sele
|
|
|
215
215
|
|
|
216
216
|
This is done to enable use cases such as:
|
|
217
217
|
|
|
218
|
-
-
|
|
219
|
-
-
|
|
218
|
+
- dynamically showing or hiding certain columns depending on application state
|
|
219
|
+
- dynamically adding new items to or removing items from the component
|
|
220
220
|
|
|
221
221
|
To discard the existing state, see "Resetting component state".
|
|
222
222
|
|
package/ResultList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultList.js","sources":["ResultList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box } from \"@open-pioneer/chakra-integration\";\nimport {\n BaseFeature,\n HighlightOptions,\n MapModelProps,\n useMapModel,\n ZoomOptions\n} from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataTable } from \"./DataTable/DataTable\";\nimport { createColumns } from \"./DataTable/createColumns\";\nimport { FormatNumberOptions } from \"@formatjs/intl\";\n\n/**\n * Configures a column in the result list component.\n *\n * A column typically renders a property from the underlying feature.\n */\nexport interface ResultColumn {\n /**\n * Use this option to define an explicit column id.\n * This can be helpful to track your column when it moves in the table (for example, the sort order can be maintained).\n *\n * If this is not defined, {@link propertyName} will serve as a fallback.\n * If that is also not defined, the column index will be used instead.\n *\n * It is recommended to specify an id, if no {@link propertyName} has been set, because the\n * column index fallback is not advised.\n */\n id?: string;\n\n /**\n * The display name of this column.\n *\n * If no `displayName` has been configured, {@link propertyName} will serve as a fallback value.\n * If `propertyName` is also undefined, no column header will be rendered at all.\n */\n displayName?: string;\n\n /**\n * The width of this column, in pixels.\n */\n width?: number;\n\n /**\n * The property name to render.\n *\n * The value is expected to be available as `feature.properties[propertyName]`.\n *\n * See also {@link getPropertyValue}.\n */\n propertyName?: string;\n\n /**\n * Define this function to return a custom property value for this column.\n *\n * This can be used to create derived columns (by combining multiple properties into one value)\n * or to create columns for property that don't exist directly on the feature.\n *\n * The return value of this function will be rendered by the table.\n */\n getPropertyValue?: (feature: BaseFeature) => unknown;\n\n /** Custom render function to render a table cell in this column. */\n renderCell?: (context: RenderCellContext) => ReactNode;\n}\n\n/**\n * The arguments passed to {@link ResultColumn.renderCell | renderCell}.\n */\nexport interface RenderCellContext {\n /**\n * The feature in this row.\n */\n feature: BaseFeature;\n\n /**\n * The value of this column.\n * May be undefined if neither `propertyName` nor `getPropertyValue` was specified on the column.\n */\n value: unknown;\n}\n\n/**\n * To specify the format of cell values if they are of number or date type.\n */\nexport interface FormatOptions {\n /**\n * To specify the format of number type values\n */\n numberOptions?: FormatNumberOptions;\n /**\n * To specify the format of date type values\n */\n dateOptions?: Intl.DateTimeFormatOptions;\n}\n\n/**\n * Configures the result list's content.\n */\nexport interface ResultListInput {\n /**\n * Configures the columns shown by the result list.\n */\n columns: ResultColumn[];\n\n /**\n * The data shown by the result list component.\n * Every feature will be rendered as an individual row.\n */\n data: BaseFeature[];\n\n /**\n * Optional formatOptions to specify the `numberOptions` for number type values and\n * `dateOptions` to specify the format of date type values\n */\n formatOptions?: FormatOptions;\n}\n\n/**\n * Emitted when the selection within the ResultList changes.\n */\nexport interface ResultListSelectionChangeEvent {\n features: BaseFeature[];\n getFeatureIds: () => (number | string)[];\n}\n\n/**\n * Specifies whether it should be possible to select multiple or only single rows.\n */\nexport type SelectionMode = \"multi\" | \"single\";\n\n/**\n * Properties supported by the {@link ResultList} component.\n */\nexport interface ResultListProps extends CommonComponentProps, MapModelProps {\n /**\n * Describes the data rendered by the component.\n */\n input: ResultListInput;\n\n /**\n * The selection mode used by the result list. Defaults to `\"multi\"`.\n */\n selectionMode?: SelectionMode;\n\n /**\n * The style used for the selection controls in a row.\n * Defaults to `\"checkbox\"` if `selectionMode` is `\"multi\"`, or `\"radio\"` if `selectionMode` is `\"single\"`.\n *\n * Note: `\"radio\"` can not be used together with multi selection.\n */\n selectionStyle?: \"radio\" | \"checkbox\";\n\n /**\n * This handler is called whenever the user has changed the selected features in the result-list.\n */\n onSelectionChange?: (event: ResultListSelectionChangeEvent) => void;\n\n /**\n * Specifies if the map should zoom to features when they are loaded into the result-list. Defaults to true.\n */\n enableZoom?: boolean;\n\n /**\n * Should data be highlighted in the map. Default true.\n */\n enableHighlight?: boolean;\n\n /**\n * Optional styling option\n */\n highlightOptions?: HighlightOptions;\n\n /**\n * Optional zooming options\n */\n zoomOptions?: ZoomOptions;\n\n /**\n * Should each row be memoized to improve render performance. Default `false`.\n */\n memoizeRows?: boolean;\n}\n\n/**\n * A component that displays a set of features as a list.\n */\nexport const ResultList: FC<ResultListProps> = (props) => {\n const { containerProps } = useCommonComponentProps(\"result-list\", props);\n const intl = useIntl();\n const {\n input: { data, columns, formatOptions },\n memoizeRows = false,\n onSelectionChange,\n enableZoom = true,\n zoomOptions,\n enableHighlight = true,\n selectionMode = \"multi\",\n selectionStyle = selectionMode === \"single\" ? \"radio\" : \"checkbox\",\n highlightOptions\n } = props;\n\n const { map } = useMapModel(props);\n\n if (columns.length === 0) {\n throw Error(\"No columns were defined. The result list cannot be displayed.\");\n }\n\n if (selectionMode === \"multi\" && selectionStyle === \"radio\") {\n throw new Error(\"Cannot mix multi selection with selectionStyle 'radio'.\");\n }\n\n const containerRef = useRef<HTMLDivElement>(null);\n const tableWidth = useTableWidth(containerRef);\n const dataTableColumns = useMemo(\n () =>\n createColumns({\n columns: columns,\n intl: intl,\n tableWidth: tableWidth,\n formatOptions: formatOptions,\n selectionMode,\n selectionStyle\n }),\n [columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle]\n );\n\n useEffect(() => {\n if (!map) {\n return;\n }\n if (enableZoom) {\n map.zoom(data, zoomOptions);\n }\n\n if (enableHighlight) {\n const highlight = map.highlight(data, highlightOptions);\n return () => highlight.destroy();\n }\n }, [map, data, zoomOptions, enableZoom, enableHighlight, highlightOptions]);\n\n return (\n <Box {...containerProps} height=\"100%\" overflowY=\"auto\" ref={containerRef}>\n <DataTable\n columns={dataTableColumns}\n data={data}\n memoizeRows={memoizeRows}\n selectionMode={selectionMode}\n onSelectionChange={onSelectionChange}\n />\n </Box>\n );\n};\n\nfunction useTableWidth(tableRef: RefObject<HTMLDivElement> | null) {\n const [tableWidth, setTableWidth] = useState<number>();\n\n useEffect(() => {\n if (!tableRef?.current) return;\n const resizeObserver = new ResizeObserver((event) => {\n // Depending on the layout, you may need to swap inlineSize with blockSize\n // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize\n const width = event[0]?.contentBoxSize[0]?.inlineSize;\n if (width != null) {\n setTableWidth(width);\n }\n });\n resizeObserver.observe(tableRef.current);\n return () => resizeObserver.disconnect();\n }, [tableRef]);\n return tableWidth;\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ResultList.js","sources":["ResultList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box } from \"@open-pioneer/chakra-integration\";\nimport {\n BaseFeature,\n HighlightOptions,\n MapModelProps,\n useMapModel,\n ZoomOptions\n} from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DataTable } from \"./DataTable/DataTable\";\nimport { createColumns } from \"./DataTable/createColumns\";\nimport { FormatNumberOptions } from \"@formatjs/intl\";\n\n/**\n * Configures a column in the result list component.\n *\n * A column typically renders a property from the underlying feature.\n */\nexport interface ResultColumn {\n /**\n * Use this option to define an explicit column id.\n * This can be helpful to track your column when it moves in the table (for example, the sort order can be maintained).\n *\n * If this is not defined, {@link propertyName} will serve as a fallback.\n * If that is also not defined, the column index will be used instead.\n *\n * It is recommended to specify an id, if no {@link propertyName} has been set, because the\n * column index fallback is not advised.\n */\n id?: string;\n\n /**\n * The display name of this column.\n *\n * If no `displayName` has been configured, {@link propertyName} will serve as a fallback value.\n * If `propertyName` is also undefined, no column header will be rendered at all.\n */\n displayName?: string;\n\n /**\n * The width of this column, in pixels.\n */\n width?: number;\n\n /**\n * The property name to render.\n *\n * The value is expected to be available as `feature.properties[propertyName]`.\n *\n * See also {@link getPropertyValue}.\n */\n propertyName?: string;\n\n /**\n * Define this function to return a custom property value for this column.\n *\n * This can be used to create derived columns (by combining multiple properties into one value)\n * or to create columns for property that don't exist directly on the feature.\n *\n * The return value of this function will be rendered by the table.\n */\n getPropertyValue?: (feature: BaseFeature) => unknown;\n\n /** Custom render function to render a table cell in this column. */\n renderCell?: (context: RenderCellContext) => ReactNode;\n}\n\n/**\n * The arguments passed to {@link ResultColumn.renderCell | renderCell}.\n */\nexport interface RenderCellContext {\n /**\n * The feature in this row.\n */\n feature: BaseFeature;\n\n /**\n * The value of this column.\n * May be undefined if neither `propertyName` nor `getPropertyValue` was specified on the column.\n */\n value: unknown;\n}\n\n/**\n * To specify the format of cell values if they are of number or date type.\n */\nexport interface FormatOptions {\n /**\n * To specify the format of number type values\n */\n numberOptions?: FormatNumberOptions;\n /**\n * To specify the format of date type values\n */\n dateOptions?: Intl.DateTimeFormatOptions;\n}\n\n/**\n * Configures the result list's content.\n */\nexport interface ResultListInput {\n /**\n * Configures the columns shown by the result list.\n */\n columns: ResultColumn[];\n\n /**\n * The data shown by the result list component.\n * Every feature will be rendered as an individual row.\n */\n data: BaseFeature[];\n\n /**\n * Optional formatOptions to specify the `numberOptions` for number type values and\n * `dateOptions` to specify the format of date type values\n */\n formatOptions?: FormatOptions;\n}\n\n/**\n * Emitted when the selection within the ResultList changes.\n */\nexport interface ResultListSelectionChangeEvent {\n features: BaseFeature[];\n getFeatureIds: () => (number | string)[];\n}\n\n/**\n * Specifies whether it should be possible to select multiple or only single rows.\n */\nexport type SelectionMode = \"multi\" | \"single\";\n\n/**\n * Properties supported by the {@link ResultList} component.\n */\nexport interface ResultListProps extends CommonComponentProps, MapModelProps {\n /**\n * Describes the data rendered by the component.\n */\n input: ResultListInput;\n\n /**\n * The selection mode used by the result list. Defaults to `\"multi\"`.\n */\n selectionMode?: SelectionMode;\n\n /**\n * The style used for the selection controls in a row.\n * Defaults to `\"checkbox\"` if `selectionMode` is `\"multi\"`, or `\"radio\"` if `selectionMode` is `\"single\"`.\n *\n * Note: `\"radio\"` can not be used together with multi selection.\n */\n selectionStyle?: \"radio\" | \"checkbox\";\n\n /**\n * This handler is called whenever the user has changed the selected features in the result-list.\n */\n onSelectionChange?: (event: ResultListSelectionChangeEvent) => void;\n\n /**\n * Specifies if the map should zoom to features when they are loaded into the result-list. Defaults to true.\n */\n enableZoom?: boolean;\n\n /**\n * Should data be highlighted in the map. Default true.\n */\n enableHighlight?: boolean;\n\n /**\n * Optional styling option\n */\n highlightOptions?: HighlightOptions;\n\n /**\n * Optional zooming options\n */\n zoomOptions?: ZoomOptions;\n\n /**\n * Should each row be memoized to improve render performance. Default `false`.\n */\n memoizeRows?: boolean;\n}\n\n/**\n * A component that displays a set of features as a list.\n */\nexport const ResultList: FC<ResultListProps> = (props) => {\n const { containerProps } = useCommonComponentProps(\"result-list\", props);\n const intl = useIntl();\n const {\n input: { data, columns, formatOptions },\n memoizeRows = false,\n onSelectionChange,\n enableZoom = true,\n zoomOptions,\n enableHighlight = true,\n selectionMode = \"multi\",\n selectionStyle = selectionMode === \"single\" ? \"radio\" : \"checkbox\",\n highlightOptions\n } = props;\n\n const { map } = useMapModel(props);\n\n if (columns.length === 0) {\n throw Error(\"No columns were defined. The result list cannot be displayed.\");\n }\n\n if (selectionMode === \"multi\" && selectionStyle === \"radio\") {\n throw new Error(\"Cannot mix multi selection with selectionStyle 'radio'.\");\n }\n\n const containerRef = useRef<HTMLDivElement>(null);\n const tableWidth = useTableWidth(containerRef);\n const dataTableColumns = useMemo(\n () =>\n createColumns({\n columns: columns,\n intl: intl,\n tableWidth: tableWidth,\n formatOptions: formatOptions,\n selectionMode,\n selectionStyle\n }),\n [columns, intl, tableWidth, formatOptions, selectionMode, selectionStyle]\n );\n\n useEffect(() => {\n if (!map) {\n return;\n }\n if (enableZoom) {\n map.zoom(data, zoomOptions);\n }\n\n if (enableHighlight) {\n const highlight = map.highlight(data, highlightOptions);\n return () => highlight.destroy();\n }\n }, [map, data, zoomOptions, enableZoom, enableHighlight, highlightOptions]);\n\n return (\n <Box {...containerProps} height=\"100%\" overflowY=\"auto\" ref={containerRef}>\n <DataTable\n columns={dataTableColumns}\n data={data}\n memoizeRows={memoizeRows}\n selectionMode={selectionMode}\n onSelectionChange={onSelectionChange}\n />\n </Box>\n );\n};\n\nfunction useTableWidth(tableRef: RefObject<HTMLDivElement | null>) {\n const [tableWidth, setTableWidth] = useState<number>();\n\n useEffect(() => {\n if (!tableRef?.current) return;\n const resizeObserver = new ResizeObserver((event) => {\n // Depending on the layout, you may need to swap inlineSize with blockSize\n // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize\n const width = event[0]?.contentBoxSize[0]?.inlineSize;\n if (width != null) {\n setTableWidth(width);\n }\n });\n resizeObserver.observe(tableRef.current);\n return () => resizeObserver.disconnect();\n }, [tableRef]);\n return tableWidth;\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "module",
|
|
3
3
|
"name": "@open-pioneer/result-list",
|
|
4
|
-
"version": "0.9.0
|
|
4
|
+
"version": "0.9.0",
|
|
5
5
|
"description": "This package provides a UI component to display features and their attributes.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"open-pioneer-trails"
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@chakra-ui/icons": "^2.2.4",
|
|
18
|
-
"@open-pioneer/chakra-integration": "^
|
|
19
|
-
"@open-pioneer/core": "^
|
|
20
|
-
"@open-pioneer/react-utils": "^
|
|
21
|
-
"@open-pioneer/runtime": "^
|
|
18
|
+
"@open-pioneer/chakra-integration": "^3.0.0",
|
|
19
|
+
"@open-pioneer/core": "^3.0.0",
|
|
20
|
+
"@open-pioneer/react-utils": "^3.0.0",
|
|
21
|
+
"@open-pioneer/runtime": "^3.0.0",
|
|
22
22
|
"@tanstack/react-table": "^8.20.5",
|
|
23
23
|
"classnames": "^2.3.2",
|
|
24
|
-
"ol": "^10.
|
|
25
|
-
"react": "^
|
|
24
|
+
"ol": "^10.4.0",
|
|
25
|
+
"react": "^19.0.0",
|
|
26
26
|
"react-use": "^17.5.1",
|
|
27
|
-
"@open-pioneer/map": "^0.9.0
|
|
27
|
+
"@open-pioneer/map": "^0.9.0"
|
|
28
28
|
},
|
|
29
29
|
"exports": {
|
|
30
30
|
"./package.json": "./package.json",
|