English | [简体中文](./README-zh_CN.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)

> Travel store selection component, tree structure data

## Installation

```sh
$ npm install @ray-js/tree-selection
# or
$ yarn add @ray-js/tree-selection
```

## Develop

```sh
# watch compile component code
yarn watch
# watch compile demo
yarn start:tuya
```

## Usage

```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="basic">
        <Button onClick={() => setVisible(true)}>当前选择的组织: {selectItem.label}</Button>
        <Template
          show={visible}
          treeData={initTreeData}
          onClickOverlay={() => setVisible(false)}
          onSelect={v => {
            setSelectItem(v);
            setVisible(false);
          }}
        />
      </DemoBlock>
      <DemoBlock title="initial value">
        <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>
  );
}
```