JSFiddle - React, Tailwind, and code Playground

by romantonoff

HTML

<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
<script type="module">
  import { actionSheetController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
  window.actionSheetController = actionSheetController;
</script>
<ion-app>
  <ion-content scroll-y="false">
    <ion-drawer>
      <h1>Header</h1>
      <p hide-on-bottom>Content</p> 
    </ion-drawer>

    <h5 class="ion-margin">
      Try to destroy pane
    </h5>
    <p class="ion-margin">
      Show alert and prevent pane from destroy if condition is not true
    </p>
  </ion-content>
</ion-app>

CSS

ion-content {
  --background: #f8f8f8;
}

ion-drawer, ion-extra-drawer { 
  padding: 0 20px; 
} 

ion-slides { 
  height: 150px; 
}

JavaScript

var canDismiss = false;
var element = document.querySelector('ion-drawer');
var drawer = new CupertinoPane(element, { 
    initialBreak: 'top',
    breaks: {
      top: { enabled: true, height: window.innerHeight - (335 * 0.35), bounce: false },
      middle: { enabled: false, height: 300, bounce: true },
      bottom: { enabled: true, height: 100, bounce: true },
    },
    fastSwipeSensivity: 3,
    bottomClose: true,
    events: {
      onWillDismiss: (e) => onWillDismiss(e) 
    }
});

window.onload = async function () {
  await document.querySelector('ion-app').componentOnReady();
  drawer.present({animate: true});
  drawer.preventDismiss(true);
}

async function onWillDismiss(e) {
  console.log(e);
  if (e?.prevented) {
    presentActionSheet();
  }
};

async function presentDrawer() {
  drawer.present({animate: true});
};

async function destroyDrawer() {
  drawer.destroy({animate: true});
};

async function openActionSheet(opts) {
  const actionSheet = await actionSheetController.create(opts);
  await actionSheet.present();
}

async function presentActionSheet() {
  const mode = Ionic.mode;
  await openActionSheet({
    header: "Are you really want to close pane ?",
    buttons: [{
      text: 'Dismiss',
      role: 'destructive',
      icon: 'close',
      handler: () => {
        drawer.preventDismiss(false);
        drawer.destroy({animate: true}); 
      }
    }, {
      text: 'Cancel',
      icon: mode === 'md' ? 'close' : null,
      role: 'cancel'
    }]
  });
}