/**
 * desc: 当 Tree 为 `selectable` 时可点击选中节点，选中的节点高亮展示。可单独设置某个节点是否可选中（仅对当前节点有效，不会影响子节点）
 */
import React, { useState } from 'react'
import { Tree, TreeNodeKey, Switch } from 'react-icecream'

import { treeData } from './tree-data'

export default function Demo() {
  const [selectable, setSelectable] = useState(true)

  function handleSelect(key?: TreeNodeKey) {
    console.log('selected key: ', key)
  }

  return (
    <>
      <p>
        Selectable:&nbsp;&nbsp;&nbsp;
        <Switch checked={selectable} onChange={setSelectable} />
      </p>
      <br />
      <Tree
        selectable={selectable}
        treeData={treeData}
        defaultExpandedKeys={['1', '2']}
        defaultSelectedKey="1-2"
        onSelect={handleSelect}
      />
    </>
  )
}