1.0.4 • Published 4 years ago

@jswork/react-ant-tree-select v1.0.4

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

react-ant-tree-select

Antd tree select wrapper for react.

version license size download

installation

npm install -S @jswork/react-ant-tree-select

properties

NameTypeRequiredDefaultDescription
classNamestringfalse-The extended className for component.
itemsarrayfalse[]Data source items(tree).
templatefuncfalse-The items template.
itemsKeyunionfalse'children'Items key(default: children).

usage

  1. import css

    @import "~@jswork/react-ant-tree-select/dist/style.css";
    
    // or use sass
    @import "~@jswork/react-ant-tree-select/dist/style.scss";
    
    // customize your styles:
    $react-ant-tree-select-options: ()
  2. import js

    import ReactDemokit from '@jswork/react-demokit';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import ReactAntTreeSelect from '@jswork/react-ant-tree-select';
    import { TreeSelect } from 'antd';
    
    import './assets/style.scss';
    
    class App extends React.Component {
      constructor(inProps) {
        super(inProps);
        this.state = {
          items: [
            {
              label: '0-0',
              value: '0-0',
              children: [
                {
                  label: '0-0-0',
                  value: '0-0-0',
                  children: [
                    { label: '0-0-0-0', value: '0-0-0-0' },
                    { label: '0-0-0-1', value: '0-0-0-1' },
                    { label: '0-0-0-2', value: '0-0-0-2' }
                  ]
                },
                {
                  label: '0-0-1',
                  value: '0-0-1',
                  children: [
                    { label: '0-0-1-0', value: '0-0-1-0' },
                    { label: '0-0-1-1', value: '0-0-1-1' },
                    { label: '0-0-1-2', value: '0-0-1-2' }
                  ]
                },
                {
                  label: '0-0-2',
                  value: '0-0-2'
                }
              ]
            },
            {
              label: '0-1',
              value: '0-1',
              children: [
                { label: '0-1-0-0', value: '0-1-0-0' },
                { label: '0-1-0-1', value: '0-1-0-1' },
                { label: '0-1-0-2', value: '0-1-0-2' }
              ]
            },
            {
              label: '0-2',
              value: '0-2'
            }
          ]
        };
      }
    
      template = (inData) => {
        if (inData && inData.length) {
          return inData.map((item) => {
            const { label, value, ...itemProps } = item;
            if (item.children) {
              return (
                <TreeSelect.TreeNode
                  title={label}
                  key={value}
                  value={value}
                  {...itemProps}>
                  {this.template(item.children)}
                </TreeSelect.TreeNode>
              );
            }
            return <TreeSelect.TreeNode title={label} key={value} value={value} />;
          });
        }
        return null;
      };
    
      render() {
        return (
          <ReactDemokit
            className="p-5 app-container"
            url="https://github.com/afeiship/react-ant-tree-select">
            <ReactAntTreeSelect
              placeholder="Plealse select..."
              style={{ width: 200 }}
              items={this.state.items}
              onChange={(e) => {
                console.log('value:', e.target.value);
              }}
              // template={this.template}
            />
          </ReactDemokit>
        );
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));

documentation

license

Code released under the MIT license.