Comments (8)
Here is my example. Similar and great tnx @evilangelist :)
.scss:
.rst__node {
display: flex;
.rst__lineBlock {
flex: 0 0 auto;
}
.rst__nodeContent {
flex: 0 1 auto;
left: auto !important;
position: relative !important;
top: auto !important;
width: 100%;
}
}
.rst__highlightTopLeftCorner, .rst__highlightBottomLeftCorner {
display: none;
}
.rst__lineBlock:not(.rst__lineHalfVerticalTop):not(.rst__lineFullVertical) {
display: none;
}
.rst__lineBlock.rst__lineHalfVerticalTop.rst__lineHalfHorizontalRight,
.rst__lineBlock.rst__lineHalfHorizontalRight.rst__lineFullVertical {
display: none;
}
.rst__lineBlock {
& + .rst__lineBlock.rst__lineHalfVerticalTop.rst__lineHalfHorizontalRight,
& + .rst__lineBlock.rst__lineHalfHorizontalRight.rst__lineFullVertical {
display: block;
}
&.rst__lineFullVertical {
display: none
}
}
from react-sortable-tree.
Even with writing our own node renderer (based off the default) there is still a limitation of the surrounding TreeNode component with the 'rst__nodeContent' class that prevents a node naturally extending to the full width of its container. I started going down the path of writing our own TreeNode using the reactVirtualizedListProps.rowRenderer()
but that was proving to be more work than it was worth. What is really needed are props to apply styles and classNames on the TreeNode.
Until we have that I've hacked the styles like the following:
.my-tree {
.rst__node {
display: flex;
.rst__lineBlock {
flex: 0 0 auto;
}
.rst__nodeContent {
left: auto !important;
top: auto !important;
position: relative !important;
flex: 0 1 auto;
width: 100%;
}
}
}
That combined with a custom node renderer surrounded with connectDragSource() allows you to have a full width draggable node.
from react-sortable-tree.
As in, you can click anywhere on the row to drag it?
You'd have to use the nodeContentRenderer
prop with a custom component of your own, and have it call this connectDragSource on the whole row instead of just the handle. If you decide to do this, I would recommend copying from the renderer at node-renderer-default.js
and making changes as necessary.
from react-sortable-tree.
I used custom node-renderer in my fork, but I only achieved an illusion of full width rows with css. Drag area still depends on the content inside node-renderer. Is there a way to make a row draggable anywhere?
Here is an example of what I did https://codejunkienick.github.io/react-sortable-tree/build/
from react-sortable-tree.
@codejunkienick This is something that I use on my project successfully. Like what @fritz-c said, if you copy the node-renderer-default.js
, you can make anything draggable within.
ie.
...
return (
connectDragSource(
...allYourRenderComponents
);
);
from react-sortable-tree.
Is it possible to have a full width row, with existing drag functionality?
CSS won't do, as we need a way to identify if a row has been indented, as we would need to offset
the 100% and subtract the absolute position indentation.
from react-sortable-tree.
There are a couple pre-made themes that you can achieve this with now. See the readme for details.
from react-sortable-tree.
I removed these and it works just like the example.
.rst__highlightTopLeftCorner, .rst__highlightBottomLeftCorner {
display: none;
}
.rst__lineBlock:not(.rst__lineHalfVerticalTop):not(.rst__lineFullVertical) {
display: none;
}
.rst__lineBlock.rst__lineHalfVerticalTop.rst__lineHalfHorizontalRight,
.rst__lineBlock.rst__lineHalfHorizontalRight.rst__lineFullVertical {
display: none;
}
from react-sortable-tree.
Related Issues (20)
- How to use props with redux ? HOT 1
- React version dependency issue HOT 5
- how to make search nodes only starting from one node which we clicked ?
- Is it possible to make the react sortable tree ui less big with a setting : sm, md, bg ?
- React dnd upgrade HOT 2
- How to customize move handler? 🤔 HOT 2
- div is fadeout when drag
- Insert node at specific index under parent node.Iindex HOT 1
- It is possible to use a node as ReactRef() ? HOT 1
- Give Children another label/property name
- Failed to minify the code error HOT 2
- getTreeFromFlatData set rootKey as null
- Support multiple dragging
- Option to snap automatically to nearest possible level HOT 1
- Support React 18 HOT 1
- new child is added to the parent when collapsing the parent HOT 1
- Using the react-sortable-tree in react 18 HOT 4
- is it possible to display the tree as a vertical tree diagram?
- About maintenance of this library
- Could not resolve dependency: React 18 with [email protected] HOT 2
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-sortable-tree.