From cd30168b5d5437f752b04e713d833e4013d82e7f Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 19 Aug 2019 15:40:41 +0300 Subject: [PATCH 1/5] Adding borderRadius prop --- src/components/featureHighlight/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/featureHighlight/index.js b/src/components/featureHighlight/index.js index 3e2ce49b95..be8e7c99d6 100644 --- a/src/components/featureHighlight/index.js +++ b/src/components/featureHighlight/index.js @@ -95,6 +95,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') */ @@ -255,7 +259,7 @@ class FeatureHighlight extends BaseComponent { if (contentTopPosition === undefined) return null; const {testID, visible, highlightFrame, overlayColor, borderColor, borderWidth, minimumRectSize, innerPadding, - onBackgroundPress} = this.getThemeProps(); + onBackgroundPress, borderRadius} = this.getThemeProps(); return ( From 3f325a0b44dabd45f2616d0162aa4a6ece1d8419 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 19 Aug 2019 16:11:59 +0300 Subject: [PATCH 2/5] Adding headline prop --- .../FeatureHighlightScreen.js | 12 ++++++--- src/components/featureHighlight/index.js | 27 ++++++++++++++++--- 2 files changed, 33 insertions(+), 6 deletions(-) diff --git a/demo/src/screens/componentScreens/FeatureHighlightScreen.js b/demo/src/screens/componentScreens/FeatureHighlightScreen.js index b809139f15..60d1feaa58 100644 --- a/demo/src/screens/componentScreens/FeatureHighlightScreen.js +++ b/demo/src/screens/componentScreens/FeatureHighlightScreen.js @@ -8,7 +8,7 @@ const titles = [ 'Title number three', 'Title number four', 'Title number five', - 'Title number six', + 'Only a title and headline', ]; const messages = [ 'Important notifications appear right on your clubs and groups. Tap them to get more information about the most' + @@ -19,8 +19,10 @@ 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.', + undefined, +]; +const headlines = [ + 'Welcome to uilib demo!' ]; class FeatureHighlightScreen extends Component { @@ -74,16 +76,20 @@ class FeatureHighlightScreen extends Component { renderHighlighterOverlay() { const {showFTE, currentTargetIndex} = this.state; + const headline = currentTargetIndex === 5 ? headlines[0] : undefined; + return ( this.targets[currentTargetIndex]} // highlightFrame={{x: 30, y: 70, width: 150, height: 30}} // highlightFrame={{x: 160, y: 336, width: 150, height: 56}} + // borderRadius={4} /> ); } diff --git a/src/components/featureHighlight/index.js b/src/components/featureHighlight/index.js index be8e7c99d6..ad8d5ffd1e 100644 --- a/src/components/featureHighlight/index.js +++ b/src/components/featureHighlight/index.js @@ -63,6 +63,10 @@ class FeatureHighlight extends BaseComponent { * Message to be displayed */ message: PropTypes.string, + /** + * The headline to be displayed above the title + */ + headline: PropTypes.string, /** * Title's max number of lines */ @@ -220,7 +224,7 @@ class FeatureHighlight extends BaseComponent { } renderHighlightMessage() { - const {title, message, confirmButtonProps, textColor, titleNumberOfLines, messageNumberOfLines} + const {title, message, headline, confirmButtonProps, textColor, titleNumberOfLines, messageNumberOfLines} = this.getThemeProps(); const color = textColor || defaultTextColor; @@ -230,8 +234,23 @@ class FeatureHighlight extends BaseComponent { onLayout={this.getComponentDimensions} pointerEvents="box-none" > + {headline && ( + + {headline} + + )} {title && ( - + {title} )} @@ -291,7 +310,6 @@ const styles = StyleSheet.create({ alignItems: 'flex-start' }, title: { - marginBottom: titleBottomMargin, lineHeight: Typography.text60.lineHeight, fontWeight: '900' }, @@ -300,6 +318,9 @@ const styles = StyleSheet.create({ ...Typography.text70, lineHeight: messageLineHeight }, + headline: { + marginBottom: 8 + }, touchableOverlay: { ...StyleSheet.absoluteFillObject } From b4b36369e8875a8a9d2504a0b22cbe58cddf8aaf Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 19 Aug 2019 18:08:16 +0300 Subject: [PATCH 3/5] Adding pageControlProps prop --- .../FeatureHighlightScreen.js | 47 +++++++++++++------ src/components/featureHighlight/index.js | 15 +++++- 2 files changed, 45 insertions(+), 17 deletions(-) diff --git a/demo/src/screens/componentScreens/FeatureHighlightScreen.js b/demo/src/screens/componentScreens/FeatureHighlightScreen.js index 60d1feaa58..620dc8eb59 100644 --- a/demo/src/screens/componentScreens/FeatureHighlightScreen.js +++ b/demo/src/screens/componentScreens/FeatureHighlightScreen.js @@ -1,6 +1,7 @@ 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, View, Text, Button, FeatureHighlight} from 'react-native-ui-lib'; // eslint-disable-line + const titles = [ 'Get Notified', @@ -8,7 +9,7 @@ const titles = [ 'Title number three', 'Title number four', 'Title number five', - 'Only a title and headline', + 'Only a title and headline' ]; const messages = [ 'Important notifications appear right on your clubs and groups. Tap them to get more information about the most' + @@ -19,7 +20,7 @@ const messages = [ ' warning about it', 'Very short message', 'Short message with information about the below highlighted feature', - undefined, + undefined ]; const headlines = [ 'Welcome to uilib demo!' @@ -32,14 +33,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() { @@ -49,11 +46,11 @@ class FeatureHighlightScreen extends Component { }, 1000); } - closeHighlight() { + closeHighlight = () => { this.setState({showFTE: false}); } - showHighlight() { + showHighlight = () => { this.setState({showFTE: true}); } @@ -63,33 +60,53 @@ 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 headline = currentTargetIndex === 5 ? headlines[0] : undefined; + const lastPage = titles.length - 1; return ( this.targets[currentTargetIndex]} // highlightFrame={{x: 30, y: 70, width: 150, height: 30}} // highlightFrame={{x: 160, y: 336, width: 150, height: 56}} // borderRadius={4} + pageControlProps={currentTargetIndex < lastPage ? this.getPageControlProps() : undefined} /> ); } diff --git a/src/components/featureHighlight/index.js b/src/components/featureHighlight/index.js index ad8d5ffd1e..4c038108c3 100644 --- a/src/components/featureHighlight/index.js +++ b/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'; @@ -113,7 +114,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) { @@ -278,7 +283,7 @@ class FeatureHighlight extends BaseComponent { if (contentTopPosition === undefined) return null; const {testID, visible, highlightFrame, overlayColor, borderColor, borderWidth, minimumRectSize, innerPadding, - onBackgroundPress, borderRadius} = this.getThemeProps(); + onBackgroundPress, borderRadius, pageControlProps} = this.getThemeProps(); return ( + {pageControlProps ? + + + + : + } {this.renderHighlightMessage()} From 7fc458e81608f63429fa4345161e45b623938210 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Wed, 21 Aug 2019 09:23:11 +0300 Subject: [PATCH 4/5] adding borderRadius example --- demo/src/screens/componentScreens/FeatureHighlightScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/src/screens/componentScreens/FeatureHighlightScreen.js b/demo/src/screens/componentScreens/FeatureHighlightScreen.js index 620dc8eb59..80c50a7955 100644 --- a/demo/src/screens/componentScreens/FeatureHighlightScreen.js +++ b/demo/src/screens/componentScreens/FeatureHighlightScreen.js @@ -105,7 +105,7 @@ class FeatureHighlightScreen extends Component { getTarget={() => this.targets[currentTargetIndex]} // highlightFrame={{x: 30, y: 70, width: 150, height: 30}} // highlightFrame={{x: 160, y: 336, width: 150, height: 56}} - // borderRadius={4} + borderRadius={currentTargetIndex === 2 ? 4 : undefined} pageControlProps={currentTargetIndex < lastPage ? this.getPageControlProps() : undefined} /> ); From a2a743dbc5c039a3e8887a32768cebcbe0a51e2e Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Thu, 22 Aug 2019 11:58:33 +0300 Subject: [PATCH 5/5] removing headline prop and adding titleStyle and messageStyle props --- .../FeatureHighlightScreen.js | 14 ++++---- src/components/featureHighlight/index.js | 33 +++++++++++-------- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/demo/src/screens/componentScreens/FeatureHighlightScreen.js b/demo/src/screens/componentScreens/FeatureHighlightScreen.js index 80c50a7955..fc707c57c7 100644 --- a/demo/src/screens/componentScreens/FeatureHighlightScreen.js +++ b/demo/src/screens/componentScreens/FeatureHighlightScreen.js @@ -1,6 +1,6 @@ import _ from 'lodash'; import React, {Component} from 'react'; -import {Colors, View, Text, Button, 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 = [ @@ -9,7 +9,7 @@ const titles = [ 'Title number three', 'Title number four', 'Title number five', - 'Only a title and headline' + 'Welcome to Uilib demo!' ]; const messages = [ 'Important notifications appear right on your clubs and groups. Tap them to get more information about the most' + @@ -20,10 +20,7 @@ const messages = [ ' warning about it', 'Very short message', 'Short message with information about the below highlighted feature', - undefined -]; -const headlines = [ - 'Welcome to uilib demo!' + 'Here is where you can view demos of all Uilib components' ]; class FeatureHighlightScreen extends Component { @@ -99,13 +96,14 @@ class FeatureHighlightScreen extends Component { visible={showFTE} title={titles[currentTargetIndex]} message={messages[currentTargetIndex]} - headline={currentTargetIndex === lastPage ? headlines[0] : undefined} + 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 === 2 ? 4 : undefined} + borderRadius={currentTargetIndex === 4 ? 4 : undefined} pageControlProps={currentTargetIndex < lastPage ? this.getPageControlProps() : undefined} /> ); diff --git a/src/components/featureHighlight/index.js b/src/components/featureHighlight/index.js index 4c038108c3..1f94ce4ff1 100644 --- a/src/components/featureHighlight/index.js +++ b/src/components/featureHighlight/index.js @@ -65,9 +65,13 @@ class FeatureHighlight extends BaseComponent { */ message: PropTypes.string, /** - * The headline to be displayed above the title + * Title text style */ - headline: PropTypes.string, + 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 */ @@ -229,7 +233,7 @@ class FeatureHighlight extends BaseComponent { } renderHighlightMessage() { - const {title, message, headline, confirmButtonProps, textColor, titleNumberOfLines, messageNumberOfLines} + const {title, message, titleStyle, messageStyle, confirmButtonProps, textColor, titleNumberOfLines, messageNumberOfLines} = this.getThemeProps(); const color = textColor || defaultTextColor; @@ -239,19 +243,15 @@ class FeatureHighlight extends BaseComponent { onLayout={this.getComponentDimensions} pointerEvents="box-none" > - {headline && ( - - {headline} - - )} {title && ( )} {message && ( - + {message} )} @@ -329,9 +337,6 @@ const styles = StyleSheet.create({ ...Typography.text70, lineHeight: messageLineHeight }, - headline: { - marginBottom: 8 - }, touchableOverlay: { ...StyleSheet.absoluteFillObject }