JSFiddle - React, Tailwind, and code Playground

by lynnaloo

JavaScript

enyo.kind({
    name: "FakeList",
    components: [
        {content: "XV.ListItem", components: [
        {kind: "FittableColumns", components: [
          {content: "XV.ListColumn", components: [
            {kind: "FittableColumns", components: [
              {content: "XV.ListAttr"},
              {content: "XV.ListAttr"}
            ]},
            {kind: "FittableColumns", components: [
              {content: "XV.ListAttr"},
              {content: "XV.ListAttr"}
            ]}
          ]},
          {content: "XV.ListColumn", fit: true, components: [
            {content: "XV.ListAttr"},
            {content: "XV.ListAttr"}
          ]}
        ]}
      ]}  
    ]
});

enyo.kind({
    name: "XV.ListAttrNode", 
    kind: "Node",
    content: "I am a picker widget"
});

enyo.kind({
    name: "XV.TreeNode",
    kind: "Node",
    content: "",
    expandable: true,
    expanded: true
});

enyo.kind({
    name: "ListRowNode",
    kind: "XV.TreeNode",
    content: "Row"
});

enyo.kind({
    name: "ListColumnNode",
    kind: "XV.TreeNode",
    content: "Column"
});

enyo.kind({
    name: "XV.Tree",
    kind: "FittableRows",
	fit: true,
    components: [
        {kind: "FakeList", name: "list"},
        {kind: "Node", name: "tree", content: "Tree", expandable: true, expanded: true}
    ],
    create: function () {
        this.inherited(arguments);
        this.createLeaves(this.$.list, this.$.tree);
    },
    createLeaves: function (item, branch) {
       var comps = item.getComponents();
       var isLeaf = comps.length === 0; 
          for (var i = 0; i < comps.length; i++) { 
              var c = {kind: "XV.TreeNode", content: comps[i].content};
              // c = {kind: "XV.ListAttrNode"};           
              var newComponent = branch.createComponent(c, {owner: branch}); 
              this.createLeaves(comps[i], newComponent);
          }
               
    }
});
        
var app = new XV.Tree();
app.renderInto(document.body);