Skip to content

Commit cf72516

Browse files
deanblinderdeanblinder
committed
Merge branch 'master' into dean/add-option-to-chack-if-image-scrolled-auto-or-manually
2 parents 13d9a03 + 2e59194 commit cf72516

File tree

17 files changed

+777
-303
lines changed

17 files changed

+777
-303
lines changed

‎demo/src/data/conversations.js renamed to ‎demo/src/data/conversations.ts

Lines changed: 200 additions & 211 deletions
Large diffs are not rendered by default.

‎demo/src/data/products.js renamed to ‎demo/src/data/products.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const products = [
77
status: 'In Stock',
88
quantity: 1
99
},
10-
mediaUrl: 'https://static.wixstatic.com/media/d911269bdf7972c9a59ba30440cb3789.jpg_128'
10+
mediaUrl: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
1111
},
1212
{
1313
name: 'I\'m a Product',
@@ -17,7 +17,7 @@ const products = [
1717
status: 'In Stock',
1818
quantity: 2
1919
},
20-
mediaUrl: 'https://static.wixstatic.com/media/cda177_5c6d2cd3b71a41caa54309301e1dd0d7.jpg_128'
20+
mediaUrl: 'https://images.pexels.com/photos/3737604/pexels-photo-3737604.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
2121
},
2222
{
2323
name: 'I\'m a Product',
@@ -27,7 +27,7 @@ const products = [
2727
status: 'In Stock',
2828
quantity: 1
2929
},
30-
mediaUrl: 'https://static.wixstatic.com/media/cda177_7153ff06297c484498f9d6662e26d6d5.jpg_128'
30+
mediaUrl: 'https://images.pexels.com/photos/3685538/pexels-photo-3685538.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
3131
},
3232
{
3333
name: 'I\'m a Product',
@@ -37,7 +37,7 @@ const products = [
3737
status: 'Out of Stock',
3838
quantity: 0
3939
},
40-
mediaUrl: 'https://static.wixstatic.com/media/cda177_e008aa7681f443b3be63a1fe86c10cfd.jpg_128'
40+
mediaUrl: 'https://images.pexels.com/photos/4202467/pexels-photo-4202467.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
4141
},
4242
{
4343
name: 'I\'m a Product',

‎demo/src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,12 @@ module.exports = {
238238
get ListActionsScreen() {
239239
return require('./screens/realExamples/ListActions/ListActionsScreen').default;
240240
},
241+
get ProductPage() {
242+
return require('./screens/realExamples/ProductPage');
243+
},
244+
get Twitter() {
245+
return require('./screens/realExamples/Twitter');
246+
},
241247
// wrapperScreens
242248
get TouchableOpacityScreen() {
243249
return require('./screens/componentScreens/TouchableOpacityScreen').default;

‎demo/src/screens/MenuStructure.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,9 @@ export const navigationData = {
166166
screens: [
167167
{title: 'Apple Music', tags: 'apple music demo screen', screen: 'unicorn.examples.AppleMusic'},
168168
{title: 'Pinterest', tags: 'pinterest demo screen', screen: 'unicorn.examples.Pinterest'},
169-
{title: 'List Actions', tags: 'list actions demo screen', screen: 'unicorn.examples.ListActionsScreen'}
169+
{title: 'List Actions', tags: 'list actions demo screen', screen: 'unicorn.examples.ListActionsScreen'},
170+
{title: 'Product Page', tags: 'product page demo screen', screen: 'unicorn.examples.ProductPage'},
171+
{title: 'Twitter', tags: 'twitter demo screen', screen: 'unicorn.examples.Twitter'}
170172
]
171173
}
172174
};

‎demo/src/screens/componentScreens/GridViewScreen.tsx

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,49 @@
11
import _ from 'lodash';
2-
import {View, Text, Colors, Constants, Avatar} from 'react-native-ui-lib';
2+
import {View, Text, Image, Colors, Constants, Avatar, GridView, Shadows, Card} from 'react-native-ui-lib';
33
import React, {Component} from 'react';
44
import {Alert, ScrollView} from 'react-native';
5-
import GridView from '../../../../src/components/GridView';
65
import conversations from '../../data/conversations';
76
import products from '../../data/products';
87

9-
108
class GridViewScreen extends Component {
119
state = {
1210
contacts: _.chain(conversations)
1311
.take(15)
1412
.map(contact => ({
15-
imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999},
13+
imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999, style: {backgroundColor: Colors.grey60}},
1614
title: _.split(contact.name, ' ')[0],
1715
onPress: () => Alert.alert('My name is ' + contact.name)
1816
}))
1917
.value(),
2018
products: _.chain(products)
2119
.take(8)
2220
.map((product, index) => ({
23-
imageProps: {source: {uri: product.mediaUrl}, borderRadius: 4},
21+
imageProps: {
22+
source: {uri: product.mediaUrl},
23+
borderRadius: 4,
24+
style: {backgroundColor: Colors.grey60, borderWidth: 1, borderColor: Colors.grey50}
25+
},
2426
title: product.name,
2527
titleTypography: 'subtextBold',
2628
onPress: () => Alert.alert('My price is ' + product.formattedPrice),
2729
renderOverlay: () => {
2830
if (index < 7) {
29-
return (
30-
<Text
31-
text={product.price}
32-
style={{alignSelf: 'center', marginTop: 3}}
33-
/>
34-
);
31+
return <Text text={product.price} style={{alignSelf: 'center', marginTop: 3}}/>;
3532
}
3633
}
3734
}))
3835
.value(),
3936
pairs: _.chain(products)
4037
.take(2)
4138
.map(product => ({
42-
imageProps: {source: {uri: product.mediaUrl}},
39+
containerProps: {useNative: true, activeScale: 0.97, activeOpacity: 1},
40+
renderCustomItem: () => {
41+
return (
42+
<Card height={150} activeOpacity={1}>
43+
<Card.Image style={{flex: 1}} source={{uri: product.mediaUrl}}/>
44+
</Card>
45+
);
46+
},
4347
title: product.name,
4448
subtitle: (
4549
<Text>
@@ -54,14 +58,14 @@ class GridViewScreen extends Component {
5458
}))
5559
.value(),
5660
dynamicLayout: _.chain(products)
57-
.take(2)
61+
.take(3)
5862
.map(product => ({
5963
imageProps: {
6064
source: {
6165
uri: product.mediaUrl
6266
}
6367
},
64-
itemSize: {height: 70},
68+
itemSize: {height: 90},
6569
title: 'Title',
6670
subtitle: 'subtitle',
6771
description: product.name,
@@ -76,7 +80,9 @@ class GridViewScreen extends Component {
7680
imageProps: {
7781
source: {
7882
uri: product.mediaUrl
79-
}
83+
},
84+
overlayType: Image.overlayTypes.VERTICAL,
85+
overlayColor: Colors.white
8086
},
8187
itemSize: {height: 240},
8288
overlayText: true,
@@ -94,18 +100,17 @@ class GridViewScreen extends Component {
94100
renderOverlay: () => {
95101
if (index === 0) {
96102
return (
97-
<Text
98-
margin-10 text80BO
99-
style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}
100-
>{product.formattedPrice}</Text>
103+
<Text margin-10 text80BO style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}>
104+
{product.formattedPrice}
105+
</Text>
101106
);
102107
}
103108
}
104109
}))
105110
.value(),
106111
avatars: _.chain(conversations)
107112
.take(9)
108-
.map((item) => ({
113+
.map(item => ({
109114
renderCustomItem: () => {
110115
const imageElementElement = item.thumbnail;
111116
return (
@@ -120,6 +125,9 @@ class GridViewScreen extends Component {
120125
titleTypography: 'bodySmall'
121126
}))
122127
.value(),
128+
squares: [Colors.red30, Colors.yellow30, Colors.blue30, Colors.violet30, Colors.green30].map(color => ({
129+
renderCustomItem: () => <View height={50} backgroundColor={color}/>
130+
})),
123131
orientation: Constants.orientation
124132
};
125133

@@ -134,27 +142,27 @@ class GridViewScreen extends Component {
134142
};
135143

136144
render() {
137-
const {contacts, dynamicLayout, overlayText, avatars, products, pairs} = this.state;
145+
const {contacts, dynamicLayout, overlayText, avatars, products, pairs, squares} = this.state;
138146

139147
return (
140148
<ScrollView onLayout={this.onLayout}>
141149
<View padding-page>
142-
<Text center text60BO>
150+
<Text center h1>
143151
GridView
144152
</Text>
145153

146-
<Text margin-30 text60BO>
154+
<Text h3 marginV-s5>
147155
Avatars
148156
</Text>
149157
<GridView
150158
items={contacts}
151159
// viewWidth={300}
152-
numColumns={5}
160+
numColumns={6}
153161
lastItemOverlayColor={Colors.primary}
154162
lastItemLabel={7}
155163
/>
156164

157-
<Text margin-30 text60BO>
165+
<Text h3 marginV-s5>
158166
Thumbnails
159167
</Text>
160168
<GridView
@@ -165,34 +173,26 @@ class GridViewScreen extends Component {
165173
keepItemSize
166174
/>
167175

168-
<Text margin-30 text60BO>
176+
<Text marginV-s5 text60BO>
169177
Pairs
170178
</Text>
171-
<GridView
172-
items={pairs}
173-
numColumns={2}
174-
useCustomTheme
175-
/>
176-
<Text margin-30 text60BO>
179+
<GridView items={pairs} numColumns={2}/>
180+
<Text marginV-s5 text60BO>
177181
Dynamic itemSize
178182
</Text>
179-
<GridView
180-
items={dynamicLayout}
181-
numColumns={2}
182-
useCustomTheme
183-
/>
184-
<Text margin-30 text60BO>
183+
<GridView items={dynamicLayout} numColumns={3}/>
184+
<Text marginV-s5 text60BO>
185185
OverlayText
186186
</Text>
187-
<GridView
188-
items={overlayText}
189-
numColumns={2}
190-
useCustomTheme
191-
/>
192-
<Text margin-30 text60BO>
187+
<GridView items={overlayText} numColumns={2}/>
188+
<Text marginV-s5 text60BO>
193189
Custom content (Avatars)
194190
</Text>
195191
<GridView items={avatars} numColumns={Constants.orientation === 'landscape' ? 6 : 3}/>
192+
<Text marginV-s5 text60BO>
193+
Custom content (Squares)
194+
</Text>
195+
<GridView items={squares} numColumns={3}/>
196196
</View>
197197
</ScrollView>
198198
);

‎demo/src/screens/realExamples/ProductPage/index.tsx

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React, {Component} from 'react';
2+
import {ScrollView} from 'react-native';
3+
import {View, Text, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
4+
import _ from 'lodash';
5+
6+
const colorOptions: {[key: string]: {name: string; color: string}} = {
7+
red: {name: 'Red', color: Colors.red30},
8+
green: {name: 'Green', color: Colors.green30},
9+
blue: {name: 'Blue', color: Colors.blue30}
10+
};
11+
12+
const sizeOptions = {
13+
s: {name: 'Small'},
14+
m: {name: 'Medium'},
15+
l: {name: 'Large'}
16+
};
17+
18+
const images = [
19+
'https://images.pexels.com/photos/3297502/pexels-photo-3297502.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
20+
'https://images.pexels.com/photos/3496994/pexels-photo-3496994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
21+
'https://images.pexels.com/photos/3323694/pexels-photo-3323694.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
22+
'https://images.pexels.com/photos/3350141/pexels-photo-3350141.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
23+
'https://images.pexels.com/photos/3127161/pexels-photo-3127161.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
24+
'https://images.pexels.com/photos/2872767/pexels-photo-2872767.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
25+
'https://images.pexels.com/photos/3271010/pexels-photo-3271010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
26+
'https://images.pexels.com/photos/3206153/pexels-photo-3206153.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
27+
];
28+
29+
class Product extends Component {
30+
state = {
31+
isColor: false,
32+
isSize: false,
33+
selectedColor: 'red',
34+
selectedSize: 's'
35+
};
36+
37+
render() {
38+
const {selectedColor, selectedSize} = this.state;
39+
40+
return (
41+
<ScrollView>
42+
<View>
43+
<Image
44+
style={{position: 'absolute', top: 10, right: 10, zIndex: 100, tintColor: Colors.white}}
45+
source={require('../../../assets/icons/share.png')}
46+
/>
47+
<Carousel
48+
containerStyle={{height: 200}}
49+
pageControlProps={{size: 6}}
50+
pageControlPosition={Carousel.pageControlPositions.OVER}
51+
>
52+
{images.map((image, i) => {
53+
return (
54+
<View flex centerV key={i}>
55+
<Image overlayType={Image.overlayTypes.BOTTOM} style={{flex: 1}} source={{uri: image}}/>
56+
</View>
57+
);
58+
})}
59+
</Carousel>
60+
</View>
61+
62+
<View paddingH-page>
63+
<View row centerV>
64+
<Text text40M marginT-s7>
65+
New Product
66+
</Text>
67+
</View>
68+
<Text text80 dark40 marginV-s1>
69+
SKU: 1234567890
70+
</Text>
71+
<Text text50L marginV-s2>
72+
$55.00
73+
</Text>
74+
75+
<View marginT-s2>
76+
<Picker
77+
migrate
78+
value={selectedColor}
79+
onChange={(value: string) => this.setState({selectedColor: value})}
80+
rightIconSource={{}}
81+
rightIconStyle={{
82+
width: 24,
83+
height: 24,
84+
backgroundColor: colorOptions[selectedColor].color,
85+
borderRadius: 12
86+
}}
87+
>
88+
{_.map(colorOptions, (colorOption, colorKey) => {
89+
return <Picker.Item value={colorKey} label={colorOption.name}/>;
90+
})}
91+
</Picker>
92+
<Picker migrate value={selectedSize} onChange={(value: string) => this.setState({selectedSize: value})}>
93+
{_.map(sizeOptions, (sizeOption, sizeKey) => {
94+
return <Picker.Item value={sizeKey} label={sizeOption.name}/>;
95+
})}
96+
</Picker>
97+
</View>
98+
99+
<Button label={'Add to Cart'}/>
100+
</View>
101+
<Text marginL-page marginT-s5 text60M>
102+
Recommended for You
103+
</Text>
104+
<ScrollView
105+
style={{height: 200, marginVertical: 20, marginLeft: 20}}
106+
horizontal
107+
showsHorizontalScrollIndicator={false}
108+
>
109+
{images.map((image, index) => (
110+
<Image key={index} width={160} style={{marginRight: 10}} source={{uri: image}}/>
111+
))}
112+
</ScrollView>
113+
</ScrollView>
114+
);
115+
}
116+
}
117+
118+
export default Product;

0 commit comments

Comments
 (0)