@ray-js/tree-selection v0.0.1

English | 简体中文

@ray-js/tree-selection

Travel store selection component, tree structure data

Installation

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

Develop

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

Usage

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>
  );
}