Closed txm3278 closed 1 year ago
@txm3278 I believe this should already be possible with the current implementation: https://codesandbox.io/s/bitter-leaf-82cpv?file=/src/App.tsx
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
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.
@Temzasse I would second this issue because there are use-cases were you want to stop interacting (for some time) with the sheet itself:
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?
@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.
@Temzasse I had to remove the onDrag*
handlers while swiping to avoid moving the sheet (because you never stay exactly horizontally)
@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 🤔
@Temzasse Yep, works for my use-case. Thanks :+1:
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.
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;
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 🙂
The Sheet would be "closed" when it's at it's lowest snap point and always remains draggable.