JSFiddle - React, Tailwind, and code Playground

Fliplet Action Sheet

by tonytlwu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<div class="trigger-holder">
  <p><label><input type="radio" name="platform" value="ios" checked /> iOS</label> <label><input type="radio" name="platform" value="android" /> Android</label></p>
  <p><span class="btn btn-default trigger">Trigger</span>&nbsp;
  </p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
html,
body {
  height: 100%;
}

body {
  background: url('http://media.idownloadblog.com/wp-content/uploads/2018/01/Facebook-iOS-11-Wallpaper-3.jpeg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.trigger-holder {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  text-align: center;
}

label {
  margin-left: 10px;
}

label:first-child {
  margin-left: 0;
}

/**
 * Action Sheets
 * --------------------------------------------------
 */

.action-sheet-backdrop {
  -webkit-transition: background-color 150ms linear;
  transition: background-color 150ms linear;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: #333;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.action-sheet-backdrop.active {
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: all;
}

.action-sheet-wrapper {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  -webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 300ms;
  transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 300ms;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
}

@media screen and (min-width:640px) {
  .action-sheet-wrapper {
    width: 500px;
  }
}

.action-sheet-backdrop.active>.action-sheet-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.action-sheet {
  margin-left: 8px;
  margin-right:...

JavaScript

/* eslint-disable */
(function(w) {
  w.Fliplet = w.Fliplet || {};
  var Fliplet = w.Fliplet;

  Fliplet.UI = Fliplet.UI || {};
  Fliplet.UI.Actions = (function() {
  	var $actionSheet;
    var data;

		function Actions(options) {
      options = options || {};

      options.title = options.title || '';
      options.labels = options.labels || [];

			if (options.cancel === false) {
      	options.cancel = '';
      }

			if (typeof options.cancel !== 'string') {
        options.cancel = 'Cancel';
      }
      
      data = options;

      return show();
    }

    function show() {
      var options = {
        title: data.title,
        buttonLabels: _.map(data.labels, 'label'),
        androidEnableCancelButton: !!data.cancel,
        winphoneEnableCancelButton: !!data.cancel,
        addCancelButtonWithLabel: data.cancel,
        position: [window.innerWidth / 2, window.innerHeight / 2] // for iPad pass in the [x, y] position of the popover
      };

			if (typeof plugins === 'object' && plugins.actionsheet && plugins.actionsheet.show) {
        return showNativeActionSheet(options);
      } else {
        return showWebActionSheet(options);
      }
    }

    function showNativeActionSheet(options) {
      return new Promise(function(resolve) {

        function callback(i) {
        	// Cordova plugin index is 1-based
          runAction(i-1)
          	.then(function(){
            	resolve(i-1);
            });
        }

        window.plugins.actionsheet.show(options, callback);
      });
    }

    function showWebActionSheet(options) {
			var source = [
        '<div class="action-sheet-backdrop">',
          '<div class="action-sheet-wrapper">',
            '<div class="action-sheet">',
              '<div class="action-sheet-group action-sheet-options">',
                '{{#if title}}<div class="action-sheet-title">{{title}}</div>{{/if}}',
                '{{#each buttonLabels}}',
                '<button class="button...