JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script src="https://raw.github.com/enyojs/enyo/master/enyo.js"></script>

CSS

.active {
    background-color:#8888ff;
}

JavaScript

enyo.kind({
    name:"ex.GroupItemControl",
    kind:"GroupItem",
    published:{
        content:""
    },
    components:[
        {name:"c", kind:"Control"},
    ],
    create:function() {
        this.inherited(arguments);
        this.contentChanged();
    },
    contentChanged:function() {
        this.$.c.setContent(this.content);
    },
    tap:function() {
        this.setActive(true);
    }
});

enyo.kind({
    name:"ex.UIExample",
    kind:"Control",
    history:0,
    components:[
        {name:"btn", kind:"Button", ontap:"buttonClicked", components:[
            {content:"Click Me!"}
        ]},
        {name:"select", kind:"Select", onchange:"selectChanged", components:[
            {value:"1", components:[
                {content:"First!"}
            ]},
            {value:"2", components:[
                {content:"Second!"}
            ]},
            {value:"3", components:[
                {content:"Third!"}
            ]},
        ]},
        {kind:"Group", components:[
            {name:"repeater", kind:"Repeater", onSetupRow:"setupRow", components:[
                {kind:"ex.GroupItemControl", name:"history", content:"abc"}
            ]}
        ]}
    ],
    create:function() {
        this.inherited(arguments);
        this.history = [];
    },
    buttonClicked:function() {
        this.history.push("Button:" + this.$.select.getSelected());
        this.buildRepeater();
    },
    selectChanged:function() {
        this.history.push("Select:" + this.$.select.getSelected());
        this.buildRepeater();
    },
    buildRepeater:function() {
        // this seems pretty kludgy ... have to set # of rows, build, and render manually
        this.$.repeater.setRows(this.history.length);
        this.$.repeater.build();
        this.$.repeater.render();
    },
    setupRow:function(source, e) {
        if(this.history[e.index]) {        
            e.row.$.history.setContent(this.history[e.index]);
        }
    }
});

new...