[English](./README.md) | 简体中文

# @ray-js/tree-selection

[![latest](https://img.shields.io/npm/v/@ray-js/tree-selection/latest.svg)](https://www.npmjs.com/package/@ray-js/tree-selection) [![download](https://img.shields.io/npm/dt/@ray-js/tree-selection.svg)](https://www.npmjs.com/package/@ray-js/tree-selection)

> 出行门店选择组件，树状结构数据

## 安装

```sh
$ npm install @ray-js/tree-selection
// 或者
$ yarn add @ray-js/tree-selection
```

## 开发

```sh
# 实时编译组件代码
yarn watch
# 实时编译Demo代码
yarn start:tuya
```

## 使用

```tsx
import Foo from '@ray-js/tree-selection';

export default function Home() {
  const [visible, setVisible] = useState(false);
  const [selectItem, setSelectItem] = useState<any>({});

  const [visible2, setVisible2] = useState(false);
  const [selectItem2, setSelectItem2] = useState({
    label: '二级组织02',
    code: 'code0_code1_code3',
    parentCode: 'code0_code1_code2',
    children: [],
  });

  return (
    <View className={styles.view}>
      <DemoBlock title="基础用法">
        <Button onClick={() => setVisible(true)}>当前选择的组织: {selectItem.label}</Button>
        <Template
          show={visible}
          treeData={initTreeData}
          onClickOverlay={() => setVisible(false)}
          onSelect={v => {
            setSelectItem(v);
            setVisible(false);
          }}
        />
      </DemoBlock>
      <DemoBlock title="初始值">
        <Button onClick={() => setVisible2(true)}>当前选择的组织: {selectItem2.label}</Button>
        <Template
          show={visible2}
          treeData={initTreeData}
          onClickOverlay={() => setVisible2(false)}
          defaultCode={['code0_code1', 'code0_code1_code3']}
          onSelect={v => {
            setSelectItem2(v);
            setVisible2(false);
          }}
        />
      </DemoBlock>
    </View>
  );
}
```