iannbing / react-simple-tree-menu

A simple React tree menu component
MIT License
135 stars 48 forks source link

Inline padding-left is wrong when no CSS is loaded? #181

Closed jameschetwood closed 4 years ago

jameschetwood commented 4 years ago

I have a very simple, currently unstyled example. When all of the nodes are collapsed the first one has a padding-left of 0.75rem, the second has 2.75rem.

Is this a bug? I would expect them to both be 0 or at least equal?

https://codesandbox.io/s/lingering-browser-48ox0?file=/src/App.tsx

import * as React from "react";
import TreeMenu from "react-simple-tree-menu";

const treeData = [
  {
    key: "1A",
    label: "Node 1 at the first level",
    nodes: [
      {
        key: "2B",
        label: "Node 1 at the second level",
        nodes: [
          {
            key: "3C",
            label: "Node 1 at the third level - last"
          }
        ]
      }
    ]
  },
  {
    key: "4D",
    label: "Node 2 at the first level"
  }
];

const Tree = () => {
  return <TreeMenu data={treeData} onClickItem={() => {}} hasSearch={false} />;
};

export default Tree;
iannbing commented 4 years ago

@jameschetwood Hi, it's not a bug. The extra padding is for the "+" sign. Because the second node at the first level has no children, it doesn't have the "+" sign. This implementation comes with the built-in styling.

jameschetwood commented 4 years ago

Cool thanks for clarifying.