mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 0128687e58ffcff8320c5d4ebb6a2c75772862cf 1 parent 079a9b52

add yohoCoin RN UI review by zhanglixia

Inline Side-by-side
Showing 8 changed files with 432 additions and 1 deletions
... ... @@ -2,6 +2,12 @@
import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import YohoCoinNumHeader from './YohoCoinNumHeader';
import YohoCoinBanner from './YohoCoinBanner';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import DeviceInfo from 'react-native-device-info';
import Weixin from '../../../guang/components/detail/Weixin';
import ReactNative, {
View,
... ... @@ -21,6 +27,13 @@ export default class YohoCoin extends Component {
constructor(props) {
super(props);
this.renderRow = this.renderRow.bind(this);
this.renderSectionHeader = this.renderSectionHeader.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
});
}
shouldComponentUpdate(nextProps){
... ... @@ -32,6 +45,50 @@ export default class YohoCoin extends Component {
}
}
renderRow(rowData, sectionID, rowID, highlightRow) {
if (sectionID == 'yohoCoin') {
return (<YohoCoinNumHeader resource = {rowData} onPressYohoCoinDetail = {this.props.onPressYohoCoinDetail}/>)
}else if (sectionID == 'banner') {
return(<YohoCoinBanner resource = {rowData} onPressProduct={this.props.onPressBanner}/>)
}else if (sectionID == 'weixin') {
return(<Weixin resource={rowData} onPressWeixin={this.props.onPressWeixin}/>)
}else if (sectionID == 'favoriteTitle') {
let listNum = rowData;
if (listNum == 0) {
return null;
}
let fontFamilyStyle = {};
if (Platform.OS === 'ios') {
let systemVersion = DeviceInfo.getSystemVersion();
systemVersion = parseFloat(systemVersion);
if (systemVersion >= 9.0) {
fontFamilyStyle = {fontFamily: 'PingFang SC'};
}
}
return(
<View style={styles.title}>
<Text style={[styles.text, fontFamilyStyle]}>你可能喜欢</Text>
</View>
);
}else if (sectionID == 'favorite') {
let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
return (
<BrandProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressProduct={this.props.onPressProductCell}/>
);
}
return null;
}
renderSectionHeader(sectionData, sectionID) {
return null;
}
render() {
let {resource} = this.props;
... ... @@ -42,18 +99,62 @@ export default class YohoCoin extends Component {
favorite,
} = resource;
let list = favorite?favorite.get('list'):null;
let dataSource = {
yohoCoin: [yohoCoin],
banner: [banner],
weixin: [weixin],
favoriteTitle: [list?list.size:0],
favorite: list?list.toArray():[],
}
return (
<View style={styles.container}>
<Text>YohoCoin</Text>
<ListView
ref='YohoCoinList'
contentContainerStyle={styles.contentContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
onEndReached={() => {
if (list && list.size > 0) {
this.props.onEndReached && this.props.onEndReached();
}
}}
/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
let styles = StyleSheet.create({
container: {
flex: 1,
},
contentContainer:{
flexDirection: 'row',
flexWrap: 'wrap',
},
listContainer: {
width: width / 2,
},
title: {
alignItems: 'center',
justifyContent: 'center',
height: 40,
width: width,
backgroundColor: 'white',
},
text: {
textAlign: 'left',
fontSize: 17,
fontWeight: 'bold',
color: 'rgba(0,0,0,0.3)',
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import Swiper from 'react-native-swiper';
import YH_Image from '../../../common/components/YH_Image';
import {getSlicedUrl} from '../../../classify/utils/Utils';
const {
View,
TouchableOpacity,
StyleSheet,
Dimensions,
Platform,
} = ReactNative;
import Immutable, {Map} from 'immutable';
export default class YohoCoinBanner extends React.Component {
constructor(props) {
super (props);
this.dot = <View
style={{
backgroundColor:'rgba(0,0,0,.2)',
width: 6,
height: 6,
borderRadius: 3,
marginLeft: 3,
marginRight: 3,
marginTop: (Platform.OS === 'ios')?3:1,
marginBottom: 0,
}}
/>;
this.activeDot = <View
style={{
backgroundColor:'white',
width: 6,
height: 6,
borderRadius: 3,
marginLeft: 3,
marginRight: 3,
marginTop: 3,
marginBottom: 0,
}}
/>;
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.resource, this.props.resource)) {
return false;
} else {
return true;
}
}
render() {
let resource = this.props.resource?this.props.resource.toJS():null;
if (!resource) {
return null;
}
let error = resource.error;
let data = resource.list;
if (error) {
return null;
}
if (data.length == 1) {
let newSrc = getSlicedUrl(data[0].src, width, swiperHeight);
return (
<View style={styles.container}>
<View style={{
width: width,
height: 20,
backgroundColor: 'rgb(240,240,240)',
}}/>
<TouchableOpacity
activeOpacity={1}
style={{width: width, height: swiperHeight}}
onPress={() => {
this.props.onPressProduct && this.props.onPressProduct(data[0].url)
}}
>
<YH_Image
url={newSrc}
style={{ width: width, height: swiperHeight}}
/>
</TouchableOpacity>
<View style={{
width: width,
height: 15,
backgroundColor: 'rgb(240,240,240)',
}}/>
</View>
);
} else {
return (
<View style={styles.container}>
<View style={{
width: width,
height: 20,
backgroundColor: '#e0e0e0',
}}/>
<Swiper
style={styles.banner}
showsButtons={false}
loop={true}
autoplay={true}
autoplayTimeout={2}
paginationStyle={{bottom: 8}}
dot={this.dot}
activeDot={(Platform.OS === 'ios')?this.activeDot:null}
width={width}
height={swiperHeight}
>
{data.map((item, i) => {
let newSrc = getSlicedUrl(item.src, width, swiperHeight);
return (
<TouchableOpacity
key={i}
activeOpacity={1}
onPress={() => {
this.props.onPressProduct && this.props.onPressProduct(item.url,row_ID,1,template_name,template_id)
}}
>
<YH_Image
url={newSrc}
style={{width: width, height: swiperHeight}}
/>
</TouchableOpacity>
);
})}
</Swiper>
<View style={{
width: width,
height: 15,
backgroundColor: '#e0e0e0',
}}/>
</View>
);
}
}
}
let {width, height} = Dimensions.get('window');
let swiperHeight = Math.ceil((200 / 640) * width);
let styles = StyleSheet.create({
container: {
width: width,
height: swiperHeight + 20 + 15,
backgroundColor: 'white',
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
Image,
View,
Text,
StyleSheet,
Dimensions,
TouchableOpacity,
} = ReactNative;
export default class YohoCoinNumHeader extends React.Component {
constructor(props) {
super (props);
}
componentDidMount() {
}
render() {
let resource = this.props.resource?this.props.resource.toJS():null;
if (!resource) {
return null;
}
let notice = resource.notice;
let yohocoin_num = resource.yohocoin_num;
let yohoCoinCode = resource.yohoCoinCode;
let heigth_t = notice == '' ? headerHeight : headerHeight + noticeViewHeight;
return (
<View style={{width: width,height: heigth_t,backgroundColor: 'white',}}>
<View style={{width: width,height: headerHeight,backgroundColor: 'white',}}>
<View style={styles.numView}>
<Text style={styles.numText}>{yohocoin_num}</Text>
</View>
<View style={styles.numDetailView}>
<Image style={styles.icon} source={require('../../image/yohocoin_icon.png')}/>
<Text style={styles.numDetailText}>个有货币</Text>
</View>
<View style={styles.button}>
<TouchableOpacity
activeOpacity={1}
style={{width: 100, height: ( 38/154 ) * 100}}
onPress={() => {
this.props.onPressYohoCoinDetail && this.props.onPressYohoCoinDetail(yohoCoinCode)
}}
>
<Image style={styles.image} source={require('../../image/check_detail_btn.png')}/>
</TouchableOpacity>
</View>
</View>
{notice != '' ?
<View style={styles.notice}>
<Image style={styles.noticeIcon} source={require('../../image/yohocoin_notice_ic.png')}/>
<Text style={styles.noticeText}>{notice}</Text>
</View>
: null}
</View>
)
}
};
let {width, height} = Dimensions.get('window');
let headerHeight = Math.ceil((250 / 640) * width);
let noticeViewHeight = Math.ceil((70 / 640) * width);
const styles = StyleSheet.create({
numView: {
marginTop: 20,
width: width,
height: 60,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
numText: {
width:width,
backgroundColor: 'white',
color: 'rgb(206,11,36)',
fontSize: 60,
textAlign: 'center',
},
numDetailView: {
width: width,
height: 25,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
icon: {
width: 15,
height: 15,
},
numDetailText: {
backgroundColor: 'white',
color: 'gray',
fontSize: 14,
textAlign: 'center',
},
button: {
marginTop: 7,
width: width,
height: 40,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: 100,
height: ( 38/154 ) * 100,
},
notice: {
width: width,
height: noticeViewHeight,
backgroundColor: 'rgb(217,217,217)',
flexDirection: 'row',
alignItems: 'center',
},
noticeIcon: {
width: 15,
height: 15,
marginLeft: 15,
},
noticeText: {
backgroundColor: 'transparent',
color: 'rgb(206,11,36)',
fontSize: 11,
marginLeft: 20,
}
});
... ...
... ... @@ -44,6 +44,11 @@ function mapDispatchToProps(dispatch) {
class YohoCoinContainer extends Component {
constructor(props) {
super(props);
this._onEndReached = this._onEndReached.bind(this);
this._onPressProductCell = this._onPressProductCell.bind(this);
this._onPressWeixin = this._onPressWeixin.bind(this);
this._onPressBanner = this._onPressBanner.bind(this);
this._onPressYohoCoinDetail = this._onPressYohoCoinDetail.bind(this);
}
componentDidMount() {
... ... @@ -57,6 +62,31 @@ class YohoCoinContainer extends Component {
}
_onPressWeixin(data) {
ReactNative.NativeModules.YH_CommonHelper.copyWechatIdToClipboard(data);
}
_onEndReached() {
this.props.actions.fetchFavoriteList();
}
_onPressYohoCoinDetail(yohoCoinCode) {
ReactNative.NativeModules.YH_MyAssetsViewHelper.pushCoinDetail(yohoCoinCode);
}
_onPressBanner (url){
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
_onPressProductCell(product) {
let productSkn = product && product.get('product_skn', 0);
if (!productSkn) {
return;
}
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${productSkn}"}}`;
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
render() {
let {yohoCoin} = this.props;
... ... @@ -64,6 +94,11 @@ class YohoCoinContainer extends Component {
<View style={styles.container}>
<YohoCoin
resource={yohoCoin}
onEndReached={this._onEndReached}
onPressProductCell= {this._onPressProductCell}
onPressWeixin={this._onPressWeixin}
onPressBanner={this._onPressBanner}
onPressYohoCoinDetail={this._onPressYohoCoinDetail}
/>
</View>
);
... ...
... ... @@ -8,6 +8,7 @@ let InitialState = Record({
notice: '',
isFetching: false,
error: null,
yohoCoinCode: '20151230-102233',
})),
banner: new (Record({
... ...