Feat/featur highlight extras

demo/src/screens/componentScreens/FeatureHighlightScreen.js

@@ -1,14 +1,15 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {Constants, View, Text, Button, Image, FeatureHighlight} from 'react-native-ui-lib'; // eslint-disable-line
+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',
   'Title number three',
   'Title number four',
   'Title number five',
-  'Title number six',
+  'Welcome to Uilib demo!'
 ];
 const messages = [
   'Important notifications appear right on your clubs and groups. Tap them to get more information about the most' +
@@ -19,8 +20,7 @@ const messages = [
   ' warning about it',
   'Very short message',
   'Short message with information about the below highlighted feature',
-  '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.',
+  'Here is where you can view demos of all Uilib components'
 ];
 
 class FeatureHighlightScreen extends Component {
@@ -30,14 +30,10 @@ class FeatureHighlightScreen extends Component {
 
     this.state = {
       showFTE: false,
-      currentTargetIndex: 0,
+      currentTargetIndex: 0
     };
 
     this.targets = {};
-
-    this.closeHighlight = this.closeHighlight.bind(this);
-    this.showHighlight = this.showHighlight.bind(this);
-    this.moveNext = this.moveNext.bind(this);
   }
 
   componentDidMount() {
@@ -47,11 +43,11 @@ class FeatureHighlightScreen extends Component {
     }, 1000);
   }
 
-  closeHighlight() {
+  closeHighlight = () => {
     this.setState({showFTE: false});
   }
 
-  showHighlight() {
+  showHighlight = () => {
     this.setState({showFTE: true});
   }
 
@@ -61,29 +57,54 @@ class FeatureHighlightScreen extends Component {
     }
   }
 
-  moveNext() {
+  moveNext = () => {
     const {currentTargetIndex} = this.state;
     const newTargetIndex = currentTargetIndex + 1;
 
-    if (newTargetIndex < _.size(this.targets)) {
-      this.setState({currentTargetIndex: newTargetIndex});
+    this.moveToPage(newTargetIndex);
+  }
+
+  moveToPage(index) {
+    if (index < _.size(this.targets)) {
+      this.setState({currentTargetIndex: index});
     } else {
       this.closeHighlight();
     }
   }
 
+  getPageControlProps() {
+    return {
+      numOfPages: titles.length, 
+      currentPage: this.state.currentTargetIndex, 
+      onPagePress: this.onPagePress,
+      color: Colors.dark30,
+      inactiveColor: Colors.dark80,
+      size: 8
+    };
+  }
+
+  onPagePress = (index) => {
+    this.moveToPage(index);
+  }
+
   renderHighlighterOverlay() {
     const {showFTE, currentTargetIndex} = this.state;
+    const lastPage = titles.length - 1;
+
     return (
       <FeatureHighlight
         visible={showFTE}
         title={titles[currentTargetIndex]}
         message={messages[currentTargetIndex]}
+        titleStyle={currentTargetIndex === lastPage ? {...Typography.text70} : 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}
+        pageControlProps={currentTargetIndex < lastPage ? this.getPageControlProps() : undefined}
       />
     );
   }

src/components/featureHighlight/index.js

@@ -8,6 +8,7 @@ import {BaseComponent} from '../../commons';
 import View from '../view';
 import Text from '../text';
 import Button from '../button';
+import PageControl from '../pageControl';
 import {HighlighterOverlayView} from '../../nativeComponents';
 
 
@@ -63,6 +64,14 @@ class FeatureHighlight extends BaseComponent {
      * Message to be displayed
      */
     message: PropTypes.string,
+    /**
+     * Title text style
+     */
+    titleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
+    /**
+     * Message text style
+     */
+    messageStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
     /**
      * Title's max number of lines
      */
@@ -95,6 +104,10 @@ class FeatureHighlight extends BaseComponent {
      * Width of the border around the highlighted element
      */
     borderWidth: PropTypes.number,
+    /**
+     * Border radius for the border corners around the highlighted element
+     */
+    borderRadius: PropTypes.number,
     /**
      * The minimum size of the highlighted component (Android API 21+, and only when passing a ref in 'getTarget')
      */
@@ -105,7 +118,11 @@ class FeatureHighlight extends BaseComponent {
     /**
      * The padding of the highlight frame around the highlighted element's frame (only when passing ref in 'getTarget')
      */
-    innerPadding: PropTypes.number
+    innerPadding: PropTypes.number,
+    /**
+     * PageControl component's props
+     */
+    pageControlProps: PropTypes.shape(PageControl.propTypes)
   };
 
   constructor(props) {
@@ -216,7 +233,7 @@ class FeatureHighlight extends BaseComponent {
   }
 
   renderHighlightMessage() {
-    const {title, message, confirmButtonProps, textColor, titleNumberOfLines, messageNumberOfLines}
+    const {title, message, titleStyle, messageStyle, confirmButtonProps, textColor, titleNumberOfLines, messageNumberOfLines}
       = this.getThemeProps();
     const color = textColor || defaultTextColor;
 
@@ -227,12 +244,31 @@ class FeatureHighlight extends BaseComponent {
         pointerEvents="box-none"
       >
         {title && (
-          <Text text60 style={[styles.title, {color}]} numberOfLines={titleNumberOfLines} pointerEvents="none">
+          <Text text60 
+            style={[
+              styles.title, 
+              {
+                color, 
+                marginBottom: message ? titleBottomMargin : messageBottomMargin
+              },
+              titleStyle
+            ]} 
+            numberOfLines={titleNumberOfLines} 
+            pointerEvents="none"
+          >
             {title}
           </Text>
         )}
         {message && (
-          <Text text70 style={[styles.message, {color}]} numberOfLines={messageNumberOfLines} pointerEvents="none">
+          <Text text70 
+            style={[
+              styles.message, 
+              {color},
+              messageStyle
+            ]} 
+            numberOfLines={messageNumberOfLines} 
+            pointerEvents="none"
+          >
             {message}
           </Text>
         )}
@@ -255,7 +291,7 @@ class FeatureHighlight extends BaseComponent {
     if (contentTopPosition === undefined) return null;
 
     const {testID, visible, highlightFrame, overlayColor, borderColor, borderWidth, minimumRectSize, innerPadding,
-      onBackgroundPress} = this.getThemeProps();
+      onBackgroundPress, borderRadius, pageControlProps} = this.getThemeProps();
 
     return (
       <HighlighterOverlayView
@@ -268,9 +304,16 @@ class FeatureHighlight extends BaseComponent {
         strokeWidth={borderWidth || defaultStrokeWidth}
         minimumRectSize={minimumRectSize}
         innerPadding={innerPadding}
+        borderRadius={borderRadius}
       >
         <TouchableWithoutFeedback style={styles.touchableOverlay} onPress={onBackgroundPress}>
+          {pageControlProps ?
+          <View flex bottom>
+            <PageControl {...pageControlProps} containerStyle={{marginBottom: 24}}/>
+          </View>
+          : 
           <View flex/>
+          }
         </TouchableWithoutFeedback>
         {this.renderHighlightMessage()}
       </HighlighterOverlayView>
@@ -286,7 +329,6 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start'
   },
   title: {
-    marginBottom: titleBottomMargin,
     lineHeight: Typography.text60.lineHeight,
     fontWeight: '900'
   },