/**
 * desc: 当 Tree 为 `checkable` 时可在节点前添加复选框，可单独设置某个节点前`是否展示复选框(checkable)`或`复选框是否禁选(checkboxDisabled)`（仅对当前节点有效，不会影响子节点）
 */
import React, { useState } from 'react'
import { Tree, TreeNodeKey, Switch } from 'react-icecream'

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

export default function Demo() {
  const [checkable, setCheckable] = useState(true)
  const [checkedKeys, setCheckedKeys] = useState<TreeNodeKey[]>(['1-2', '2-1'])

  function handleCheckedKeysChange(keys: TreeNodeKey[]) {
    setCheckedKeys(keys)
    console.log('checked keys: ', keys.toString())
  }

  return (
    <>
      <p>
        Checkable:&nbsp;&nbsp;&nbsp;
        <Switch checked={checkable} onChange={setCheckable} />
      </p>
      <br />
      <Tree
        checkable={checkable}
        treeData={treeData}
        defaultExpandedKeys={['1', '2']}
        checkedKeys={checkedKeys}
        onCheckedKeysChange={handleCheckedKeysChange}
      />
    </>
  )
}