mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 365b1b4f6f36440f618f3d88d23a4f32e582c77b 1 parent 7b1ce00f

整理代码 review by 红魔

Inline Side-by-side
Showing 9 changed files with 322 additions and 94 deletions
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
StyleSheet,
Text,
View,
Image,
Dimensions,
TouchableOpacity,
} = ReactNative;
export default class AllBrandListCell extends React.Component {
constructor(props) {
super(props);
}
render() {
let name = this.props.rowData.brand_name;
let is_hot = this.props.rowData.is_hot;
let is_show_new = this.props.rowData.is_show_new;
return(
<View style={styles.rowTitle}>
<Text style={styles.rowText}>{name}</Text>
{is_show_new=='Y'?<View style={styles.new}><Text style={styles.text}>NEW</Text></View>:null}
{is_hot=='Y'?<View style={styles.hot}><Text style={styles.text}>HOT</Text></View>:null}
</View>
);
}
};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
rowText: {
textAlign: 'left',
fontSize: 14,
marginLeft:10,
},
rowTitle: {
flexDirection: 'row',
alignItems: 'center',
height: 44,
width,
backgroundColor: 'white',
borderBottomColor: 'black',
borderBottomWidth: 0.5,
},
text: {
textAlign: 'left',
fontSize: 10,
color: 'white',
},
hot: {
alignItems: 'center',
height: 15,
width: 30,
backgroundColor: 'red',
marginLeft: 10,
justifyContent: 'center',
borderRadius: 30,
},
new: {
alignItems: 'center',
height: 15,
width: 30,
backgroundColor: 'green',
marginLeft: 10,
justifyContent: 'center',
borderRadius: 50,
},
});
... ...
... ... @@ -16,6 +16,10 @@ import {Map} from 'immutable';
import BrandSwiper from './BrandSwiper';
import BannerReourceList from './BannerReourceList';
import BrandFliter from './BrandFliter';
import ChannelFliter from './ChannelFliter';
import AllBrandListCell from './AllBrandListCell';
import NewHotBannerListCell from './NewHotBannerListCell';
export default class Brand extends Component {
... ... @@ -41,14 +45,6 @@ export default class Brand extends Component {
}
renderSectionHeader(sectionData, sectionID) {
return (
<View style={styles.sessionTitle}>
<Text style={styles.sessionText}>{sectionID}</Text>
</View>
);
}
renderHeader(){
let data = this.props.reourceForBoy;
let bannerForBoy = data.get('bannerForBoy');
... ... @@ -64,39 +60,22 @@ export default class Brand extends Component {
);
}
renderSectionHeader(sectionData, sectionID) {
return (
<View style={styles.sessionTitle}>
<Text style={styles.sessionText}>{sectionID}</Text>
</View>
);
}
renderRow(rowData, sectionID, rowID, highlightRow) {
if (this.props.brandFliter == 0) {
let name = rowData.brand_name;
let is_hot = rowData.is_hot;
let is_show_new = rowData.is_show_new;
return (
<View style={styles.rowTitle}>
<Text style={styles.rowText}>{name}</Text>
{is_show_new=='Y'?<View style={styles.new}><Text style={styles.text}>NEW</Text></View>:null}
{is_hot=='Y'?<View style={styles.hot}><Text style={styles.text}>HOT</Text></View>:null}
</View>
<AllBrandListCell rowData={rowData}/>
);
}else {
let newSrc = rowData?rowData.brand_ico.replace('{mode}', 1)
.replace('{width}', itemWidth)
.replace('{height}', itemWidth):rowData.brand_ico;
return (
<TouchableOpacity activeOpacity={0.5} onPress={() => {
// this.props.onPressRecommendItem && this.props.onPressRecommendItem(rowData.get('url'));
}}>
<View style={styles.rowContainer}>
<Image
source={{uri: newSrc}}
style={styles.thumbnail}
>
<View style={styles.itemTitle}>
<Text style={styles.itemText} numberOfLines={1}>{rowData.brand_name}</Text>
</View>
</Image>
</View>
</TouchableOpacity>
<NewHotBannerListCell rowData={rowData}/>
);
}
}
... ... @@ -136,6 +115,7 @@ export default class Brand extends Component {
return (
<View style={styles.container}>
<ChannelFliter selectID={0} onChannelPressFliter={this.props.onChannelPressFliter}/>
<ListView
contentContainerStyle={contentContainerStyle}
enableEmptySections={true}
... ... @@ -150,7 +130,6 @@ export default class Brand extends Component {
}
let {width, height} = Dimensions.get('window');
let itemWidth = width / 3;
let styles = StyleSheet.create({
container: {
... ... @@ -180,61 +159,4 @@ let styles = StyleSheet.create({
width,
backgroundColor: '#444',
},
rowText: {
textAlign: 'left',
fontSize: 14,
marginLeft:10,
},
rowTitle: {
flexDirection: 'row',
alignItems: 'center',
height: 44,
width,
backgroundColor: 'white',
borderBottomColor: 'black',
borderBottomWidth: 0.5,
},
hot: {
alignItems: 'center',
height: 15,
width: 30,
backgroundColor: 'red',
marginLeft: 10,
justifyContent: 'center',
borderRadius: 30,
},
new: {
alignItems: 'center',
height: 15,
width: 30,
backgroundColor: 'green',
marginLeft: 10,
justifyContent: 'center',
borderRadius: 50,
},
text: {
textAlign: 'left',
fontSize: 10,
color: 'white',
},
thumbnail: {
borderWidth: 0.5,
borderColor: '#CCC',
width: itemWidth,
height: itemWidth,
},
itemTitle: {
marginLeft:5,
marginTop: itemWidth - 30,
justifyContent: 'center',
height: 30,
width: itemWidth - 10,
backgroundColor: 'transparent',
},
itemText: {
fontWeight: 'bold',
textAlign: 'center',
color: 'gray',
fontSize: 10,
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
View,
Text,
ListView,
TouchableOpacity,
Dimensions,
StyleSheet,
} = ReactNative;
export default class ChannelFliter extends React.Component {
constructor(props) {
super (props);
this._renderRow = this._renderRow.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
});
this.state = {
filters: [
{
name: 'Boy',
isSelect: false,
},
{
name: 'Girl',
isSelect: false,
},
{
name: 'Kid',
isSelect: false,
},
{
name: 'Lifestyle',
isSelect: false,
},
],
selectedIndex: this.props.selectID,
};
}
_renderRow(rowData, sectionID, rowID) {
let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
return (
<TouchableOpacity onPress={() => {
let filters = this.state.filters;
let filter = this.state.filters[rowID];
if (this.state.selectedIndex == rowID) {
return;
}
filter.isSelect = !filter.isSelect;
filters[rowID] = filter;
this.setState({
selectedIndex: rowID,
filters,
});
this.props.onChannelPressFliter && this.props.onChannelPressFliter(rowID);
}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
</View>
</TouchableOpacity>
);
}
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.separator}>
</View>
);
}
render() {
let {style} = this.props;
return (
<View style={[styles.container, style]}>
<ListView
contentContainerStyle={[styles.contentContainer, style]}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(this.state.filters)}
renderRow={this._renderRow}
renderSeparator={this._renderSeparator}
scrollEnabled={false}
scrollsToTop={false}
/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
marginLeft: -1,
width: width + 2,
height: 37,
borderTopColor: 'transparent',
borderBottomColor: '#e5e5e5',
borderWidth: 0.5,
backgroundColor:'white',
},
contentContainer: {
flexDirection: 'row',
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: Math.ceil(width / 4),
height: 37,
backgroundColor:'white',
},
name: {
color: '#b0b0b0',
},
separator: {
width: 0.5,
top: 37 / 4,
height: 37 / 2,
backgroundColor: '#e5e5e5',
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
StyleSheet,
Text,
View,
Image,
Dimensions,
TouchableOpacity,
} = ReactNative;
export default class NewHotBannerListCell extends React.Component {
constructor(props) {
super(props);
}
render() {
let rowData = this.props.rowData;
let newSrc = rowData?rowData.brand_ico.replace('{mode}', 1)
.replace('{width}', itemWidth)
.replace('{height}', itemWidth):rowData.brand_ico;
return (
<TouchableOpacity activeOpacity={0.5} onPress={() => {
// this.props.onPressRecommendItem && this.props.onPressRecommendItem(rowData.get('url'));
}}>
<View style={styles.rowContainer}>
<Image
source={{uri: newSrc}}
style={styles.thumbnail}
>
<View style={styles.itemTitle}>
<Text style={styles.itemText} numberOfLines={1}>{rowData.brand_name}</Text>
</View>
</Image>
</View>
</TouchableOpacity>
);
}
};
let {width, height} = Dimensions.get('window');
let itemWidth = width / 3;
let styles = StyleSheet.create({
thumbnail: {
borderWidth: 0.5,
borderColor: '#CCC',
width: itemWidth,
height: itemWidth,
},
itemTitle: {
marginLeft:5,
marginTop: itemWidth - 30,
justifyContent: 'center',
height: 30,
width: itemWidth - 10,
backgroundColor: 'transparent',
},
itemText: {
fontWeight: 'bold',
textAlign: 'center',
color: 'gray',
fontSize: 10,
},
});
... ...
... ... @@ -36,6 +36,7 @@ export default keyMirror({
GETBRANDRESOURCE_FOR_BOY_FAILURE: null,
SET_BRAND_FILTER: null,
SET_CHANNEL_FILTER: null,
JUMP_WITH_URL: null,
... ...
... ... @@ -49,6 +49,7 @@ class BrandContainer extends Component {
this._onPressSlideItem = this._onPressSlideItem.bind(this);
this._onPressFilter = this._onPressFilter.bind(this);
this._onChannelPressFliter = this._onChannelPressFliter.bind(this);
}
... ... @@ -69,8 +70,13 @@ class BrandContainer extends Component {
this.props.actions.setBrandFilter(value);
}
_onChannelPressFliter(value){
this.props.actions.setChannelFilter(value);
}
render() {
let {
channelFliter,
brandFliter,
brandListForBoy,
reourceForBoy,
... ... @@ -78,12 +84,13 @@ class BrandContainer extends Component {
return (
<View style={styles.container}>
<Brand
channelFliter= {channelFliter}
brandFliter= {brandFliter}
brandListForBoy= {brandListForBoy}
reourceForBoy= {reourceForBoy}
onPressFilter= {this._onPressFilter}
onPressSlideItem= {this._onPressSlideItem}
onChannelPressFliter={this._onChannelPressFliter}
/>
</View>
);
... ...
... ... @@ -7,6 +7,7 @@ const {
SET_TYPE,
SET_BRAND_FILTER,
SET_CHANNEL_FILTER,
GETBRANDLIST_FOR_BOY_REQUEST,
GETBRANDLIST_FOR_BOY_SUCCESS,
... ... @@ -26,6 +27,13 @@ export function setBrandFilter(filter) {
};
}
export function setChannelFilter(filter) {
return {
type: SET_CHANNEL_FILTER,
payload: filter
};
}
export function getBrandListForBoyRequest() {
return {
type: GETBRANDLIST_FOR_BOY_REQUEST,
... ...
... ... @@ -4,6 +4,7 @@ import {Record, List, Map} from 'immutable';
let InitialState = Record({
brandFliter: 0,
channelFliter:0,
brandListForBoy: new (Record({
all_list: Map(),
hot_list: List(),
... ...
... ... @@ -7,6 +7,7 @@ const {
SET_TYPE,
SET_BRAND_FILTER,
SET_CHANNEL_FILTER,
GETBRANDLIST_FOR_BOY_REQUEST,
GETBRANDLIST_FOR_BOY_SUCCESS,
... ... @@ -25,9 +26,15 @@ export default function brandReducer(state=initialState, action) {
case SET_TYPE: {
return state.set('type', action.payload);
}
case SET_BRAND_FILTER:{
return state.set('brandFliter', action.payload);
}
case SET_CHANNEL_FILTER:{
return state.set('channelFliter', action.payload);
}
case GETBRANDLIST_FOR_BOY_REQUEST:
{
return state;
... ...