Skip to content

Commit ded2637

Browse files
author
Daniil Merkulov
committed
feat: add support for setting drawer width on landscape
1 parent d3242e2 commit ded2637

File tree

4 files changed

+47
-28
lines changed

4 files changed

+47
-28
lines changed

‎README.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,16 @@ There's a complete and functional example at the `example` folder, with more tho
9292
The props below are used to configure the drawer and are to be used in RNN `passProps:`. Any aditional
9393
props will be passed to your custom drawer component.
9494

95-
| Prop | Type | Optional | Default | Description |
96-
| ------------------- | ------------- | --------- | ------- | --------------------------------------------------------------------------------------- |
97-
| animationOpenTime | float | Yes | 300 | Time in milliseconds to execute the drawer opening animation. |
98-
| animationCloseTime | float | Yes | 300 | Time in milliseconds to execute the drawer closing animation. |
99-
| direction | string | Yes | left | Direction to open the collage, one of: ["left", "right", "top", "bottom"]. |
100-
| dismissWhenTouchOutside | bool | Yes | true | Should the drawer be dismissed when a click is registered outside? |
101-
| fadeOpacity | number | Yes | 0.6 | Opacity of the screen outside the drawer. |
102-
| drawerScreenWidth | number | Yes | 0.8 | 0 - 1, width of drawer in relation to the screen. |
103-
| drawerScreenHeight | number | Yes | 1 | 0 - 1, height of drawer in relation to the screen. |
95+
| Prop | Type | Optional | Default | Description |
96+
| ---------------------------- | ------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
97+
| animationOpenTime | float | Yes | 300 | Time in milliseconds to execute the drawer opening animation. |
98+
| animationCloseTime | float | Yes | 300 | Time in milliseconds to execute the drawer closing animation. |
99+
| direction | string | Yes | left | Direction to open the collage, one of: ["left", "right", "top", "bottom"]. |
100+
| dismissWhenTouchOutside | bool | Yes | true | Should the drawer be dismissed when a click is registered outside? |
101+
| fadeOpacity | number | Yes | 0.6 | Opacity of the screen outside the drawer. |
102+
| drawerScreenWidth | number/string | Yes | 80% | Width of drawer on portrait orientation. Use '%' for setting the width in relation to the screen or fixed values for absolute width |
103+
| drawerScreenWidthOnLandscape | number/string | Yes | 30% | Width of drawer on landscape orientation. Use '%' for setting the width in relation to the screen or fixed values for absolute width |
104+
| drawerScreenHeight | number/string | Yes | 100% | Height of drawer. Use '%' for setting the width in relation to the screen or fixed values for absolute width
104105

105106
## SideMenuView
106107

‎lib/RNNDrawer.d.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ declare interface RNNDrawerOptions {
1717
* If not provided, drawer might have
1818
* a weird effect when closing
1919
*/
20-
direction: DirectionType;
20+
direction?: DirectionType;
2121
/**
2222
* Time in milliseconds to execute the drawer opening animation
2323
*/
@@ -35,13 +35,20 @@ declare interface RNNDrawerOptions {
3535
*/
3636
fadeOpacity?: number;
3737
/**
38-
* Width of drawer in relation to the screen (0 to 1)
38+
* Width of drawer on portrait orientation. Use '%' for setting
39+
* the width in relation to the screen or fixed values for absolute width
3940
*/
40-
drawerScreenWidth?: number;
41+
drawerScreenWidth?: number | string;
4142
/**
42-
* Height of drawer in relation to the screen (0 to 1)
43+
* Width of drawer on landscape orientation. Use '%' for setting
44+
* the width in relation to the screen or fixed values for absolute width
4345
*/
44-
drawerScreenHeight?: number;
46+
drawerScreenWidthOnLandscape?: number | string;
47+
/**
48+
* Height of drawer. Use '%' for setting the width
49+
* in relation to the screen or fixed values for absolute width
50+
*/
51+
drawerScreenHeight?: number | string;
4552
}
4653
export declare enum DirectionType {
4754
left = "left",

‎lib/RNNDrawer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ var react_native_1 = require("react-native");
3535
var react_native_navigation_1 = require("react-native-navigation");
3636
/* Utils - Project Utilities */
3737
var events_1 = require("./events");
38-
var MaxWidthOnLandscapeMode = 300;
3938
var DirectionType;
4039
(function (DirectionType) {
4140
DirectionType["left"] = "left";
@@ -108,9 +107,9 @@ var RNNDrawer = /** @class */ (function () {
108107
return value;
109108
};
110109
/** Component Variables */
111-
_this.drawerWidth = _this.isLandscape()
112-
? MaxWidthOnLandscapeMode
113-
: _resolveDrawerSize(props.drawerScreenWidth, _this.screenWidth);
110+
_this.drawerWidth = _resolveDrawerSize(_this.isLandscape()
111+
? props.drawerScreenWidthOnLandscape
112+
: props.drawerScreenWidth, _this.screenWidth);
114113
_this.drawerHeight = _resolveDrawerSize(props.drawerScreenHeight, _this.screenHeight);
115114
_this.drawerOpenedValues = {
116115
left: 0,
@@ -365,6 +364,7 @@ var RNNDrawer = /** @class */ (function () {
365364
dismissWhenTouchOutside: true,
366365
fadeOpacity: 0.6,
367366
drawerScreenWidth: '80%',
367+
drawerScreenWidthOnLandscape: '30%',
368368
drawerScreenHeight: '100%',
369369
};
370370
return WrappedDrawer;

‎src/RNNDrawer.tsx‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ import { Navigation, Layout } from 'react-native-navigation';
2222
/* Utils - Project Utilities */
2323
import { listen, dispatch } from './events';
2424

25-
const MaxWidthOnLandscapeMode = 300;
26-
2725
declare interface RNNDrawerOptions {
2826
/**
2927
* Id of parent component of the drawer.
@@ -38,7 +36,7 @@ declare interface RNNDrawerOptions {
3836
* If not provided, drawer might have
3937
* a weird effect when closing
4038
*/
41-
direction: DirectionType;
39+
direction?: DirectionType;
4240

4341
/**
4442
* Time in milliseconds to execute the drawer opening animation
@@ -61,14 +59,22 @@ declare interface RNNDrawerOptions {
6159
fadeOpacity?: number;
6260

6361
/**
64-
* Width of drawer in relation to the screen (0 to 1)
62+
* Width of drawer on portrait orientation. Use '%' for setting
63+
* the width in relation to the screen or fixed values for absolute width
64+
*/
65+
drawerScreenWidth?: number | string;
66+
67+
/**
68+
* Width of drawer on landscape orientation. Use '%' for setting
69+
* the width in relation to the screen or fixed values for absolute width
6570
*/
66-
drawerScreenWidth?: number;
71+
drawerScreenWidthOnLandscape?: number | string;
6772

6873
/**
69-
* Height of drawer in relation to the screen (0 to 1)
74+
* Height of drawer. Use '%' for setting the width
75+
* in relation to the screen or fixed values for absolute width
7076
*/
71-
drawerScreenHeight?: number;
77+
drawerScreenHeight?: number | string;
7278
}
7379

7480
export enum DirectionType {
@@ -96,6 +102,7 @@ interface IProps {
96102
dismissWhenTouchOutside: boolean;
97103
fadeOpacity: number;
98104
drawerScreenWidth: number | string;
105+
drawerScreenWidthOnLandscape: number | string;
99106
drawerScreenHeight: number | string;
100107
style: any;
101108
}
@@ -157,6 +164,7 @@ class RNNDrawer {
157164
dismissWhenTouchOutside: true,
158165
fadeOpacity: 0.6,
159166
drawerScreenWidth: '80%',
167+
drawerScreenWidthOnLandscape: '30%',
160168
drawerScreenHeight: '100%',
161169
};
162170

@@ -252,9 +260,12 @@ class RNNDrawer {
252260
};
253261

254262
/** Component Variables */
255-
this.drawerWidth = this.isLandscape()
256-
? MaxWidthOnLandscapeMode
257-
: _resolveDrawerSize(props.drawerScreenWidth, this.screenWidth);
263+
this.drawerWidth = _resolveDrawerSize(
264+
this.isLandscape()
265+
? props.drawerScreenWidthOnLandscape
266+
: props.drawerScreenWidth,
267+
this.screenWidth,
268+
);
258269
this.drawerHeight = _resolveDrawerSize(
259270
props.drawerScreenHeight,
260271
this.screenHeight,

0 commit comments

Comments
 (0)