Merge pull request #41 from postillonmedia/master

Exclude the StepNumber into its own component and made it replaceable via props

Author: mohebifar

README.md

@@ -136,6 +136,24 @@ copilot({
 })(RootComponent)
 ```
 
+### Custom step number component
+You can customize the step number by passing a component to the `copilot` HOC maker. If you are looking for an example step number component, take a look at [the default step number implementation](https://github.com/okgrow/react-native-copilot/blob/master/src/components/StepNumber.js).
+
+```js
+const StepNumberComponent = ({
+  isFirstStep,
+  isLastStep,
+  currentStep,
+  currentStepNumber,
+}) => (
+  // ...
+);
+
+copilot({
+  stepNumberComponent: StepNumberComponent
+})(RootComponent)
+```
+
 ### Custom components as steps
 The components wrapped inside `CopilotStep`, will receive a `copilot` prop of type `Object` which the outermost rendered element of the component or the element that you want the tooltip be shown around, must extend.
 

src/components/CopilotModal.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import { Animated, Easing, View, Text, NativeModules, Modal, StatusBar, Platform } from 'react-native';
 import Tooltip from './Tooltip';
+import StepNumber from './StepNumber';
 import styles, { MARGIN, ARROW_SIZE, STEP_NUMBER_DIAMETER, STEP_NUMBER_RADIUS } from './style';
 
 type Props = {
@@ -16,6 +17,7 @@ type Props = {
   easing: ?func,
   animationDuration: ?number,
   tooltipComponent: ?React$Component,
+  stepNumberComponent: ?React$Component,
   overlay: 'svg' | 'view',
   animated: boolean,
   androidStatusBarVisible: boolean,
@@ -39,6 +41,7 @@ class CopilotModal extends Component<Props, State> {
     easing: Easing.elastic(0.7),
     animationDuration: 400,
     tooltipComponent: Tooltip,
+    stepNumberComponent: StepNumber,
     // If react-native-svg native module was avaialble, use svg as the default overlay component
     overlay: typeof NativeModules.RNSVGSvgViewManager !== 'undefined' ? 'svg' : 'view',
     // If animated was not specified, rely on the default overlay type
@@ -235,20 +238,25 @@ class CopilotModal extends Component<Props, State> {
   }
 
   renderTooltip() {
-    const { tooltipComponent: TooltipComponent } = this.props;
+    const { tooltipComponent: TooltipComponent, stepNumberComponent: StepNumberComponent } = this.props;
 
     return [
       <Animated.View
         key="stepNumber"
         style={[
-          styles.stepNumber,
+          styles.stepNumberContainer,
           {
             left: this.state.animatedValues.stepNumberLeft,
             top: Animated.add(this.state.animatedValues.top, -STEP_NUMBER_RADIUS),
           },
         ]}
       >
-        <Text style={[styles.stepNumberText]}>{this.props.currentStepNumber}</Text>
+        <StepNumberComponent
+          isFirstStep={this.props.isFirstStep}
+          isLastStep={this.props.isLastStep}
+          currentStep={this.props.currentStep}
+          currentStepNumber={this.props.currentStepNumber}
+        />
       </Animated.View>,
       <Animated.View key="arrow" style={[styles.arrow, this.state.arrow]} />,
       <Animated.View key="tooltip" style={[styles.tooltip, this.state.tooltip]}>

src/components/StepNumber.js

@@ -0,0 +1,27 @@
+// @flow
+import React from 'react';
+import { View, Text } from 'react-native';
+
+import styles from './style';
+
+import type { Step } from '../types';
+
+type Props = {
+  isFirstStep: boolean,
+  isLastStep: boolean,
+  currentStep: Step,
+  currentStepNumber: number,
+};
+
+const StepNumber = ({
+  isFirstStep,
+  isLastStep,
+  currentStep,
+  currentStepNumber,
+}: Props) => (
+  <View style={styles.stepNumber}>
+    <Text style={[styles.stepNumberText]}>{currentStepNumber}</Text>
+  </View>
+);
+
+export default StepNumber;

src/components/style.js

@@ -36,18 +36,21 @@ export default StyleSheet.create({
   tooltipContainer: {
     flex: 1,
   },
-  stepNumber: {
+  stepNumberContainer: {
     position: 'absolute',
     width: STEP_NUMBER_DIAMETER,
     height: STEP_NUMBER_DIAMETER,
+    overflow: 'hidden',
+    zIndex: ZINDEX + 1,
+  },
+  stepNumber: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
     borderWidth: 2,
     borderRadius: STEP_NUMBER_RADIUS,
     borderColor: '#FFFFFF',
     backgroundColor: '#27ae60',
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: ZINDEX + 1,
   },
   stepNumberText: {
     fontSize: 10,

src/hocs/copilot.js

@@ -29,6 +29,7 @@ type State = {
 const copilot = ({
   overlay,
   tooltipComponent,
+  stepNumberComponent,
   animated,
   androidStatusBarVisible,
 } = {}) =>
@@ -160,7 +161,7 @@ const copilot = ({
 
       componentWillUnmount() {
         this.mounted = false;
-      };
+      }
 
       render() {
         return (
@@ -181,6 +182,7 @@ const copilot = ({
               isLastStep={this.isLastStep()}
               currentStepNumber={this.getStepNumber()}
               currentStep={this.state.currentStep}
+              stepNumberComponent={stepNumberComponent}
               tooltipComponent={tooltipComponent}
               overlay={overlay}
               animated={animated}