tech-systems / panes Goto Github PK

Describe the bug
Loading the script from CDN fails with error: exports is not defined because the CommonJS snippet is missing. I'm referring to this snippet which should wrap the code of the lib. Something like:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = global || self, factory(global.CupertinoPane = {}));
  }(this, (function (exports) { 'use strict';
  ...
  })));

To Reproduce
Load the script from the CDN and you'll get exports is not defined in the browser console

Smartphone (please complete the following information):

• Device: Tecno Spark
• OS: Android 8
• Browser: Chrome Webview
• Version: 85

HI

I am facing a number of UI issues in using the pane.

See video:
https://github.com/Tommertom/svelte-ionic-app/blob/master/doc/TQDW3977.MP4?raw=true

There are at least three things happening:

• the pane content scrolls while dragging up, initially and then not anymore. This happens on iOS, but not chrome browser on Win10
• when changing the menu item (changing the parent content), the pane remains but becomes empty
• not shown in video: Uncaught (in promise) TypeError: Cannot read property 'style' of undefined in line this.contentEl.style.overflowY = 'hidden'; of function move-to-break. This happens after closing the pane which was emptied (see bullet 2).

Project: https://ionicsvelte.firebaseapp.com
Project Code: https://github.com/Tommertom/svelte-ionic-app
Pane code: https://github.com/Tommertom/svelte-ionic-app/blob/master/src/pages/ionic/Pane.svelte

Hi @roman-rr,

I would like to add an ion-fab button (https://ionicframework.com/docs/api/fab) at the bottom of my Ionic application, but right above the cupertino-pane division, in order to let this button dynamically follow the pane's moves.

→ Is there a simple way to do so?

HTML

<ion-content>
 <ion-fab horizontal="end">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <div class="cupertino-pane">
    <h1>Header</h1>
    <p>Content</p>
  </div>
</ion-content>

CSS

.cupertino-pane{
    margin: 20px;
}

TS

  ngOnInit() {
    this.drawer = new CupertinoPane('.cupertino-pane', {
      onDrag: () => console.log('Drag event')
    });

    this.drawer.present();
  }

Thanks in advance for your help!

Andra

Hey there 😊

first: This look very good, but i have a few Points why i can't use this yet. I will point them out here, maybe, if you have time, you can investigate into this?

1. The Usage in the Browser (Safari in my case) doesn't really work well. I expect it to work when i press the mouse and move down (like the new ionic card style ios modal). Currently it works somehow strange that if i go with my mouse over it down, without holding) it scrolls down and then stays there.
2. I opened the drawer from a Modal and was able to close the Modal via swipe gesture while the drawer was opened. Not as i expect this.
3. I really really need to be able to create a Drawer via a Component (and componentProps). Like you can with a Modal in Ionic. In the component i need able to get the Instance of the drawer to dismiss it from there.
4. For this. i want to be able to pass data while dismissing and be able to get this data in the onDidDismiss (and other) Functions
5. Question: Is it possible to make the height of the Drawer fit to the content? Should also work when i pass a component.

Let me know what you think about this topics. Maybe some are already possible and i'm using it wrong? Also if you need assist, i will give my best to support you 😊

I need to edit the css of draggable to remove the box shadow o change is color because i dont need thats space i see that you did itin the example of nike but i dont get it how to edit that specificic class, here is my code so far.

<ion-header class="ion-no-border" style="z-index: 40;">
  <ion-toolbar>
    <ion-buttons  slot="start">
      <ion-menu-button menu="main-menu">
        <ion-icon slot="icon-only" name="menu"></ion-icon>
      </ion-menu-button>
    </ion-buttons>
    <ion-button slot="end" fill="clear">
      <ion-icon style="color: black; opacity: 0.7;" slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div class="cupertino-pane">
    <h1 class="pane-header">
      <ion-button fill="clear" (click)="openTemary()" class="ion-text-capitalize">
        Temario
        <ion-icon slot="start" name="list"></ion-icon>
      </ion-button>
      <ion-button class="marker-btn ion-text-capitalize" slot="end" fill="clear" (click)="openBookmark()">
        Marcadores
        <ion-icon slot="start" name="bookmark"></ion-icon>
      </ion-button>
    </h1>
    <div *ngFor="let temary of temaryContent" class="content" hide-on-bottom>
      <h2>{{temary.chapter}}<p>{{temary.title}}</p></h2>
    </div>
  </div>

</ion-content>

SCRIPT 

ngOnInit() {
    this.myPane = new CupertinoPane(
      '.cupertino-pane', // Pane container selector
      {
        parentElement: 'body',
        showDraggable: true,
        buttonClose: false,
        initialBreak: 'bottom',
        bottomClose: true,
        onBackdropTap: () => this.myPane.moveToBreak('bottom'),
        draggableOver: false,
        breaks: {
            bottom: { enabled: true, height: 80 }
        },
        onDrag: () => console.log('Drag event')
      }
    );
    this.myPane.present({animate: true});
    this.myPane.disableDrag();
  }

CSS

* {
    font-family: Montserrat;
}
.cupertino-pane {
    border-radius: 15px 15px 0 0;
    background-color: #7bbecf;
    .pane {
        background-color: black;
    }
    .pane-header {
        z-index: 15;
        height: 70px;
        color: white;
        text-align: center; 
        margin-top: 8px;
        ion-button {
            color: white;
            font-size: 18px;
        }
        .marker-btn {
            margin-right: 30px;
            float: right;
        }
    }

    .content {
        h2 {
            font-weight: bold;
            font-size: 32px;
            color: #928B8B;
        }
    
        p {
            text-align: left;
            font-size: 18px;
            color: #928B8B;
        }
    }

}    

this is what should look like
https://www.figma.com/file/odnZESUk60nZuQtDoS68dj/Untitled?node-id=5%3A5

Hey,

I encountered an issue, where if I navigate from one page that has the pane, to the other that has is as well, I get this error: ERROR TypeError: Cannot read property 'style' of undefined. (Angular, Ionic).

As far as I could tell, the issue happens on the moveToBreak() function, if I don’t have all of the possible properties defined when creating a new CupertinoPane.

I emplacements the script on ionic 5 and it is so beautiful.

Requesting features:

Can you please add the ability of backdrop color to be transparent from settings?

Also can you add more function like backdropClose like ability to change the pane to any Breakpoints.
for example if the pane on top and when i click on backdrop drop, will minimize the pane to bottom or middle based on my choice on settings.

Welcome @EduardoLopes, thank you for respond 🎉
Let's discuss logo here.
Project main functionality is a drawer panel. Currently it's a bottom -> top drag panel.
On couple of weeks we will release other directions like top -> bottom and left -> right.

Why cupertino ? Kind of reference to apple styled UI, which flutter framework called as cupertino.
And main drawer ideas was taken from similar panes in such applications as: Apple Stocks, Apple Music, Apple Maps, Asana, Google Maps.

What are you trying to add to Cupertino-Pane?

Add changelog.md to readme.md

Describe your feature request detailed

Add changelog.md to readme.md because it is not very good visible in the code.

Is there an alternative at the latest version?

[ ] Yes (descripe the alternative)
[X] No

Is this related to an issue?

[ ] Yes (Give a link to the issue)
[X] No

Add a Feature to change the max width

I'm using your plugin inside my vue js ionic app it works nice but I'm curious if there is a way to prevent the drawer from sliding up and down while I'm swiping any ion-item's currently the pane is going up and down if you do not swipe in a straight line (which isn't natural of course) so I was thinking to combine the @ionDrag on the ion-item-sliding element and then trigger something on your cupertino pane that it should ignore any swipe events or at least stop moving

or is there another option which maybe could be helpful in this situation? looking forward to it tho!

Hi,

I was trying your code in a svelte project using the demo code

html:

<div class="cupertino-pane">
  <div class="cupertino-header">Header</div>
  <div class="cupertino-content">Content</div>
</div>

import { CupertinoPane } from "cupertino-pane";

I had to change the esm bundle line 184 to select childNode 2 instead of 1 for content in order for the code to work.

 // Content
 this.contentEl = this.el.childNodes[1];

into this.el.childNodes[2]

Otherwise it would say it tries to set transition on undefined in the following line:

this.contentEl.style.transition = "opacity " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s"; this.contentEl.style.overflowX = 'hidden';

Given the html, this.el.childNodes[1] is a text element, where is [2] is a div it needs to attach to.

Not sure if this is typical svelte thing, but I do guess svelte does not add extra dom elements (its not known for it). So this may be an error in your code?

My code: https://github.com/Tommertom/svelte-ionic-app/blob/master/src/pages/ionic/Pane.svelte
And demo: https://ionicsvelte.firebaseapp.com/pane

Hello, thanks for this plugin, it is definitely an improvement over other options out there.

I'm implementing this into an Ionic 4 project, but I am running into an issue calculating the middleBreakOffset based on the content of the pane.

I have two boxes of equal height in the pane. I'm attempting to set the middleBreakOffset so that only the first box displays, and then when I pull the drawer the second box will display (and scroll if necessary).

Here is an image of the desired middleBreak, where only the red box displays, when I explicitly set the middleBreakOffset in the configuration:

However, when I attempt to run this example on a larger device, the green box displays slightly, as you can see in this image:

So instead of setting the middleBreakOffset based on a determined pixel value, I have attempted a bunch of different calculations based on the content size and screen size to try and get it consistent across devices, but no luck.

Can you give me an indication on how I can calculate the middleBreakOffset so that it will position the pane exactly the same on different screen sizes? Any help would be greatly appreciated.

Here's the simple HTML I am testing with:

New Feature: Make the draggable shape translucent if it is over the pane. You could use this code:

backdrop-filter:blur(6px);
background:rgba(255,255,255,0.5);

How to animate Backdrop Remove using myPane.hide();?

Hello Roman,

First of all let me thank you for this lib... I'm using it, and it's solving a lot of UI/UX problems that I face in my apps, giving them a more modern and refreshing look.

I noticed the work and effort that you are putting in this project, closing issues and adding new features. I would suggest a donate button on the first page, so I can express my gratitude (and hopefully others) sending you some "bucks"... It will not be much, but it will be well deserved...

I'm looking for a drawer that can be activated by swiping left-to-right at any time exactly like it works on the Twitter app. I'm not sure if your package is appropriate for this but it seems to be very well maintained and modern compared to other drawer packages so I would like your feedback on whether I should try to use your package to accomplish this or if it was not meant for this kind of "swipe-activated menu drawer".

I see that all your examples are bottom-to-top so I'm not sure. If it is appropriate then it would be lovely if you could add such an example to your demos.

Thanks for making this!

Great job on the pane so far but there seems to be an issue on my ionic 4/5 apps where the pane animates rather slowly and skips a lot of frames.

Steps to reproduce the behavior:

1. Create a starter app on a real Android device
2. Install this package and use as usual.
3. Ensure the app is built into an apk and installed on a real Android device running latest chrome browser and using Chrome webview.
4. Drag the pane to expand or collapse to see the slow animations
   Expected behavior
   It used to animate very smoothly while sliding the pane up and down previously, so this is probably due to a recent update to Chrome.

First of all, thank you for wonderful component. I am wondering, how do you declare safe-area-inset-bottom for this component for devices Iphone X and above?

Hey,

I've noticed the pane is missing onDragEnd event. I've modified the source code so mine has it, I can open a pr, if you'd like.

Describe the bug
When we do a drag/swipe in the header the performance seems really good, but if there's a scrollable section in the content and we try to drag/swipe the panel using that area the performance takes a big hit!

The performance also breaks in desktop (not so noticeable as in a mobile device).

To Reproduce
Steps to reproduce the behavior:

1. Add a header
2. Add content with overflow (that will have an additional scroll)
3. drag pane using the top header (no problem in performance)
4. drag the pane using the content area (slow motion activated =).

Expected behavior
The performance should not be affected if we drag/swipe the scrollable/overflow area.

Screenshots
I uploaded a video do show the behaviour:

https://streamable.com/z8saji

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 85.0.4183.102

Smartphone (please complete the following information):

• Device: OnePlus 5T
• OS: Android 10
• Browser Capacitor App (webview version)

What are you trying to add to Cupertino-Pane?
The ability to change breakpoints after the cupertino-pane has been created.
Describe your feature request detailed
Sometimes there are different contexts, where after the cupertino-pane has been created, that a person would want to change the breakpoints without having to close and reinitialize a new cupertino-pane. A possible example is changing the top breakpoint based on an option that the user sets by pushing a button. Creating a method that could update the breakpoints, later on, would be helpful to streamline many apps.
Is there an alternative at the latest version?

[ ] Yes (describe the alternative)
[x] No

Is this related to an issue?

[ ] Yes (Give a link to the issue)
[x] No

Is there currently a way for me to retrieve the pane's location state (bottom, middle, top?)

I'm using my Pane with a Header and Content. It's Html is this:

<ion-header>
    <ion-toolbar>
        <ion-title>Langauge</ion-title>
        <ion-buttons slot="end">
            <my-close-button (click)="closePane()"></my-close-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list>
        <ion-radio-group [(ngModel)]="selectedLanguage">
            <ion-item *ngFor="let lang of languages">
                <ion-thumbnail slot="start">
                    <img src="assets/img/flags/{{lang}}.png">
                </ion-thumbnail>
                <ion-label>
                    {{lang}}
                </ion-label>
                <ion-radio slot="end" [value]="lang"></ion-radio>
            </ion-item>
        </ion-radio-group>
    </ion-list>
</ion-content>

When i open it i want to be able to scroll the List in the IonContent. But it looks like this:

Is this a Bug or how to i archive that?

Hi,

Is there a simple way (event/method/...) to detect a change of breakpoint / detect when a specific breakpoint has been reached?

I would like to trigger a method when the breakpoint "top" is reached, the previous pane's position state being "bottom" for instance.

I tried to do so by using "onDragEnd: () => this.myMethod()", and adding a "currentBreak() === 'top'" condition in myMethod(), but it seems the currentBreak() does not return yet the new breakpoint value at this very moment. Plus, I do not want to trigger myMethod each time there is a drag, but each time a new breakpoint is reached.

TS code:

ngOnInit() {
    this.drawer = new CupertinoPane('.cupertino-pane', {
      onDragEnd: () => this.myMethod(),
      buttonClose: false,
      initialBreak: 'bottom',
      breaks: {
        top: { enabled: true, offset: 290 },
        bottom: { enabled: true, offset: 110 },
      },
      topperOverflow: false
    });

    this.drawer.present();
}

myMethod() {
    if (this.drawer.currentBreak() === 'top') {
      doSomething();
    }
    else if (this.drawer.currentBreak() === 'bottom') {
     doSomethingElse();
    }
}

Thanks in advance!

Andra

Hello, first let me thank you for this component.

I'm trying to use in my new project that uses Angular and Ionic.
I want to add two panes and make them have different behaviors.

The first one must be able to start "middle" and reach "top", but not "bottom".
This pane should not be able to close.

The second one must be able to start "middle", but should not have "top" or "bottom".
This pane should not be able to close, go "bottom" or "top".

this.BottomDrawerOne = new CupertinoPane("#bottom-drawer-details", 
{ 
            animationType: "ease-in-out",
            clickBottomOpen: false,
            buttonClose: false,
            breaks: 
            {
                top: { enabled: true, offset: window.screen.height },
                middle: { enabled: true, offset: 430 },
                bottom: { enabled: false },
            },
});

this.BottomDrawerOne.present({ animate: true });

The first one starts middle can go to top, but it's also possible to closed it on drag/swipe bottom.

this.BottomDrawerTwo = new CupertinoPane("#bottom-drawer-tracking",
{
animationType: "ease-in-out",
clickBottomOpen: false,
showDraggable: false,
bottomClose: false,
buttonClose: false,
initialBreak: "bottom",
breaks:
{
top: { enabled: false },
middle: { enabled: true, offset: 270 },
bottom: { enabled: false },
},
});

The second one starts middle can't go to top, it's fixed middle, but it's also possible to closed it on drag/swipe bottom.

How can I setup my panes to work as expected?

Just a question. I tried different settings, but didn't seem to be able to do that.

Also can an absolute position content sit on top of the drawer pane?

I have a horizontal scroll div inside the pane

.horizontal {
overflow-x:auto,
white-space:nowrap
}

When I scroll the horizontal content, the pane flickers abnormally and sometimes closes if its at the bottom.
Is there another way to add horizontal scroll inside the pane??

Expected behavior
It should scroll the content horizontally without affecting the pane.

Hi,
tried the following code to see how it works:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
    <style>
        .cupertino-pane {
            margin: 20px;
        }
    </style>
    <script>
        window.onload = function() {
            var myPane = new CupertinoPane(
                '.cupertino-pane', // Pane container selector
                {
                    parentElement: 'body', // Parent container
                    initialShow: false,
                    breaks: {
                        top: {
                            enabled: false,
                            offset: -70
                        },
                        middle: {
                            enabled: true,
                            offset: 0
                        },
                        bottom: {
                            enabled: true,
                            offset: 0
                        },
                    },
                    onDrag: () => console.log('Drag event')
                }
            );
            myPane.present();
        };
    </script>
</head>

<body>



    <div class="cupertino-pane">
        <h1>Header</h1>
        <div class="content">Content</div>
    </div>
</body>

</html>

And then open in chrome (or run from http-server) will give error: Uncaught ReferenceError: CupertinoPane is not defined.

What would be the best way to have static test using CDN?

(ps. same error occurred when earlier tried to integrate cupertino-pane using CDN, but now reverted to esm package)

I have extra features if you interested.

For more efficiency, It’s good to minimize the pane to bottom if it’s in middle or top break and click or drag outside the pane (without effecting on dragging the body if possible)

Thanks

I just found a bug in the latest version of this component.

When trying to call the hide() method, if the present() method was never been called, the component crashes with an error:

core.js:6185 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'style' of undefined
TypeError: Cannot read property 'style' of undefined
    at CupertinoPane.hide (cupertino-pane.esm.bundle.js:444)

hide() 
{
        //The problem seems to be in this line... 
        //this.paneEl is only created in drawElements() 
       //and drawElements() is only called in present()
       //Maybe add:  if (!this.paneEl) return;
        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;

        this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => 
        {
            this.paneEl.style.transition = `initial`;
            initTransitionEv = undefined;
        });
}

I cannot hide or destroy it animated.
My code:

function showPane() {
    var myPane = new CupertinoPane('.cupertino-pane', {
        backdrop: true
    });
    myPane.present({
        animate: true
    });
}
function hidePane() {
    var myPane = new CupertinoPane('.cupertino-pane', {
        backdrop: true
    });
    myPane.hide();
}

showPanel() works. hidePanel() hides without animation, and I get this error:
Uncaught TypeError: Cannot read property 'style' of undefined

Describe the bug
There is a huge lag when moving the pane around using a finger. Moving the pane by swiping up to trigger the animation to the next breakpoint doesn't have the same issue, it only happens when keeping your finger down and moving around

Screenshot
https://drive.google.com/file/d/1iEeYl0uPSIczpAgUxxlY8bioa-tYROGn/view?usp=sharing

To Reproduce
Steps to reproduce the behavior:

1. go to the example pages on a mobile device
2. move the pane up and down with a finger

Smartphone (please complete the following information):

• Device: Oneplus 6
• OS: Android
• Browser Ionic (WebView)

I'm trying to control the dark mode after initialization.

A public method needs to be implemented like this:

setDarkMode({darkMode: boolean = false})

Hello,

when I click the input and then open the keyboard the view is pulled all the way up, then the view does not return to normal on blur. This event makes to lose the submit button on the header.

is possible to see in the following images.

image 1
image 2
image 3

What can I do to fix this problem ?

Describe the bug
Building an Angular application and testing on an Android phone, dragging down on the pane causes the page to refresh.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://angular-qxxvuj.stackblitz.io/
2. Attempt to swipe down pane
3. Observe refresh behavior

Expected behavior
Dragging down on the pane should not refresh the page

Smartphone (please complete the following information):

• Device: Pixel 3XL
• OS: [Android 10 Build/QQ3A.200605.001]
• Browser [Chrome]
• Version [83.0.4103.106]

Additional context
Angular 9 + Material as provided in this editable stackblitz
https://stackblitz.com/edit/angular-qxxvuj

Hi man, nice work.

Can you describe how to use it with angular 8

If there a tutorial, or example it will be helpful.

Thanks 👏🏼

Hi,
This perfect library for what I was looking for but unfortunately my current project is on Angular 1 (ionic 1).
I've tried to compile using tsc but failed. Is there any way to compile to pure Js lib or make it compatible with Angular 1?

Unfortunately stars was nulled for cupertino-pane after some origin issues between 2 repos.
Already touched GitHub support and await for ticket progress.
I hope support can helps to restore all stars.

Otherwise, don't upset. Eventually, all who's needs drawer solution will come here with new stars.

If import just on the page as:

import { CupertinoPane } from 'cupertino-pane';

It tells me there is no provider, then if I import in this as a provider in the module it can't resolve all parameters.

Any ideas? Thanks.

Hi!
First of all thank you very much!

I don't know much about js or ts, so I have some doubts...
In README examples you use the keyword 'var' to instantiate the pane.
Is this necessary?
Any problems if I use 'let' or 'const'?

Describe the bug
IonMenu is swipable through the Cupertino-Pane Backdrop

To Reproduce
Just create Ionic App with Menu and open Drawer.

Expected behavior
It should not be swipable.

there was a typo in the Callbacks documentation, it should be "onDragEnd" not "onDragEng"

Using this awesome plugin in my project works fine but needs some more improvements tho... especially when calling the moveToBreak manually the currentbreak state isn't changing i even don't see it updating inside that method... please add a line which will update the this.currentBreakpoint as well

Hi,

I'm currently trying to implement a drawer slide-over pane based on your cupertino-pane repository (which looks very great!).

I'm having some trouble while trying to deploy it on my Ionic app. An error is raised after serving the app: "Cupertino Pane: wrong selector specified .cupertino-pane".

HTML file

<ion-content>
  <div class="cupertino-pane">
    <h1>Header</h1>
    <p>Content</p>
  </div>
</ion-content>

CSS file

.cupertino-pane {
    margin: 20px;
    background:#eee;
}

TS file

import { CupertinoPane } from 'cupertino-pane';
[...]
  drawer = new CupertinoPane('.cupertino-pane', {
      onDrag: () => console.log('Drag event')
  });

  constructor() {
    this.drawer.present({ animate: true });
  }

FYI, it seems to work if I write:

  drawer = new CupertinoPane('body', {
      onDrag: () => console.log('Drag event')
  });

... but it then does not have the expected behavior: in that case, all the page, including the toolbars, are inside the pane.

Versions
[email protected]
[email protected]

What could I do to deploy this plugin properly in my Ionic-with-tabs environment?

Thanks a lot in advance for your help! 👍

Andra

Make the Draggable Shape over the modal. It should be in the configuration (Like draggableOverModal = true). It should look like this:

Describe the bug
When i compile my ionic app with cupertino-pane installed i get following compilation error:

ERROR in node_modules/cupertino-pane/dist/cupertino-pane.d.ts(58,17): error TS1086: An accessor cannot be declared in an ambient context.

To Reproduce
bootstrap ionic app, npm install cupertino-pane, run ionic serve.

Expected behavior
no compilation error

Desktop (please complete the following information):
I don't think it relates to it

Additional context
I tried to add "skipLibCheck": true to tsconfig to ignore this error. It looked like it helped, few compilations were ok, but later i got the same error...

Hey Roman,

First of all, awesome project. Was really hard to find something like this outside react native.

We use react-js and are tryng to incorporate your pane in a fullscreen PWA to create a native experience.

However we ran in some issues with a design similar to apple stocks.

What is your advice on making a reusable component?

For example:

On our page we have a cupertino pane component which initializes on render of the page with useEffect (else it gives the cannot find dom element error).

But we also want to have another pane which expands fullscreen (like apple stocks) when you click on a button on the page. However, we cannot acces the drawer.present() from outside the component (from the page its rendered in).

So our main questions are:

• Do we always need a useEffect per cupertino-pane to render (we have multiple)? Because for us it never works due DOM element not being available.
• How do we trigger the present function from outside the component?

Thnx!

function ParentPage () {

   function PresentDrawer () {
     // How do we call function drawer.present() here and pass as props?
   }

return (
   <>
     <Button onClick={PresentDrawer}

      // This pane auto initializes on render page due to use effect
     <BottomSheet className="pane1">Content</BottomSheet>

      // This pane needs to be triggered only on button click.
     <BottomSheet className="pane2"/>Content</BottomSheet>
   </>
  )
}

function BottomSheet(props) {

    useEffect(() => {
        const drawer = new CupertinoPane('.' + props.className, // Pane container selector
        {
            parentElement: '.App', // Parent container
            breaks: {
                middle: { enabled: true, height: 300, bounce: true },
                bottom: { enabled: true, height: 80 },
            },
            initialBreak: 'middle',
            pushMinHeight: 370,
        }
    );
        setTimeout(() => drawer.present({ animate: true }));
    }, [])

    return (
        <>
            <div className={props.className}>
                {props.children}
            </div>
        </>
    )
}

Please add a Changelog File to the Project. I always check the updates before updating packages to make sure nothing breaks and work like i expect.

If we use two panes on the same page, and for example we pass and "id" to the CupertinoPane constructor instead of a unique class, the second pane trows and error:

core.js:6185 ERROR TypeError: Cannot read property 'style' of undefined
    at CupertinoPane.checkOverflowAttr (cupertino-pane.esm.bundle.js:479)
    at CupertinoPane.moveToBreak (cupertino-pane.esm.bundle.js:435)
    at CupertinoPane.present (cupertino-pane.esm.bundle.js:318)
    at PathsDetailsPage.StartRoute (paths-details.page.ts:216)
    at PathsDetailsPage_Template_ion_button_click_39_listener (template.html:55)
    at executeListenerWithErrorHandling (core.js:21693)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21735)
    at HTMLElement.<anonymous> (platform-browser.js:934)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41344)

HTML

<div id="bottom-drawer-details" class="bottom-drawer">
</div>

<div id="bottom-drawer-tracking" class="bottom-drawer">
</div>

CODE

this.BottomDrawerDetails = new CupertinoPane("#bottom-drawer-details", 
{ 
            animationType: "ease-in-out",
            clickBottomOpen: false,
            buttonClose: false,
            breaks: 
            {
                top: { enabled: true, offset: window.screen.height },
                middle: { enabled: true, offset: 430 },
                bottom: { enabled: false },
            },
});

I have debugged the source code and I think the problem is here:

Since there's already one component created (the first to be called with .present()) this returns true and tries to change the break point, the the component is not draw, and we get that error.

Could it be better to use the initial selector that is passed in the constructor?

Both panes work If I change the HTML:

<div id="bottom-drawer-details" class="bottom-drawer bottom-drawer-details"></div>
<div id="bottom-drawer-tracking" class="bottom-drawer bottom-drawer-tracking"></div>

But since I passed the id as the selector and the css logic is in the "bottom-drawer" class, the other classes are just to make this work.