Skip to content

Commit 2040afd

Browse files
rodriigovieirarodriigovieira
committed
add orientation support
1 parent f5d1d4d commit 2040afd

File tree

3 files changed

+65
-62
lines changed

3 files changed

+65
-62
lines changed

‎lib/RNNDrawer.d.ts‎

Lines changed: 1 addition & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,68 +4,14 @@
44
*/
55
import * as React from 'react';
66
import { Layout } from 'react-native-navigation';
7-
8-
type DirectionType = "left" | "right" | "top" | "bottom";
9-
10-
declare interface RNNDrawerOptions {
11-
/**
12-
* Id of parent component of the drawer.
13-
* This field is necessary in order to be able
14-
* to push screens inside the drawer
15-
*/
16-
parentComponentId: string;
17-
18-
/**
19-
* Time in milliseconds to execute the drawer opening animation
20-
*/
21-
animationOpenTime?: number;
22-
23-
/**
24-
* Time in milliseconds to execute the drawer closing animation
25-
*/
26-
animationCloseTime?: number;
27-
28-
/**
29-
* Direction to open the collage,
30-
* one of: ["left", "right", "top", "bottom"]
31-
*/
32-
direction?: DirectionType;
33-
34-
/**
35-
* Whether the drawer be dismissed when a click is registered outside
36-
*/
37-
dismissWhenTouchOutside?: boolean;
38-
39-
/**
40-
* Opacity of the screen outside the drawer
41-
*/
42-
fadeOpacity?: number;
43-
44-
/**
45-
* Width of drawer in relation to the screen (0 to 1)
46-
*/
47-
drawerScreenWidth?: number;
48-
49-
/**
50-
* Height of drawer in relation to the screen (0 to 1)
51-
*/
52-
drawerScreenHeight?: number;
53-
}
54-
557
declare class RNNDrawer {
56-
/**
57-
* Generates the drawer component to
58-
* be used with react-native-navigation
59-
*
60-
* @param component
61-
*/
628
static create(Component: React.ComponentType): any;
639
/**
6410
* Shows a drawer component
6511
*
6612
* @param layout
6713
*/
68-
static showDrawer(layout: Layout<RNNDrawerOptions>): void;
14+
static showDrawer(layout: Layout): void;
6915
/**
7016
* Dismiss the drawer component
7117
*/

‎lib/RNNDrawer.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ var react_native_1 = require("react-native");
3434
var react_native_navigation_1 = require("react-native-navigation");
3535
/* Utils - Project Utilities */
3636
var events_1 = require("./events");
37+
var MaxWidthOnLandscapeMode = 300;
3738
var DirectionType;
3839
(function (DirectionType) {
3940
DirectionType["left"] = "left";
@@ -76,7 +77,9 @@ var RNNDrawer = /** @class */ (function () {
7677
return value;
7778
};
7879
/** Component Variables */
79-
_this.drawerWidth = _resolveDrawerSize(props.drawerScreenWidth, _this.screenWidth);
80+
_this.drawerWidth = _this.isLandscape()
81+
? MaxWidthOnLandscapeMode
82+
: _resolveDrawerSize(props.drawerScreenWidth, _this.screenWidth);
8083
_this.drawerHeight = _resolveDrawerSize(props.drawerScreenHeight, _this.screenHeight);
8184
_this.drawerOpenedValues = {
8285
left: 0,
@@ -96,15 +99,24 @@ var RNNDrawer = /** @class */ (function () {
9699
sideMenuOverlayOpacity: new react_native_1.Animated.Value(0),
97100
sideMenuSwipingStarted: false,
98101
sideMenuIsDismissing: false,
102+
screenHeight: _this.screenHeight,
99103
};
100104
/** Component Bindings */
101105
_this.touchedOutside = _this.touchedOutside.bind(_this);
102106
_this.dismissDrawerWithAnimation = _this.dismissDrawerWithAnimation.bind(_this);
103107
_this.registerListeners = _this.registerListeners.bind(_this);
104108
_this.removeListeners = _this.removeListeners.bind(_this);
109+
_this.isLandscape = _this.isLandscape.bind(_this);
105110
react_native_navigation_1.Navigation.events().bindComponent(_this);
106111
return _this;
107112
}
113+
/**
114+
* Check if device is in landscape mode
115+
*/
116+
WrappedDrawer.prototype.isLandscape = function () {
117+
var dim = react_native_1.Dimensions.get('window');
118+
return dim.height <= dim.width;
119+
};
108120
/**
109121
* [ Built-in React method. ]
110122
*
@@ -155,6 +167,18 @@ var RNNDrawer = /** @class */ (function () {
155167
var _this = this;
156168
/** Props */
157169
var _a = this.props, direction = _a.direction, fadeOpacity = _a.fadeOpacity;
170+
// Adapt the drawer's size on orientation change
171+
react_native_1.Dimensions.addEventListener("change", function (_a) {
172+
var window = _a.window;
173+
var screenHeight = window.height;
174+
_this.setState({ screenHeight: screenHeight });
175+
// Apply correct position if opened from right
176+
if (_this.props.direction === "right") {
177+
// Calculates the position of the drawer from the left side of the screen
178+
var alignedMovementValue = window.width - _this.drawerWidth;
179+
_this.state.sideMenuOpenValue.setValue(alignedMovementValue);
180+
}
181+
});
158182
// Executes when the side of the screen interaction starts
159183
this.unsubscribeSwipeStart = events_1.listen('SWIPE_START', function () {
160184
_this.setState({
@@ -226,6 +250,7 @@ var RNNDrawer = /** @class */ (function () {
226250
* Removes all the listenrs from this component
227251
*/
228252
WrappedDrawer.prototype.removeListeners = function () {
253+
react_native_1.Dimensions.removeEventListener("change", function () { });
229254
if (this.unsubscribeSwipeStart)
230255
this.unsubscribeSwipeStart();
231256
if (this.unsubscribeSwipeMove)
@@ -260,7 +285,7 @@ var RNNDrawer = /** @class */ (function () {
260285
React.createElement(react_native_1.Animated.View, { style: [
261286
{ backgroundColor: '#FFF' },
262287
style,
263-
__assign({ height: this.drawerHeight, width: this.drawerWidth }, animatedValue),
288+
__assign({ height: this.state.screenHeight, width: this.drawerWidth }, animatedValue),
264289
] },
265290
React.createElement(Component, __assign({}, this.props)))));
266291
};

‎src/RNNDrawer.tsx‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import { Navigation, Layout } from 'react-native-navigation';
1818
/* Utils - Project Utilities */
1919
import { listen, dispatch } from './events';
2020

21+
const MaxWidthOnLandscapeMode = 300;
22+
2123
enum DirectionType {
2224
left = 'left',
2325
right = 'right',
@@ -30,6 +32,7 @@ interface IState {
3032
sideMenuOverlayOpacity: any;
3133
sideMenuSwipingStarted: boolean;
3234
sideMenuIsDismissing: boolean;
35+
screenHeight: number;
3336
}
3437

3538
interface IProps {
@@ -136,10 +139,12 @@ class RNNDrawer {
136139
};
137140

138141
/** Component Variables */
139-
this.drawerWidth = _resolveDrawerSize(
140-
props.drawerScreenWidth,
141-
this.screenWidth,
142-
);
142+
this.drawerWidth = this.isLandscape()
143+
? MaxWidthOnLandscapeMode
144+
: _resolveDrawerSize(
145+
props.drawerScreenWidth,
146+
this.screenWidth,
147+
);
143148
this.drawerHeight = _resolveDrawerSize(
144149
props.drawerScreenHeight,
145150
this.screenHeight,
@@ -165,6 +170,7 @@ class RNNDrawer {
165170
sideMenuOverlayOpacity: new Animated.Value(0),
166171
sideMenuSwipingStarted: false,
167172
sideMenuIsDismissing: false,
173+
screenHeight: this.screenHeight,
168174
};
169175

170176
/** Component Bindings */
@@ -174,9 +180,19 @@ class RNNDrawer {
174180
);
175181
this.registerListeners = this.registerListeners.bind(this);
176182
this.removeListeners = this.removeListeners.bind(this);
183+
this.isLandscape = this.isLandscape.bind(this);
177184
Navigation.events().bindComponent(this);
178185
}
179186

187+
/**
188+
* Check if device is in landscape mode
189+
*/
190+
isLandscape() {
191+
const dim = Dimensions.get('window');
192+
193+
return dim.height <= dim.width;
194+
}
195+
180196
/**
181197
* [ Built-in React method. ]
182198
*
@@ -237,6 +253,21 @@ class RNNDrawer {
237253
/** Props */
238254
const { direction, fadeOpacity } = this.props;
239255

256+
// Adapt the drawer's size on orientation change
257+
Dimensions.addEventListener("change", ({ window }) => {
258+
const screenHeight = window.height;
259+
260+
this.setState({ screenHeight });
261+
262+
// Apply correct position if opened from right
263+
if (this.props.direction === "right") {
264+
// Calculates the position of the drawer from the left side of the screen
265+
const alignedMovementValue = window.width - this.drawerWidth;
266+
267+
this.state.sideMenuOpenValue.setValue(alignedMovementValue);
268+
}
269+
})
270+
240271
// Executes when the side of the screen interaction starts
241272
this.unsubscribeSwipeStart = listen('SWIPE_START', () => {
242273
this.setState({
@@ -331,6 +362,7 @@ class RNNDrawer {
331362
* Removes all the listenrs from this component
332363
*/
333364
removeListeners() {
365+
Dimensions.removeEventListener("change", () => { });
334366
if (this.unsubscribeSwipeStart) this.unsubscribeSwipeStart();
335367
if (this.unsubscribeSwipeMove) this.unsubscribeSwipeMove();
336368
if (this.unsubscribeSwipeEnd) this.unsubscribeSwipeEnd();
@@ -370,7 +402,7 @@ class RNNDrawer {
370402
{ backgroundColor: '#FFF' },
371403
style,
372404
{
373-
height: this.drawerHeight,
405+
height: this.state.screenHeight,
374406
width: this.drawerWidth,
375407
...animatedValue,
376408
},

0 commit comments

Comments
 (0)