@itwin/presentation-hierarchies-react 2.0.0-alpha.13 → 2.0.0-alpha.15
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 +117 -0
- package/lib/esm/presentation-hierarchies-react/TreeNode.d.ts +0 -4
- package/lib/esm/presentation-hierarchies-react/TreeNode.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react/TreeNode.js.map +1 -1
- package/lib/esm/presentation-hierarchies-react/UseTree.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react/UseTree.js +1 -8
- package/lib/esm/presentation-hierarchies-react/UseTree.js.map +1 -1
- package/lib/esm/presentation-hierarchies-react/Utils.d.ts +5 -0
- package/lib/esm/presentation-hierarchies-react/Utils.d.ts.map +1 -0
- package/lib/esm/presentation-hierarchies-react/Utils.js +23 -0
- package/lib/esm/presentation-hierarchies-react/Utils.js.map +1 -0
- package/lib/esm/presentation-hierarchies-react/internal/UseUnifiedSelection.d.ts +1 -5
- package/lib/esm/presentation-hierarchies-react/internal/UseUnifiedSelection.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react/internal/UseUnifiedSelection.js +0 -11
- package/lib/esm/presentation-hierarchies-react/internal/UseUnifiedSelection.js.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/FilterAction.d.ts +18 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/FilterAction.d.ts.map +1 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/FilterAction.js +32 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/FilterAction.js.map +1 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/FlatTreeNode.d.ts +36 -7
- package/lib/esm/presentation-hierarchies-react/itwinui/FlatTreeNode.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/FlatTreeNode.js +18 -6
- package/lib/esm/presentation-hierarchies-react/itwinui/FlatTreeNode.js.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/LocalizationContext.d.ts +15 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/LocalizationContext.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/LocalizationContext.js +3 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/LocalizationContext.js.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/RootErrorRenderer.d.ts +16 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/RootErrorRenderer.d.ts.map +1 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/RootErrorRenderer.js +41 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/RootErrorRenderer.js.map +1 -0
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeErrorRenderer.d.ts +29 -9
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeErrorRenderer.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeErrorRenderer.js +52 -33
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeErrorRenderer.js.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeNodeRenderer.d.ts +13 -15
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeNodeRenderer.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeNodeRenderer.js +26 -38
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeNodeRenderer.js.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeRenderer.d.ts +9 -4
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeRenderer.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeRenderer.js +51 -24
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeRenderer.js.map +1 -1
- package/lib/esm/presentation-hierarchies-react.d.ts +3 -3
- package/lib/esm/presentation-hierarchies-react.d.ts.map +1 -1
- package/lib/esm/presentation-hierarchies-react.js +3 -3
- package/lib/esm/presentation-hierarchies-react.js.map +1 -1
- package/package.json +5 -5
- package/lib/esm/presentation-hierarchies-react/UnifiedSelectionContext.d.ts +0 -15
- package/lib/esm/presentation-hierarchies-react/UnifiedSelectionContext.d.ts.map +0 -1
- package/lib/esm/presentation-hierarchies-react/UnifiedSelectionContext.js +0 -22
- package/lib/esm/presentation-hierarchies-react/UnifiedSelectionContext.js.map +0 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeActionButton.d.ts +0 -31
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeActionButton.d.ts.map +0 -1
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeActionButton.js +0 -38
- package/lib/esm/presentation-hierarchies-react/itwinui/TreeActionButton.js.map +0 -1
|
@@ -3,61 +3,49 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
4
4
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
5
5
|
*--------------------------------------------------------------------------------------------*/
|
|
6
|
-
import { forwardRef, useCallback, useMemo, useRef, } from "react";
|
|
6
|
+
import { forwardRef, memo, useCallback, useMemo, useRef, } from "react";
|
|
7
7
|
import { Spinner, Tree } from "@itwin/itwinui-react/bricks";
|
|
8
|
-
import { isPlaceholderNode } from "./FlatTreeNode.js";
|
|
9
8
|
import { useLocalizationContext } from "./LocalizationContext.js";
|
|
10
|
-
import { TreeActionButton } from "./TreeActionButton.js";
|
|
11
9
|
const refreshSvg = new URL("@itwin/itwinui-icons/refresh.svg", import.meta.url).href;
|
|
12
10
|
/**
|
|
13
|
-
* A component that renders `
|
|
11
|
+
* A component that renders given `FlatTreeNode` using the `Tree.Item` component from `@itwin/itwinui-react`. The
|
|
12
|
+
* `FlatTreeNode` objects for this renderer are generally created using the `useFlatTreeNodeList` hook.
|
|
14
13
|
*
|
|
15
14
|
* @see `TreeRenderer`
|
|
16
15
|
* @see https://itwinui.bentley.com/docs/tree
|
|
17
16
|
* @public
|
|
18
17
|
*/
|
|
19
|
-
export const TreeNodeRenderer = forwardRef(({ node,
|
|
18
|
+
export const TreeNodeRenderer = memo(forwardRef(function HierarchyNode({ node, selected, error, expandNode, onNodeClick, onNodeKeyDown, reloadTree, getLabel, getSublabel, getActions, getDecorations, ...treeItemProps }, forwardedRef) {
|
|
20
19
|
const nodeRef = useRef(null);
|
|
21
20
|
const ref = useMergedRefs(forwardedRef, nodeRef);
|
|
22
21
|
const { localizedStrings } = useLocalizationContext();
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
actionButtons.push(...actions.map((action, index) => {
|
|
38
|
-
const actionInfo = action(node);
|
|
39
|
-
return _jsx(TreeActionButton, { ...actionInfo }, index);
|
|
40
|
-
}));
|
|
41
|
-
return actionButtons;
|
|
42
|
-
};
|
|
43
|
-
const selected = isNodeSelected(node.id);
|
|
44
|
-
return (_jsx(Tree.Item, { ...treeItemProps, ref: ref, "aria-level": node.level, "aria-posinset": node.posInLevel, "aria-setsize": node.levelSize, label: getLabel ? getLabel(node) : node.label, description: getSublabel ? getSublabel(node) : undefined, selected: selected, expanded: node.isExpanded || node.children === true || node.children.length > 0 ? node.isExpanded : undefined, onExpandedChange: (isExpanded) => {
|
|
22
|
+
const label = useMemo(() => (getLabel ? getLabel(node) : node.label), [getLabel, node]);
|
|
23
|
+
const description = useMemo(() => (getSublabel ? getSublabel(node) : undefined), [getSublabel, node]);
|
|
24
|
+
const decorations = useMemo(() => getDecorations?.(node), [getDecorations, node]);
|
|
25
|
+
const actions = useMemo(() => [
|
|
26
|
+
...(error && error.error.type === "Unknown"
|
|
27
|
+
? [
|
|
28
|
+
_jsx(Tree.ItemAction, { label: localizedStrings.retry, onClick: () => reloadTree({ parentNodeId: node.id, state: "reset" }), visible: true, icon: refreshSvg }, "retry"),
|
|
29
|
+
]
|
|
30
|
+
: []),
|
|
31
|
+
...(getActions ? getActions(node) : []),
|
|
32
|
+
], [getActions, node, error, localizedStrings, reloadTree]);
|
|
33
|
+
const isDisabled = treeItemProps["aria-disabled"] === true;
|
|
34
|
+
return (_jsx(Tree.Item, { ...treeItemProps, ref: ref, label: label, description: description, selected: selected, expanded: node.isExpanded || node.children === true || node.children.length > 0 ? node.isExpanded : undefined, onExpandedChange: useCallback((isExpanded) => {
|
|
45
35
|
expandNode(node.id, isExpanded);
|
|
46
|
-
}, onClick: (event) => {
|
|
47
|
-
!
|
|
48
|
-
}, onKeyDown: (event) => {
|
|
36
|
+
}, [node, expandNode]), onClick: useCallback((event) => {
|
|
37
|
+
!isDisabled && onNodeClick?.(node, !selected, event);
|
|
38
|
+
}, [node, isDisabled, selected, onNodeClick]), onKeyDown: useCallback((event) => {
|
|
49
39
|
// Ignore if it is called on the element inside, e.g. checkbox or expander
|
|
50
|
-
if (!
|
|
40
|
+
if (!isDisabled && event.target === nodeRef.current) {
|
|
51
41
|
onNodeKeyDown?.(node, !selected, event);
|
|
52
42
|
}
|
|
53
|
-
}, actions:
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
const PlaceholderNode = forwardRef(({ level, ...props }, forwardedRef) => {
|
|
43
|
+
}, [onNodeKeyDown, selected, isDisabled, node]), actions: actions, unstable_decorations: decorations, error: error?.error.id }));
|
|
44
|
+
}));
|
|
45
|
+
export const PlaceholderNode = memo(forwardRef(function PlaceholderNode({ ...props }, forwardedRef) {
|
|
57
46
|
const { localizedStrings } = useLocalizationContext();
|
|
58
|
-
return
|
|
59
|
-
});
|
|
60
|
-
PlaceholderNode.displayName = "PlaceholderNode";
|
|
47
|
+
return _jsx(Tree.Item, { ...props, ref: forwardedRef, label: localizedStrings.loading, icon: _jsx(Spinner, { size: "small", title: localizedStrings.loading }) });
|
|
48
|
+
}));
|
|
61
49
|
function useMergedRefs(...refs) {
|
|
62
50
|
return useCallback((instance) => {
|
|
63
51
|
refs.forEach((ref) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeNodeRenderer.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.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 {\n ComponentPropsWithoutRef,\n forwardRef,\n ForwardRefExoticComponent,\n LegacyRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\nimport { Spinner, Tree } from \"@itwin/itwinui-react/bricks\";\nimport { PresentationHierarchyNode } from \"../TreeNode.js\";\nimport { useTree, UseTreeResult } from \"../UseTree.js\";\nimport { ErrorNode, FlatTreeNode, isPlaceholderNode } from \"./FlatTreeNode.js\";\nimport { useLocalizationContext } from \"./LocalizationContext.js\";\nimport { TreeActionButton, TreeItemAction } from \"./TreeActionButton.js\";\n\nconst refreshSvg = new URL(\"@itwin/itwinui-icons/refresh.svg\", import.meta.url).href;\n\n/** @alpha */\ntype TreeNodeProps = ComponentPropsWithoutRef<typeof Tree.Item>;\n\n/** @alpha */\nexport interface TreeNodeRendererOwnProps {\n /** Node that is rendered. */\n node: FlatTreeNode;\n /** Returns a label for a given node. */\n getLabel?: (node: PresentationHierarchyNode) => ReactElement | undefined;\n /** Returns sublabel for a given node. */\n getSublabel?: (node: PresentationHierarchyNode) => ReactElement | undefined;\n /** Action to perform when the node is clicked. */\n onNodeClick?: (node: PresentationHierarchyNode, isSelected: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Action to perform when a key is pressed when the node is hovered on. */\n onNodeKeyDown?: (node: PresentationHierarchyNode, isSelected: boolean, event: React.KeyboardEvent<HTMLElement>) => void;\n /**\n * Actions for tree item.\n */\n actions?: Array<(node: PresentationHierarchyNode) => TreeItemAction>;\n /**\n * Used to render elements between expander and label.\n * E.g. icons, color picker, etc.\n */\n getDecorations?: (node: PresentationHierarchyNode) => ReactNode;\n /**\n * Used to determine if node contains errors.\n * Returns an error if node contains one, otherwise returns undefined.\n */\n hasError?: (node: PresentationHierarchyNode) => ErrorNode | undefined;\n}\n\n/** @alpha */\ntype TreeNodeRendererProps = Pick<ReturnType<typeof useTree>, \"expandNode\" | \"isNodeSelected\"> &\n Partial<Pick<ReturnType<typeof useTree>, \"getHierarchyLevelDetails\">> &\n Omit<TreeNodeProps, \"actions\" | \"aria-level\" | \"aria-posinset\" | \"aria-setsize\" | \"label\" | \"icon\" | \"expanded\" | \"selected\" | \"unstable_decorations\"> &\n Partial<Pick<UseTreeResult, \"reloadTree\">> &\n TreeNodeRendererOwnProps;\n\n/**\n * A component that renders `RenderedTreeNode` using the `TreeNode` component from `@itwin/itwinui-react`.\n *\n * @see `TreeRenderer`\n * @see https://itwinui.bentley.com/docs/tree\n * @public\n */\nexport const TreeNodeRenderer: ForwardRefExoticComponent<TreeNodeRendererProps & RefAttributes<HTMLElement>> = forwardRef(\n (\n { node, expandNode, getLabel, getSublabel, onNodeClick, onNodeKeyDown, isNodeSelected, actions, getDecorations, hasError, reloadTree, ...treeItemProps },\n forwardedRef,\n ) => {\n const nodeRef = useRef<HTMLElement>(null);\n const ref = useMergedRefs(forwardedRef, nodeRef);\n const { localizedStrings } = useLocalizationContext();\n\n const childErrorNode = useMemo(() => {\n return !isPlaceholderNode(node) ? hasError?.(node) : false;\n }, [hasError, node]);\n\n if (isPlaceholderNode(node)) {\n return <PlaceholderNode {...treeItemProps} level={node.level} ref={ref} />;\n }\n\n const getActions = () => {\n if (!actions || actions.length === 0) {\n return undefined;\n }\n\n const actionButtons: ReactElement[] = [];\n\n if (childErrorNode && childErrorNode.error.type === \"Unknown\") {\n actionButtons.push(\n <TreeActionButton\n label={localizedStrings.retry}\n action={() => reloadTree?.({ parentNodeId: node.id, state: \"reset\" })}\n show={true}\n icon={refreshSvg}\n />,\n );\n }\n\n actionButtons.push(\n ...actions.map((action, index) => {\n const actionInfo = action(node);\n return <TreeActionButton key={index} {...actionInfo} />;\n }),\n );\n\n return actionButtons;\n };\n\n const selected = isNodeSelected(node.id);\n return (\n <Tree.Item\n {...treeItemProps}\n ref={ref}\n aria-level={node.level}\n aria-posinset={node.posInLevel}\n aria-setsize={node.levelSize}\n label={getLabel ? getLabel(node) : node.label}\n description={getSublabel ? getSublabel(node) : undefined}\n selected={selected}\n expanded={node.isExpanded || node.children === true || node.children.length > 0 ? node.isExpanded : undefined}\n onExpandedChange={(isExpanded) => {\n expandNode(node.id, isExpanded);\n }}\n onClick={(event) => {\n !treeItemProps[\"aria-disabled\"] && onNodeClick?.(node, !selected, event);\n }}\n onKeyDown={(event) => {\n // Ignore if it is called on the element inside, e.g. checkbox or expander\n if (!treeItemProps[\"aria-disabled\"] && event.target === nodeRef.current) {\n onNodeKeyDown?.(node, !selected, event);\n }\n }}\n actions={getActions()}\n unstable_decorations={getDecorations && getDecorations(node)}\n error={!!childErrorNode}\n />\n );\n },\n);\nTreeNodeRenderer.displayName = \"TreeNodeRenderer\";\n\nconst PlaceholderNode = forwardRef<\n HTMLDivElement,\n Omit<TreeNodeProps, \"onExpanded\" | \"label\" | \"actions\" | \"aria-level\" | \"aria-posinset\" | \"aria-setsize\" | \"icon\"> & { level: number }\n>(({ level, ...props }, forwardedRef) => {\n const { localizedStrings } = useLocalizationContext();\n return (\n <Tree.Item\n {...props}\n aria-level={level}\n aria-posinset={1}\n aria-setsize={1}\n ref={forwardedRef}\n label={localizedStrings.loading}\n icon={<Spinner size={\"small\"} title={localizedStrings.loading} />}\n />\n );\n});\nPlaceholderNode.displayName = \"PlaceholderNode\";\n\nfunction useMergedRefs<T>(...refs: ReadonlyArray<Ref<T> | LegacyRef<T> | undefined | null>) {\n return useCallback(\n (instance: T | null) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(instance);\n } else if (ref) {\n (ref as MutableRefObject<T | null>).current = instance;\n }\n });\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n [...refs],\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TreeNodeRenderer.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.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 {\n ComponentPropsWithoutRef,\n FC,\n forwardRef,\n LegacyRef,\n memo,\n MutableRefObject,\n PropsWithRef,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\nimport { Spinner, Tree } from \"@itwin/itwinui-react/bricks\";\nimport { PresentationHierarchyNode } from \"../TreeNode.js\";\nimport { useTree, UseTreeResult } from \"../UseTree.js\";\nimport { ErrorNode } from \"./FlatTreeNode.js\";\nimport { useLocalizationContext } from \"./LocalizationContext.js\";\n\nconst refreshSvg = new URL(\"@itwin/itwinui-icons/refresh.svg\", import.meta.url).href;\n\n/** @alpha */\ntype TreeNodeProps = ComponentPropsWithoutRef<typeof Tree.Item>;\n\n/** @alpha */\nexport interface TreeNodeRendererOwnProps {\n /** Node that is rendered. */\n node: PresentationHierarchyNode;\n /** Returns a label for a given node. */\n getLabel?: (node: PresentationHierarchyNode) => ReactElement | undefined;\n /** Returns sublabel for a given node. */\n getSublabel?: (node: PresentationHierarchyNode) => ReactElement | undefined;\n /** Action to perform when the node is clicked. */\n onNodeClick?: (node: PresentationHierarchyNode, isSelected: boolean, event: React.MouseEvent<HTMLElement>) => void;\n /** Action to perform when a key is pressed when the node is hovered on. */\n onNodeKeyDown?: (node: PresentationHierarchyNode, isSelected: boolean, event: React.KeyboardEvent<HTMLElement>) => void;\n\n /**\n * Used to render elements between expander and label.\n * E.g. icons, color picker, etc.\n */\n getDecorations?: (node: PresentationHierarchyNode) => ReactNode;\n /**\n * Callback that returns actions for tree item. Must return an array of `Tree.ItemAction` elements.\n */\n getActions?: (node: PresentationHierarchyNode) => ReactNode[];\n /** Specifies if tree item has error. */\n error?: ErrorNode;\n}\n\n/** @alpha */\ntype TreeNodeRendererProps = Pick<ReturnType<typeof useTree>, \"expandNode\"> &\n Partial<Pick<ReturnType<typeof useTree>, \"getHierarchyLevelDetails\">> &\n Omit<TreeNodeProps, \"actions\" | \"label\" | \"expanded\" | \"unstable_decorations\" | \"error\"> &\n Pick<UseTreeResult, \"reloadTree\"> &\n TreeNodeRendererOwnProps;\n\n/**\n * A component that renders given `FlatTreeNode` using the `Tree.Item` component from `@itwin/itwinui-react`. The\n * `FlatTreeNode` objects for this renderer are generally created using the `useFlatTreeNodeList` hook.\n *\n * @see `TreeRenderer`\n * @see https://itwinui.bentley.com/docs/tree\n * @public\n */\nexport const TreeNodeRenderer: FC<PropsWithRef<TreeNodeRendererProps & RefAttributes<HTMLElement>>> = memo(\n forwardRef<HTMLElement, TreeNodeRendererProps>(function HierarchyNode(\n { node, selected, error, expandNode, onNodeClick, onNodeKeyDown, reloadTree, getLabel, getSublabel, getActions, getDecorations, ...treeItemProps },\n forwardedRef,\n ) {\n const nodeRef = useRef<HTMLElement>(null);\n const ref = useMergedRefs(forwardedRef, nodeRef);\n const { localizedStrings } = useLocalizationContext();\n\n const label = useMemo(() => (getLabel ? getLabel(node) : node.label), [getLabel, node]);\n const description = useMemo(() => (getSublabel ? getSublabel(node) : undefined), [getSublabel, node]);\n const decorations = useMemo(() => getDecorations?.(node), [getDecorations, node]);\n const actions = useMemo(\n () => [\n ...(error && error.error.type === \"Unknown\"\n ? [\n <Tree.ItemAction\n key=\"retry\"\n label={localizedStrings.retry}\n onClick={() => reloadTree({ parentNodeId: node.id, state: \"reset\" })}\n visible={true}\n icon={refreshSvg}\n />,\n ]\n : []),\n ...(getActions ? getActions(node) : []),\n ],\n [getActions, node, error, localizedStrings, reloadTree],\n );\n\n const isDisabled = treeItemProps[\"aria-disabled\"] === true;\n return (\n <Tree.Item\n {...treeItemProps}\n ref={ref}\n label={label}\n description={description}\n selected={selected}\n expanded={node.isExpanded || node.children === true || node.children.length > 0 ? node.isExpanded : undefined}\n onExpandedChange={useCallback(\n (isExpanded: boolean) => {\n expandNode(node.id, isExpanded);\n },\n [node, expandNode],\n )}\n onClick={useCallback<Required<TreeNodeProps>[\"onClick\"]>(\n (event) => {\n !isDisabled && onNodeClick?.(node, !selected, event);\n },\n [node, isDisabled, selected, onNodeClick],\n )}\n onKeyDown={useCallback<Required<TreeNodeProps>[\"onKeyDown\"]>(\n (event) => {\n // Ignore if it is called on the element inside, e.g. checkbox or expander\n if (!isDisabled && event.target === nodeRef.current) {\n onNodeKeyDown?.(node, !selected, event);\n }\n },\n [onNodeKeyDown, selected, isDisabled, node],\n )}\n actions={actions}\n unstable_decorations={decorations}\n error={error?.error.id}\n />\n );\n }),\n);\n\nexport const PlaceholderNode: FC<PropsWithRef<Omit<TreeNodeProps, \"onExpanded\" | \"label\" | \"actions\" | \"icon\" | \"error\"> & RefAttributes<HTMLElement>>> = memo(\n forwardRef<HTMLElement, Omit<TreeNodeProps, \"onExpanded\" | \"label\" | \"actions\" | \"icon\" | \"error\">>(function PlaceholderNode({ ...props }, forwardedRef) {\n const { localizedStrings } = useLocalizationContext();\n return <Tree.Item {...props} ref={forwardedRef} label={localizedStrings.loading} icon={<Spinner size={\"small\"} title={localizedStrings.loading} />} />;\n }),\n);\n\nfunction useMergedRefs<T>(...refs: ReadonlyArray<Ref<T> | LegacyRef<T> | undefined | null>) {\n return useCallback(\n (instance: T | null) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(instance);\n } else if (ref) {\n (ref as MutableRefObject<T | null>).current = instance;\n }\n });\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n [...refs],\n );\n}\n"]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from "react";
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactElement } from "react";
|
|
2
2
|
import { Tree } from "@itwin/itwinui-react/bricks";
|
|
3
3
|
import { PresentationTreeNode } from "../TreeNode.js";
|
|
4
4
|
import { SelectionMode } from "../UseSelectionHandler.js";
|
|
5
5
|
import { useTree } from "../UseTree.js";
|
|
6
6
|
import { LocalizationContextProvider } from "./LocalizationContext.js";
|
|
7
|
-
import {
|
|
7
|
+
import { RootErrorRendererProps } from "./RootErrorRenderer.js";
|
|
8
|
+
import { TreeErrorRendererProps } from "./TreeErrorRenderer.js";
|
|
8
9
|
import { TreeNodeRenderer } from "./TreeNodeRenderer.js";
|
|
9
10
|
/** @alpha */
|
|
10
11
|
export type TreeProps = ComponentPropsWithoutRef<typeof Tree.Root>;
|
|
@@ -16,9 +17,13 @@ interface TreeRendererOwnProps {
|
|
|
16
17
|
rootNodes: PresentationTreeNode[];
|
|
17
18
|
/** Active selection mode used by the tree. Defaults to `"single"`. */
|
|
18
19
|
selectionMode?: SelectionMode;
|
|
20
|
+
/** A render function for errors' display component. Defaults to `<TreeErrorRenderer />`. */
|
|
21
|
+
errorRenderer?: (props: TreeErrorRendererProps) => ReactElement;
|
|
22
|
+
/** A render function for root errors' display component. Defaults to `<RootErrorRenderer />`. */
|
|
23
|
+
rootErrorRenderer?: (props: RootErrorRendererProps) => ReactElement;
|
|
19
24
|
}
|
|
20
25
|
/** @alpha */
|
|
21
|
-
type TreeRendererProps = Pick<ReturnType<typeof useTree>, "expandNode"> & Partial<Pick<ReturnType<typeof useTree>, "selectNodes" | "isNodeSelected"
|
|
26
|
+
type TreeRendererProps = Pick<ReturnType<typeof useTree>, "expandNode"> & Partial<Pick<ReturnType<typeof useTree>, "selectNodes" | "isNodeSelected">> & Pick<ReturnType<typeof useTree>, "reloadTree" | "getHierarchyLevelDetails"> & Pick<TreeErrorRendererProps, "onFilterClick"> & Omit<TreeNodeRendererProps, "node" | "aria-level" | "aria-posinset" | "aria-setsize" | "reloadTree" | "selected" | "error"> & TreeRendererOwnProps & ComponentPropsWithoutRef<typeof LocalizationContextProvider>;
|
|
22
27
|
/**
|
|
23
28
|
* A component that renders a tree using the `Tree` component from `@itwin/itwinui-react`. The tree nodes
|
|
24
29
|
* are rendered using `TreeNodeRenderer` component from this package.
|
|
@@ -26,6 +31,6 @@ type TreeRendererProps = Pick<ReturnType<typeof useTree>, "expandNode"> & Partia
|
|
|
26
31
|
* @see https://itwinui.bentley.com/docs/tree
|
|
27
32
|
* @alpha
|
|
28
33
|
*/
|
|
29
|
-
export declare function TreeRenderer({ rootNodes,
|
|
34
|
+
export declare function TreeRenderer({ rootNodes, selectNodes, selectionMode, rootErrorRenderer, ...treeProps }: TreeRendererProps): import("react/jsx-runtime").JSX.Element;
|
|
30
35
|
export {};
|
|
31
36
|
//# sourceMappingURL=TreeRenderer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeRenderer.d.ts","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/itwinui/TreeRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAA2C,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TreeRenderer.d.ts","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/itwinui/TreeRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAmC,YAAY,EAA2C,MAAM,OAAO,CAAC;AACzI,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAuB,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAqB,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAqB,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAmB,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE1E,aAAa;AACb,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;AAEnE,aAAa;AACb,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEtF,aAAa;AACb,UAAU,oBAAoB;IAC5B,8BAA8B;IAC9B,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,sEAAsE;IACtE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,4FAA4F;IAC5F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IAChE,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;CACrE;AAED,aAAa;AACb,KAAK,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,EAAE,YAAY,CAAC,GACrE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,EAAE,aAAa,GAAG,gBAAgB,CAAC,CAAC,GAC3E,IAAI,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,EAAE,YAAY,GAAG,0BAA0B,CAAC,GAC3E,IAAI,CAAC,sBAAsB,EAAE,eAAe,CAAC,GAC7C,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,YAAY,GAAG,eAAe,GAAG,cAAc,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC,GAC3H,oBAAoB,GACpB,wBAAwB,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,SAAS,EAAE,EAAE,iBAAiB,2CAwBzH"}
|
|
@@ -4,14 +4,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
5
5
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
6
6
|
*--------------------------------------------------------------------------------------------*/
|
|
7
|
-
import { useCallback, useEffect, useMemo, useRef } from "react";
|
|
7
|
+
import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from "react";
|
|
8
8
|
import { Tree } from "@itwin/itwinui-react/bricks";
|
|
9
9
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
10
10
|
import { useSelectionHandler } from "../UseSelectionHandler.js";
|
|
11
|
-
import {
|
|
11
|
+
import { useEvent } from "../Utils.js";
|
|
12
|
+
import { isPlaceholderNode, useErrorList, useFlatTreeNodeList } from "./FlatTreeNode.js";
|
|
12
13
|
import { LocalizationContextProvider } from "./LocalizationContext.js";
|
|
14
|
+
import { RootErrorRenderer } from "./RootErrorRenderer.js";
|
|
13
15
|
import { TreeErrorRenderer } from "./TreeErrorRenderer.js";
|
|
14
|
-
import { TreeNodeRenderer } from "./TreeNodeRenderer.js";
|
|
16
|
+
import { PlaceholderNode, TreeNodeRenderer } from "./TreeNodeRenderer.js";
|
|
15
17
|
/**
|
|
16
18
|
* A component that renders a tree using the `Tree` component from `@itwin/itwinui-react`. The tree nodes
|
|
17
19
|
* are rendered using `TreeNodeRenderer` component from this package.
|
|
@@ -19,32 +21,40 @@ import { TreeNodeRenderer } from "./TreeNodeRenderer.js";
|
|
|
19
21
|
* @see https://itwinui.bentley.com/docs/tree
|
|
20
22
|
* @alpha
|
|
21
23
|
*/
|
|
22
|
-
export function TreeRenderer({ rootNodes,
|
|
24
|
+
export function TreeRenderer({ rootNodes, selectNodes, selectionMode, rootErrorRenderer, ...treeProps }) {
|
|
23
25
|
const { onNodeClick, onNodeKeyDown } = useSelectionHandler({
|
|
24
26
|
rootNodes,
|
|
25
27
|
selectNodes: selectNodes ?? noopSelectNodes,
|
|
26
28
|
selectionMode: selectionMode ?? "single",
|
|
27
29
|
});
|
|
30
|
+
const handleNodeClick = useEvent(onNodeClick);
|
|
31
|
+
const handleKeyDown = useEvent(onNodeKeyDown);
|
|
32
|
+
const flatNodes = useFlatTreeNodeList(rootNodes);
|
|
33
|
+
const errorList = useErrorList(rootNodes);
|
|
34
|
+
if (flatNodes.length === 0 && errorList.length > 0) {
|
|
35
|
+
return rootErrorRenderer ? (rootErrorRenderer({
|
|
36
|
+
errorNode: errorList[0],
|
|
37
|
+
getHierarchyLevelDetails: treeProps.getHierarchyLevelDetails,
|
|
38
|
+
reloadTree: treeProps.reloadTree,
|
|
39
|
+
})) : (_jsx(RootErrorRenderer, { errorNode: errorList[0], reloadTree: treeProps.reloadTree, getHierarchyLevelDetails: treeProps.getHierarchyLevelDetails }));
|
|
40
|
+
}
|
|
41
|
+
return _jsx(TreeHierarchyRenderer, { onNodeClick: handleNodeClick, onNodeKeyDown: handleKeyDown, flatNodes: flatNodes, errorList: errorList, ...treeProps });
|
|
42
|
+
}
|
|
43
|
+
function TreeHierarchyRenderer({ flatNodes, errorList, expandNode, localizedStrings, getHierarchyLevelDetails, onFilterClick, reloadTree, isNodeSelected, errorRenderer, ...treeProps }) {
|
|
28
44
|
const scrollToNode = useRef(undefined);
|
|
29
45
|
const parentRef = useRef(null);
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
const hasError = useCallback((node) => {
|
|
33
|
-
if (node.children === true) {
|
|
34
|
-
return undefined;
|
|
35
|
-
}
|
|
36
|
-
const error = errorList.find((errorNode) => errorNode.parent?.id === node.id);
|
|
37
|
-
return error;
|
|
46
|
+
const hasError = useCallback((nodeId) => {
|
|
47
|
+
return errorList.find((errorNode) => errorNode.parent?.id === nodeId);
|
|
38
48
|
}, [errorList]);
|
|
39
49
|
const virtualizer = useVirtualizer({
|
|
40
50
|
count: flatNodes.length,
|
|
41
51
|
getScrollElement: () => parentRef.current,
|
|
42
52
|
getItemKey: (index) => flatNodes[index].id,
|
|
43
53
|
estimateSize: () => 28,
|
|
44
|
-
overscan:
|
|
54
|
+
overscan: 10,
|
|
45
55
|
});
|
|
46
56
|
const items = virtualizer.getVirtualItems();
|
|
47
|
-
const scrollToElement = (errorNode) => {
|
|
57
|
+
const scrollToElement = useCallback((errorNode) => {
|
|
48
58
|
const index = flatNodes.findIndex((flatNode) => flatNode.id === errorNode.parent?.id);
|
|
49
59
|
if (index === -1) {
|
|
50
60
|
errorNode.expandTo((nodeId) => expandNode(nodeId, true));
|
|
@@ -52,7 +62,7 @@ export function TreeRenderer({ rootNodes, expandNode, localizedStrings, selectNo
|
|
|
52
62
|
return;
|
|
53
63
|
}
|
|
54
64
|
virtualizer.scrollToIndex(index, { align: "end" });
|
|
55
|
-
};
|
|
65
|
+
}, [expandNode, flatNodes, virtualizer]);
|
|
56
66
|
useEffect(() => {
|
|
57
67
|
if (scrollToNode.current === undefined) {
|
|
58
68
|
return;
|
|
@@ -64,16 +74,33 @@ export function TreeRenderer({ rootNodes, expandNode, localizedStrings, selectNo
|
|
|
64
74
|
virtualizer.scrollToIndex(index, { align: "end" });
|
|
65
75
|
scrollToNode.current = undefined;
|
|
66
76
|
}, [flatNodes, virtualizer]);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
const errorRendererProps = {
|
|
78
|
+
errorList,
|
|
79
|
+
scrollToElement,
|
|
80
|
+
getHierarchyLevelDetails,
|
|
81
|
+
onFilterClick,
|
|
82
|
+
reloadTree,
|
|
83
|
+
};
|
|
84
|
+
return (_jsxs(LocalizationContextProvider, { localizedStrings: localizedStrings, children: [errorRenderer ? errorRenderer(errorRendererProps) : _jsx(TreeErrorRenderer, { ...errorRendererProps }), _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) => {
|
|
85
|
+
const node = flatNodes[virtualizedItem.index];
|
|
86
|
+
const selected = isNodeSelected?.(node.id) ?? false;
|
|
87
|
+
const error = hasError(node.id);
|
|
88
|
+
return (_createElement(VirtualTreeItem, { ...treeProps, ref: virtualizer.measureElement, start: virtualizedItem.start, expandNode: expandNode, error: error, node: node, key: virtualizedItem.key, "data-index": virtualizedItem.index, reloadTree: reloadTree, selected: selected }));
|
|
76
89
|
}) }) })] }));
|
|
77
90
|
}
|
|
91
|
+
const VirtualTreeItem = memo(forwardRef(function VirtualTreeItem({ start, node, getDecorations, getActions, getLabel, getSublabel, ...props }, forwardedRef) {
|
|
92
|
+
const style = useMemo(() => ({
|
|
93
|
+
position: "absolute",
|
|
94
|
+
top: 0,
|
|
95
|
+
left: 0,
|
|
96
|
+
width: "100%",
|
|
97
|
+
transform: `translateY(${start}px)`,
|
|
98
|
+
willChange: "transform",
|
|
99
|
+
}), [start]);
|
|
100
|
+
if (isPlaceholderNode(node)) {
|
|
101
|
+
return _jsx(PlaceholderNode, { ...props, ref: forwardedRef, style: style, "aria-level": node.level, "aria-posinset": 1, "aria-setsize": 1 });
|
|
102
|
+
}
|
|
103
|
+
return (_jsx(TreeNodeRenderer, { ...props, ref: forwardedRef, style: style, "aria-level": node.level, "aria-posinset": node.posInLevel, "aria-setsize": node.levelSize, node: node, getDecorations: getDecorations, getActions: getActions, getLabel: getLabel, getSublabel: getSublabel }));
|
|
104
|
+
}));
|
|
78
105
|
function noopSelectNodes() { }
|
|
79
106
|
//# sourceMappingURL=TreeRenderer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/itwinui/TreeRenderer.tsx"],"names":[],"mappings":";;AAAA;;;gGAGgG;AAEhG,OAAO,EAA4B,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAiB,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAa,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAuBzD;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,wBAAwB,EACxB,aAAa,EACb,UAAU,EACV,GAAG,SAAS,EACM;IAClB,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,mBAAmB,CAAC;QACzD,SAAS;QACT,WAAW,EAAE,WAAW,IAAI,eAAe;QAC3C,aAAa,EAAE,aAAa,IAAI,QAAQ;KACzC,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAC;IAC3D,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEnE,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAA+B,EAAE,EAAE;QAClC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC3B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9E,OAAO,KAAK,CAAC;IACf,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,WAAW,GAAG,cAAc,CAAC;QACjC,KAAK,EAAE,SAAS,CAAC,MAAM;QACvB,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO;QACzC,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE;QAC1C,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE;QACtB,QAAQ,EAAE,CAAC;KACZ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,WAAW,CAAC,eAAe,EAAE,CAAC;IAE5C,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAE,EAAE;QAC/C,MAAM,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,SAAS,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACtF,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;YACzD,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,EAAE,CAAC;YAC5C,OAAO;QACT,CAAC;QACD,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACvC,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC;QACtF,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QACD,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QACnD,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;IACnC,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,MAAC,2BAA2B,IAAC,gBAAgB,EAAE,gBAAgB,aAC7D,KAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,wBAAwB,EAAE,wBAAwB,EAClD,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,GACtB,EACF,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,YAC9E,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,YACjI,KAAK,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,EAAE;wBAC7B,OAAO,CACL,eAAC,gBAAgB,OACX,SAAS,EACb,GAAG,EAAE,WAAW,CAAC,cAAc,EAC/B,KAAK,EAAE;gCACL,QAAQ,EAAE,UAAU;gCACpB,GAAG,EAAE,CAAC;gCACN,IAAI,EAAE,CAAC;gCACP,KAAK,EAAE,MAAM;gCACb,SAAS,EAAE,cAAc,eAAe,CAAC,KAAK,KAAK;gCACnD,UAAU,EAAE,WAAW;6BACxB,EACD,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,EACtC,GAAG,EAAE,eAAe,CAAC,GAAG,gBACZ,eAAe,CAAC,KAAK,EACjC,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;oBACJ,CAAC,CAAC,GACQ,GACR,IACsB,CAC/B,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,KAAI,CAAC","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"]}
|
|
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, CSSProperties, forwardRef, memo, ReactElement, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Tree } from \"@itwin/itwinui-react/bricks\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { PresentationTreeNode } from \"../TreeNode.js\";\nimport { SelectionMode, useSelectionHandler } from \"../UseSelectionHandler.js\";\nimport { useTree } from \"../UseTree.js\";\nimport { useEvent } from \"../Utils.js\";\nimport { ErrorNode, FlatTreeNode, isPlaceholderNode, useErrorList, useFlatTreeNodeList } from \"./FlatTreeNode.js\";\nimport { LocalizationContextProvider } from \"./LocalizationContext.js\";\nimport { RootErrorRenderer, RootErrorRendererProps } from \"./RootErrorRenderer.js\";\nimport { TreeErrorRenderer, TreeErrorRendererProps } from \"./TreeErrorRenderer.js\";\nimport { PlaceholderNode, TreeNodeRenderer } from \"./TreeNodeRenderer.js\";\n\n/** @alpha */\nexport type TreeProps = ComponentPropsWithoutRef<typeof Tree.Root>;\n\n/** @alpha */\nexport type TreeNodeRendererProps = ComponentPropsWithoutRef<typeof TreeNodeRenderer>;\n\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 /** A render function for errors' display component. Defaults to `<TreeErrorRenderer />`. */\n errorRenderer?: (props: TreeErrorRendererProps) => ReactElement;\n /** A render function for root errors' display component. Defaults to `<RootErrorRenderer />`. */\n rootErrorRenderer?: (props: RootErrorRendererProps) => ReactElement;\n}\n\n/** @alpha */\ntype TreeRendererProps = Pick<ReturnType<typeof useTree>, \"expandNode\"> &\n Partial<Pick<ReturnType<typeof useTree>, \"selectNodes\" | \"isNodeSelected\">> &\n Pick<ReturnType<typeof useTree>, \"reloadTree\" | \"getHierarchyLevelDetails\"> &\n Pick<TreeErrorRendererProps, \"onFilterClick\"> &\n Omit<TreeNodeRendererProps, \"node\" | \"aria-level\" | \"aria-posinset\" | \"aria-setsize\" | \"reloadTree\" | \"selected\" | \"error\"> &\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({ rootNodes, selectNodes, selectionMode, rootErrorRenderer, ...treeProps }: TreeRendererProps) {\n const { onNodeClick, onNodeKeyDown } = useSelectionHandler({\n rootNodes,\n selectNodes: selectNodes ?? noopSelectNodes,\n selectionMode: selectionMode ?? \"single\",\n });\n const handleNodeClick = useEvent(onNodeClick);\n const handleKeyDown = useEvent(onNodeKeyDown);\n const flatNodes = useFlatTreeNodeList(rootNodes);\n const errorList = useErrorList(rootNodes);\n\n if (flatNodes.length === 0 && errorList.length > 0) {\n return rootErrorRenderer ? (\n rootErrorRenderer({\n errorNode: errorList[0],\n getHierarchyLevelDetails: treeProps.getHierarchyLevelDetails,\n reloadTree: treeProps.reloadTree,\n })\n ) : (\n <RootErrorRenderer errorNode={errorList[0]} reloadTree={treeProps.reloadTree} getHierarchyLevelDetails={treeProps.getHierarchyLevelDetails} />\n );\n }\n\n return <TreeHierarchyRenderer onNodeClick={handleNodeClick} onNodeKeyDown={handleKeyDown} flatNodes={flatNodes} errorList={errorList} {...treeProps} />;\n}\n\nfunction TreeHierarchyRenderer({\n flatNodes,\n errorList,\n expandNode,\n localizedStrings,\n getHierarchyLevelDetails,\n onFilterClick,\n reloadTree,\n isNodeSelected,\n errorRenderer,\n ...treeProps\n}: Omit<TreeRendererProps, \"rootNodes\" | \"selectionMode\" | \" selectNodes\"> & { flatNodes: FlatTreeNode[]; errorList: ErrorNode[] }) {\n const scrollToNode = useRef<string | undefined>(undefined);\n const parentRef = useRef<HTMLDivElement>(null);\n\n const hasError = useCallback(\n (nodeId: string) => {\n return errorList.find((errorNode) => errorNode.parent?.id === nodeId);\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: 10,\n });\n\n const items = virtualizer.getVirtualItems();\n\n const scrollToElement = useCallback(\n (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 [expandNode, flatNodes, virtualizer],\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 const errorRendererProps: TreeErrorRendererProps = {\n errorList,\n scrollToElement,\n getHierarchyLevelDetails,\n onFilterClick,\n reloadTree,\n };\n\n return (\n <LocalizationContextProvider localizedStrings={localizedStrings}>\n {errorRenderer ? errorRenderer(errorRendererProps) : <TreeErrorRenderer {...errorRendererProps} />}\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 const node = flatNodes[virtualizedItem.index];\n const selected = isNodeSelected?.(node.id) ?? false;\n const error = hasError(node.id);\n return (\n <VirtualTreeItem\n {...treeProps}\n ref={virtualizer.measureElement}\n start={virtualizedItem.start}\n expandNode={expandNode}\n error={error}\n node={node}\n key={virtualizedItem.key}\n data-index={virtualizedItem.index}\n reloadTree={reloadTree}\n selected={selected}\n />\n );\n })}\n </Tree.Root>\n </div>\n </LocalizationContextProvider>\n );\n}\n\ntype VirtualTreeItemProps = Omit<TreeNodeRendererProps, \"node\" | \"aria-level\" | \"aria-posinset\" | \"aria-setsize\"> & {\n start: number;\n node: FlatTreeNode;\n};\n\nconst VirtualTreeItem = memo(\n forwardRef<HTMLElement, VirtualTreeItemProps>(function VirtualTreeItem(\n { start, node, getDecorations, getActions, getLabel, getSublabel, ...props },\n forwardedRef,\n ) {\n const style: CSSProperties = useMemo(\n () => ({\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n transform: `translateY(${start}px)`,\n willChange: \"transform\",\n }),\n [start],\n );\n\n if (isPlaceholderNode(node)) {\n return <PlaceholderNode {...props} ref={forwardedRef} style={style} aria-level={node.level} aria-posinset={1} aria-setsize={1} />;\n }\n\n return (\n <TreeNodeRenderer\n {...props}\n ref={forwardedRef}\n style={style}\n aria-level={node.level}\n aria-posinset={node.posInLevel}\n aria-setsize={node.levelSize}\n node={node}\n getDecorations={getDecorations}\n getActions={getActions}\n getLabel={getLabel}\n getSublabel={getSublabel}\n />\n );\n }),\n);\n\nfunction noopSelectNodes() {}\n"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
export { PresentationGenericInfoNode, PresentationHierarchyNode, PresentationInfoNode, PresentationResultSetTooLargeInfoNode, PresentationTreeNode, isPresentationHierarchyNode, } from "./presentation-hierarchies-react/TreeNode.js";
|
|
2
|
-
export { UnifiedSelectionProvider } from "./presentation-hierarchies-react/UnifiedSelectionContext.js";
|
|
3
2
|
export { useSelectionHandler } from "./presentation-hierarchies-react/UseSelectionHandler.js";
|
|
4
3
|
export { HierarchyLevelDetails, useTree, useUnifiedSelectionTree } from "./presentation-hierarchies-react/UseTree.js";
|
|
5
4
|
export { useIModelTree, useIModelUnifiedSelectionTree } from "./presentation-hierarchies-react/UseIModelTree.js";
|
|
6
5
|
export { TreeNodeRenderer } from "./presentation-hierarchies-react/itwinui/TreeNodeRenderer.js";
|
|
7
|
-
export {
|
|
6
|
+
export { FilterAction } from "./presentation-hierarchies-react/itwinui/FilterAction.js";
|
|
8
7
|
export { TreeRenderer } from "./presentation-hierarchies-react/itwinui/TreeRenderer.js";
|
|
9
|
-
export {
|
|
8
|
+
export { TreeErrorRenderer } from "./presentation-hierarchies-react/itwinui/TreeErrorRenderer.js";
|
|
9
|
+
export { useFlatTreeNodeList, useErrorList, FlatTreeNode } from "./presentation-hierarchies-react/itwinui/FlatTreeNode.js";
|
|
10
10
|
export { LocalizationContextProvider } from "./presentation-hierarchies-react/itwinui/LocalizationContext.js";
|
|
11
11
|
export { GenericInstanceFilter, HierarchyNode, HierarchyProvider } from "@itwin/presentation-hierarchies";
|
|
12
12
|
export { SelectionStorage } from "@itwin/unified-selection";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"presentation-hierarchies-react.d.ts","sourceRoot":"","sources":["../../src/presentation-hierarchies-react.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,oBAAoB,EACpB,qCAAqC,EACrC,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"presentation-hierarchies-react.d.ts","sourceRoot":"","sources":["../../src/presentation-hierarchies-react.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,oBAAoB,EACpB,qCAAqC,EACrC,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yDAAyD,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AACtH,OAAO,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,mDAAmD,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,+DAA+D,CAAC;AAClG,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AAC3H,OAAO,EAAE,2BAA2B,EAAE,MAAM,iEAAiE,CAAC;AAE9G,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAC1G,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
export { isPresentationHierarchyNode, } from "./presentation-hierarchies-react/TreeNode.js";
|
|
6
|
-
export { UnifiedSelectionProvider } from "./presentation-hierarchies-react/UnifiedSelectionContext.js";
|
|
7
6
|
export { useSelectionHandler } from "./presentation-hierarchies-react/UseSelectionHandler.js";
|
|
8
7
|
export { useTree, useUnifiedSelectionTree } from "./presentation-hierarchies-react/UseTree.js";
|
|
9
8
|
export { useIModelTree, useIModelUnifiedSelectionTree } from "./presentation-hierarchies-react/UseIModelTree.js";
|
|
10
9
|
export { TreeNodeRenderer } from "./presentation-hierarchies-react/itwinui/TreeNodeRenderer.js";
|
|
11
|
-
export {
|
|
10
|
+
export { FilterAction } from "./presentation-hierarchies-react/itwinui/FilterAction.js";
|
|
12
11
|
export { TreeRenderer } from "./presentation-hierarchies-react/itwinui/TreeRenderer.js";
|
|
13
|
-
export {
|
|
12
|
+
export { TreeErrorRenderer } from "./presentation-hierarchies-react/itwinui/TreeErrorRenderer.js";
|
|
13
|
+
export { useFlatTreeNodeList, useErrorList } from "./presentation-hierarchies-react/itwinui/FlatTreeNode.js";
|
|
14
14
|
export { LocalizationContextProvider } from "./presentation-hierarchies-react/itwinui/LocalizationContext.js";
|
|
15
15
|
export { GenericInstanceFilter, HierarchyNode } from "@itwin/presentation-hierarchies";
|
|
16
16
|
//# sourceMappingURL=presentation-hierarchies-react.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"presentation-hierarchies-react.js","sourceRoot":"","sources":["../../src/presentation-hierarchies-react.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAML,2BAA2B,GAC5B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"presentation-hierarchies-react.js","sourceRoot":"","sources":["../../src/presentation-hierarchies-react.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAML,2BAA2B,GAC5B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yDAAyD,CAAC;AAC9F,OAAO,EAAyB,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AACtH,OAAO,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,mDAAmD,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,+DAA+D,CAAC;AAClG,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAgB,MAAM,0DAA0D,CAAC;AAC3H,OAAO,EAAE,2BAA2B,EAAE,MAAM,iEAAiE,CAAC;AAE9G,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAqB,MAAM,iCAAiC,CAAC","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\nexport {\n PresentationGenericInfoNode,\n PresentationHierarchyNode,\n PresentationInfoNode,\n PresentationResultSetTooLargeInfoNode,\n PresentationTreeNode,\n isPresentationHierarchyNode,\n} from \"./presentation-hierarchies-react/TreeNode.js\";\nexport { useSelectionHandler } from \"./presentation-hierarchies-react/UseSelectionHandler.js\";\nexport { HierarchyLevelDetails, useTree, useUnifiedSelectionTree } from \"./presentation-hierarchies-react/UseTree.js\";\nexport { useIModelTree, useIModelUnifiedSelectionTree } from \"./presentation-hierarchies-react/UseIModelTree.js\";\nexport { TreeNodeRenderer } from \"./presentation-hierarchies-react/itwinui/TreeNodeRenderer.js\";\nexport { FilterAction } from \"./presentation-hierarchies-react/itwinui/FilterAction.js\";\nexport { TreeRenderer } from \"./presentation-hierarchies-react/itwinui/TreeRenderer.js\";\nexport { TreeErrorRenderer } from \"./presentation-hierarchies-react/itwinui/TreeErrorRenderer.js\";\nexport { useFlatTreeNodeList, useErrorList, FlatTreeNode } from \"./presentation-hierarchies-react/itwinui/FlatTreeNode.js\";\nexport { LocalizationContextProvider } from \"./presentation-hierarchies-react/itwinui/LocalizationContext.js\";\n\nexport { GenericInstanceFilter, HierarchyNode, HierarchyProvider } from \"@itwin/presentation-hierarchies\";\nexport { SelectionStorage } from \"@itwin/unified-selection\";\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.15",
|
|
4
4
|
"description": "React components based on `@itwin/presentation-hierarchies`",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@itwin/unified-selection": "^1.4.1"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@itwin/itwinui-icons": "5.0.0-alpha.
|
|
53
|
-
"@itwin/itwinui-react": "5.0.0-alpha.
|
|
52
|
+
"@itwin/itwinui-icons": "5.0.0-alpha.7",
|
|
53
|
+
"@itwin/itwinui-react": "5.0.0-alpha.14",
|
|
54
54
|
"react": "^17.0.0 || ^18.0.0",
|
|
55
55
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
56
56
|
},
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
"devDependencies": {
|
|
66
66
|
"@itwin/build-tools": "5.0.0-dev.67",
|
|
67
67
|
"@itwin/eslint-plugin": "5.0.0-dev.1",
|
|
68
|
-
"@itwin/itwinui-icons": "5.0.0-alpha.
|
|
69
|
-
"@itwin/itwinui-react": "5.0.0-alpha.
|
|
68
|
+
"@itwin/itwinui-icons": "5.0.0-alpha.7",
|
|
69
|
+
"@itwin/itwinui-react": "5.0.0-alpha.14",
|
|
70
70
|
"@testing-library/dom": "^10.4.0",
|
|
71
71
|
"@testing-library/react": "^16.2.0",
|
|
72
72
|
"@testing-library/user-event": "^14.6.1",
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { PropsWithChildren } from "react";
|
|
2
|
-
import { SelectionStorage } from "@itwin/unified-selection";
|
|
3
|
-
/**
|
|
4
|
-
* A React context provider that makes given selection storage available to all child components. This
|
|
5
|
-
* is a requirement for `useUnifiedSelectionTree` to work with unified selection.
|
|
6
|
-
*
|
|
7
|
-
* @public
|
|
8
|
-
* @deprecated in 1.5.0. Use `UnifiedSelectionContextProvider` from `@itwin/unified-selection-react` instead.
|
|
9
|
-
*/
|
|
10
|
-
export declare function UnifiedSelectionProvider({ storage, children }: PropsWithChildren<{
|
|
11
|
-
storage: SelectionStorage;
|
|
12
|
-
}>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
/** @internal */
|
|
14
|
-
export declare function useUnifiedSelectionStorage(): SelectionStorage | undefined;
|
|
15
|
-
//# sourceMappingURL=UnifiedSelectionContext.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"UnifiedSelectionContext.d.ts","sourceRoot":"","sources":["../../../src/presentation-hierarchies-react/UnifiedSelectionContext.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiB,iBAAiB,EAAc,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,iBAAiB,CAAC;IAAE,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAAC,2CAE/G;AAED,gBAAgB;AAChB,wBAAgB,0BAA0B,iCAEzC"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/*---------------------------------------------------------------------------------------------
|
|
3
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
4
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
5
|
-
*--------------------------------------------------------------------------------------------*/
|
|
6
|
-
import { createContext, useContext } from "react";
|
|
7
|
-
const deprecatedUnifiedSelectionContext = createContext(undefined);
|
|
8
|
-
/**
|
|
9
|
-
* A React context provider that makes given selection storage available to all child components. This
|
|
10
|
-
* is a requirement for `useUnifiedSelectionTree` to work with unified selection.
|
|
11
|
-
*
|
|
12
|
-
* @public
|
|
13
|
-
* @deprecated in 1.5.0. Use `UnifiedSelectionContextProvider` from `@itwin/unified-selection-react` instead.
|
|
14
|
-
*/
|
|
15
|
-
export function UnifiedSelectionProvider({ storage, children }) {
|
|
16
|
-
return _jsx(deprecatedUnifiedSelectionContext.Provider, { value: storage, children: children });
|
|
17
|
-
}
|
|
18
|
-
/** @internal */
|
|
19
|
-
export function useUnifiedSelectionStorage() {
|
|
20
|
-
return useContext(deprecatedUnifiedSelectionContext);
|
|
21
|
-
}
|
|
22
|
-
//# sourceMappingURL=UnifiedSelectionContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"UnifiedSelectionContext.js","sourceRoot":"","sources":["../../../src/presentation-hierarchies-react/UnifiedSelectionContext.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,aAAa,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAGrE,MAAM,iCAAiC,GAAG,aAAa,CAA+B,SAAS,CAAC,CAAC;AAEjG;;;;;;GAMG;AACH,MAAM,UAAU,wBAAwB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAoD;IAC9G,OAAO,KAAC,iCAAiC,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA8C,CAAC;AAC7H,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,0BAA0B;IACxC,OAAO,UAAU,CAAC,iCAAiC,CAAC,CAAC;AACvD,CAAC","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 { createContext, PropsWithChildren, useContext } from \"react\";\nimport { SelectionStorage } from \"@itwin/unified-selection\";\n\nconst deprecatedUnifiedSelectionContext = createContext<SelectionStorage | undefined>(undefined);\n\n/**\n * A React context provider that makes given selection storage available to all child components. This\n * is a requirement for `useUnifiedSelectionTree` to work with unified selection.\n *\n * @public\n * @deprecated in 1.5.0. Use `UnifiedSelectionContextProvider` from `@itwin/unified-selection-react` instead.\n */\nexport function UnifiedSelectionProvider({ storage, children }: PropsWithChildren<{ storage: SelectionStorage }>) {\n return <deprecatedUnifiedSelectionContext.Provider value={storage}>{children}</deprecatedUnifiedSelectionContext.Provider>;\n}\n\n/** @internal */\nexport function useUnifiedSelectionStorage() {\n return useContext(deprecatedUnifiedSelectionContext);\n}\n"]}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { PresentationHierarchyNode } from "../TreeNode.js";
|
|
2
|
-
import { HierarchyLevelDetails, useTree } from "../UseTree.js";
|
|
3
|
-
/** @alpha */
|
|
4
|
-
export interface TreeItemAction {
|
|
5
|
-
label: string;
|
|
6
|
-
action: () => void;
|
|
7
|
-
icon: string;
|
|
8
|
-
/**
|
|
9
|
-
* Determines action items visibility:
|
|
10
|
-
* - `False` - action item is hidden.
|
|
11
|
-
* - `True` - action item is visible at all times.
|
|
12
|
-
* - `Undefined` - action item is visible on hover/focus.
|
|
13
|
-
*/
|
|
14
|
-
show?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Provide a value when action button is in active state to display a dot above the button.
|
|
17
|
-
* Provided text value is used to set accessible description it should descibe why the action is in active state.
|
|
18
|
-
* If left undefined the action item will be rendered normally.
|
|
19
|
-
*/
|
|
20
|
-
activeDescription?: string;
|
|
21
|
-
}
|
|
22
|
-
/** @alpha */
|
|
23
|
-
export type FilterActionProps = {
|
|
24
|
-
/** Action to perform when the filter button is clicked for this node. */
|
|
25
|
-
onFilter?: (hierarchyLevelDetails: HierarchyLevelDetails) => void;
|
|
26
|
-
} & Partial<Pick<ReturnType<typeof useTree>, "getHierarchyLevelDetails">>;
|
|
27
|
-
/** @internal */
|
|
28
|
-
export declare function TreeActionButton({ show, label, action, icon, activeDescription }: TreeItemAction): import("react/jsx-runtime").JSX.Element;
|
|
29
|
-
/** @alpha */
|
|
30
|
-
export declare function useFilterAction({ onFilter, getHierarchyLevelDetails }: FilterActionProps): (node: PresentationHierarchyNode) => TreeItemAction;
|
|
31
|
-
//# sourceMappingURL=TreeActionButton.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TreeActionButton.d.ts","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/itwinui/TreeActionButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAK/D,aAAa;AACb,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,aAAa;AACb,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,qBAAqB,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACnE,GAAG,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC;AAE1E,gBAAgB;AAChB,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,cAAc,2CAEhG;AAED,aAAa;AACb,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,EAAE,iBAAiB,GAAG,CAAC,IAAI,EAAE,yBAAyB,KAAK,cAAc,CAwB9I"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/*---------------------------------------------------------------------------------------------
|
|
3
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
4
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
5
|
-
*--------------------------------------------------------------------------------------------*/
|
|
6
|
-
import { Tree } from "@itwin/itwinui-react/bricks";
|
|
7
|
-
import { useLocalizationContext } from "./LocalizationContext.js";
|
|
8
|
-
const filterSvg = new URL("@itwin/itwinui-icons/filter.svg", import.meta.url).href;
|
|
9
|
-
/** @internal */
|
|
10
|
-
export function TreeActionButton({ show, label, action, icon, activeDescription }) {
|
|
11
|
-
return _jsx(Tree.ItemAction, { label: label, dot: activeDescription, icon: icon, visible: show, onClick: action });
|
|
12
|
-
}
|
|
13
|
-
/** @alpha */
|
|
14
|
-
export function useFilterAction({ onFilter, getHierarchyLevelDetails }) {
|
|
15
|
-
const { localizedStrings } = useLocalizationContext();
|
|
16
|
-
return (node) => {
|
|
17
|
-
const handleVisibility = () => {
|
|
18
|
-
if (!onFilter || !node.isFilterable) {
|
|
19
|
-
return false;
|
|
20
|
-
}
|
|
21
|
-
if (node.isFiltered) {
|
|
22
|
-
return true;
|
|
23
|
-
}
|
|
24
|
-
return undefined;
|
|
25
|
-
};
|
|
26
|
-
return {
|
|
27
|
-
label: localizedStrings.filterHierarchyLevel,
|
|
28
|
-
action: () => {
|
|
29
|
-
const hierarchyLevelDetails = getHierarchyLevelDetails?.(node.id);
|
|
30
|
-
hierarchyLevelDetails && onFilter?.(hierarchyLevelDetails);
|
|
31
|
-
},
|
|
32
|
-
show: handleVisibility(),
|
|
33
|
-
activeDescription: node.isFiltered ? localizedStrings.filterHierarchyLevelActiveDescription : undefined,
|
|
34
|
-
icon: filterSvg,
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
//# sourceMappingURL=TreeActionButton.js.map
|