Feature highlight (#124)

* add unique targets only by using testID prop

* moving setTargetPosition to componentDidMount() to allow rendering with visible=true for immediate visibility

* Opening support for tour and adjusting example screen

Author: Inbal-Tish

demo/src/screens/componentScreens/FeatureHighlightScreen.js

@@ -1,21 +1,26 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {Constants, View, Text, Button, Image, FeatureHighlight} from 'react-native-ui-lib'; // eslint-disable-line
 
 class FeatureHighlightScreen extends Component {
 
   constructor(props) {
     super(props);
-    this.closeHighlight = this.closeHighlight.bind(this);
-    this.showHighlight = this.showHighlight.bind(this);
 
     this.state = {
-      showFTE: false,
+      showFTE: true,
+      currentTargetIndex: 0,
     };
+
     this.targets = [];
+
+    this.closeHighlight = this.closeHighlight.bind(this);
+    this.showHighlight = this.showHighlight.bind(this);
+    this.moveNext = this.moveNext.bind(this);
   }
 
   componentDidMount() {
-    this.showHighlight();
+    // this.showHighlight();
   }
 
   closeHighlight() {
@@ -26,6 +31,25 @@ class FeatureHighlightScreen extends Component {
     this.setState({showFTE: true});
   }
 
+  addTarget(ref) {
+    if (ref != null) {
+      if (!_.find(this.targets, {props: {testID: ref.props.testID}})) {
+        this.targets.push(ref);
+      }
+    }
+  }
+
+  moveNext() {
+    const {currentTargetIndex} = this.state;
+    const newTargetIndex = currentTargetIndex + 1;
+
+    if (newTargetIndex < this.targets.length) {
+      this.setState({currentTargetIndex: newTargetIndex});
+    } else {
+      this.closeHighlight();
+    }
+  }
+
   renderHighlighterOverlay() {
     const {showFTE} = this.state;
     return (
@@ -34,8 +58,8 @@ class FeatureHighlightScreen extends Component {
         title="Get Notified"
         message="Important notifications appear right on your clubs and groups.
             Tap them to get more information about the most important things that you should pay attention to."
-        confirmButtonProps={{label: 'Got It', onPress: this.closeHighlight}}
-        getTarget={() => this.targets[Math.floor(Math.random() * this.targets.length)]}
+        confirmButtonProps={{label: 'Got It', onPress: this.moveNext}}
+        getTarget={() => this.targets[this.state.currentTargetIndex]}
         // highlightFrame={{x: 30, y: 70, width: 150, height: 30}}
         // highlightFrame={{x: 175, y: 334, width: 150, height: 56}}
       />
@@ -47,19 +71,29 @@ class FeatureHighlightScreen extends Component {
       <View flex>
         <View row flex>
           <View left>
-            <View marginT-40 br100 bg-yellow10 style={{width: 32, height: 32}} ref={r => (this.targets.push(r))}/>
-            <View marginT-40 bg-red10 style={{width: 12, height: 12}} ref={r => (this.targets.push(r))}/>
+            <View
+              marginT-40 br100 bg-yellow10
+              style={{width: 32, height: 32}}
+              testID={'0'}
+              ref={r => (this.addTarget(r))}
+            />
+            <View marginT-40 bg-red10 style={{width: 12, height: 12}} testID={'1'} ref={r => (this.addTarget(r))}/>
           </View>
           <View right flex>
             <View row flex>
-              <View marginT-40 marginR-60 bg-cyan30 style={{width: 50, height: 70}} ref={r => (this.targets.push(r))}/>
-              <View marginT-40 bg-violet30 style={{width: 70, height: 50}} ref={r => (this.targets.push(r))}/>
+              <View
+                marginT-40 marginR-60 bg-cyan30
+                style={{width: 50, height: 70}}
+                testID={'2'}
+                ref={r => (this.addTarget(r))}/>
+              <View marginT-40 bg-violet30 style={{width: 70, height: 50}} testID={'3'} ref={r => (this.addTarget(r))}/>
             </View>
             <View
               marginT-40 marginR-50
               bg-purple40
               style={{width: 150, height: 56}}
-              ref={r => (this.targets.push(r))}
+              testID={'4'}
+              ref={r => (this.addTarget(r))}
             />
           </View>
         </View>
@@ -72,7 +106,7 @@ class FeatureHighlightScreen extends Component {
               into electronic typesetting, <Text>remaining</Text> essentially unchanged.
             </Text>
           </View>
-          <View marginT-20 ref={r => (this.targets.push(r))}>
+          <View marginT-20 testID={'5'} ref={r => (this.addTarget(r))}>
             <Button label="Show Overlay" onPress={this.showHighlight}/>
           </View>
         </View>

src/components/featureHighlight/index.js

@@ -118,6 +118,10 @@ class FeatureHighlight extends BaseComponent {
     innerPadding: 10,
   };
 
+  componentDidMount() {
+    this.setTargetPosition();
+  }
+
   componentWillReceiveProps(nextProps) {
     this.setTargetPosition(nextProps);
   }
@@ -127,29 +131,27 @@ class FeatureHighlight extends BaseComponent {
   }
 
   setTargetPosition(props = this.props) {
-    if (!this.state.node) {
-      if (props.getTarget !== undefined) {
-        const target = props.getTarget();
+    if (props.getTarget !== undefined) {
+      const target = props.getTarget();
 
-        const node = this.findTargetNode(target);
-        this.setState({node});
+      const node = this.findTargetNode(target);
+      this.setState({node});
 
-        if (target) {
-          setTimeout(() => {
-            target.measureInWindow((x, y, width, height) => {
-              this.setState({
-                targetPosition: {left: x, top: y, width, height},
-              });
+      if (target) {
+        setTimeout(() => {
+          target.measureInWindow((x, y, width, height) => {
+            this.setState({
+              targetPosition: {left: x, top: y, width, height},
             });
-          }, 0);
-        }
-      } else {
-        const frame = props.highlightFrame;
-        if (frame) {
-          this.setState({
-            targetPosition: {left: frame.x, top: frame.y, width: frame.width, height: frame.height},
           });
-        }
+        }, 0);
+      }
+    } else {
+      const frame = props.highlightFrame;
+      if (frame) {
+        this.setState({
+          targetPosition: {left: frame.x, top: frame.y, width: frame.width, height: frame.height},
+        });
       }
     }
   }