Skip to content
This repository has been 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 opened this issue May 6, 2019 · 0 comments
Open

Comments

@theanhgianac
Copy link

theanhgianac commented May 6, 2019

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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant