JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

JavaScript

enyo.kind({
    name:"ex.List",
    kind:"List",
    events:{
        onRenderItem:""
    },
    generatePage: function(inPageNo, inTarget) {
        this.page = inPageNo;
        var r = this.$.generator.rowOffset = this.rowsPerPage * this.page;
        var rpp = this.$.generator.count = Math.min(this.count - r, this.rowsPerPage);
        var html = this.$.generator.generateChildHtml();
        inTarget.setContent(html);
        this.$.generator.rendered();
        
        var pageHeight = inTarget.getBounds().height;
        // if rowHeight is not set, use the height from the first generated page
        if (!this.rowHeight && pageHeight > 0) {
            this.rowHeight = Math.floor(pageHeight / rpp);
            this.updateMetrics();
        }
        // update known page heights
        if (!this.fixedHeight) {
            var h0 = this.getPageHeight(inPageNo);
            if (h0 != pageHeight && pageHeight > 0) {
                this.pageHeights[inPageNo] = pageHeight;
                this.portSize += pageHeight - h0;
            }
        }
    }
});

enyo.kind({
    name:"ex.App",
    components:[
        {name:"list", kind:"ex.List", classes:"enyo-fit", onSetupItem:"setupItem", onRenderItem:"renderItem", count:200, components:[
            {kind:"onyx.PickerDecorator", components:[
                {name:"row", content:"Pick Me!"},
                {name:"picker", kind:"onyx.Picker", components:[
                    {content:"first"},
                    {content:"second"},
                    {content:"third"}
                ]}
            ]}
        ]}
    ],
    setupItem:function(source, event) {
        this.$.row.setContent("Row " + event.index);
    },
    renderItem:function(source, event) {
        if(event.selected) {
            this.$.list.prepareRow(event.index);
            this.$.row.setActive(true);
            this.$.list.lockRow();
        } else {
            this.$.row.setActive(false);
        }
    }
});

enyo.kind({
    name:...