From 1fbf8fda06352af4784172b6885d921fe1fee123 Mon Sep 17 00:00:00 2001 From: Soorena Date: Sat, 1 Sep 2018 13:41:19 +0430 Subject: [PATCH 1/2] Add rtl support with dynamic right & left properties --- src/components/CopilotModal.js | 49 +++++++++++++++++++++++++++------- src/components/ViewMask.js | 19 ++++++++----- 2 files changed, 51 insertions(+), 17 deletions(-) diff --git a/src/components/CopilotModal.js b/src/components/CopilotModal.js index a47e66b8..f7e50ab0 100644 --- a/src/components/CopilotModal.js +++ b/src/components/CopilotModal.js @@ -1,6 +1,15 @@ // @flow import React, { Component } from 'react'; -import { Animated, Easing, View, NativeModules, Modal, StatusBar, Platform } from 'react-native'; +import { + Animated, + Easing, + View, + NativeModules, + Modal, + StatusBar, + Platform, + I18nManager, +} from 'react-native'; import Tooltip from './Tooltip'; import StepNumber from './StepNumber'; import styles, { MARGIN, ARROW_SIZE, STEP_NUMBER_DIAMETER, STEP_NUMBER_RADIUS } from './style'; @@ -36,6 +45,10 @@ type State = { const noop = () => {}; +const rtl = I18nManager.isRTL; +const start = rtl ? 'right' : 'left'; +const end = rtl ? 'left' : 'right'; + class CopilotModal extends Component { static defaultProps = { easing: Easing.elastic(0.7), @@ -101,15 +114,31 @@ class CopilotModal extends Component { obj.top -= StatusBar.currentHeight; // eslint-disable-line no-param-reassign } - let stepNumberLeft = obj.left - STEP_NUMBER_RADIUS; + let stepNumberLeft; + + const edgeCase = (stepLeft) => { + if (stepLeft > layout.width - STEP_NUMBER_DIAMETER) { + return layout.width - STEP_NUMBER_DIAMETER; + } + return stepLeft; + }; + + if (!rtl) { + stepNumberLeft = obj.left - STEP_NUMBER_RADIUS; - if (stepNumberLeft < 0) { + if (stepNumberLeft < 0) { + stepNumberLeft = (obj.left + obj.width) - STEP_NUMBER_RADIUS; + stepNumberLeft = edgeCase(stepNumberLeft); + } + } else { stepNumberLeft = (obj.left + obj.width) - STEP_NUMBER_RADIUS; - if (stepNumberLeft > layout.width - STEP_NUMBER_DIAMETER) { - stepNumberLeft = layout.width - STEP_NUMBER_DIAMETER; + if (stepNumberLeft > layout.width) { + stepNumberLeft = obj.left - STEP_NUMBER_RADIUS; + stepNumberLeft = edgeCase(stepNumberLeft); } } + const center = { x: obj.left + (obj.width / 2), y: obj.top + (obj.height / 2), @@ -137,15 +166,15 @@ class CopilotModal extends Component { } if (horizontalPosition === 'left') { - tooltip.right = Math.max(layout.width - (obj.left + obj.width), 0); + tooltip[end] = Math.max(layout.width - (obj.left + obj.width), 0); tooltip.right = tooltip.right === 0 ? tooltip.right + MARGIN : tooltip.right; tooltip.maxWidth = layout.width - tooltip.right - MARGIN; - arrow.right = tooltip.right + MARGIN; + arrow[end] = tooltip[end] + MARGIN; } else { - tooltip.left = Math.max(obj.left, 0); + tooltip[start] = Math.max(obj.left, 0); tooltip.left = tooltip.left === 0 ? tooltip.left + MARGIN : tooltip.left; tooltip.maxWidth = layout.width - tooltip.left - MARGIN; - arrow.left = tooltip.left + MARGIN; + arrow[start] = tooltip[start] + MARGIN; } const animate = { @@ -249,7 +278,7 @@ class CopilotModal extends Component { style={[ styles.stepNumberContainer, { - left: this.state.animatedValues.stepNumberLeft, + [start]: this.state.animatedValues.stepNumberLeft, top: Animated.add(this.state.animatedValues.top, -STEP_NUMBER_RADIUS), }, ]} diff --git a/src/components/ViewMask.js b/src/components/ViewMask.js index de4884b9..54d04793 100644 --- a/src/components/ViewMask.js +++ b/src/components/ViewMask.js @@ -1,11 +1,16 @@ // @flow import React, { Component } from 'react'; -import { View, Animated } from 'react-native'; +import { View, Animated, I18nManager } from 'react-native'; import styles from './style'; import type { valueXY } from '../types'; + +const rtl = I18nManager.isRTL; +const start = rtl ? 'right' : 'left'; +const end = rtl ? 'left' : 'right'; + type Props = { size: valueXY, position: valueXY, @@ -78,14 +83,14 @@ class ViewMask extends Component { style={[ styles.overlayRectangle, { - right: leftOverlayRight, + [end]: leftOverlayRight, }]} /> { styles.overlayRectangle, { top: bottomOverlayTopBoundary, - left: verticalOverlayLeftBoundary, - right: verticalOverlayRightBoundary, + [start]: verticalOverlayLeftBoundary, + [end]: verticalOverlayRightBoundary, }, ]} /> @@ -103,8 +108,8 @@ class ViewMask extends Component { styles.overlayRectangle, { bottom: topOverlayBottomBoundary, - left: verticalOverlayLeftBoundary, - right: verticalOverlayRightBoundary, + [start]: verticalOverlayLeftBoundary, + [end]: verticalOverlayRightBoundary, }, ]} /> From dab9793884b822803b79c6760eb0d84412057594 Mon Sep 17 00:00:00 2001 From: Soorena Date: Sun, 2 Sep 2018 13:31:54 +0430 Subject: [PATCH 2/2] Fix unresolved left/right values for Tooltip Component --- src/components/CopilotModal.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/CopilotModal.js b/src/components/CopilotModal.js index f7e50ab0..4bc981fa 100644 --- a/src/components/CopilotModal.js +++ b/src/components/CopilotModal.js @@ -167,13 +167,13 @@ class CopilotModal extends Component { if (horizontalPosition === 'left') { tooltip[end] = Math.max(layout.width - (obj.left + obj.width), 0); - tooltip.right = tooltip.right === 0 ? tooltip.right + MARGIN : tooltip.right; - tooltip.maxWidth = layout.width - tooltip.right - MARGIN; + tooltip[end] = tooltip[end] === 0 ? tooltip[end] + MARGIN : tooltip[end]; + tooltip.maxWidth = layout.width - tooltip[end] - MARGIN; arrow[end] = tooltip[end] + MARGIN; } else { tooltip[start] = Math.max(obj.left, 0); - tooltip.left = tooltip.left === 0 ? tooltip.left + MARGIN : tooltip.left; - tooltip.maxWidth = layout.width - tooltip.left - MARGIN; + tooltip[start] = tooltip.left === 0 ? tooltip[start] + MARGIN : tooltip[start]; + tooltip.maxWidth = layout.width - tooltip[start] - MARGIN; arrow[start] = tooltip[start] + MARGIN; }