import React from "react";
import { Tree, Icon } from "@tencent/tea-component";

const parentIcon = ({ expanded }) => (
  <Icon type={expanded ? "folderopen" : "folderclose"} />
);

const leafIcon = <Icon type="phone" />;

const data = [
  {
    id: "0-0",
    content: "0-0",
    icon: parentIcon,
    children: [
      {
        id: "0-0-0",
        content: "0-0-0",
        icon: parentIcon,
        children: [
          { id: "0-0-0-0", content: "0-0-0-0", icon: leafIcon },
          { id: "0-0-0-1", content: "0-0-0-1", icon: leafIcon },
        ],
      },
      {
        id: "0-0-1",
        content: "0-0-1",
        icon: parentIcon,
        children: [
          { id: "0-0-1-0", content: "0-0-1-0", icon: leafIcon },
          { id: "0-0-1-1", content: "0-0-1-1", icon: leafIcon },
          { id: "0-0-1-2", content: "0-0-1-2", icon: leafIcon },
        ],
      },
    ],
  },
];

export default function TreeFullExample() {
  return (
    <Tree data={data} fullExpandable defaultExpandedIds={["0-0", "0-0-0"]} />
  );
}