react draggable useful tree plug

react tree can drag the tree structure:

github Address:

github地址：react-sortable-tree

installation:

NPM

npm install react-sortable-tree –save

YARN

yarn add react-sortable-tree

Quote

import SortableTree from ‘react-sortable-tree’;
import ‘react-sortable-tree/style.css’;

use

Here I was made public assemblies props may be available for public component data data call.

the extends React.PureComponent default class SortableTrees Export { 
  // definition of transmission type propTypes: 
  static propTypes = { 
    isDrop: PropTypes.bool, // if you can drag 
    treeData: PropTypes.array, // tree structure data 
    onChangeVal: PropTypes.func, / / value change trigger event 
    haveChildren: PropTypes.bool, // if there is a sub-class 
  }; 
  
  // set default 
  static defaultProps = { 
    isDrop: to true, 
    haveChildren: to true, 
    treeData: [{ 
      title: 'Workflow Test', 
      Expanded: to true , 
      Children: [{ 
        title: 'Taskflow Test', 
      }, { 
        title: 'Taskflow test1', 
        Expanded: to true,  
        Children: [{
          title: 'taskflow2-1',
        }, { 
          Title: 'taskflow2-2', 
        }], 
      }], 
    }], 
    onChangeVal: () => {}, 
  }; 
  
  // When invoked component value changes received new data 
  onChangeValue = (treeData) = > { 
    this.props.onChangeVal (the JSON.stringify (treeData)); 
  } 
  
  // if you can drag (default may not be added, depending on demand) 
  stopParentNode = (Node) => { 
    (! node.nextParent) {iF 
      to false return; 
    } 
    return to true; 
  } 
  
  // if there is a child (default may not be added, depending on demand) 
  toHaveChildren = (Node) => { 
    iF (node.type === 'Streaming') { 
      return to false; 
    }  
    return to true;
  } 
  
  // the render 
  the render () {
    const {
      isDrop,
      treeData,
      haveChildren,
    } = this.props;
    return (
      <SortableTree
        treeData={treeData}
        onChange={(e) => { this.onChangeValue(e); }}
        canDrop={isDrop ? this.stopParentNode : () => { return false; }}
        canNodeHaveChildren={haveChildren ? this.toHaveChildren : () => { return false; }}
      />
    );
  }
}

　　

External call this component

<SortableTrees 
  treeData = {} // treeData treeData your own data 
  onChangeVal = {(treeDatas) => {this.setTreeData (treeDatas);}} 
/>

　　

Props parameters

treeData (object): tree-structure data

onChange (func): Fires when data changes (for example: a drag)

getNodeKey (func): when the data changes, to obtain the node node

generateNodeProps (func): Add custom configuration

onMoveNode (func): mobile node triggers

onVisibilityToggle (func): Collapse or expand a child node when the trigger

onDragStateChanged (func): When you drag the beginning or end calls

maxDepth (number): the maximum depth of the node may be inserted. The default is unlimited

rowDirection (string): the row direction

canDrag (func or bool): whether to prohibit drag

canDrop: (func): returns false to prevent falling into a given position of the nodes

canNodeHaveChildren: (func): Are there own function

theme (object): theme style

searchMethod (func): search function

className (string): class

rowHeight (number or func): 行高

---- Thanks for watching: thank you: ----