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

function MyNode(props) {
  return <Tree.Node {...props} />;
}

export default function TreeExample() {
  const [selectIds, setSelectIds] = useState(["0-0-0-1"]);
  return (
    <Tree
      selectable
      selectedIds={selectIds}
      onSelect={(value, context) => {
        console.log(value, context);
        setSelectIds(value);
      }}
      defaultExpandedIds={["0-0"]}
    >
      <MyNode id="0-0" content="0-0">
        <MyNode id="0-0-0" content="0-0-0">
          <MyNode id="0-0-0-0" content="0-0-0-0" />
          <MyNode id="0-0-0-1" content="0-0-0-1" />
        </MyNode>
        <MyNode id="0-0-1" content="0-0-1">
          <MyNode id="0-0-1-0" content="0-0-1-0" />
          <MyNode id="0-0-1-1" content="0-0-1-1" />
          <MyNode id="0-0-1-2" content="0-0-1-2" />
        </MyNode>
      </MyNode>
      <MyNode id="0-1" content="0-1" />
    </Tree>
  );
}