@itwin/presentation-hierarchies-react 2.0.0-alpha.11 → 2.0.0-alpha.12
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
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @itwin/presentation-hierarchies-react
|
|
2
2
|
|
|
3
|
+
## 2.0.0-alpha.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#922](https://github.com/iTwin/presentation/pull/922): Fix tree displaying aditional scrollbars, when scrolling to the last element with low tree width.
|
|
8
|
+
|
|
3
9
|
## 2.0.0-alpha.11
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -51,7 +51,7 @@ export function TreeRenderer({ rootNodes, expandNode, localizedStrings, selectNo
|
|
|
51
51
|
scrollToNode.current = errorNode.parent?.id;
|
|
52
52
|
return;
|
|
53
53
|
}
|
|
54
|
-
virtualizer.scrollToIndex(index);
|
|
54
|
+
virtualizer.scrollToIndex(index, { align: "end" });
|
|
55
55
|
};
|
|
56
56
|
useEffect(() => {
|
|
57
57
|
if (scrollToNode.current === undefined) {
|
|
@@ -61,10 +61,10 @@ export function TreeRenderer({ rootNodes, expandNode, localizedStrings, selectNo
|
|
|
61
61
|
if (index === -1) {
|
|
62
62
|
return;
|
|
63
63
|
}
|
|
64
|
-
virtualizer.scrollToIndex(index);
|
|
64
|
+
virtualizer.scrollToIndex(index, { align: "end" });
|
|
65
65
|
scrollToNode.current = undefined;
|
|
66
66
|
}, [flatNodes, virtualizer]);
|
|
67
|
-
return (_jsxs(LocalizationContextProvider, { localizedStrings: localizedStrings, children: [_jsx(TreeErrorRenderer, { errorList: errorList, scrollToElement: scrollToElement, getHierarchyLevelDetails: getHierarchyLevelDetails, onFilterClick: onFilterClick, reloadTree: reloadTree }), _jsx("div", { style: { height: "100%", width: "100%", overflowY: "auto" }, ref: parentRef, children: _jsx(Tree.Root, { style: { height: virtualizer.getTotalSize(), minHeight: "100%", width: "100%", position: "relative" }, children: items.map((virtualizedItem) => {
|
|
67
|
+
return (_jsxs(LocalizationContextProvider, { localizedStrings: localizedStrings, children: [_jsx(TreeErrorRenderer, { errorList: errorList, scrollToElement: scrollToElement, getHierarchyLevelDetails: getHierarchyLevelDetails, onFilterClick: onFilterClick, reloadTree: reloadTree }), _jsx("div", { style: { height: "100%", width: "100%", overflowY: "auto" }, ref: parentRef, children: _jsx(Tree.Root, { style: { height: virtualizer.getTotalSize(), minHeight: "100%", width: "100%", position: "relative", overflow: "hidden" }, children: items.map((virtualizedItem) => {
|
|
68
68
|
return (_createElement(TreeNodeRenderer, { ...treeProps, ref: virtualizer.measureElement, style: {
|
|
69
69
|
position: "absolute",
|
|
70
70
|
top: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/itwinui/TreeRenderer.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/itwinui/TreeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { ComponentPropsWithoutRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Tree } from \"@itwin/itwinui-react/bricks\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { PresentationHierarchyNode, PresentationTreeNode } from \"../TreeNode.js\";\nimport { SelectionMode, useSelectionHandler } from \"../UseSelectionHandler.js\";\nimport { useTree } from \"../UseTree.js\";\nimport { ErrorNode, flattenNodes, getErrors } from \"./FlatTreeNode.js\";\nimport { LocalizationContextProvider } from \"./LocalizationContext.js\";\nimport { TreeErrorItemProps, TreeErrorRenderer } from \"./TreeErrorRenderer.js\";\nimport { TreeNodeRenderer } from \"./TreeNodeRenderer.js\";\n\n/** @alpha */\nexport type TreeProps = ComponentPropsWithoutRef<typeof Tree.Root>;\n\n/** @alpha */\nexport type TreeNodeRendererProps = ComponentPropsWithoutRef<typeof TreeNodeRenderer>;\n/** @alpha */\ninterface TreeRendererOwnProps {\n /** Root nodes of the tree. */\n rootNodes: PresentationTreeNode[];\n /** Active selection mode used by the tree. Defaults to `\"single\"`. */\n selectionMode?: SelectionMode;\n}\n\n/** @alpha */\ntype TreeRendererProps = Pick<ReturnType<typeof useTree>, \"expandNode\"> &\n Partial<Pick<ReturnType<typeof useTree>, \"selectNodes\" | \"isNodeSelected\" | \"getHierarchyLevelDetails\" | \"reloadTree\">> &\n Pick<TreeErrorItemProps, \"onFilterClick\"> &\n Omit<TreeNodeRendererProps, \"node\" | \"reloadTree\"> &\n TreeRendererOwnProps &\n ComponentPropsWithoutRef<typeof LocalizationContextProvider>;\n\n/**\n * A component that renders a tree using the `Tree` component from `@itwin/itwinui-react`. The tree nodes\n * are rendered using `TreeNodeRenderer` component from this package.\n *\n * @see https://itwinui.bentley.com/docs/tree\n * @alpha\n */\nexport function TreeRenderer({\n rootNodes,\n expandNode,\n localizedStrings,\n selectNodes,\n selectionMode,\n getHierarchyLevelDetails,\n onFilterClick,\n reloadTree,\n ...treeProps\n}: TreeRendererProps) {\n const { onNodeClick, onNodeKeyDown } = useSelectionHandler({\n rootNodes,\n selectNodes: selectNodes ?? noopSelectNodes,\n selectionMode: selectionMode ?? \"single\",\n });\n const scrollToNode = useRef<string | undefined>(undefined);\n const parentRef = useRef<HTMLDivElement>(null);\n const flatNodes = useMemo(() => flattenNodes(rootNodes), [rootNodes]);\n const errorList = useMemo(() => getErrors(rootNodes), [rootNodes]);\n\n const hasError = useCallback(\n (node: PresentationHierarchyNode) => {\n if (node.children === true) {\n return undefined;\n }\n\n const error = errorList.find((errorNode) => errorNode.parent?.id === node.id);\n return error;\n },\n [errorList],\n );\n\n const virtualizer = useVirtualizer({\n count: flatNodes.length,\n getScrollElement: () => parentRef.current,\n getItemKey: (index) => flatNodes[index].id,\n estimateSize: () => 28,\n overscan: 5,\n });\n\n const items = virtualizer.getVirtualItems();\n\n const scrollToElement = (errorNode: ErrorNode) => {\n const index = flatNodes.findIndex((flatNode) => flatNode.id === errorNode.parent?.id);\n if (index === -1) {\n errorNode.expandTo((nodeId) => expandNode(nodeId, true));\n scrollToNode.current = errorNode.parent?.id;\n return;\n }\n virtualizer.scrollToIndex(index, { align: \"end\" });\n };\n\n useEffect(() => {\n if (scrollToNode.current === undefined) {\n return;\n }\n const index = flatNodes.findIndex((flatNode) => flatNode.id === scrollToNode.current);\n if (index === -1) {\n return;\n }\n virtualizer.scrollToIndex(index, { align: \"end\" });\n scrollToNode.current = undefined;\n }, [flatNodes, virtualizer]);\n\n return (\n <LocalizationContextProvider localizedStrings={localizedStrings}>\n <TreeErrorRenderer\n errorList={errorList}\n scrollToElement={scrollToElement}\n getHierarchyLevelDetails={getHierarchyLevelDetails}\n onFilterClick={onFilterClick}\n reloadTree={reloadTree}\n />\n <div style={{ height: \"100%\", width: \"100%\", overflowY: \"auto\" }} ref={parentRef}>\n <Tree.Root style={{ height: virtualizer.getTotalSize(), minHeight: \"100%\", width: \"100%\", position: \"relative\", overflow: \"hidden\" }}>\n {items.map((virtualizedItem) => {\n return (\n <TreeNodeRenderer\n {...treeProps}\n ref={virtualizer.measureElement}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n transform: `translateY(${virtualizedItem.start}px)`,\n willChange: \"transform\",\n }}\n expandNode={expandNode}\n onNodeClick={onNodeClick}\n onNodeKeyDown={onNodeKeyDown}\n hasError={hasError}\n node={flatNodes[virtualizedItem.index]}\n key={virtualizedItem.key}\n data-index={virtualizedItem.index}\n reloadTree={reloadTree}\n />\n );\n })}\n </Tree.Root>\n </div>\n </LocalizationContextProvider>\n );\n}\n\nfunction noopSelectNodes() {}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/presentation-hierarchies-react",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.12",
|
|
4
4
|
"description": "React components based on `@itwin/presentation-hierarchies`",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"immer": "^10.1.1",
|
|
45
45
|
"react-error-boundary": "^4.0.13",
|
|
46
46
|
"rxjs": "^7.8.1",
|
|
47
|
-
"@itwin/presentation-shared": "^1.2.1",
|
|
48
47
|
"@itwin/presentation-hierarchies": "^1.4.2",
|
|
48
|
+
"@itwin/presentation-shared": "^1.2.1",
|
|
49
49
|
"@itwin/unified-selection": "^1.4.1"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|