JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

CSS

.wheel-picker {
    position:relative;
    background-attachment:local;
}

.wheel-picker .wheel-picker-client, .wheel-picker .wheel-picker-internal {
    white-space:nowrap;
    display:inline-block;
}

.wheel-picker .wheel-picker-client .wheel-picker-internal > * {
    display:inline-block;
}

.integer-wheel-picker .wheel-picker-item {
    margin:3px;
    text-align:center;
    width:100px;
}

.integer-wheel-picker .wheel-picker-item.selected {
    background:#ffff88;
}

/* App Logic */
.wheel-picker {
    height:25px;
    width:100%;
}


.letters {
    width:75px;
    text-align:center;
}

.letters.selected {
    font-weight:bold;
}

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:10;
    background:url(https://raw.github.com/enyojs/onyx/master/images/gradient-invert.png) top left repeat-x local;
    background-size:auto 100%;
}

JavaScript

enyo.kind({
    name:"WheelPickerClient",
    classes:"wheel-picker-client",
    published:{
        leftSpace:0,
        rightSpace:0
    },
    components:[
        {name:"lSpace", style:"display:inline-block"},
        {name:"client", classes:"wheel-picker-internal"},
        {name:"rSpace", style:"display:inline-block"}
    ],
    create:function() {
        this.inherited(arguments);
        this.leftSpaceChanged();
        this.rightSpaceChanged();
    },
    leftSpaceChanged:function() {
        this.$.lSpace.applyStyle("width", this.leftSpace+"px");
    },
    rightSpaceChanged:function() {
        this.$.rSpace.applyStyle("width", this.rightSpace+"px");
    },
    getChildren:function() {
        return this.$.client.children;
    }
});

enyo.kind({
    name:"WheelPicker",
    kind:"Scroller",
    touch:true,
    vertical:"hidden",
    horizontal:"scroll",
    classes:"wheel-picker",
    thumb:false,
    published:{
        overlay:true,
        overlayClasses:""
    },
    events:{
        onSelect:""
    },
    handlers:{
        onSelect:"itemSelected"
    },
    initComponents:function() {
        var c = this.components;
        this.components = [];
        
        this.overlayChanged();
        this.inherited(arguments);
        
        this.createComponent({name:"wpc", kind:"WheelPickerClient", owner:this}).createComponents(c, {owner:this.owner});
    },
    overlayChanged:function() {
        if(this.overlay && !this.$.overlay) {
            this.createComponent({name:"overlay", kind:"Overlay", classes:this.overlayClasses, isChrome:true, owner:this, delegate:this});
        } else if(!this.overlay && this.$.overlay) {
            this.$.overlay.destroy();
        }
    },
    overlayClassesChanged:function(oldValue) {
        if(this.$.overlay) {
            this.$.overlay.removeClass(oldValue);
            this.$.overlay.addClass(this.overlayClasses);
        }
    },
    rendered:function() {
        this.inherited(arguments);
       ...