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;
}
.wheel-picker .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

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:"",
        index:-1
    },
    events:{
        onSelect:""
    },
    handlers:{
        onSelect:"itemSelected"
    },
    create:function() {
        this.inherited(arguments);

        // tweak scrolling
        enyo.mixin(this.$.scrollMath, {
            kFrictionDamping:0.3,
            kDragDamping:0.25,
            kSnapFriction:0.3
        });
    },
    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();
        }
    },
   ...