From ded263799f7b58bfcadd15878fed402b8ccea722 Mon Sep 17 00:00:00 2001 From: Daniil Merkulov Date: Tue, 20 Jul 2021 13:27:40 +0200 Subject: [PATCH 1/2] feat: add support for setting drawer width on landscape --- README.md | 19 ++++++++++--------- lib/RNNDrawer.d.ts | 17 ++++++++++++----- lib/RNNDrawer.js | 8 ++++---- src/RNNDrawer.tsx | 31 +++++++++++++++++++++---------- 4 files changed, 47 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index abb70d37..a21ef641 100644 --- a/README.md +++ b/README.md @@ -92,15 +92,16 @@ There's a complete and functional example at the `example` folder, with more tho The props below are used to configure the drawer and are to be used in RNN `passProps:`. Any aditional props will be passed to your custom drawer component. -| Prop | Type | Optional | Default | Description | -| ------------------- | ------------- | --------- | ------- | --------------------------------------------------------------------------------------- | -| animationOpenTime | float | Yes | 300 | Time in milliseconds to execute the drawer opening animation. | -| animationCloseTime | float | Yes | 300 | Time in milliseconds to execute the drawer closing animation. | -| direction | string | Yes | left | Direction to open the collage, one of: ["left", "right", "top", "bottom"]. | -| dismissWhenTouchOutside | bool | Yes | true | Should the drawer be dismissed when a click is registered outside? | -| fadeOpacity | number | Yes | 0.6 | Opacity of the screen outside the drawer. | -| drawerScreenWidth | number | Yes | 0.8 | 0 - 1, width of drawer in relation to the screen. | -| drawerScreenHeight | number | Yes | 1 | 0 - 1, height of drawer in relation to the screen. | +| Prop | Type | Optional | Default | Description | +| ---------------------------- | ------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| animationOpenTime | float | Yes | 300 | Time in milliseconds to execute the drawer opening animation. | +| animationCloseTime | float | Yes | 300 | Time in milliseconds to execute the drawer closing animation. | +| direction | string | Yes | left | Direction to open the collage, one of: ["left", "right", "top", "bottom"]. | +| dismissWhenTouchOutside | bool | Yes | true | Should the drawer be dismissed when a click is registered outside? | +| fadeOpacity | number | Yes | 0.6 | Opacity of the screen outside the drawer. | +| 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 | +| 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 | +| drawerScreenHeight | number/string | Yes | 100% | Height of drawer. Use '%' for setting the width in relation to the screen or fixed values for absolute width ## SideMenuView diff --git a/lib/RNNDrawer.d.ts b/lib/RNNDrawer.d.ts index c9b67016..fdc6a7d0 100644 --- a/lib/RNNDrawer.d.ts +++ b/lib/RNNDrawer.d.ts @@ -17,7 +17,7 @@ declare interface RNNDrawerOptions { * If not provided, drawer might have * a weird effect when closing */ - direction: DirectionType; + direction?: DirectionType; /** * Time in milliseconds to execute the drawer opening animation */ @@ -35,13 +35,20 @@ declare interface RNNDrawerOptions { */ fadeOpacity?: number; /** - * Width of drawer in relation to the screen (0 to 1) + * Width of drawer on portrait orientation. Use '%' for setting + * the width in relation to the screen or fixed values for absolute width */ - drawerScreenWidth?: number; + drawerScreenWidth?: number | string; /** - * Height of drawer in relation to the screen (0 to 1) + * Width of drawer on landscape orientation. Use '%' for setting + * the width in relation to the screen or fixed values for absolute width */ - drawerScreenHeight?: number; + drawerScreenWidthOnLandscape?: number | string; + /** + * Height of drawer. Use '%' for setting the width + * in relation to the screen or fixed values for absolute width + */ + drawerScreenHeight?: number | string; } export declare enum DirectionType { left = "left", diff --git a/lib/RNNDrawer.js b/lib/RNNDrawer.js index 970139e6..796db22e 100644 --- a/lib/RNNDrawer.js +++ b/lib/RNNDrawer.js @@ -35,7 +35,6 @@ var react_native_1 = require("react-native"); var react_native_navigation_1 = require("react-native-navigation"); /* Utils - Project Utilities */ var events_1 = require("./events"); -var MaxWidthOnLandscapeMode = 300; var DirectionType; (function (DirectionType) { DirectionType["left"] = "left"; @@ -108,9 +107,9 @@ var RNNDrawer = /** @class */ (function () { return value; }; /** Component Variables */ - _this.drawerWidth = _this.isLandscape() - ? MaxWidthOnLandscapeMode - : _resolveDrawerSize(props.drawerScreenWidth, _this.screenWidth); + _this.drawerWidth = _resolveDrawerSize(_this.isLandscape() + ? props.drawerScreenWidthOnLandscape + : props.drawerScreenWidth, _this.screenWidth); _this.drawerHeight = _resolveDrawerSize(props.drawerScreenHeight, _this.screenHeight); _this.drawerOpenedValues = { left: 0, @@ -365,6 +364,7 @@ var RNNDrawer = /** @class */ (function () { dismissWhenTouchOutside: true, fadeOpacity: 0.6, drawerScreenWidth: '80%', + drawerScreenWidthOnLandscape: '30%', drawerScreenHeight: '100%', }; return WrappedDrawer; diff --git a/src/RNNDrawer.tsx b/src/RNNDrawer.tsx index b17a8efe..8fedbfa5 100644 --- a/src/RNNDrawer.tsx +++ b/src/RNNDrawer.tsx @@ -22,8 +22,6 @@ import { Navigation, Layout } from 'react-native-navigation'; /* Utils - Project Utilities */ import { listen, dispatch } from './events'; -const MaxWidthOnLandscapeMode = 300; - declare interface RNNDrawerOptions { /** * Id of parent component of the drawer. @@ -38,7 +36,7 @@ declare interface RNNDrawerOptions { * If not provided, drawer might have * a weird effect when closing */ - direction: DirectionType; + direction?: DirectionType; /** * Time in milliseconds to execute the drawer opening animation @@ -61,14 +59,22 @@ declare interface RNNDrawerOptions { fadeOpacity?: number; /** - * Width of drawer in relation to the screen (0 to 1) + * Width of drawer on portrait orientation. Use '%' for setting + * the width in relation to the screen or fixed values for absolute width + */ + drawerScreenWidth?: number | string; + + /** + * Width of drawer on landscape orientation. Use '%' for setting + * the width in relation to the screen or fixed values for absolute width */ - drawerScreenWidth?: number; + drawerScreenWidthOnLandscape?: number | string; /** - * Height of drawer in relation to the screen (0 to 1) + * Height of drawer. Use '%' for setting the width + * in relation to the screen or fixed values for absolute width */ - drawerScreenHeight?: number; + drawerScreenHeight?: number | string; } export enum DirectionType { @@ -96,6 +102,7 @@ interface IProps { dismissWhenTouchOutside: boolean; fadeOpacity: number; drawerScreenWidth: number | string; + drawerScreenWidthOnLandscape: number | string; drawerScreenHeight: number | string; style: any; } @@ -157,6 +164,7 @@ class RNNDrawer { dismissWhenTouchOutside: true, fadeOpacity: 0.6, drawerScreenWidth: '80%', + drawerScreenWidthOnLandscape: '30%', drawerScreenHeight: '100%', }; @@ -252,9 +260,12 @@ class RNNDrawer { }; /** Component Variables */ - this.drawerWidth = this.isLandscape() - ? MaxWidthOnLandscapeMode - : _resolveDrawerSize(props.drawerScreenWidth, this.screenWidth); + this.drawerWidth = _resolveDrawerSize( + this.isLandscape() + ? props.drawerScreenWidthOnLandscape + : props.drawerScreenWidth, + this.screenWidth, + ); this.drawerHeight = _resolveDrawerSize( props.drawerScreenHeight, this.screenHeight, From 836445eb5f20880db3f2fdd63cd56f267e32d622 Mon Sep 17 00:00:00 2001 From: Daniil Merkulov Date: Tue, 3 Aug 2021 12:31:17 +0200 Subject: [PATCH 2/2] docs: add examples for setting drawer size values --- README.md | 6 +++--- lib/RNNDrawer.d.ts | 12 ++++++------ src/RNNDrawer.tsx | 12 ++++++------ 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index a21ef641..30f54582 100644 --- a/README.md +++ b/README.md @@ -99,9 +99,9 @@ props will be passed to your custom drawer component. | direction | string | Yes | left | Direction to open the collage, one of: ["left", "right", "top", "bottom"]. | | dismissWhenTouchOutside | bool | Yes | true | Should the drawer be dismissed when a click is registered outside? | | fadeOpacity | number | Yes | 0.6 | Opacity of the screen outside the drawer. | -| 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 | -| 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 | -| drawerScreenHeight | number/string | Yes | 100% | Height of drawer. Use '%' for setting the width in relation to the screen or fixed values for absolute width +| drawerScreenWidth | number/string | Yes | 80% | Width of drawer on portrait orientation. Pass a string containing '%' (e.g. "80%") for setting the width in relation to the screen or a number for absolute width (e.g. 300) | +| drawerScreenWidthOnLandscape | number/string | Yes | 30% | Width of drawer on landscape orientation. Pass a string containing '%' (e.g. "80%") for setting the width in relation to the screen or a number for absolute width (e.g. 300) | +| drawerScreenHeight | number/string | Yes | 100% | Height of drawer. Pass a string containing '%' (e.g. "30%") for setting the height in relation to the screen or a number for absolute height (e.g. 300) ## SideMenuView diff --git a/lib/RNNDrawer.d.ts b/lib/RNNDrawer.d.ts index fdc6a7d0..ed71e3b1 100644 --- a/lib/RNNDrawer.d.ts +++ b/lib/RNNDrawer.d.ts @@ -35,18 +35,18 @@ declare interface RNNDrawerOptions { */ fadeOpacity?: number; /** - * Width of drawer on portrait orientation. Use '%' for setting - * the width in relation to the screen or fixed values for absolute width + * Width of drawer on portrait orientation. Pass a string containing '%' (e.g. "80%") + * for setting the width in relation to the screen or a number for absolute width (e.g. 300) */ drawerScreenWidth?: number | string; /** - * Width of drawer on landscape orientation. Use '%' for setting - * the width in relation to the screen or fixed values for absolute width + * Width of drawer on landscape orientation. Pass a string containing '%' (e.g. "80%") + * for setting the width in relation to the screen or a number for absolute width (e.g. 300) */ drawerScreenWidthOnLandscape?: number | string; /** - * Height of drawer. Use '%' for setting the width - * in relation to the screen or fixed values for absolute width + * Height of drawer. Pass a string containing '%' (e.g. "30%") + * for setting the height in relation to the screen or a number for absolute height (e.g. 300) */ drawerScreenHeight?: number | string; } diff --git a/src/RNNDrawer.tsx b/src/RNNDrawer.tsx index 8fedbfa5..478cee9f 100644 --- a/src/RNNDrawer.tsx +++ b/src/RNNDrawer.tsx @@ -59,20 +59,20 @@ declare interface RNNDrawerOptions { fadeOpacity?: number; /** - * Width of drawer on portrait orientation. Use '%' for setting - * the width in relation to the screen or fixed values for absolute width + * Width of drawer on portrait orientation. Pass a string containing '%' (e.g. "80%") + * for setting the width in relation to the screen or a number for absolute width (e.g. 300) */ drawerScreenWidth?: number | string; /** - * Width of drawer on landscape orientation. Use '%' for setting - * the width in relation to the screen or fixed values for absolute width + * Width of drawer on landscape orientation. Pass a string containing '%' (e.g. "80%") + * for setting the width in relation to the screen or a number for absolute width (e.g. 300) */ drawerScreenWidthOnLandscape?: number | string; /** - * Height of drawer. Use '%' for setting the width - * in relation to the screen or fixed values for absolute width + * Height of drawer. Pass a string containing '%' (e.g. "30%") + * for setting the height in relation to the screen or a number for absolute height (e.g. 300) */ drawerScreenHeight?: number | string; }