JSFiddle - React, Tailwind, and code Playground

by romantonoff

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
<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>
<html mode="ios">
  <body>
    <ion-app>
      <ion-content>
          <ion-drawer>
            <h1 class="ion-padding">Header</h1>

            <div class="content" overflow-y>
              <ion-list hide-on-bottom>
                <ion-list-header>
                  Recent Conversations
                </ion-list-header>

                <ion-item>
                  <ion-avatar slot="start">
                    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
                  </ion-avatar>
                  <ion-label>
                    <h2>Finn</h2>
                    <h3>I'm a big deal</h3>
                    <p>Listen, I've had a pretty messed up day...</p>
                  </ion-label>
                </ion-item>

                <ion-item>
                  <ion-avatar slot="start">
                    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
                  </ion-avatar>
                  <ion-label>
                    <h2>Han</h2>
                    <h3>Look, kid...</h3>
                    <p>I've got enough on my plate as it is, and I...</p>
                  </ion-label>
                </ion-item>

                <ion-item>
                  <ion-avatar slot="start">
                    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
                  </ion-avatar>
                  <ion-label>
                    <h2>Rey</h2>
                    <h3>I can handle myself</h3>
                    <p>You will remove these restraints and leave...</p>
                  </ion-label>
                </ion-item>

                <ion-item>
                  <ion-avatar slot="start">
                    <img...

CSS

ion-drawer { 
  padding: 0 20px; 
}

ion-drawer .content {
  overflow-y: auto !important;
}
ion-drawer h1 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

JavaScript

let topHeight = 600;
let middleHeight = 350;
let content = document.querySelector('ion-drawer .content');
var drawer = new CupertinoPane('ion-drawer', { 
    breaks: {
      top: { enabled: true, height: topHeight },
      middle: { enabled: true, height: middleHeight },
      bottom: { enabled: true, offset: 90 }
    },
    initialBreak: 'middle',
    dragBy: ['.draggable', 'ion-drawer h1'],
    events: {
      onDrag: () => {
        content.style.height = `${window.screen.height 
          - getPaneTransformY() 
          - content.offsetTop}px`;
          content.setAttribute('style', 'overflow-y: hidden !important');
      },
      onDidPresent: () => {
                content.setAttribute('style', 'overflow-y: auto !important');
                content.style.height = `${middleHeight - content.offsetTop}px`;
      },
      onTransitionEnd: () => {
        setTimeout(() => {
           setHeight();
        }, 200)
      }
    }
});

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

function setHeight() {
        content.setAttribute('style', 'overflow-y: auto !important');
        if (drawer.currentBreak() === 'top') {
          content.style.height = `${topHeight - content.offsetTop}px`;
        }
        if (drawer.currentBreak() === 'middle') {
          content.style.height = `${middleHeight - content.offsetTop}px`;
        }
}

function getPaneTransformY() {
  const translateYRegex = /\.*translateY\((.*)px\)/i;
  const paneEl = document.querySelector('.pane');
  return paneEl ? parseFloat(translateYRegex.exec(paneEl.style.transform)[1]) : 0;
}

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

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

async function hideDrawer() {
  drawer.hide();
};

async function isHiddenDrawer() {
    console.log(await drawer.isHidden());
};

async function setTopDrawer() {
 ...