Request: Force Sheet to remain open about react-modal-sheet

[guilnorth]

I use snapTo() function into onClose to reopen the sheet and this works for me

Exemple:

import { FC, useRef } from 'react';
import Sheet, { SheetRef } from 'react-modal-sheet';
import { SheetProps } from 'react-modal-sheet/src/types';

const ModalSheet:FC<SheetProps> = (props) => {

  const ref = useRef<SheetRef>();
  const snapTo = (i: number) => ref.current?.snapTo(i);

  return (
    <Sheet
      isOpen
      ref={ref}
      snapPoints={[600, 400, 100]}
      initialSnap={1}
      onClose={()=>{snapTo(1)}}>
      <Sheet.Container>
        <Sheet.Content>
          <div>content...</div>
        </Sheet.Content>
      </Sheet.Container>
    </Sheet>
  );
}

export default ModalSheet;

[txm3278]

If you swipe/drag down fast enough, in your example and when I tried to implement this, the sheet still closes. The work around I found was to set the sheet to close then reopen in onClose

[jaymdq]

Anyone found a workaround for this? In my use case I have to keep the sheet open at all times, if the user tries to close it, then I have to show the Header so the user can open it up again.

[Temzasse]

@txm3278 I believe this should already be possible with the current implementation: https://codesandbox.io/s/bitter-leaf-82cpv?file=/src/App.tsx

[Temzasse]

Ah I see, I guess a prop like disableClosing might be needed 🤔

I have to think about how this could be implemented and what does it mean for a sheet to be non-closable.

Eg. if you don't provide any snap points does it mean that the sheet should not be draggable at all when disableClosing is true or does it just bounce back open if the user tries to close it via dragging down fast.

[stephanschubert]

@Temzasse I would second this issue because there are use-cases were you want to stop interacting (for some time) with the sheet itself:

• User opens the sheet
• User starts swiping an image gallery inside of it

Problem: Sheet shouldn't move or close in any case while swiping.

EDIT Maybe an elegant solution would be to support a "children as a function" ("render props") approach passing some handlers/actions props to disable/enable certain functionality?

[Temzasse]

@stephanschuber would the earlier mentioned disableClosing solve your use case or should there also be a prop like disableInteractions that would completely disable all gestures?

I think the disableClosing prop should not disable all interactions in order to still have a nice UX with sheet (direct manipulation principle etc).

I believe that it should already be possible to have scrollable content inside the sheet in a way that the sheet doesn't move while scrolling. Take a look at the Scrollable example.

I'll try to find some time to tackle this issue this weekend.

[stephanschubert]

@Temzasse I had to remove the onDrag* handlers while swiping to avoid moving the sheet (because you never stay exactly horizontally)

[Temzasse]

@stephanschubert I have released v1.3.0 where I added a disabledClosing prop that can be passed to the whole sheet or its subparts to disabled dragging.

I also created an example where dragging is disabled for the sheet content when the content is horizontally scrolled.

I hope that this solves your issues 🙂

I still need to think more about the initial issue of how to disable the closing of the sheet and what does it actually mean 🤔

[stephanschubert]

@Temzasse Yep, works for my use-case. Thanks 👍

[Temzasse]

This feature request needs more information since it's not super clear what it means for the sheet to be forced open. There are userland solutions for this problem like described above so I'm going to close this issue for now but feel free to open a PR with a suggested solution 🙂