From 4a9be237262c1655cad37a2b21f09c704f4038c7 Mon Sep 17 00:00:00 2001 From: Rik Date: Wed, 13 Jan 2021 17:05:59 +0100 Subject: [PATCH 1/4] Prevent crash on auto height not a number --- src/getTooltipCoordinate.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/getTooltipCoordinate.js b/src/getTooltipCoordinate.js index 2d08707..f966922 100644 --- a/src/getTooltipCoordinate.js +++ b/src/getTooltipCoordinate.js @@ -2,6 +2,8 @@ import { Dimensions } from 'react-native'; function convertDimensionToNumber(dimension, screenDimension) { + if (dimension === 'auto') return 0; + if (typeof dimension === 'string' && dimension.includes('%')) { const decimal = Number(dimension.replace(/%/, '')) / 100; return decimal * screenDimension; From fb3aba7fddbb15639ea7c05010c4bceac1e4902e Mon Sep 17 00:00:00 2001 From: Rik Date: Wed, 13 Jan 2021 17:06:46 +0100 Subject: [PATCH 2/4] Set position from bottom when past middle line --- src/Tooltip.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/Tooltip.js b/src/Tooltip.js index b512848..113d885 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -115,11 +115,10 @@ class Tooltip extends React.Component { withPointer, ); - return { + const tooltipStyle = { position: 'absolute', left: I18nManager.isRTL ? null : x, right: I18nManager.isRTL ? x : null, - top: y, width, height, backgroundColor, @@ -132,12 +131,20 @@ class Tooltip extends React.Component { padding: 10, ...containerStyle, }; + + const pastMiddleLine = yOffset > y; + if (pastMiddleLine) { + tooltipStyle.bottom = ScreenHeight - y; + } else { + tooltipStyle.top = y; + } + + return tooltipStyle; }; - renderPointer = tooltipY => { + renderPointer = pastMiddleLine => { const { yOffset, xOffset, elementHeight, elementWidth } = this.state; const { backgroundColor, pointerColor, pointerStyle } = this.props; - const pastMiddleLine = yOffset > tooltipY; return ( { const { yOffset, xOffset, elementWidth, elementHeight } = this.state; const tooltipStyle = this.getTooltipStyle(); return ( - + { > {this.props.children} - {withPointer && this.renderPointer(tooltipStyle.top)} + {withPointer && this.renderPointer(!tooltipStyle.top)} {popover} - + ); }; From b88de39930813a21a208abe97d6a845254f1fbd1 Mon Sep 17 00:00:00 2001 From: Rik Date: Wed, 13 Jan 2021 17:07:57 +0100 Subject: [PATCH 3/4] Update snapshots --- __tests__/__snapshots__/Tooltip.test.js.snap | 450 +++++++++---------- 1 file changed, 222 insertions(+), 228 deletions(-) diff --git a/__tests__/__snapshots__/Tooltip.test.js.snap b/__tests__/__snapshots__/Tooltip.test.js.snap index f6750da..859af95 100644 --- a/__tests__/__snapshots__/Tooltip.test.js.snap +++ b/__tests__/__snapshots__/Tooltip.test.js.snap @@ -53,89 +53,87 @@ exports[`Tooltip component should display tooltip on longPress 1`] = ` } } > - - + - - Press me - - - + + - - + } + > + + + - - Info here - - + Info here + @@ -195,89 +193,87 @@ exports[`Tooltip component should display tooltip when no actionType is provided } } > - - + - - Press me - - - + + - - + } + > + + + - - Info here - - + Info here + @@ -337,89 +333,87 @@ exports[`Tooltip component should render without issues 1`] = ` } } > - - + - - Press me - - - + + - - + } + > + + + - - Info here - - + Info here + From 1fc38b7bc4ca59d185e4ee80920630b2fdcfefa8 Mon Sep 17 00:00:00 2001 From: Rik Date: Wed, 13 Jan 2021 17:42:09 +0100 Subject: [PATCH 4/4] Remove height offset in coordinate calculation --- src/Tooltip.js | 1 - src/getTooltipCoordinate.js | 13 +++---------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/Tooltip.js b/src/Tooltip.js index 113d885..439ed07 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -111,7 +111,6 @@ class Tooltip extends React.Component { ScreenWidth, ScreenHeight, width, - height, withPointer, ); diff --git a/src/getTooltipCoordinate.js b/src/getTooltipCoordinate.js index f966922..b0169fc 100644 --- a/src/getTooltipCoordinate.js +++ b/src/getTooltipCoordinate.js @@ -2,8 +2,6 @@ import { Dimensions } from 'react-native'; function convertDimensionToNumber(dimension, screenDimension) { - if (dimension === 'auto') return 0; - if (typeof dimension === 'string' && dimension.includes('%')) { const decimal = Number(dimension.replace(/%/, '')) / 100; return decimal * screenDimension; @@ -30,7 +28,7 @@ type Coord = { The tooltip coordinates are based on the element which it is wrapping. We take the x and y coordinates of the element and find the best position to place the tooltip. To find the best position we look for the side with the - most space. In order to find the side with the most space we divide the the + most space. In order to find the side with the most space we divide the the surroundings in four quadrants and check for the one with biggest area. Once we know the quandrant with the biggest area it place the tooltip in that direction. @@ -50,7 +48,6 @@ const getTooltipCoordinate = ( ScreenWidth: number, ScreenHeight: number, receivedTooltipWidth: number | string, - receivedTooltipHeight: number | string, withPointer: boolean, ): Coord => { const screenDims = Dimensions.get('screen'); @@ -59,10 +56,6 @@ const getTooltipCoordinate = ( receivedTooltipWidth, screenDims.width, ); - const tooltipHeight = convertDimensionToNumber( - receivedTooltipHeight, - screenDims.height, - ); // The following are point coordinates: [x, y] const center = [x + width / 2, y + height / 2]; const pOne = [center[0], 0]; @@ -98,8 +91,8 @@ const getTooltipCoordinate = ( // Deslocate the coordinates in the direction of the quadrant. const directionCorrection = [[-1, -1], [1, -1], [1, 1], [-1, 1]]; const deslocateReferencePoint = [ - [-tooltipWidth, -tooltipHeight], - [0, -tooltipHeight], + [-tooltipWidth, 0], + [0, 0], [0, 0], [-tooltipWidth, 0], ];