Comments (3)
This isn't directly related to the library, but you can use the DOM History API to push custom states into history and read from history when the page loads, and then use the data from history to manually set the initial state of the tree based on history data.
from react-complex-tree.
Thank you for this very fast response. I will try to implement it and maybe post it here. anyway dont hesitate to close this issue so far.
from react-complex-tree.
TLDR;
is there a smart / existing way to get all parents of target element?
Here a first solution:
import {
UncontrolledTreeEnvironment,
Tree,
StaticTreeDataProvider,
TreeItem,
} from "react-complex-tree";
import { longTree } from "./data";
import "react-complex-tree/lib/style-modern.css";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { useState } from "react";
export default function () {
const [selectedItem, setSelectedItem] = useState<string>("");
const navigate = useNavigate();
// get hash, but use it only if selectedItem is not set
const { hash } = useLocation();
// set hash tag and save into local state
const onSelect = (item: TreeItem<any>, treeId: string): void => {
navigate("#" + item.index);
setSelectedItem(item.index);
};
return (
<>
<UncontrolledTreeEnvironment
dataProvider={
new StaticTreeDataProvider(longTree.items, (item, data) => ({
...item,
data,
}))
}
getItemTitle={(item) => item.data}
viewState={{
"tree-1": {
expandedItems: [selectedItem || hash.split("#").pop()], // this is not working with deep tree items, just at root level
focusedItem: selectedItem || hash.split("#").pop(),
selectedItems: [selectedItem || hash.split("#").pop()],
},
}}
onPrimaryAction={onSelect}
>
<Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
</UncontrolledTreeEnvironment>
<Link to="/test">Test</Link>
</>
);
}
and here the sourrounding RouterProvider
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
export default function App() {
return <RouterProvider router={router} />;
}
and here the routes
import React from "react";
import type { RouteObject } from "react-router-dom";
import { Outlet } from "react-router-dom";
import { createBrowserRouter } from "react-router-dom";
import Layout from "./Layout";
import Test from "./Test";
import Home from "./Home";
export const routes = [
{
path: "/",
element: <Outlet />,
children: [
{
index: true,
path: "/",
element: <Home />,
},
{
path: "/test",
element: <Test />,
},
],
},
] satisfies [RouteObject, ...RouteObject[]];
export const router = createBrowserRouter(routes, {
future: {
v7_normalizeFormMethod: true,
},
});
it currently just working if the hash tag is pointing to an item in the root level:
but unfortunately it is not working if the hash is pointing to an element deeper in the tree. it is probably selected correctly but the parents are not expaned.
is there a smart / existing way to get all parents of target element?
from react-complex-tree.
Related Issues (20)
- Expose treeItem internals HOT 1
- Item sort order is not maintained when reparenting multiselections HOT 1
- can make overrideOldSelection is customizable when calling selectUpTo? HOT 1
- Data fetching & virtualization HOT 3
- Can't focus tree by using just keyboard. HOT 4
- Enable setting custom `TreeItemElement` component HOT 1
- Indirectly selecting the starting item in a `shift` multiselect action results in an incorrect multiselection HOT 3
- custom styling causing drag between line in incorrect position HOT 4
- OnDrop returns not correct childIndex for target.targetType = 'between-items' HOT 3
- Drag and Drop does not work when title is Anchor <a> tag HOT 5
- Context Menu For Each Folder And Item HOT 3
- Multiple drag an drop items get inserted in wrong order HOT 1
- UncontrolledTreeEnvironment is throwing error HOT 2
- a.createContext is not a function HOT 4
- no nodes in the tabOrder after drop on non-expanded parent HOT 1
- Illegal drag-between and drag-over is allowed with key commands HOT 12
- Custom renderers prevent automatic renaming abort on outside click HOT 3
- Arrow Direction Not Changing Based on Language/Orientation (RTL/LTR) HOT 2
- [Question] How does it work with reactflow? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-complex-tree.