hanford / react-drag-drawer Goto Github PK

View Code? Open in Web Editor NEW

162.0 4.0 30.0 1.81 MB

A responsive mobile drawer that is draggable on mobile, and falls back to a modal on desktop

JavaScript 100.00%

react touch mobile draggable modal isomorphic

react-drag-drawer's Introduction

react-drag-drawer

Mobile draggable drawer that falls back to modals on desktop

Live demo!

Install

$ npm install react-drag-drawer --save

Usage

import Drawer from 'react-drag-drawer'

..

toggle = () => {
  let { toggle } = this.state

  this.setState({ toggle: !toggle })
}

render () {
  const { open } = this.state

  return (
    <Drawer
      open={open}
      onRequestClose={this.toggle}
    >
      <div>Hey Im inside the drawer!</div>
    </Drawer>
  )
}

API

Param	Type	functionality	required
open	Boolean	null	true
children	Node	null	true
onRequestClose	Function	null	true
onDrag	Function	invoked on drag	false
onOpen	Function	invoked on drawer focus	false
notifyWillClose	Function	notify consumer if the drawer will close at touch release	false
allowClose	Boolean	block closing if allowClose={false}, default is true	false
modalElementClass	String	className to be applied to top element	false
containerElementClass	String	className to be applied to the drawer container element	false
parentElement	ref	block scrolls on element if you're not using body scrolling	false
direction	String	direction to translate drawer	false
dontApplyListeners	Boolean	skip applying internal event listeners to the dom	false
inViewportChange	Function	detect when drawer is at top of viewport	false
getModalRef	Function	get modal (draggable element) ref	false
getContainerRef	Function	get container (overlay) ref	false

Example modal style

.modal {
  outline: none;
  background: white;
  font-size: 1.6rem;
  width: 76rem;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  z-index: 15;
  min-height: 47rem;

  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 768px) {
  .modal {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

License

MIT © Jack Hanford

react-drag-drawer's People

Contributors

Stargazers

Watchers

react-drag-drawer's Issues

Where dem semicolons at?

I be reading through that source and see 0 semicolons. What is this? Is this the semicolon-less future I was promised?

Stuttering toggle animation when using `direction='left'` props.

Drawer has a stuttering animation when using direction='left props, other directions or alignments don't seem to have this issue. It's visible in the demo example as well.

Weird behaviour on Mobile

When on mobile and moving up and down the Drawer then the whole page is scrolling, while only the drawer should scroll.

Fix typo in Proptypes

Tests are failing because Proptypes is not defined.
Please update the line 40:
containerOpacity: Proptypes.number,
to
containerOpacity: PropTypes.number,

Drawer rebound will not be draggable again

If i drag the drawer a small distance, then i release it, drawer will rebound.
But it cannot be drag again!

Live demo doesn't work

I open live Demo link, but get 404
https://react-drag-drawer.jackhanford.com

[Feature Request] Add eventListeners to specific child classes only

A classname array can be taken as a prop and only the elements with the given class names can have the touch event listeners. This would much more flexibility and control over the Drawer.

No `onRest` support

We can't use onRest from https://github.com/chenglou/react-motion#--onrest---void. This would be useful to fire callbacks for after the drawer is completely open/closed.

Swipe down in mobile closes drawer

Hi,

I am currently developing reactjs application which used as a webview in Hybrid Mobile Application.

My Reactjs application using React-Drag-drawer. My drawer is having more content with scroll.

But I am facing weird issue that Scrolling up(swipe up) is working fine but when i scrolling down, drawer is closing in mobile.

Please help me to resolve this issue.

This issue is same as #18. Please reply if anyone fixed the issue.

<Drawer open={open} onRequestClose={this.toggle} direction='bottom' modalElementClass="points-slide-wrapper" > </Drawer>

toggle = () => { let toggle = this.state.toggle; this.setState({ toggle: !toggle }) }

.points-slide-wrapper { height: 95%; bottom: 0%; margin: auto; width: 100%; padding-top: 130px; z-index: 60000; display: none; text-align: center; -webkit-overflow-scrolling: touch; }

Target container is not a DOM element

Hi, I have built a mobile app that uses this package. However, when testing it on Android (not yet tested on iOS), I have a button that toggles the state to open/close the drawer
this.setState({ drawerOpen: !drawerOpen })

This works well on desktop browsers and mobile browsers. But when it is built in cordova as an Android APK, then trying to open the drawer, I get the following error message:

a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:10166 Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at o (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:6175)
at p (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:6365)
at Gs (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:11344)
at t.e [as render] (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:60621)
at Ui (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:9702)
at Yi (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:9942)
at ka (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:10556)
at Oa (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:10577)
at ss (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:10829)
at os (a74475dc70c75cc9e201d1a682b0c4c6dc0425a0.js?meteor_js_resource=true:formatted:10788)

Line 60621 points to this piece of code:
return (0, y.createPortal)(u.default.createElement(l.Motion, {

Which I assume is related to react-motion or probably on the isClientSide() helper? I hope these makes sense and would love to know if it can be fixed.

Triggers reloading on Android

The dragging down motion is the same one used to refresh a page on mobile. Closing the drawer by dragging also refreshes the page.

Scroll content on mobile closes drawer

Hi, I found this weird behaviour on mobile when the content height is larger than the drawer.
Swiping up in the drawer will scroll the content just as usual.
But when you're at the bottom part of the content and release your finger, trying to go back up by swiping down acts as if you're dragging the whole drawer and it eventually closes itself, so there's no way to scroll back again to see the content above.
I hope I explained it well, looking forward for a fix. Thanks!

Clicking on background with allowClose false close the modal

I add the option allowClose={false} but user can click on background to close the modal

Allow background interaction

I currently have a drawer take up the bottom half of the viewport and would like for users to be able to interact with the background in the space not taken up by the drawer. However, it looks like the current backdrop stops click/scroll propagation and just shoots the onRequestClose function. Is my desired behavior possible?

Add default Proptypes

The documentation doesn't have default proptypes. So instead of the required true or false, mention the default prototypes for easy understanding

Broken demo on mobile

I think that drawer is not working properly on mobile devices on demo page. Maybe it's not working properly at all.