From 4da98f847a7518ac8bf3bc73ddbab9fdfe2efc37 Mon Sep 17 00:00:00 2001 From: Josie Nelder Date: Thu, 31 Mar 2022 11:03:16 +0100 Subject: [PATCH 1/5] Added animationType for RN modal --- src/tooltip.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/tooltip.js b/src/tooltip.js index db612fd..5090a56 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -32,10 +32,10 @@ const DEFAULT_DISPLAY_INSETS = { right: 24, }; -const computeDisplayInsets = insetsFromProps => +const computeDisplayInsets = (insetsFromProps) => Object.assign({}, DEFAULT_DISPLAY_INSETS, insetsFromProps); -const invertPlacement = placement => { +const invertPlacement = (placement) => { switch (placement) { case 'top': return 'bottom'; @@ -75,6 +75,7 @@ class Tooltip extends Component { useReactNativeModal: true, topAdjustment: 0, accessible: true, + animationType: 'none', }; static propTypes = { @@ -105,6 +106,7 @@ class Tooltip extends Component { useReactNativeModal: PropTypes.bool, topAdjustment: PropTypes.number, accessible: PropTypes.bool, + animationType: PropTypes.oneOf(['none', 'fade', 'slide']), }; constructor(props) { @@ -208,7 +210,7 @@ class Tooltip extends Component { return null; } - updateWindowDims = dims => { + updateWindowDims = (dims) => { this.setState( { windowDims: dims.window, @@ -237,7 +239,7 @@ class Tooltip extends Component { ); }; - measureContent = e => { + measureContent = (e) => { const { width, height } = e.nativeEvent.layout; const contentSize = new Size(width, height); this.setState({ contentSize }, () => { @@ -245,7 +247,7 @@ class Tooltip extends Component { }); }; - onChildMeasurementComplete = rect => { + onChildMeasurementComplete = (rect) => { this.setState( { childRect: rect, @@ -272,7 +274,7 @@ class Tooltip extends Component { (x, y, width, height, pageX, pageY) => { const childRect = new Rect(pageX, pageY, width, height); if ( - Object.values(childRect).every(value => value !== undefined) + Object.values(childRect).every((value) => value !== undefined) ) { this.onChildMeasurementComplete(childRect); } else { @@ -300,13 +302,8 @@ class Tooltip extends Component { computeGeometry = () => { const { arrowSize, childContentSpacing } = this.props; - const { - childRect, - contentSize, - displayInsets, - placement, - windowDims, - } = this.state; + const { childRect, contentSize, displayInsets, placement, windowDims } = + this.state; const options = { displayInsets, @@ -446,6 +443,7 @@ class Tooltip extends Component { isVisible, useReactNativeModal, modalComponent, + animationType, } = this.props; const hasChildren = React.Children.count(children) > 0; @@ -456,6 +454,7 @@ class Tooltip extends Component { {useReactNativeModal ? ( Date: Thu, 31 Mar 2022 11:04:43 +0100 Subject: [PATCH 2/5] Undo --- src/tooltip.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/tooltip.js b/src/tooltip.js index db612fd..5090a56 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -32,10 +32,10 @@ const DEFAULT_DISPLAY_INSETS = { right: 24, }; -const computeDisplayInsets = insetsFromProps => +const computeDisplayInsets = (insetsFromProps) => Object.assign({}, DEFAULT_DISPLAY_INSETS, insetsFromProps); -const invertPlacement = placement => { +const invertPlacement = (placement) => { switch (placement) { case 'top': return 'bottom'; @@ -75,6 +75,7 @@ class Tooltip extends Component { useReactNativeModal: true, topAdjustment: 0, accessible: true, + animationType: 'none', }; static propTypes = { @@ -105,6 +106,7 @@ class Tooltip extends Component { useReactNativeModal: PropTypes.bool, topAdjustment: PropTypes.number, accessible: PropTypes.bool, + animationType: PropTypes.oneOf(['none', 'fade', 'slide']), }; constructor(props) { @@ -208,7 +210,7 @@ class Tooltip extends Component { return null; } - updateWindowDims = dims => { + updateWindowDims = (dims) => { this.setState( { windowDims: dims.window, @@ -237,7 +239,7 @@ class Tooltip extends Component { ); }; - measureContent = e => { + measureContent = (e) => { const { width, height } = e.nativeEvent.layout; const contentSize = new Size(width, height); this.setState({ contentSize }, () => { @@ -245,7 +247,7 @@ class Tooltip extends Component { }); }; - onChildMeasurementComplete = rect => { + onChildMeasurementComplete = (rect) => { this.setState( { childRect: rect, @@ -272,7 +274,7 @@ class Tooltip extends Component { (x, y, width, height, pageX, pageY) => { const childRect = new Rect(pageX, pageY, width, height); if ( - Object.values(childRect).every(value => value !== undefined) + Object.values(childRect).every((value) => value !== undefined) ) { this.onChildMeasurementComplete(childRect); } else { @@ -300,13 +302,8 @@ class Tooltip extends Component { computeGeometry = () => { const { arrowSize, childContentSpacing } = this.props; - const { - childRect, - contentSize, - displayInsets, - placement, - windowDims, - } = this.state; + const { childRect, contentSize, displayInsets, placement, windowDims } = + this.state; const options = { displayInsets, @@ -446,6 +443,7 @@ class Tooltip extends Component { isVisible, useReactNativeModal, modalComponent, + animationType, } = this.props; const hasChildren = React.Children.count(children) > 0; @@ -456,6 +454,7 @@ class Tooltip extends Component { {useReactNativeModal ? ( Date: Thu, 31 Mar 2022 11:24:47 +0100 Subject: [PATCH 3/5] Added animation type for RN Modal --- src/tooltip.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/tooltip.js b/src/tooltip.js index db612fd..22c9c75 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -75,6 +75,7 @@ class Tooltip extends Component { useReactNativeModal: true, topAdjustment: 0, accessible: true, + animationType: 'none', }; static propTypes = { @@ -105,6 +106,7 @@ class Tooltip extends Component { useReactNativeModal: PropTypes.bool, topAdjustment: PropTypes.number, accessible: PropTypes.bool, + animationType: PropTypes.oneOf(['none', 'fade', 'slide']) }; constructor(props) { @@ -456,6 +458,7 @@ class Tooltip extends Component { {useReactNativeModal ? ( Date: Tue, 5 Apr 2022 11:21:22 +0100 Subject: [PATCH 4/5] Updated to use fade animation --- src/tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tooltip.js b/src/tooltip.js index 5090a56..a2f2680 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -75,7 +75,7 @@ class Tooltip extends Component { useReactNativeModal: true, topAdjustment: 0, accessible: true, - animationType: 'none', + animationType: 'fade', }; static propTypes = { From 3008a00ebae074a59e0d6c88017c41b7f3fd7850 Mon Sep 17 00:00:00 2001 From: Marcin Olek Date: Mon, 2 May 2022 19:53:56 +0200 Subject: [PATCH 5/5] add statusBarTranslucent modal prop to fix issue with the backdrop not covering entire screen on droid --- src/tooltip.d.ts | 7 ++++++- src/tooltip.js | 25 ++++++++++++------------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/tooltip.d.ts b/src/tooltip.d.ts index 5a7ef59..593a0e9 100644 --- a/src/tooltip.d.ts +++ b/src/tooltip.d.ts @@ -46,7 +46,7 @@ declare module 'react-native-walkthrough-tooltip' { childrenWrapperStyle?: StyleProp; // Styles the view element that wraps the original children - parentWrapperStyle?: StyleProp + parentWrapperStyle?: StyleProp; } export interface TooltipProps extends Partial { @@ -129,6 +129,11 @@ declare module 'react-native-walkthrough-tooltip' { /** Will use given component instead of default react-native Modal component **/ modalComponent?: object; + + /** + *Set this to true to use translucent status bar (cover enire screen on android) + */ + statusBarTranslucent?: boolean; } /** diff --git a/src/tooltip.js b/src/tooltip.js index db612fd..a39784a 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -32,10 +32,10 @@ const DEFAULT_DISPLAY_INSETS = { right: 24, }; -const computeDisplayInsets = insetsFromProps => +const computeDisplayInsets = (insetsFromProps) => Object.assign({}, DEFAULT_DISPLAY_INSETS, insetsFromProps); -const invertPlacement = placement => { +const invertPlacement = (placement) => { switch (placement) { case 'top': return 'bottom'; @@ -75,6 +75,7 @@ class Tooltip extends Component { useReactNativeModal: true, topAdjustment: 0, accessible: true, + statusBarTranslucent: false, }; static propTypes = { @@ -105,6 +106,7 @@ class Tooltip extends Component { useReactNativeModal: PropTypes.bool, topAdjustment: PropTypes.number, accessible: PropTypes.bool, + statusBarTranslucent: PropTypes.bool, }; constructor(props) { @@ -208,7 +210,7 @@ class Tooltip extends Component { return null; } - updateWindowDims = dims => { + updateWindowDims = (dims) => { this.setState( { windowDims: dims.window, @@ -237,7 +239,7 @@ class Tooltip extends Component { ); }; - measureContent = e => { + measureContent = (e) => { const { width, height } = e.nativeEvent.layout; const contentSize = new Size(width, height); this.setState({ contentSize }, () => { @@ -245,7 +247,7 @@ class Tooltip extends Component { }); }; - onChildMeasurementComplete = rect => { + onChildMeasurementComplete = (rect) => { this.setState( { childRect: rect, @@ -272,7 +274,7 @@ class Tooltip extends Component { (x, y, width, height, pageX, pageY) => { const childRect = new Rect(pageX, pageY, width, height); if ( - Object.values(childRect).every(value => value !== undefined) + Object.values(childRect).every((value) => value !== undefined) ) { this.onChildMeasurementComplete(childRect); } else { @@ -300,13 +302,8 @@ class Tooltip extends Component { computeGeometry = () => { const { arrowSize, childContentSpacing } = this.props; - const { - childRect, - contentSize, - displayInsets, - placement, - windowDims, - } = this.state; + const { childRect, contentSize, displayInsets, placement, windowDims } = + this.state; const options = { displayInsets, @@ -446,6 +443,7 @@ class Tooltip extends Component { isVisible, useReactNativeModal, modalComponent, + statusBarTranslucent, } = this.props; const hasChildren = React.Children.count(children) > 0; @@ -460,6 +458,7 @@ class Tooltip extends Component { visible={showTooltip} onRequestClose={this.props.onClose} supportedOrientations={this.props.supportedOrientations} + statusBarTranslucent={statusBarTranslucent} > {this.renderContentForTooltip()}