Skip to content
This repository was archived by the owner on Dec 7, 2019. It is now read-only.
This repository was archived by the owner on Dec 7, 2019. It is now read-only.

bosket + redux tree not call display() props for nested node #56

Open
@theanhgianac

Description

@theanhgianac

hi, thanks for this awesome tree, i'm able to create a tree like this:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionCreator as folderActions } from '../../store/folder/folder.meta';
import { StyledTreeView } from './FolderTree.style';
import { dragndrop } from '@bosket/core';
import { TreeView } from '@bosket/react';
import FolderNode from './FolderNode';
import { TreeUtils } from 'utils';

class FolderTree extends Component {
  TreeConfig = {
    category: 'children',
    onSelect: function(items) {}.bind(this),
    openerOpts: {
      position: 'left',
      callback: (item, folded) => {
        // console.log(`${item.id} is now ${folded ? 'folded' : 'unfolded'}`);
        if (!folded) {
          this.props.loadChildren(item.id);
        }
      },
    },
    display: item => {
      console.log('display', item);
      return <FolderNode className="node" {...item} />;
    },
    sort: (a, b) => a.id > b.id,
    unique: item => item.id,
    // search: input => i => string(i.name).contains(input),
    strategies: {
      click: ['select'],
      selection: ['modifiers'],
      fold: ['opener-control'],
    },
    css: { TreeView: 'TreeView' },
    transition: {
      transitionName: 'TreeViewTransition',
      transitionEnterTimeout: 300,
      transitionLeaveTimeout: 300,
    },
    dragndrop: {
      ...dragndrop.selection(
        () => this.state.model,
        m => this.setState({ model: m })
      ),
      drag: (_, event) => {
        event.dataTransfer &&
          event.dataTransfer.setData(
            'application/json',
            JSON.stringify(this.props.selection)
          );
      },
      droppable: _ => !_ || (_.items && _.items instanceof Array),
    },
  };

  render() {
    TreeUtils.addMockChildren(this.props.folderList);
    return (
      <StyledTreeView>
        <TreeView
          selection={this.props.selection}
          model={[...this.props.folderList]}
          {...this.TreeConfig}
        />
      </StyledTreeView>
    );
  }
}

const mapStateToProps = state => {
  return {
    fetching: state.folder.fetching,
    fetchingChildren: state.folder.fetchingChildren,
    deleted: state.folder.deleted,
  };
};

const mapDispatchToProps = dispatch => ({
  loadChildren: id => dispatch(folderActions.loadChildren(id)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FolderTree);

the problem is when i change the state, the display function of the child node not called again to update the tree.
is there anything i did wrong?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions