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
Description
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
Labels
No labels