Skip to content

Commit 2c92453

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents 001f9c6 + e6052e0 commit 2c92453

36 files changed

+939
-261
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,13 @@ Check out our [Docs](https://wix.github.io/react-native-ui-lib/). <br>
3030
Our [Discord Channel](https://discord.gg/2eW4g6Z)
3131

3232

33-
### Installing
33+
## Installing
3434

3535
See setup instructions [here](https://github.com/wix/react-native-ui-lib/wiki/SETUP).
3636

37+
#### New Major Version 5.0
38+
See [breaking changes](https://github.com/wix/react-native-ui-lib/wiki/V5-%5BBreaking-Change%5D)
39+
3740
#### For React Native >= 0.60.0
3841
please use `react-native-ui-lib@^4.0.0`
3942

‎demo/src/navigation.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {Navigation} from 'react-native-navigation';
2+
3+
export const pushScreen = ({componentId, name, title, passProps}) => {
4+
Navigation.push(componentId, {
5+
component: {
6+
name,
7+
passProps,
8+
options: {
9+
topBar: {
10+
title: {
11+
text: title
12+
}
13+
}
14+
}
15+
}
16+
});
17+
};
18+
19+
export const showModal = ({name, title, passProps}) => {
20+
Navigation.showModal({
21+
stack: {
22+
children: [
23+
{
24+
component: {
25+
name,
26+
passProps,
27+
options: {
28+
topBar: {
29+
title: {
30+
text: title
31+
}
32+
}
33+
}
34+
}
35+
}
36+
]
37+
}
38+
});
39+
};

‎demo/src/screens/MenuStructure.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const navigationData = {
3535
{title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
3636
{title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
3737
{title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
38+
{title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},
3839
{title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
3940
{title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'},
4041
{title: 'Shared Transition', tags: 'shared transition element', screen: 'unicorn.components.SharedTransitionScreen'},
@@ -51,7 +52,7 @@ export const navigationData = {
5152
{title: 'Checkbox', tags: 'checkbox toggle controls', screen: 'unicorn.components.CheckboxScreen'},
5253
{title: 'Color Picker', tags: 'color picker control', screen: 'unicorn.components.ColorPickerScreen'},
5354
{title: 'Color Swatch', tags: 'color swatch and palette', screen: 'unicorn.components.ColorSwatchScreen'},
54-
{title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.InputsScreen'},
55+
{title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.TextFieldScreen'},
5556
{title: 'Picker', tags: 'picker form', screen: 'unicorn.components.PickerScreen'},
5657
{title: 'DateTimePicker', tags: 'date time picker form', screen: 'unicorn.components.DateTimePickerScreen'},
5758
{title: 'RadioButton', tags: 'radio button group controls', screen: 'unicorn.components.RadioButtonScreen'},

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default class BadgesScreen extends Component {
1111
super(props);
1212

1313
this.state = {
14-
value: 42,
14+
value: 42
1515
};
1616
}
1717

@@ -31,7 +31,7 @@ export default class BadgesScreen extends Component {
3131
</Text>
3232
<View row center style={{alignItems: 'flex-start'}}>
3333
<View center paddingH-10>
34-
<Badge label={this.state.value.toString()} backgroundColor={Colors.red30} />
34+
<Badge label={this.state.value.toString()} backgroundColor={Colors.red30}/>
3535
<Badge
3636
label={this.state.value.toString()}
3737
containerStyle={{marginTop: BadgesSpace}}
@@ -47,15 +47,15 @@ export default class BadgesScreen extends Component {
4747
</View>
4848

4949
<View center paddingH-10>
50-
<Badge label={'9999'} labelFormatterLimit={3} />
50+
<Badge label={'9999'} labelFormatterLimit={3}/>
5151
<Badge
5252
label={'999'}
5353
labelFormatterLimit={2}
5454
containerStyle={{marginTop: BadgesSpace}}
5555
borderWidth={2}
5656
borderColor={Colors.white}
5757
/>
58-
<Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}} />
58+
<Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
5959
</View>
6060
</View>
6161

@@ -89,40 +89,40 @@ export default class BadgesScreen extends Component {
8989
style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
9090
>
9191
<Text text80 row>
92-
size={"{'pimpleSmall'}"}
92+
size={'{\'pimpleSmall\'}'}
9393
</Text>
94-
<Text text80>size={"{'pimpleBig'}"}</Text>
94+
<Text text80>size={'{\'pimpleBig\'}'}</Text>
9595
<Text text80 row>
96-
size={"{'pimpleHuge'}"}
96+
size={'{\'pimpleHuge\'}'}
9797
</Text>
9898
</View>
9999

100100
<View center column style={{justifyContent: 'space-around', width: 40, height: 140}}>
101-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'} />
102-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'} />
103-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'} />
101+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'}/>
102+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'}/>
103+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'}/>
104104
</View>
105105
</View>
106106
<Text text50 marginB-10 row center marginT-25>
107107
Icon Badges
108108
</Text>
109109
<View row paddingH-15>
110110
<View style={styles.iconBadgeColumnContainer}>
111-
<Badge size={'small'} icon={star} borderWidth={1} borderColor={Colors.red30} />
111+
<Badge size={'small'} icon={star} borderWidth={1} borderColor={Colors.red30}/>
112112
<Text text80 style={{marginTop: 10}}>
113113
small(16)
114114
</Text>
115115
</View>
116116

117117
<View style={styles.iconBadgeColumnContainer}>
118-
<Badge icon={star} iconStyle={{tintColor: Colors.red30}} />
118+
<Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
119119
<Text text80 style={{marginTop: 10}}>
120120
default(20)
121121
</Text>
122122
</View>
123123

124124
<View style={styles.iconBadgeColumnContainer}>
125-
<Badge size={'large'} icon={star} iconStyle={{backgroundColor: Colors.red30}} />
125+
<Badge size={'large'} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
126126
<Text text80 style={{marginTop: 10}}>
127127
large(24)
128128
</Text>
@@ -137,12 +137,12 @@ const styles = StyleSheet.create({
137137
container: {
138138
alignItems: 'center',
139139
padding: 20,
140-
backgroundColor: Colors.dark70,
140+
backgroundColor: Colors.dark70
141141
},
142142
iconBadgeColumnContainer: {
143143
flex: 1,
144144
justifyContent: 'space-between',
145145
alignItems: 'center',
146-
flexDirection: 'column',
147-
},
146+
flexDirection: 'column'
147+
}
148148
});

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import _ from 'lodash';
12
import React, {Component} from 'react';
23
import {StyleSheet, ScrollView} from 'react-native';
3-
import {Constants, View, Text, Carousel, Image, Card} from 'react-native-ui-lib'; // eslint-disable-line
4-
import _ from 'lodash';
4+
import {Constants, Spacings, View, Text, Carousel, Image} from 'react-native-ui-lib'; // eslint-disable-line
55

6-
const INITIAL_PAGE = 2;
7-
const WIDTH = Constants.screenWidth - 120;
86

7+
const INITIAL_PAGE = 2;
8+
const WIDTH = Constants.screenWidth - (Spacings.s5 * 2);
99
const IMAGES = [
1010
'https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
1111
'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
@@ -29,16 +29,15 @@ class CarouselScreen extends Component {
2929
render() {
3030
return (
3131
<ScrollView>
32-
<Text text30 margin-20>
33-
Carousel
34-
</Text>
32+
<Text text30 margin-20>Carousel</Text>
33+
3534
<Carousel
3635
migrate
3736
ref={r => (this.carousel = r)}
3837
// loop
3938
onChangePage={index => this.onChangePage(index)}
4039
pageWidth={WIDTH}
41-
// itemSpacings={20}
40+
// itemSpacings={Spacings.s3}
4241
initialPage={INITIAL_PAGE}
4342
containerStyle={{height: 160/* , flex: 1 */}}
4443
pageControlPosition={'under'}
@@ -106,7 +105,7 @@ const styles = StyleSheet.create({
106105
page: {
107106
flex: 1,
108107
borderWidth: 1,
109-
borderRadius: 4
108+
borderRadius: 8
110109
}
111110
});
112111

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {ScrollView} from 'react-native';
4-
import {Colors, View, Text, ColorSwatch, ColorPalette} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {Constants, Colors, View, Text, ColorSwatch, ColorPalette} from 'react-native-ui-lib'; //eslint-disable-line
55

66

77
export default class ColorSwatchScreen extends Component {
@@ -50,14 +50,14 @@ export default class ColorSwatchScreen extends Component {
5050
</View>
5151

5252
<Text marginT-20 text60 dark10>ColorPalette</Text>
53-
<Text marginB-10 text70 style={{color}}>Slected Color: {color}</Text>
53+
<Text marginB-10 text70 style={{color}}>Selected Color: {color}</Text>
5454
<ColorPalette value={color} onValueChange={this.onValueChange} colors={this.colors}/>
5555

5656
<Text margin-10 text60 dark10>Scrollable</Text>
5757
<ColorPalette value={color1} onValueChange={this.onValueChange1} colors={this.mainColors}/>
5858

5959
<Text margin-10 text60 dark10>Pagination</Text>
60-
<ColorPalette numberOfRows={4} value={color2} onValueChange={this.onValueChange2} colors={this.allColors}/>
60+
<ColorPalette numberOfRows={!Constants.isTablet ? 4 : undefined} value={color2} onValueChange={this.onValueChange2} colors={this.allColors}/>
6161
</View>
6262
</ScrollView>
6363
);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ export default class DateTimePickerScreen extends Component {
1212
<DateTimePicker
1313
title={'Date'}
1414
placeholder={'Select a date'}
15+
dateFormat={'MMM D, YYYY'}
1516
// value={new Date('October 13, 2014')}
1617
/>
1718
<DateTimePicker
1819
mode={'time'}
1920
title={'Time'}
2021
placeholder={'Select time'}
22+
timeFormat={'h:mm A'}
2123
// value={new Date('2015-03-25T12:00:00-06:30')}
2224
/>
2325
</View>

0 commit comments

Comments
 (0)