Skip to content

Commit e027f83

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents 9f90bf4 + 51422cf commit e027f83

File tree

18 files changed

+438
-164
lines changed

18 files changed

+438
-164
lines changed

‎demo/src/screens/MainScreen.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ export default class MainScreen extends Component {
301301
const keys = _.keys(data);
302302

303303
return (
304-
<Carousel onChangePage={this.onChangePage} ref={carousel => (this.carousel = carousel)}>
304+
<Carousel migrate onChangePage={this.onChangePage} ref={carousel => (this.carousel = carousel)}>
305305
{_.map(data, (section, key) => {
306306
return (
307307
<View key={key} style={[styles.page, pageStyle]}>
@@ -379,7 +379,6 @@ const styles = StyleSheet.create({
379379
justifyContent: 'center',
380380
},
381381
page: {
382-
width: Constants.screenWidth,
383382
flex: 1,
384383
paddingLeft: 24,
385384
},

‎demo/src/screens/componentScreenScreens/ModalScreen.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
import React, {Component} from 'react';
22
import {Alert, StyleSheet} from 'react-native';
33
import {Navigation} from 'react-native-navigation';
4-
import {Colors, Carousel, PageControl, Modal, View, Text, Constants} from 'react-native-ui-lib';//eslint-disable-line
4+
import {Colors, Carousel, PageControl, Modal, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
5+
56

67
export default class ModalScreen extends Component {
78

89
static options() {
910
return {
1011
topBar: {
1112
drawBehind: true,
12-
visible: false,
13-
},
13+
visible: false
14+
}
1415
};
1516
}
1617

1718
constructor(props) {
1819
super(props);
1920

2021
this.state = {
21-
currentPage: 0,
22+
currentPage: 0
2223
};
2324
}
2425

@@ -36,7 +37,7 @@ export default class ModalScreen extends Component {
3637
color={Colors.dark10}
3738
size={15}
3839
/>
39-
<Carousel onChangePage={currentPage => this.setState({currentPage})}>
40+
<Carousel migrate onChangePage={currentPage => this.setState({currentPage})}>
4041
<View bg-green50 flex style={styles.page}>
4142
<Modal.TopBar
4243
title='modal title'
@@ -101,7 +102,6 @@ export default class ModalScreen extends Component {
101102
</Text>
102103
</View>
103104
</View>
104-
105105
</Carousel>
106106
</View>
107107
);
@@ -110,15 +110,15 @@ export default class ModalScreen extends Component {
110110

111111
const styles = StyleSheet.create({
112112
page: {
113-
width: Constants.screenWidth,
113+
flex: 1
114114
},
115115
pageControl: {
116-
zIndex: 1,
116+
zIndex: 1
117117
},
118118
absoluteContainer: {
119119
position: 'absolute',
120120
bottom: 20,
121121
left: 20,
122-
right: 0,
123-
},
122+
right: 0
123+
}
124124
});

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

Lines changed: 14 additions & 12 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 {Alert, StyleSheet} from 'react-native';
4-
import {Constants, Colors, Typography, View, ActionBar, PageControl, Carousel} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {Colors, Typography, View, ActionBar, PageControl, Carousel} from 'react-native-ui-lib'; //eslint-disable-line
55
import cameraSelected from '../../assets/icons/cameraSelected.png';
66
import video from '../../assets/icons/video.png';
77
import tags from '../../assets/icons/tags.png';
@@ -13,7 +13,10 @@ export default class ActionBarScreen extends Component {
1313

1414
constructor(props) {
1515
super(props);
16-
this.state = {currentPage: 0};
16+
17+
this.state = {
18+
currentPage: 0
19+
};
1720
}
1821

1922
render() {
@@ -27,6 +30,7 @@ export default class ActionBarScreen extends Component {
2730
size={15}
2831
/>
2932
<Carousel
33+
migrate
3034
onChangePage={currentPage => this.setState({currentPage})}
3135
initialPage={this.state.currentPage}
3236
>
@@ -35,7 +39,7 @@ export default class ActionBarScreen extends Component {
3539
actions={[
3640
{label: 'Delete', onPress: () => Alert.alert('delete'), red30: true},
3741
{label: 'Replace Photo', onPress: () => Alert.alert('replace photo')},
38-
{label: 'Edit', onPress: () => Alert.alert('edit')},
42+
{label: 'Edit', onPress: () => Alert.alert('edit')}
3943
]}
4044
/>
4145
</View>
@@ -46,7 +50,7 @@ export default class ActionBarScreen extends Component {
4650
actions={[
4751
{label: 'Hide', onPress: () => Alert.alert('hide'), white: true},
4852
{label: 'Add Discount', onPress: () => Alert.alert('add discount'), white: true},
49-
{label: 'Duplicate', onPress: () => Alert.alert('duplicate'), white: true},
53+
{label: 'Duplicate', onPress: () => Alert.alert('duplicate'), white: true}
5054
]}
5155
/>
5256
</View>
@@ -70,7 +74,7 @@ export default class ActionBarScreen extends Component {
7074
actions={[
7175
{label: 'Bold', labelStyle: {color: Colors.dark10, ...Typography.text60, fontWeight: '400'}},
7276
{label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.dark10}},
73-
{label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.dark10}},
77+
{label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.dark10}}
7478
]}
7579
/>
7680
</View>
@@ -90,17 +94,15 @@ export default class ActionBarScreen extends Component {
9094

9195
const styles = StyleSheet.create({
9296
page: {
93-
width: Constants.screenWidth,
94-
flex: 1,
97+
flex: 1
9598
},
9699
pageControl: {
97-
zIndex: 1,
98-
width: Constants.screenWidth,
100+
zIndex: 1
99101
},
100102
absoluteContainer: {
101103
position: 'absolute',
102-
bottom: 70,
104+
bottom: 80,
103105
left: 0,
104-
right: 0,
105-
},
106+
right: 0
107+
}
106108
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {StyleSheet} from 'react-native';
3-
import {Constants, View, Text, Carousel} from 'react-native-ui-lib'; // eslint-disable-line
3+
import {View, Text, Carousel} from 'react-native-ui-lib'; // eslint-disable-line
44

55

66
const INITIAL_PAGE = 0;
@@ -17,7 +17,7 @@ class CarouselScreen extends Component {
1717
render() {
1818
return (
1919
<View flex>
20-
<Carousel loop onChangePage={(index => this.onChangePage(index))} /* initialPage={INITIAL_PAGE} */>
20+
<Carousel migrate loop onChangePage={(index => this.onChangePage(index))} /* initialPage={INITIAL_PAGE} */>
2121
<Page bg-cyan50>
2222
<Text margin-15>PAGE 0</Text>
2323
</Page>
@@ -58,7 +58,7 @@ const Page = ({children, ...others}) => {
5858

5959
const styles = StyleSheet.create({
6060
page: {
61-
width: Constants.screenWidth
61+
flex: 1
6262
}
6363
});
6464

‎src/commons/baseComponent.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import * as Modifiers from './modifiers';
99
export default function baseComponent(usePure) {
1010
const parent = usePure ? React.PureComponent : React.Component;
1111
class BaseComponent extends parent {
12-
static propTypes = {
13-
..._.mapValues(Typography, () => PropTypes.bool),
14-
..._.mapValues(Colors, () => PropTypes.bool),
15-
useNativeDriver: PropTypes.bool,
16-
};
12+
// static propTypes = {
13+
// ..._.mapValues(Typography, () => PropTypes.bool),
14+
// ..._.mapValues(Colors, () => PropTypes.bool),
15+
// useNativeDriver: PropTypes.bool,
16+
// };
1717

1818
static extractOwnProps = Modifiers.extractOwnProps;
1919

‎src/components/avatar/index.js‎

Lines changed: 47 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import _ from 'lodash';
22
import PropTypes from 'prop-types';
33
import React from 'react';
44
import {StyleSheet, ViewPropTypes, TouchableOpacity} from 'react-native';
5-
import {Colors, BorderRadiuses} from '../../style';
5+
import {Colors} from '../../style';
66
import {PureBaseComponent} from '../../commons';
77
import Badge, {BADGE_SIZES} from '../badge';
88
import View from '../view';
@@ -155,6 +155,39 @@ export default class Avatar extends PureBaseComponent {
155155
this.styles = createStyles(this.props);
156156
}
157157

158+
getContainerStyle() {
159+
const {size} = this.props;
160+
161+
return {
162+
width: size,
163+
height: size,
164+
alignItems: 'center',
165+
justifyContent: 'center',
166+
borderRadius: size / 2,
167+
};
168+
}
169+
170+
getInitialsContainer() {
171+
const {size} = this.props;
172+
return {
173+
...StyleSheet.absoluteFillObject,
174+
alignItems: 'center',
175+
justifyContent: 'center',
176+
borderRadius: size / 2,
177+
};
178+
}
179+
180+
getRibbonStyle() {
181+
const {size} = this.props;
182+
183+
return {
184+
position: 'absolute',
185+
top: '10%',
186+
left: size / 1.7,
187+
borderRadius: size / 2,
188+
};
189+
}
190+
158191
getStatusBadgeColor(status) {
159192
switch (status) {
160193
case Avatar.modes.AWAY:
@@ -222,9 +255,9 @@ export default class Avatar extends PureBaseComponent {
222255
const {ribbonLabel, ribbonStyle, ribbonLabelStyle, customRibbon} = this.props;
223256
if (ribbonLabel) {
224257
return customRibbon ? (
225-
<View style={this.styles.customRibbon}>{customRibbon}</View>
258+
<View style={this.getRibbonStyle()}>{customRibbon}</View>
226259
) : (
227-
<View style={[this.styles.ribbon, ribbonStyle]}>
260+
<View style={[this.getRibbonStyle(), this.styles.ribbon, ribbonStyle]}>
228261
<Text numberOfLines={1} text100 white style={[ribbonLabelStyle]}>
229262
{ribbonLabel}
230263
</Text>
@@ -246,17 +279,18 @@ export default class Avatar extends PureBaseComponent {
246279
} = this.props;
247280
const hasImage = !_.isUndefined(imageSource);
248281
const ImageContainer = animate ? AnimatedImage : Image;
282+
249283
if (hasImage) {
250284
return (
251285
<ImageContainer
252286
animate={animate}
253-
style={[this.styles.image, imageStyle]}
287+
style={[this.getContainerStyle(), StyleSheet.absoluteFillObject, imageStyle]}
254288
source={imageSource}
255289
onLoadStart={onImageLoadStart}
256290
onLoadEnd={onImageLoadEnd}
257291
onError={onImageLoadError}
258292
testID={`${testID}.image`}
259-
containerStyle={this.styles.container}
293+
containerStyle={this.getContainerStyle()}
260294
{...imageProps}
261295
/>
262296
);
@@ -273,16 +307,20 @@ export default class Avatar extends PureBaseComponent {
273307
onPress,
274308
containerStyle,
275309
children,
310+
size,
276311
testID,
277312
} = this.props;
278313
const Container = onPress ? TouchableOpacity : View;
279314
const hasImage = !_.isUndefined(imageSource);
315+
const fontSizeToImageSizeRatio = 0.32;
316+
const fontSize = size * fontSizeToImageSizeRatio;
317+
280318
return (
281-
<Container style={[this.styles.container, containerStyle]} testID={testID} onPress={onPress}>
319+
<Container style={[this.getContainerStyle(), containerStyle]} testID={testID} onPress={onPress}>
282320
<View
283-
style={[this.styles.initialsContainer, {backgroundColor}, hasImage && this.styles.initialsContainerWithInset]}
321+
style={[this.getInitialsContainer(), {backgroundColor}, hasImage && this.styles.initialsContainerWithInset]}
284322
>
285-
<Text numberOfLines={1} style={[this.styles.initials, {color}]}>
323+
<Text numberOfLines={1} style={[{fontSize}, this.styles.initials, {color}]}>
286324
{label}
287325
</Text>
288326
</View>
@@ -295,68 +333,23 @@ export default class Avatar extends PureBaseComponent {
295333
}
296334
}
297335

298-
function createStyles({size, labelColor}) {
299-
const borderRadius = size / 2;
300-
const fontSizeToImageSizeRatio = 0.32;
301-
const ribbonPosition = {
302-
position: 'absolute',
303-
top: '10%',
304-
left: size / 1.7,
305-
};
336+
function createStyles({labelColor}) {
306337
const styles = StyleSheet.create({
307-
container: {
308-
alignItems: 'center',
309-
justifyContent: 'center',
310-
width: size,
311-
height: size,
312-
borderRadius,
313-
},
314-
initialsContainer: {
315-
...StyleSheet.absoluteFillObject,
316-
alignItems: 'center',
317-
justifyContent: 'center',
318-
borderRadius,
319-
},
320338
initialsContainerWithInset: {
321339
top: 1,
322340
right: 1,
323341
bottom: 1,
324342
left: 1,
325343
},
326-
/*eslint-disable*/
327344
initials: {
328-
fontSize: size * fontSizeToImageSizeRatio,
329345
color: labelColor,
330346
backgroundColor: 'transparent',
331347
},
332-
/*eslint-enable*/
333-
defaultImage: {
334-
width: size,
335-
height: size,
336-
borderRadius,
337-
},
338-
image: {
339-
...StyleSheet.absoluteFillObject,
340-
position: 'absolute',
341-
width: size,
342-
height: size,
343-
borderRadius,
344-
},
345-
fixAbsolutePosition: {
346-
position: undefined,
347-
left: undefined,
348-
bottom: undefined,
349-
},
350348
ribbon: {
351-
...ribbonPosition,
352349
backgroundColor: Colors.blue30,
353-
borderRadius: BorderRadiuses.br100,
354350
paddingHorizontal: 6,
355351
paddingVertical: 3,
356352
},
357-
customRibbon: {
358-
...ribbonPosition,
359-
},
360353
});
361354

362355
return styles;

0 commit comments

Comments
 (0)