Node.js

import React, { Component } from 'react'

import { getComponent } from './helper'
// This function is used to lookup a Compment 
// given a python module.class key

export default class Node extends Component {
    static propTypes = {
        attributes: React.PropTypes.object.isRequired,
        children: React.PropTypes.array,
        collapsed: React.PropTypes.bool,
        inline: React.PropTypes.bool
    }
    static grouppingComponent = null
    static collapsible = false

    constructor(props) {
        super(props)
        this.state = {
            collapsed: props.collapsed
        }
    }

    getChild(childData) {
        return getComponent(childData)
    }

    renderChild(childData) {
        const ChildClass = this.getChild(childData)
        if (ChildClass === null) {
            return
        }
        return <ChildClass {...childData} />
    }


    renderChildren(arg_children = null) {
        let children = []
        if (arg_children !== null) {
            children = arg_children
        } else {
            children = this.props.children
        }
        let childComps = []
        let groupChildComps = []
        let CurrentGrouppingComponent = null
        for (let child of children) {
            let ChildClass = this.getChild(child)
            if (ChildClass === null) {
                continue
            }
            const GrouppingComponent = ChildClass.grouppingComponent

            // some components we group if they are in squence
            // And example of this are tutorial steps
            if (GrouppingComponent !== CurrentGrouppingComponent) {
                if (groupChildComps.length > 0) {
                    childComps.push(<CurrentGrouppingComponent
                                     key={childComps.length}>
                        {groupChildComps}
                    </CurrentGrouppingComponent>)
                    groupChildComps = []
                }
                CurrentGrouppingComponent = GrouppingComponent
            }
            if (GrouppingComponent !== null) {
                groupChildComps.push(<ChildClass key={groupChildComps.length}
                                    attributes={child.attributes}
                                    children={child.children} />)
            } else {
                childComps.push(<ChildClass key={childComps.length}
                                 attributes={child.attributes}
                                 children={child.children} />)
            }
        }
        if (groupChildComps.length > 0) {
            childComps.push(<CurrentGrouppingComponent
                             key={childComps.length}
                             children={groupChildComps} />)
        }
        return childComps
    }
}