From f939d3e0db84f5163af098fa80533e0a1cf88223 Mon Sep 17 00:00:00 2001 From: Daniel Lang Date: Wed, 20 Jun 2018 21:40:56 +0200 Subject: [PATCH 1/6] exclude the StepNumber into its own component and made it replaceable via props --- src/components/CopilotModal.js | 14 +++++++++++--- src/components/StepNumber.js | 27 +++++++++++++++++++++++++++ src/components/style.js | 12 +++++++----- src/hocs/copilot.js | 4 +++- 4 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 src/components/StepNumber.js diff --git a/src/components/CopilotModal.js b/src/components/CopilotModal.js index 87ade491..616b0850 100644 --- a/src/components/CopilotModal.js +++ b/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 { 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 { } renderTooltip() { - const { tooltipComponent: TooltipComponent } = this.props; + const { tooltipComponent: TooltipComponent, stepNumberComponent: StepNumberComponent } = this.props; return [ - {this.props.currentStepNumber} + , , diff --git a/src/components/StepNumber.js b/src/components/StepNumber.js new file mode 100644 index 00000000..b16e5538 --- /dev/null +++ b/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) => ( + + {currentStepNumber} + +); + +export default StepNumber; diff --git a/src/components/style.js b/src/components/style.js index c3286619..6fb48cb1 100644 --- a/src/components/style.js +++ b/src/components/style.js @@ -36,19 +36,21 @@ export default StyleSheet.create({ tooltipContainer: { flex: 1, }, - stepNumber: { + stepNumberContainer: { position: 'absolute', width: STEP_NUMBER_DIAMETER, height: STEP_NUMBER_DIAMETER, - borderWidth: 2, - borderRadius: STEP_NUMBER_RADIUS, - borderColor: '#FFFFFF', - backgroundColor: '#27ae60', overflow: 'hidden', alignItems: 'center', justifyContent: 'center', zIndex: ZINDEX + 1, }, + stepNumber: { + borderWidth: 2, + borderRadius: STEP_NUMBER_RADIUS, + borderColor: '#FFFFFF', + backgroundColor: '#27ae60', + }, stepNumberText: { fontSize: 10, backgroundColor: 'transparent', diff --git a/src/hocs/copilot.js b/src/hocs/copilot.js index 35e99ed6..fbcb6d08 100644 --- a/src/hocs/copilot.js +++ b/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} From e97dda0540c65fc879197fdd92fbbe8189463a14 Mon Sep 17 00:00:00 2001 From: Daniel Lang Date: Wed, 20 Jun 2018 21:45:21 +0200 Subject: [PATCH 2/6] fix styles --- src/components/style.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/style.js b/src/components/style.js index 6fb48cb1..ce9fdfcd 100644 --- a/src/components/style.js +++ b/src/components/style.js @@ -41,11 +41,12 @@ export default StyleSheet.create({ width: STEP_NUMBER_DIAMETER, height: STEP_NUMBER_DIAMETER, overflow: 'hidden', - alignItems: 'center', - justifyContent: 'center', zIndex: ZINDEX + 1, }, stepNumber: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', borderWidth: 2, borderRadius: STEP_NUMBER_RADIUS, borderColor: '#FFFFFF', From 452b6a811c18dddda84ca7c37c7bde5a92f11979 Mon Sep 17 00:00:00 2001 From: Daniel Lang Date: Wed, 20 Jun 2018 22:28:11 +0200 Subject: [PATCH 3/6] add documentation --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 5242a4ae..4aa75d11 100644 --- a/README.md +++ b/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. From 83db058c2b42e280020ce1baf94639f32687008f Mon Sep 17 00:00:00 2001 From: Mohamad Mohebifar Date: Fri, 22 Jun 2018 13:42:07 -0230 Subject: [PATCH 4/6] chore(package): Bump version to 2.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0825b56e..dc94334f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@okgrow/react-native-copilot", - "version": "2.2.6", + "version": "2.3.0", "description": "Make an interactive step by step tour guide for you react-native app", "main": "src/index.js", "private": false, From 7c5480d2397f085ac87c2bcb551dc4b54cef44c4 Mon Sep 17 00:00:00 2001 From: Mohamad Mohebifar Date: Fri, 22 Jun 2018 13:47:22 -0230 Subject: [PATCH 5/6] style: Fix lint errors --- src/components/CopilotModal.js | 7 +++++-- src/components/StepNumber.js | 8 -------- src/hocs/copilot.js | 16 ++++++++-------- 3 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/components/CopilotModal.js b/src/components/CopilotModal.js index 616b0850..3079d75d 100644 --- a/src/components/CopilotModal.js +++ b/src/components/CopilotModal.js @@ -1,6 +1,6 @@ // @flow import React, { Component } from 'react'; -import { Animated, Easing, View, Text, NativeModules, Modal, StatusBar, Platform } from 'react-native'; +import { Animated, Easing, View, 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'; @@ -238,7 +238,10 @@ class CopilotModal extends Component { } renderTooltip() { - const { tooltipComponent: TooltipComponent, stepNumberComponent: StepNumberComponent } = this.props; + const { + tooltipComponent: TooltipComponent, + stepNumberComponent: StepNumberComponent, + } = this.props; return [ ( diff --git a/src/hocs/copilot.js b/src/hocs/copilot.js index fbcb6d08..9007aeac 100644 --- a/src/hocs/copilot.js +++ b/src/hocs/copilot.js @@ -51,6 +51,14 @@ const copilot = ({ }; } + componentDidMount() { + this.mounted = true; + } + + componentWillUnmount() { + this.mounted = false; + } + getStepNumber = (step: ?Step = this.state.currentStep): number => getStepNumber(this.state.steps, step); @@ -155,14 +163,6 @@ const copilot = ({ }); } - componentDidMount() { - this.mounted = true; - } - - componentWillUnmount() { - this.mounted = false; - } - render() { return ( From 6ec88da85ff35f97378d298d076b5be3e7db603a Mon Sep 17 00:00:00 2001 From: yushimatenjin Date: Tue, 26 Jun 2018 14:27:05 +0900 Subject: [PATCH 6/6] git commit -m "fix typo. animated true=> animated: true --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4aa75d11..3c3f904a 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ You can specify the overlay when applying the `copilot` HOC: ```js copilot({ overlay: 'svg', // or 'view' - animated true, // or false + animated: true, // or false })(RootComponent); ```