fiffty / react-treeview-mui

A Treeview UI written as a React Component (with material design)
MIT License
164 stars 51 forks source link

Upgrade to react 16.4.1 and material-ui 1.0.0 #16

Closed despatates closed 6 years ago

NAisaac commented 6 years ago

This is ⚡️Awesome⚡️ By the way, I'm thinking about implementing add/delete node functionalities. Do you have any recommendation?

fiffty commented 6 years ago

Thank you for the contribution! I will merge the changes. Cheers,

despatates commented 6 years ago

Thanks!

@NAisaac The main problem you may encounter is the tree items order. If you have items [{1}, {2}, {1.1}], the listItem parameter must be sorted like this: [{1}, {1.1}, {2}]. Otherwise, 1.1 will be displayed below 2. The tree items have children and parentIndex based on array indexes. When you'll add or remove one item, you'll have to update these indexes for each item.

I think you should start by thinking to a new way to sort items, after that it will be easier to add/remove a node :+1:

NAisaac commented 6 years ago

Ah merci. I'll look into it.

@despatates Might be a simple one... I tried switching MuiTreeList between default and named import. But I'm still getting this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of TreeList. at invariant (invariant.js:42) at getFiberTagFromObjectType (react-dom.development.js:9766) at createFiberFromElement (react-dom.development.js:9726) at createChild (react-dom.development.js:12090) at reconcileChildrenArray (react-dom.development.js:12341) ... at interactiveUpdates$1 (react-dom.development.js:16719) at interactiveUpdates (react-dom.development.js:2150) at dispatchInteractiveEvent (react-dom.development.js:4532)

import React, { Component } from 'react';
import { MuiTreeList } from 'react-treeview-mui';
import { exampleListItems as listItems } from './exampleList.js';

class HierarchyApp extends Component {
    render() {
            return (
            <MuiTreeList 
                listItems={listItems}
                contentKey={'title'}
            );
    }
}

export default HierarchyApp;
despatates commented 6 years ago

I did a new pull request to solve import issue.

@fiffty can you merge it, please?