Skip to content

Commit de0b8d6

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents 7ac83c9 + 140e0f0 commit de0b8d6

27 files changed

+557
-103
lines changed

‎demo/src/screens/MainScreen.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export default class MainScreen extends Component {
4444
const navigationStyle = this.getSearchNavigationStyle();
4545
navigationStyle.topBar.rightButtons.push({
4646
id: 'uilib.settingsButton',
47+
testID: 'uilib.settingsButton',
4748
enabled: true,
4849
icon: Assets.icons.settings,
4950
});
@@ -73,6 +74,7 @@ export default class MainScreen extends Component {
7374
rightButtons: [
7475
{
7576
id: 'uilib.searchButton',
77+
testID: 'uilib.searchButton',
7678
enabled: true,
7779
icon: Assets.icons.search,
7880
},
@@ -199,7 +201,7 @@ export default class MainScreen extends Component {
199201
<TextField
200202
ref={r => (this.input = r)}
201203
value={this.state.filterText}
202-
placeholder="Search your component.."
204+
placeholder="Search for your component..."
203205
onChangeText={this.filterExplorerScreens}
204206
onBlur={this.onSearchBoxBlur}
205207
style={{
@@ -211,6 +213,7 @@ export default class MainScreen extends Component {
211213
hideUnderline
212214
/>
213215
<Button
216+
testID={'SearchButton'}
214217
style={{marginRight: 16, marginTop: Constants.isIOS ? Constants.statusBarHeight : 0}}
215218
iconSource={Assets.icons.search}
216219
size={'small'}

‎demo/src/screens/MenuStructure.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const navigationData = {
3737
{title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
3838
{title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'},
3939
{title: 'Shared Transition', tags: 'shared transition element', screen: 'unicorn.components.SharedTransitionScreen'},
40+
{title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
4041
{title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
4142
{title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'},
4243
{title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},

‎demo/src/screens/PlaygroundScreen.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1+
import _ from 'lodash';
12
import React, {Component} from 'react';
23
import {StyleSheet} from 'react-native';
3-
import {Colors, View, Text} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {View, Text} from 'react-native-ui-lib'; //eslint-disable-line
45

5-
export default class PlaygroundScreen extends Component {
6-
7-
constructor(props) {
8-
super(props);
9-
this.state = {};
10-
}
116

12-
componentDidMount() {}
7+
export default class PlaygroundScreen extends Component {
138

149
render() {
1510
return (
16-
<View flex bg-dark80 center style={styles.container}>
17-
<Text>Unicorn Playground Screen</Text>
11+
<View center bg-dark80 flex>
12+
<Text text50>Playground Screen</Text>
1813
</View>
1914
);
2015
}

‎demo/src/screens/SettingsScreen.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ class SettingsScreen extends Component {
7171
Set default screen to open on app startup
7272
</Text>
7373
<Picker
74+
testID={'uilib.defaultScreenPicker'}
7475
placeholder="Pick default screen..."
7576
showSearch
7677
value={defaultScreen}

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {StyleSheet, ScrollView} from 'react-native';
4-
import {Constants, Colors, View, Card, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {Constants, Colors, View, Card, Button, Text, Image} from 'react-native-ui-lib'; // eslint-disable-line
55
import posts from '../../data/posts';
66

7+
78
const featureIcon = require('../../assets/icons/star.png');
89
const shareIcon = require('../../assets/icons/share.png');
910
const cardImage = require('../../assets/images/card-example.jpg');
@@ -12,18 +13,19 @@ const cardImage2 = require('../../assets/images/empty-state.jpg');
1213
export default class CardsScreen extends Component {
1314
state = {
1415
selected1: true,
15-
selected2: true,
16+
selected2: true
1617
};
1718

1819
render() {
1920
const {selected1, selected2} = this.state;
21+
2022
return (
2123
<View>
2224
<Image
2325
style={StyleSheet.absoluteFillObject}
2426
source={{
2527
uri:
26-
'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
28+
'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
2729
}}
2830
/>
2931

@@ -59,7 +61,7 @@ export default class CardsScreen extends Component {
5961
activeOpacity={1}
6062
marginR-20
6163
>
62-
<Card.Image height={'100%'} imageSource={cardImage} />
64+
<Card.Image height={'100%'} imageSource={cardImage}/>
6365
</Card>
6466
<Card
6567
height={120}
@@ -74,7 +76,7 @@ export default class CardsScreen extends Component {
7476
borderWidth: 3,
7577
}}
7678
>
77-
<Card.Image height={'100%'} imageSource={cardImage} />
79+
<Card.Image height={'100%'} imageSource={cardImage}/>
7880
</Card>
7981
</View>
8082

@@ -110,16 +112,15 @@ export default class CardsScreen extends Component {
110112
)}
111113
</View>
112114

113-
<Card row height={160} style={{marginBottom: 15}} onPress={() => {}} enableBlur>
114-
<Card.Image width={115} imageSource={cardImage} />
115+
<Card row height={160} style={{marginBottom: 15}} onPress={() => {}} enableBlur borderRadius={0}>
116+
<Card.Image width={115} imageSource={cardImage}/>
115117
<View padding-20 flex>
116118
<Text text70 dark10>
117119
You’re Invited!
118120
</Text>
119121
<Text text80 dark10>
120122
222 Join Old The Town Barbershop Official Store. Download the Wix app to...
121123
</Text>
122-
123124
<Text text90 dark50>
124125
wix.to/A465c
125126
</Text>
@@ -131,36 +132,34 @@ export default class CardsScreen extends Component {
131132
<Text text70 dark10>
132133
You’re Invited!
133134
</Text>
134-
135135
<Text text80 dark10>
136136
Join Old The Town Barbershop Official Store. Download the Wix app to...
137137
</Text>
138-
139138
<Text text90 dark50>
140139
wix.to/A465c
141140
</Text>
142141
</View>
143-
<Card.Image width={115} imageSource={cardImage} />
142+
<Card.Image width={115} imageSource={cardImage}/>
144143
</Card>
145144

146145
<Card style={{marginBottom: 15}} onPress={() => {}}>
147146
<View padding-20>
148147
<Text text70 dark10>
149148
You’re Invited!
150149
</Text>
151-
152150
<Text text90 dark50>
153151
join now
154152
</Text>
155153
</View>
156-
<Card.Image height={120} imageSource={cardImage2} />
154+
<Card.Image height={120} imageSource={cardImage2}/>
157155
</Card>
158156

159157
{_.map(posts, (post, i) => {
160158
const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
159+
161160
return (
162161
<Card key={i} style={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
163-
<Card.Image height={160} imageSource={post.coverImage} />
162+
<Card.Image height={160} imageSource={post.coverImage}/>
164163

165164
<View padding-20>
166165
<Text text40 color={Colors.dark10}>
@@ -182,8 +181,8 @@ export default class CardsScreen extends Component {
182181
{post.likes} Likes
183182
</Text>
184183
<View row right>
185-
<Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature" />
186-
<Button text90 link iconSource={shareIcon} label="Share" />
184+
<Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature"/>
185+
<Button text90 link iconSource={shareIcon} label="Share"/>
187186
</View>
188187
</View>
189188
</View>

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

Lines changed: 52 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,38 +14,43 @@ import {
1414
} from 'react-native-ui-lib'; // eslint-disable-line
1515

1616
export default class DialogScreen extends Component {
17-
static colors = [
18-
{value: Colors.red10, label: 'Red10'},
19-
{value: Colors.red30, label: 'Red30'},
20-
{value: Colors.red50, label: 'Red50'},
21-
{value: Colors.red70, label: 'Red70'},
22-
{value: Colors.blue10, label: 'Blue10'},
23-
{value: Colors.blue30, label: 'Blue30'},
24-
{value: Colors.blue50, label: 'Blue50'},
25-
{value: Colors.blue70, label: 'Blue70'},
26-
{value: Colors.purple10, label: 'Purple10'},
27-
{value: Colors.purple30, label: 'Purple30'},
28-
{value: Colors.purple50, label: 'Purple50'},
29-
{value: Colors.purple70, label: 'Purple70'},
30-
{value: Colors.green10, label: 'Green10'},
31-
{value: Colors.green30, label: 'Green30'},
32-
{value: Colors.green50, label: 'Green50'},
33-
{value: Colors.green70, label: 'Green70'},
34-
{value: Colors.yellow10, label: 'Yellow10'},
35-
{value: Colors.yellow30, label: 'Yellow30'},
36-
{value: Colors.yellow50, label: 'Yellow50'},
37-
{value: Colors.yellow70, label: 'Yellow70'}
38-
];
39-
4017
constructor(props) {
4118
super(props);
4219

20+
this.content = {};
21+
4322
this.SCROLL_TYPE = {
4423
NONE: 'none',
4524
VERTICAL: 'vertical',
4625
HORIZONTAL: 'horizontal'
4726
};
4827

28+
this.pannableTitle = {title: 'This is a pannable header Dialog'};
29+
this.title = 'This is a Dialog';
30+
this.supportedOrientations = ['portrait', 'landscape'];
31+
this.colors = [
32+
{value: Colors.red10, label: 'Red10'},
33+
{value: Colors.red30, label: 'Red30'},
34+
{value: Colors.red50, label: 'Red50'},
35+
{value: Colors.red70, label: 'Red70'},
36+
{value: Colors.blue10, label: 'Blue10'},
37+
{value: Colors.blue30, label: 'Blue30'},
38+
{value: Colors.blue50, label: 'Blue50'},
39+
{value: Colors.blue70, label: 'Blue70'},
40+
{value: Colors.purple10, label: 'Purple10'},
41+
{value: Colors.purple30, label: 'Purple30'},
42+
{value: Colors.purple50, label: 'Purple50'},
43+
{value: Colors.purple70, label: 'Purple70'},
44+
{value: Colors.green10, label: 'Green10'},
45+
{value: Colors.green30, label: 'Green30'},
46+
{value: Colors.green50, label: 'Green50'},
47+
{value: Colors.green70, label: 'Green70'},
48+
{value: Colors.yellow10, label: 'Yellow10'},
49+
{value: Colors.yellow30, label: 'Yellow30'},
50+
{value: Colors.yellow50, label: 'Yellow50'},
51+
{value: Colors.yellow70, label: 'Yellow70'}
52+
];
53+
4954
this.state = {
5055
panDirection: PanningProvider.Directions.DOWN,
5156
position: 'bottom',
@@ -61,15 +66,21 @@ export default class DialogScreen extends Component {
6166
};
6267

6368
setPanDirection = panDirection => {
64-
this.setState({panDirection});
69+
if (panDirection !== this.state.panDirection) {
70+
this.setState({panDirection});
71+
}
6572
};
6673

6774
setPosition = position => {
68-
this.setState({position});
75+
if (position !== this.state.position) {
76+
this.setState({position});
77+
}
6978
};
7079

7180
setScroll = scroll => {
72-
this.setState({scroll});
81+
if (scroll !== this.state.scroll) {
82+
this.setState({scroll});
83+
}
7384
};
7485

7586
toggleShowHeader = () => {
@@ -92,11 +103,6 @@ export default class DialogScreen extends Component {
92103
this.setState({showDialog: false});
93104
};
94105

95-
getTitle = () => {
96-
const {showHeader} = this.state;
97-
return showHeader ? 'This is a pannable header Dialog' : 'This is a Dialog';
98-
};
99-
100106
getWarning = () => {
101107
const {showHeader, scroll, panDirection} = this.state;
102108
if (!showHeader && scroll !== this.SCROLL_TYPE.NONE) {
@@ -151,7 +157,7 @@ Scroll: ${scroll}`;
151157
<FlatList
152158
showsVerticalScrollIndicator={false}
153159
style={styles.verticalScroll}
154-
data={DialogScreen.colors}
160+
data={this.colors}
155161
renderItem={this.renderVerticalItem}
156162
keyExtractor={this.keyExtractor}
157163
/>
@@ -168,7 +174,7 @@ Scroll: ${scroll}`;
168174
<FlatList
169175
horizontal
170176
showsHorizontalScrollIndicator={false}
171-
data={DialogScreen.colors}
177+
data={this.colors}
172178
renderItem={this.renderHorizontalItem}
173179
keyExtractor={this.keyExtractor}
174180
/>
@@ -183,6 +189,10 @@ Scroll: ${scroll}`;
183189

184190
renderContent = () => {
185191
const {scroll, showHeader} = this.state;
192+
if (this.content[scroll + showHeader]) {
193+
return this.content[scroll + showHeader];
194+
}
195+
186196
let content;
187197
switch (scroll) {
188198
case this.SCROLL_TYPE.VERTICAL:
@@ -197,16 +207,19 @@ Scroll: ${scroll}`;
197207
break;
198208
}
199209

200-
return (
210+
const data = (
201211
<View spread flex={scroll !== this.SCROLL_TYPE.NONE}>
202212
<View marginT-20 marginH-20>
203-
{!showHeader && <Text text50>{this.getTitle()}</Text>}
213+
{!showHeader && <Text text50>{this.title}</Text>}
204214
<Text marginT-20={!showHeader}>{this.getMessage()}</Text>
205215
{this.getWarning()}
206216
</View>
207217
{content}
208218
</View>
209219
);
220+
221+
this.content[scroll + showHeader] = data;
222+
return data;
210223
};
211224

212225
getDialogKey = height => {
@@ -228,12 +241,12 @@ Scroll: ${scroll}`;
228241
bottom={position === 'bottom'}
229242
height={height}
230243
panDirection={panDirection}
231-
title={this.getTitle()}
232-
style={[styles.dialog, isRounded && styles.roundedDialog]}
244+
containerStyle={isRounded ? styles.roundedDialog : styles.dialog}
233245
visible={showDialog}
234246
onDismiss={this.hideDialog}
235247
renderPannableHeader={renderPannableHeader}
236-
supportedOrientations={['portrait', 'landscape']}
248+
pannableHeaderProps={this.pannableTitle}
249+
supportedOrientations={this.supportedOrientations}
237250
>
238251
{this.renderContent()}
239252
</Dialog>
@@ -303,6 +316,7 @@ const styles = StyleSheet.create({
303316
backgroundColor: Colors.white
304317
},
305318
roundedDialog: {
319+
backgroundColor: Colors.white,
306320
marginBottom: Constants.isIphoneX ? 0 : 20,
307321
borderRadius: 12
308322
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export default class HintsScreen extends Component {
9999
)}
100100
</View>
101101

102-
<View padding-20 collapsabe={false}>
102+
<View padding-20 collapsable={false}>
103103
<RadioGroup
104104
row
105105
centerV

0 commit comments

Comments
 (0)