Skip to content

Commit c54581c

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents e027f83 + ec3b833 commit c54581c

File tree

24 files changed

+667
-156
lines changed

24 files changed

+667
-156
lines changed

‎demo/src/screens/MenuStructure.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const navigationData = {
3131
{title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
3232
{title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
3333
{title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
34+
{title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
3435
{title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
3536
{title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
3637
{title: 'Shared Transition', tags: 'shared transition element', screen: 'unicorn.components.SharedTransitionScreen'},

‎demo/src/screens/componentScreens/FeatureHighlightScreen.js

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
3-
import {Constants, View, Text, Button, Image, FeatureHighlight} from 'react-native-ui-lib'; // eslint-disable-line
3+
import {Colors, Typography, View, Text, Button, FeatureHighlight} from 'react-native-ui-lib'; // eslint-disable-line
4+
45

56
const titles = [
67
'Get Notified',
78
'Title two is a long title that will not get cut by default, but can be limited',
89
'Title number three',
910
'Title number four',
1011
'Title number five',
11-
'Title number six',
12+
'Welcome to Uilib demo!'
1213
];
1314
const messages = [
1415
'Important notifications appear right on your clubs and groups. Tap them to get more information about the most' +
@@ -19,8 +20,7 @@ const messages = [
1920
' warning about it',
2021
'Very short message',
2122
'Short message with information about the below highlighted feature',
22-
'Important notifications appear right on your clubs and groups. Tap them to get more information about the most' +
23-
'important things that you should pay attention to.',
23+
'Here is where you can view demos of all Uilib components'
2424
];
2525

2626
class FeatureHighlightScreen extends Component {
@@ -30,14 +30,10 @@ class FeatureHighlightScreen extends Component {
3030

3131
this.state = {
3232
showFTE: false,
33-
currentTargetIndex: 0,
33+
currentTargetIndex: 0
3434
};
3535

3636
this.targets = {};
37-
38-
this.closeHighlight = this.closeHighlight.bind(this);
39-
this.showHighlight = this.showHighlight.bind(this);
40-
this.moveNext = this.moveNext.bind(this);
4137
}
4238

4339
componentDidMount() {
@@ -47,11 +43,11 @@ class FeatureHighlightScreen extends Component {
4743
}, 1000);
4844
}
4945

50-
closeHighlight() {
46+
closeHighlight = () => {
5147
this.setState({showFTE: false});
5248
}
5349

54-
showHighlight() {
50+
showHighlight = () => {
5551
this.setState({showFTE: true});
5652
}
5753

@@ -61,29 +57,54 @@ class FeatureHighlightScreen extends Component {
6157
}
6258
}
6359

64-
moveNext() {
60+
moveNext = () => {
6561
const {currentTargetIndex} = this.state;
6662
const newTargetIndex = currentTargetIndex + 1;
6763

68-
if (newTargetIndex < _.size(this.targets)) {
69-
this.setState({currentTargetIndex: newTargetIndex});
64+
this.moveToPage(newTargetIndex);
65+
}
66+
67+
moveToPage(index) {
68+
if (index < _.size(this.targets)) {
69+
this.setState({currentTargetIndex: index});
7070
} else {
7171
this.closeHighlight();
7272
}
7373
}
7474

75+
getPageControlProps() {
76+
return {
77+
numOfPages: titles.length,
78+
currentPage: this.state.currentTargetIndex,
79+
onPagePress: this.onPagePress,
80+
color: Colors.dark30,
81+
inactiveColor: Colors.dark80,
82+
size: 8
83+
};
84+
}
85+
86+
onPagePress = (index) => {
87+
this.moveToPage(index);
88+
}
89+
7590
renderHighlighterOverlay() {
7691
const {showFTE, currentTargetIndex} = this.state;
92+
const lastPage = titles.length - 1;
93+
7794
return (
7895
<FeatureHighlight
7996
visible={showFTE}
8097
title={titles[currentTargetIndex]}
8198
message={messages[currentTargetIndex]}
99+
titleStyle={currentTargetIndex === lastPage ? {...Typography.text70} : undefined}
100+
messageStyle={currentTargetIndex === lastPage ? {...Typography.text60, fontWeight: '900', lineHeight: 28} : undefined}
82101
confirmButtonProps={{label: 'Got It', onPress: this.moveNext}}
83102
onBackgroundPress={this.closeHighlight}
84103
getTarget={() => this.targets[currentTargetIndex]}
85104
// highlightFrame={{x: 30, y: 70, width: 150, height: 30}}
86105
// highlightFrame={{x: 160, y: 336, width: 150, height: 56}}
106+
borderRadius={currentTargetIndex === 4 ? 4 : undefined}
107+
pageControlProps={currentTargetIndex < lastPage ? this.getPageControlProps() : undefined}
87108
/>
88109
);
89110
}

‎demo/src/screens/componentScreens/InputsScreen.js

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {KeyboardAwareInsetsView} from 'react-native-keyboard-tracking-view';
77
const richText = require('../../assets/icons/richText.png');
88
const dropDown = require('../../assets/icons/chevronDown.png');
99
const star = require('../../assets/icons/star.png');
10-
1110
const LONG_TEXT =
1211
'Concept, edition and design direction for the editorial piece “La Forma Bruta” by the photographer' +
1312
'Martín Bollati. In this piece';
@@ -29,19 +28,10 @@ export default class InputsScreen extends Component {
2928
this.state = {
3029
error: '',
3130
topError: false,
32-
customExpandableValue: 'Custom Expandable',
31+
customExpandableValue: 'Custom Expandable'
3332
};
3433
}
3534

36-
onButtonPressed = () => {
37-
const {topError} = this.state;
38-
this.setState({topError: !topError});
39-
}
40-
41-
onPressInfo = () => {
42-
Alert.alert('Info button press');
43-
}
44-
4535
onChangeText = (text) => {
4636
let message = '';
4737
if (text === '') {
@@ -53,6 +43,37 @@ export default class InputsScreen extends Component {
5343
this.setState({error: message});
5444
}
5545

46+
onButtonPressed = () => {
47+
const {topError} = this.state;
48+
this.setState({topError: !topError});
49+
}
50+
51+
onPressInfo = () => {
52+
Alert.alert('Info button pressed');
53+
}
54+
55+
onPress = () => {
56+
this.setState({customExpandableValue: 'New Value'}, () => {
57+
this.input.toggleExpandableModal(false);
58+
});
59+
}
60+
61+
renderExpandable = () => {
62+
return (
63+
<Modal visible animationType={'slide'}>
64+
<View flex bg-orange70 center>
65+
<Text marginB-20 text50>
66+
Do Whatever you want here
67+
</Text>
68+
<Button
69+
label="Close Me"
70+
onPress={this.onPress}
71+
/>
72+
</View>
73+
</Modal>
74+
);
75+
}
76+
5677
render() {
5778
const {topError} = this.state;
5879
const state = topError ? 'On' : 'Off';
@@ -81,9 +102,10 @@ export default class InputsScreen extends Component {
81102
text70
82103
containerStyle={{marginBottom: INPUT_SPACING}}
83104
floatingPlaceholder
84-
placeholder="FloatingPlaceholder & error"
105+
placeholder="FloatingPlaceholder & validator"
85106
onChangeText={this.onChangeText}
86-
error={this.state.error}
107+
validate={'required'}
108+
errorMessage={'Required field!'}
87109
useTopErrors={this.state.topError}
88110
floatOnFocus
89111
/>
@@ -212,25 +234,7 @@ export default class InputsScreen extends Component {
212234
placeholder="placeholder"
213235
expandable
214236
value={this.state.customExpandableValue}
215-
renderExpandable={() => {
216-
return (
217-
<Modal visible animationType={'slide'}>
218-
<View flex bg-orange70 center>
219-
<Text marginB-20 text50>
220-
Do Whatever you want here
221-
</Text>
222-
<Button
223-
label="Close Me"
224-
onPress={() => {
225-
this.setState({customExpandableValue: 'New Value'}, () => {
226-
this.input.toggleExpandableModal(false);
227-
});
228-
}}
229-
/>
230-
</View>
231-
</Modal>
232-
);
233-
}}
237+
renderExpandable={this.renderExpandable}
234238
/>
235239

236240
<TextField
@@ -319,7 +323,7 @@ export default class InputsScreen extends Component {
319323
hideUnderline
320324
/>
321325
</ScrollView>
322-
<KeyboardAwareInsetsView />
326+
<KeyboardAwareInsetsView/>
323327
</View>
324328
);
325329
}
@@ -329,13 +333,13 @@ const styles = StyleSheet.create({
329333
container: {
330334
flexDirection: 'column',
331335
justifyContent: 'flex-start',
332-
padding: 25,
336+
padding: 25
333337
},
334338
title: {
335-
...Typography.text20,
339+
...Typography.text20
336340
},
337341
header: {
338342
...Typography.text60,
339-
marginVertical: 20,
340-
},
343+
marginVertical: 20
344+
}
341345
});

‎demo/src/screens/componentScreens/OverlaysScreen.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React, {Component} from 'react';
2+
import {StyleSheet, ScrollView} from 'react-native';
3+
import {View, Text, Image} from 'react-native-ui-lib'; // eslint-disable-line
4+
5+
6+
const image = require('../../assets/images/card-example.jpg');
7+
// const uri = 'https://static.pexels.com/photos/50721/pencils-crayons-colourful-rainbow-50721.jpeg';
8+
// const icon = require('../../assets/icons/tags.png');
9+
10+
export default class OverlaysScreen extends Component {
11+
12+
render() {
13+
return (
14+
<ScrollView showsVerticalScrollIndicator={false}>
15+
<View flex padding-20>
16+
<Text text40 marginB-40>Image Overlays</Text>
17+
<View row>
18+
<View centerH>
19+
<Text dark10>VERTICAL</Text>
20+
<Image
21+
style={styles.image}
22+
source={image}
23+
overlayType={Image.overlayTypes.VERTICAL}
24+
/>
25+
</View>
26+
<View centerH>
27+
<Text dark10>SOLID</Text>
28+
<Image
29+
style={styles.image}
30+
source={image}
31+
overlayType={Image.overlayTypes.SOLID}
32+
/>
33+
</View>
34+
</View>
35+
<View row>
36+
<View centerH>
37+
<Text dark10>TOP</Text>
38+
<Image
39+
style={styles.image}
40+
source={image}
41+
overlayType={Image.overlayTypes.TOP}
42+
/>
43+
</View>
44+
<View centerH>
45+
<Text dark10>BOTTOM</Text>
46+
<Image
47+
style={styles.image}
48+
source={image}
49+
overlayType={Image.overlayTypes.BOTTOM}
50+
/>
51+
</View>
52+
</View>
53+
</View>
54+
{/* <Image
55+
source={icon}
56+
overlayType={Image.overlayTypes.VERTICAL}
57+
style={{margin: 10}}
58+
/> */}
59+
<Image
60+
source={image}
61+
overlayType={Image.overlayTypes.VERTICAL}
62+
/>
63+
</ScrollView>
64+
);
65+
}
66+
}
67+
68+
const styles = StyleSheet.create({
69+
image: {
70+
width: 150,
71+
height: 150,
72+
margin: 10
73+
}
74+
});

0 commit comments

Comments
 (0)