mobile / YH_RNComponent · Commits

Go to a project

Authored by shixiang
Commit 6c740bd3e72d9aeb9040e44060c067baaa7588dd 1 parent 2792c335

添加品类列表跳转

Inline Side-by-side
Showing 8 changed files with 192 additions and 42 deletions
... ... @@ -28,6 +28,11 @@ export default class Category extends Component {
<ChannelFliter selectID={this.props.channelFliter} onChannelPressFliter={this.props.onChannelPressFliter}/>
<CategoryList
categoryList={this.props.categoryList}
pressLeftRow={this.props.pressLeftRow}
currentCateId={this.props.currentCateId}
currentChannelId={this.props.currentChannelId}
channelFliter= {this.props.channelFliter}
pressSubCateRow={this.props.pressSubCateRow}
/>
</View>
);
... ...
... ... @@ -9,6 +9,8 @@ import ReactNative, {
StyleSheet,
Dimensions,
TouchableOpacity,
Animated,
LayoutAnimation,
} from 'react-native';
import immutable from 'immutable';
... ... @@ -17,44 +19,99 @@ export default class CategoryList extends Component {
constructor(props) {
super(props);
this.renderRow = this.renderRow.bind(this);
this.renderSeparator=this.renderSeparator.bind(this);
this._pressLeftRow=this._pressLeftRow.bind(this);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
this.subRenderRow=this.subRenderRow.bind(this);
this.state = {
offsetx: 0,
};
}
componentWillMount() {
// Animate creation
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
}
_pressLeftRow(value,rowID){
this.props.pressLeftRow(value,rowID);
if(rowID==this.props.currentCateId){
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
if(this.state.offsetx<0){
this.setState({offsetx:0});
}else{
this.setState({offsetx: -width/2});
}
}else{
if(this.state.offsetx==0){
this.setState({offsetx: -width/2});
}
}
}
subRenderRow(rowData, sectionID, rowID, highlightRow) {
let selectText = rowData.get('category_name');
return (
<TouchableOpacity onPress={() => this.props.pressSubCateRow(rowData.toJS())}>
<View style={styles.subRow} >
<Text style={styles.title} numberOfLines={1}>
{selectText}
</Text>
</View>
</TouchableOpacity>
);
}
renderRow(rowData, sectionID, rowID, highlightRow) {
let selectText = this.props.filterNameFactors.get(rowData.get('category_name'));
console.log('=========renderRow========');
console.log(rowData);
console.log(selectText);
console.log('==========renderRow=======');
let selectText = rowData.get('category_name');
return (
<TouchableOpacity onPress={() => this._pressLeftRow(rowData.toJS())}>
<TouchableOpacity onPress={() => this._pressLeftRow(rowData.toJS(),rowID)}>
<View style={styles.row} >
<Text style={styles.title} numberOfLines={1}>
{selectText}
</Text>
<Image style={styles.arrow} source={require('../../images/shared_enterbuttom_normal.png')}/>
</View>
</TouchableOpacity>
);
}
renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.separator}>
</View>
);
}
render() {
let {categoryList} = this.props;
let subList = [];
console.log('=========sss========');
console.log(categoryList);
console.log(categoryList.get('categoryListForBoy').toArray());
console.log('==========ddddd=======');
subList=categoryList.get('categoryListForBoy').toArray();
let cateList = [];
let subCateList=[];
if(categoryList.get(this.props.currentChannelId)){
cateList=categoryList.get(this.props.currentChannelId).toArray();
}
if(cateList[0]){
subCateList=categoryList.get(this.props.currentChannelId).get(this.props.currentCateId).get('sub').toArray();
}
return (
<View style={styles.container}>
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(subList)}
style={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(cateList)}
enableEmptySections={true}
renderRow={this.renderRow}
renderSeparator={this.renderSeparator}
scrollsToTop={false}
/>
<ListView
style={[styles.subContentContainer, {marginLeft: this.state.offsetx}]}
dataSource={this.dataSource.cloneWithRows(subCateList)}
enableEmptySections={true}
renderRow={this.subRenderRow}
renderSeparator={this.renderSeparator}
scrollsToTop={false}
/>
</View>
);
}
... ... @@ -62,26 +119,55 @@ export default class CategoryList extends Component {
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
position: 'absolute',
top: 37,
left: 0,
width: width,
height: height - 37,
backgroundColor: 'white',
},
contentContainer: {
backgroundColor: '#f4f4f4',
width: width,
},
subContentContainer: {
// position: 'absolute',
backgroundColor: '#e0e0e0',
width: width/2,
height: height - 37,
},
row: {
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
height: 50,
width: width,
paddingLeft: 15,
backgroundColor: '#f4f4f4',
},
subRow: {
flexDirection: 'row',
alignItems: 'center',
height: 40,
width: width,
paddingLeft: 15,
backgroundColor: '#e0e0e0',
},
separator: {
width: width,
top: -2,
height: 1,
backgroundColor: '#e5e5e5',
},
title: {
flex: 1,
fontSize: 17,
color: '#444444',
},
arrow: {
marginRight: 8,
width: 12,
height: 12,
},
});
... ...
... ... @@ -28,19 +28,19 @@ export default class ChannelFliter extends React.Component {
this.state = {
filters: [
{
name: 'Boy',
name: 'boy',
isSelect: false,
},
{
name: 'Girl',
name: 'girl',
isSelect: false,
},
{
name: 'Kid',
name: 'kids',
isSelect: false,
},
{
name: 'Lifestyle',
name: 'lifestyle',
isSelect: false,
},
],
... ... @@ -66,7 +66,7 @@ export default class ChannelFliter extends React.Component {
selectedIndex: rowID,
filters,
});
this.props.onChannelPressFliter && this.props.onChannelPressFliter(rowID);
this.props.onChannelPressFliter && this.props.onChannelPressFliter(rowData.name);
}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
... ...
... ... @@ -79,4 +79,10 @@ export default keyMirror({
GET_CATEGORY_SUCCESS:null,
GET_CATEGORY_FAILURE:null,
SET_CURRENT_CATEGORY_ID:null,
SET_CURRENT_CHANNEL_ID:null,
JUMP_TO_CATEGORY:null,
});
... ...
... ... @@ -10,6 +10,7 @@ import ReactNative, {
NativeModules,
InteractionManager,
NativeAppEventEmitter,
Alert,
} from 'react-native'
import {bindActionCreators} from 'redux';
... ... @@ -47,7 +48,8 @@ class CategoryContainer extends Component {
constructor(props) {
super(props);
this._onChannelPressFliter = this._onChannelPressFliter.bind(this);
this._pressLeftRow=this._pressLeftRow.bind(this);
this._pressSubCateRow=this._pressSubCateRow.bind(this);
}
componentDidMount() {
... ... @@ -58,22 +60,36 @@ class CategoryContainer extends Component {
}
_onChannelPressFliter(value){
this.props.actions.setCurrentCateId(0);
this.props.actions.setCurrentChannelId(value);
}
_pressLeftRow(value,rowID){
this.props.actions.setCurrentCateId(rowID);
}
_pressSubCateRow(value){
console.log(value);
this.props.actions.jumpToCategory(value);
}
render() {
let {
channelFliter,
categoryList,
currentChannelId,
currentCateId,
} = this.props.category;
return (
<View style={styles.container}>
<Category
categoryList={categoryList}
currentChannelId={currentChannelId}
currentCateId={currentCateId}
channelFliter= {channelFliter}
pressLeftRow={this._pressLeftRow}
onChannelPressFliter={this._onChannelPressFliter}
pressSubCateRow={this._pressSubCateRow}
/>
</View>
);
... ...
... ... @@ -10,6 +10,11 @@ const {
GET_CATEGORY_SUCCESS,
GET_CATEGORY_FAILURE,
SET_CURRENT_CATEGORY_ID,
SET_CURRENT_CHANNEL_ID,
JUMP_TO_CATEGORY,
} = require('../../constants/actionTypes').default;
export function getCategory() {
... ... @@ -21,7 +26,6 @@ export function getCategory() {
dispatch(getCategorySuccess(json));
})
.catch(error => {
console.log(error);
dispatch(getCategoryFailure(error));
});
};
... ... @@ -46,3 +50,26 @@ export function getCategoryFailure(error) {
payload: error
}
}
export function setCurrentCateId(rowID){
return {
type: SET_CURRENT_CATEGORY_ID,
payload: rowID
}
}
export function setCurrentChannelId(channelID){
return {
type: SET_CURRENT_CHANNEL_ID,
payload: channelID
}
}
export function jumpToCategory(value){
ReactNative.NativeModules.YH_CommonHelper.jumpToCategory(value);
return {
type: SET_CURRENT_CHANNEL_ID,
payload: value
}
}
... ...
... ... @@ -4,11 +4,13 @@ import {Record, List, Map} from 'immutable';
let InitialState = Record({
channelFliter:0,
currentChannelId:'boy',
currentCateId:'0',
categoryList: new (Record({
categoryListForBoy: List(),
categoryListForGirl: List(),
categoryListForKids: List(),
categoryListForLifestyle: List(),
boy: List(),
girl: List(),
kids: List(),
lifestyle: List(),
})),
});
... ...
... ... @@ -6,6 +6,11 @@ import Immutable, {Map} from 'immutable';
const {
SET_TYPE,
GET_CATEGORY_SUCCESS,
SET_CURRENT_CATEGORY_ID,
SET_CURRENT_CHANNEL_ID,
JUMP_TO_CATEGORY,
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
... ... @@ -23,16 +28,19 @@ export default function categoryReducer(state=initialState, action) {
kids,
lifestyle,
} = action.payload;
console.log('=======1=======');
console.log(boy);
console.log(girl);
console.log(kids);
console.log(lifestyle);
console.log('=======2=======');
return state.setIn(['categoryList', 'categoryListForBoy'],Immutable.fromJS(boy))
.setIn(['categoryList', 'categoryListForGirl'],Immutable.fromJS(girl))
.setIn(['categoryList', 'categoryListForKids'],Immutable.fromJS(kids))
.setIn(['categoryList', 'categoryListForLifestyle'],Immutable.fromJS(lifestyle));
return state.setIn(['categoryList', 'boy'],Immutable.fromJS(boy))
.setIn(['categoryList', 'girl'],Immutable.fromJS(girl))
.setIn(['categoryList', 'kids'],Immutable.fromJS(kids))
.setIn(['categoryList', 'lifestyle'],Immutable.fromJS(lifestyle));
}
case SET_CURRENT_CATEGORY_ID:{
return state.set('currentCateId',Immutable.fromJS(action.payload));
}
case SET_CURRENT_CHANNEL_ID:{
return state.set('currentChannelId',Immutable.fromJS(action.payload));
}
case JUMP_TO_CATEGORY:{
}
}
... ...