JSFiddle - React, Tailwind, and code Playground

by joopmicroop

CSS

.listItem{ 
    position:relative; 
    border-bottom:1px solid red;
}
.animBar{
    position:absolute; 
    right:0; 
    top:0; 
    height:100%; 
    width:10%; 
    background:green;
}

JavaScript

enyo.kind({
    name:'main',
    classes: "enyo-fit",
    components:[ 
        {name:'list', kind:'enyo.List', count:'3', onSetupItem:'itemSetup', components:[
            // {name:'listItem', kind:'listItem', ontap:'itemTapped'}
            {name:'listItem', components:[
                {name:'backBar', classes:'animBar'},
                {name:'itemContent', content:''},
            ]}
        ]}
    ],
    itemTapped:function(s,e){
        this.$.list.prepareRow(e.rowIndex);
        this.$.list.performOnRow(e.rowIndex, function(){ this.animate(); }, this.$.listItem);
        this.$.list.lockRow();
        this.$.list.renderRow(e.rowIndex);
    },
    itemSetup:function(s,e){ this.$.itemContent.setContent('item'+e.index); }
});
        
/*enyo.kind({
    name:'listItem',
    classes:'listItem',
    published:{text:''},
    animStep:function(animObj){
        console.log(this.$.backBar.hasNode(), animObj.value);
        this.$.backBar.applyStyle('width',animObj.value+'%');
    },
    components:[
        {name:'animator', kind:'enyo.Animator', duration:1000, startValue:10, endValue:100, onStep:'animStep'},
        {name:'backBar', classes:'animBar'},
        {name:'itemContent', content:''}
    ],
    animate:function(){
        if(!this.$.animator.isAnimating()){ this.$.animator.play(); }
    },
    textChanged:function(oldVal){ this.$.itemContent.setContent(this.text); }
});*/

(new main()).renderInto(document.body);