JSFiddle - React, Tailwind, and code Playground

by Derek Anderson

JavaScript

enyo.kind({
    name: 'ComponentWrap',
    constructor: function (props) {
        this.newComponents = props.components;
        this.newOwner = props.owner;
        props.components = [];
        this.inherited(arguments);
    },
    create: function (props) {
        this.inherited(arguments);
        if (typeof this.$.wrapper !== 'undefined' && typeof this.newComponents === 'object') {
            for (var i = 0; i < this.newComponents.length; i++) {
                this.$.wrapper.createComponent(this.newComponents[i], {
                    owner: this.newOwner
                });
            }
        }
    }
});
enyo.kind({
    kind: "ComponentWrap",
    name: "ScrimmedPopup",
    events: {
        onValidation: ''
    },
    published: {
        valid: false    
    },
    components: [{
        name: 'BasePopup',
        kind: "onyx.Popup",
        floating: true,
        centered: true,
        scrim: true,
        modal: true,
        autoDismiss: false,
        components: [{
            kind: "enyo.FittableRows",
            components: [{
                style: 'height:20px;'
            }, {
                style: "position:absolute;top:0;right:0;font-size:18px;width:20px;background-color:darkred;color:white;border-top-right-radius:8px;text-align:center;cursor: pointer;",
                content: "X",
                ontap: 'closeTap'
            }, {
                name: 'wrapper'
            }]
        }]
    }],
    validChanged: function(){
        if(this.valid){
            this.hide();    
        }
    },
    closeTap: function () {
        if(this.valid) {
            this.hide();
            return;
        }
        
        this.doValidation()
        return false;
    },
    hide: function () {
        this.$.BasePopup.hide();
    },
    show: function () {
        this.$.BasePopup.show();
    }
});

enyo.create({
    name: 'testApp',
    components: [{
        kind: 'onyx.Button',
        content: 'showPopup',
        ontap: 'showit'
...