diff --git a/README.md b/README.md index f303f167..0ff7d577 100644 --- a/README.md +++ b/README.md @@ -115,6 +115,11 @@ This module supports a wide range of drawer styles, and hence has *a lot* of pro - `useInteractionManager` (Boolean) `false` - if true will run InteractionManager for open/close animations. - `elevation` (Number) `0` - (Android-only) Sets the elevation of the drawer using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation) +### External Functions +- `open()` (Function) - Trigger drawer open. +- `close()` (Function) - Trigger drawer close. +- `disableDrawer(disabled: Boolean)` (Function) - Disable or Enable the drawer. + ### Tween Handler You can achieve pretty much any animation you want using the tween handler with the transformMatrix property. E.G. ```js @@ -162,6 +167,7 @@ Three options: contextTypes = {drawer: React.PropTypes.object} // later... this.context.drawer.open() + this.context.drawer.disableDrawer(true) ``` ### Demo diff --git a/index.js b/index.js index 6f5dca3d..c508c4ef 100644 --- a/index.js +++ b/index.js @@ -30,10 +30,6 @@ export default class Drawer extends Component { } }; - state = { - viewport: deviceScreen - }; - static propTypes = { acceptDoubleTap: PropTypes.bool, acceptPan: PropTypes.bool, @@ -107,6 +103,15 @@ export default class Drawer extends Component { getChildContext = () => ({ drawer: this }); /*** END CONTEXT ***/ + constructor(props) { + super(props); + + this.state = { + viewport: deviceScreen, + disabled: props.disabled, + }; + } + _registerChildDrawer(drawer) { // Store child drawer for gesture disambiguation with multi drawer // @TODO make cleaner, generalize to work with 3+ drawers, prop to disable/configure @@ -234,6 +239,12 @@ export default class Drawer extends Component { } }; + disableDrawer(disabled) { + this.setState({ + disabled, + }); + } + shouldOpenDrawer(dx) { let hasActiveHeading = this._open ^ dx > 0 ^ this.props.side === 'right' if (!hasActiveHeading) return this._open @@ -244,7 +255,7 @@ export default class Drawer extends Component { this._panning = false this.shouldOpenDrawer(gestureState.dx) ? this.open() : this.close() }; - + onStartShouldSetPanResponderCapture = (e, gestureState) => { if (this.shouldCaptureGestures()) return this.processShouldSet(e, gestureState) return false @@ -307,7 +318,7 @@ export default class Drawer extends Component { if (!inMask) return false if (!this.props.acceptPan) return false - if (!this.props.negotiatePan || this.props.disabled || !this.props.acceptPan || this._panning) return false + if (!this.props.negotiatePan || this.state.disabled || !this.props.acceptPan || this._panning) return false let swipeToLeft = (gestureState.dx < 0) ? true : false let swipeToRight = (gestureState.dx > 0) ? true : false let swipeUpDown = (Math.abs(gestureState.dy) >= Math.abs(gestureState.dx)) ? true : false @@ -346,7 +357,7 @@ export default class Drawer extends Component { } testPanResponderMask = (e, gestureState) => { - if (this.props.disabled) return false + if (this.state.disabled) return false // Disable if parent or child drawer exist and are open // @TODO make cleaner, generalize to work with 3+ drawers, prop to disable/configure @@ -398,7 +409,7 @@ export default class Drawer extends Component { if(typeof type === 'function') { type() // this is actually a callback } else cb && cb() - + } }) };