alwinn1977 / react-simple-jstree Goto Github PK
View Code? Open in Web Editor NEWThe simple React.js wrapper for jsTree jQuery plugin
License: MIT License
The simple React.js wrapper for jsTree jQuery plugin
License: MIT License
Currently I am wiring up the 'select_node.jstree' event in the componentDidUpdate of the react component that wraps the TreeView like so:
`componentDidUpdate() {
console.log('componentDidUpdate on TreeView container');
var $this = this;
$('#data').on("select_node.jstree", function (event, data) {
var id = data.node.id === 'root' ? '00000000-0000-0000-0000-000000000000' : data.node.id;
$this.props.updateSelectedTreeNode(id, data.node.original.type);
});
}`
This has the adverse effect of being hooked up multiple times if you click repeatedly through the tree. I also tried componentDidMount(), but I believe that to be too early in the lifecycle to actually be hooked up, as I saw no evidence the handler was properly attached.
Any recommendations?
Thanks!
Hi. Now you are using <div id="data" />
(src/index/js:45). It may create some problems than there is some element with such id. Using ref's callback allow to avoid possible bugs (it also should be a bit faster).
In working with the refresh I have noticed recently that the tree actually doesn't refresh until I click on it. The data appears to have updated behind the scenes but the visual state of the tree doesn't change until I click on a node.
Have you noticed this? I can port my code to a sample if it helps.
Thanks!
In my render() upon a state change I return
<TreeView treeData={data} />
However, the jstree does not appear to refresh. I've tried using jstree's functions destroy and refresh without any luck.
Are there any examples that do this?
Thanks!
class CategoryTree extends Component {
constructor(props) {
super(props);
this.state = {
data: {
core: {
data: [{
"id": "98",
"parent": "#",
"text": "[Sample] Product Category",
"state": {
"opened": true,
"selected": true
}
},
{
"id": "99",
"parent": "98",
"text": "[Sample] Sub Category",
"state": {
"opened": true,
"selected": true
}
},
{
"id": "100",
"parent": "#",
"text": "[Sample] Product Category 2",
"state": {
"opened": true,
"selected": true
}
},
{
"id": "101",
"parent": "100",
"text": "[Sample] Sub Category 2",
"state": {
"opened": true,
"selected": true
}
},
{
"id": "102",
"parent": "100",
"text": "[Sample] Sub Category 3",
"state": {
"opened": true,
"selected": true
}
},
{
"id": "103",
"parent": "100",
"text": "[Sample] Sub Category 4",
"state": {
"opened": true,
"selected": true
}
},
{
"id": "104",
"parent": "100",
"text": "[Sample] Sub Category 5",
"state": {
"opened": true,
"selected": true
}
}
]
},
plugins: ['checkbox'],
checkbox: {
three_state: false // to avoid that fact that checking a node also check others
}
},
selected: [],
};
}
handleClick() {
const newData = this.state.data.core.data[0].children.slice();
newData.push({ text: 'New child node' });
this.setState({
data: {
core: {
data: [
{
text: 'Root node', children: newData
}
]
}
}
});
}
handleChange(e, data) {
this.setState({
selected: data.selected,
})
}
render() {
const { categories } = this.props;
const data = {
core: {
data: categories
},
plugins: ['checkbox'],
checkbox: {
three_state: !true// to avoid that fact that checking a node also check others
}
}
return (
<div>
<button onClick={() => this.handleClick()}>Add node</button>
<br /><br />
{(categories.length === 0)? null:
<TreeView treeData={data} onChange={(e, data) => this.handleChange(e, data)} />}
<br />
<p>Selected nodes: {this.state.selected.join(', ')}</p>
</div>
);
}
}
export default CategoryTree
When setting the data in local state it's working fine
when using the theme default just making a basic tree to try out the sample code from the npm directory description I get this error of parsing saying I may need an appropriate loader to handle this file type.
Hiya,
Do you guys have any resources or guidance documented on getting the native JStree search plugin to work with React?
Cheers
Sorry if this is not the best place to ask.
I was told to report this system error when trying to run npm build compile
npm ERR! Darwin 16.4.0
npm ERR! argv "/Users/andrewstobie/.nvm/versions/node/v7.5.0/bin/node" "/Users/andrewstobie/.nvm/versions/node/v7.5.0/bin/npm" "run" "compile"
npm ERR! node v7.5.0
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] compile: 'babel src --out-dir lib'
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] compile script 'babel src --out-dir lib'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-simple-jstree package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel src --out-dir lib
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-simple-jstree
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-simple-jstree
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! Please include the following file with any support request:
npm ERR! /Users/andrewstobie/Documents/Repos/react-simple-jstree/npm-debug.log
I am wondering if you have any help you could offer when building I would submit some pull requests but the code is mostly custom for event listeners at the moment.
It would be great to have a prop called extendsProps
that would take an object so we could add addition props like id
. for example....
<TreeView
extendsProps={{
id: 'mySimpleTree'
}}
treeData={this.state.data}
onChange={(e, data) => this.handleChange(e, data)}
/>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.