teleport / react-dnd-treeview Goto Github PK

import styles from './PostsCategories.css';
import React from 'react';
import * as Immutable from 'immutable';
import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd';
import { TreeView } from 'react-dnd-treeview';

const recursivelyUpdateList = (
  list,
  parentNode,
  listUpdateFunc,
  nodeUpdateFunc
) => {
  const mappedItems = list.items.map(
    item => recursivelyUpdateNode(item, listUpdateFunc, nodeUpdateFunc)
  );
  if (!Immutable.is(mappedItems, list.items)) {
    list = Object.assign({}, list, {
      items: mappedItems,
    });
  }
  return listUpdateFunc(list, parentNode);
};

const recursivelyUpdateNode = (
  node,
  listUpdateFunc,
  nodeUpdateFunc) => {
  const updateChildren = node.children
    ? recursivelyUpdateList(node.children, node, listUpdateFunc, nodeUpdateFunc)
    : node.children;
  if (updateChildren !== node.children) {
    node = Object.assign({}, node, {
      children: updateChildren,
    });
  }
  return nodeUpdateFunc(node);
};

class PostCategoryList extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      rootNodes: {
        items: [{
          id: 'A',
          title: 'A',
          children: {
            items: [{
              id: 'A1',
              title: 'A1'
            },
            {
              id: 'A2',
              title: 'A2'
            },
            {
              id: 'A3',
              title: 'A3'
            }]
          },
        },
        {
          id: 'B',
          title: 'B',
          children: {
            items: [{
              id: 'B1',
              title: 'B1'
            },
            {
              id: 'B2',
              title: 'B2'
            }]
          },
        },
        {
          id: 'C',
          title: 'C',
          children: {
            items: [{
              id: 'C1',
              title: 'C1',
              children: {
                items: [{
                  id: 'C1x',
                  title: 'C1x'
                },
                {
                  id: 'C1y',
                  title: 'C1y'
                },
                {
                  id: 'C1z',
                  title: 'C1z'
                },
                {
                  id: 'C1zz',
                  title: 'C1zz'
                },
                {
                  id: 'C1zzz',
                  title: 'C1zzz'
                }]
              }
            }]
          }
        }]
      }
    };

    this.renderNode = this.renderNode.bind(this);
    this.handleMoveNode = this.handleMoveNode.bind(this);
  }

  setStateWithLog(newState) {
    console.log("new state: ", newState);
    this.setState(newState);
  }

  handleMoveNode(args) {
    this.setState(Object.assign({}, this.state, {
      rootNodes: recursivelyUpdateList(
        this.state.rootNodes,
        null,
        (list, parentNode) =>
          parentNode === args.newParentNode && parentNode === args.oldParentNode
            ? Object.assign({}, list, {
              items:
              list.items
                .insert(args.newParentChildIndex, args.node)
                .remove(args.oldParentChildIndex + (args.newParentChildIndex < args.oldParentChildIndex ? 1 : 0))
            })
            : parentNode === args.newParentNode
              ? Object.assign({}, list, {
                items: list.items.insert(args.newParentChildIndex, args.node)
              })
              : parentNode === args.oldParentNode
                ? Object.assign({}, list, {
                  items: list.items.remove(args.oldParentChildIndex)
                })
                : list,
        item => item
      ),
    }));
  }

  handleToggleCollapse(node) {
    this.setStateWithLog(Object.assign({}, this.state, {
      rootNodes: recursivelyUpdateList(
        this.state.rootNodes,
        null,
        (list, parentNode) => list,
        item => item === node ? Object.assign({}, item, {
          isCollapsed: !item.isCollapsed,
        }) : item
      ),
    }));
  }

  renderNode(node) {
    return (
      <div className={ styles.nodeItem }>
        { !node.children || node.children.items.isEmpty()
          ? null
          : <a
            style={{ fontSize: '0.5em', verticalAlign: 'middle' }}
            onClick={ () => this.handleToggleCollapse(node) }
            >
            {node.isCollapsed ? '⊕' : '⊖'}
          </a>
        }
        Node: { node.title }
      </div>
    );
  }

  render() {
    return (
      <div className={styles.categoriesListing}>
        <TreeView
          rootNodes={ this.state.rootNodes }
          classNames={ styles }
          renderNode={ this.renderNode }
          onMoveNode={ this.handleMoveNode }
        />
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(PostCategoryList);