React-sortable-tree: Full width row

[codejunkienick]

Is it possible to have draggable full width row?

[fritz-c]

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.

[codejunkienick]

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/

[bpneal]

@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
        );
    );

[michaeltrilford]

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.

[evilangelist]

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.

[fritz-c]

There are a couple pre-made themes that you can achieve this with now. See the readme for details.

[Darex1991]

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
  }
}

[saulable]

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;
}