minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
515 stars 69 forks source link

Add classes do `ul` item to make `li` items grid-like #224

Open piszczu4 opened 5 months ago

piszczu4 commented 5 months ago

Is it possible to to conditionally add classes to ul element? I want to make leaf elements grid-like like below:

image

It is possible if ul would have display:grid or flex. Can we do that? Even if its possible, can we then drag and drop these items horizontally or it will not work?

piszczu4 commented 5 months ago

I manage to partially solves the problem by adding the following (and editing source code)

  const classes: Classes<NodeData> = {
    root: 'p-[10px] relative [&_ul]:pb-[5px]',
    // draggingSource: 'opacity-30',
    container: (nodes: NodeModel<NodeData>[]) => {
      if (nodes[0].data?.homework) return 'flex';
      return '';
    },
  };

I.e. display of container is flex at the last level. This hovewer make placeholder does not work. i.e. it does not appear at all when trying to reorder Zadanie 1 and Zadanie 2.

I also tried to replace Fragment by div inside Container.tsx as below:

  <React.Fragment key={node.id}>
          <Placeholder
            depth={props.depth}
            listCount={view.length}
            dropTargetId={props.parentId}
            index={index}
            node={node}
          />
          <Node id={node.id} depth={props.depth} />
        </React.Fragment>

but then plenty of errors appear :D

@minop1205 do you have some suggestions?