Update FeatureHighlight example screen

Author: ethanshar

demo/src/screens/componentScreens/FeatureHighlightScreen.js

@@ -3,7 +3,6 @@ import React, {Component} from 'react';
 import {AccessibilityInfo, findNodeHandle} from 'react-native';
 import {Colors, Typography, View, Text, Button, FeatureHighlight} from 'react-native-ui-lib'; // eslint-disable-line
 
-
 const titles = [
   'Get Notified',
   'Title two is a long title that will not get cut by default, but can be limited',
@@ -14,18 +13,17 @@ const titles = [
 ];
 const messages = [
   '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.',
+    'important things that you should pay attention to.',
   'Short message with information about the above highlighted feature',
   'A long message, that will not get cut (but can be limited) with information about the highlighted feature.' +
-  ' Please note that if the message is too long and will cause the content box to render off screen, you will get a' +
-  ' warning about it',
+    ' Please note that if the message is too long and will cause the content box to render off screen, you will get a' +
+    ' warning about it',
   'Very short message',
   'Short message with information about the below highlighted feature',
   'Here is where you can view demos of all Uilib components'
 ];
 
 class FeatureHighlightScreen extends Component {
-
   constructor(props) {
     super(props);
 
@@ -51,11 +49,11 @@ class FeatureHighlightScreen extends Component {
         AccessibilityInfo.setAccessibilityFocus(reactTag);
       }
     });
-  }
+  };
 
   showHighlight = () => {
     this.setState({showFTE: true});
-  }
+  };
 
   addTarget(ref, id) {
     if (ref && !this.targets[id]) {
@@ -68,7 +66,7 @@ class FeatureHighlightScreen extends Component {
     const newTargetIndex = currentTargetIndex + 1;
 
     this.moveToPage(newTargetIndex);
-  }
+  };
 
   moveToPage(index) {
     if (index < _.size(this.targets)) {
@@ -80,18 +78,18 @@ class FeatureHighlightScreen extends Component {
 
   getPageControlProps() {
     return {
-      numOfPages: titles.length, 
-      currentPage: this.state.currentTargetIndex, 
+      numOfPages: titles.length,
+      currentPage: this.state.currentTargetIndex,
       onPagePress: this.onPagePress,
       color: Colors.dark30,
       inactiveColor: Colors.dark80,
       size: 8
     };
   }
 
-  onPagePress = (index) => {
+  onPagePress = index => {
     this.moveToPage(index);
-  }
+  };
 
   renderHighlighterOverlay() {
     const {showFTE, currentTargetIndex} = this.state;
@@ -103,13 +101,15 @@ class FeatureHighlightScreen extends Component {
         title={titles[currentTargetIndex]}
         message={messages[currentTargetIndex]}
         titleStyle={currentTargetIndex === lastPage ? {...Typography.text70} : undefined}
-        messageStyle={currentTargetIndex === lastPage ? {...Typography.text60, fontWeight: '900', lineHeight: 28} : undefined}
+        messageStyle={
+          currentTargetIndex === lastPage ? {...Typography.text60, fontWeight: '900', lineHeight: 28} : undefined
+        }
         confirmButtonProps={{label: 'Got It', onPress: this.moveNext}}
         onBackgroundPress={this.closeHighlight}
         getTarget={() => this.targets[currentTargetIndex]}
         // highlightFrame={{x: 30, y: 70, width: 150, height: 30}}
         // highlightFrame={{x: 160, y: 336, width: 150, height: 56}}
-        borderRadius={currentTargetIndex === 4 ? 4 : undefined}
+        borderRadius={_.includes([1, 2, 3, 4], currentTargetIndex) ? 4 : undefined}
         pageControlProps={currentTargetIndex < lastPage ? this.getPageControlProps() : undefined}
       />
     );
@@ -121,42 +121,53 @@ class FeatureHighlightScreen extends Component {
         <View row flex>
           <View left>
             <View
-              marginT-40 br100 bg-yellow10
+              marginT-40
+              br100
+              bg-yellow10
               style={{width: 32, height: 32}}
               testID={'0'}
-              ref={r => (this.addTarget(r, '0'))}
+              ref={r => this.addTarget(r, '0')}
             />
-            <View marginT-40 bg-red10 style={{width: 12, height: 12}} testID={'1'} ref={r => (this.addTarget(r, '1'))}/>
+            <View marginT-40 bg-red10 style={{width: 12, height: 12}} testID={'1'} ref={r => this.addTarget(r, '1')}/>
           </View>
           <View right flex>
             <View row flex>
               <View
-                marginT-40 marginR-60 bg-cyan30
+                marginT-40
+                marginR-60
+                bg-cyan30
                 style={{width: 50, height: 70}}
                 testID={'2'}
-                ref={r => (this.addTarget(r, '2'))}
+                ref={r => this.addTarget(r, '2')}
+              />
+              <View
+                marginT-40
+                bg-violet30
+                style={{width: 70, height: 50}}
+                testID={'3'}
+                ref={r => this.addTarget(r, '3')}
               />
-              <View marginT-40 bg-violet30 style={{width: 70, height: 50}} testID={'3'} ref={r => (this.addTarget(r, '3'))}/>
             </View>
             <View
-              marginT-40 marginR-50
+              marginT-40
+              marginR-50
               bg-purple40
               style={{width: 150, height: 56}}
               testID={'4'}
-              ref={r => (this.addTarget(r, '4'))}
+              ref={r => this.addTarget(r, '4')}
             />
           </View>
         </View>
         <View center padding-25>
-          <View ref={r => this.viewRef = r}>
+          <View ref={r => (this.viewRef = r)}>
             <Text marginT-20>
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-              industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+              industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type
+              and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
               into electronic typesetting, <Text>remaining</Text> essentially unchanged.
             </Text>
           </View>
-          <View marginT-20 testID={'5'} ref={r => (this.addTarget(r, '5'))}>
+          <View marginT-20 testID={'5'} ref={r => this.addTarget(r, '5')}>
             <Button label="Show Overlay" onPress={this.showHighlight}/>
           </View>
         </View>