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 { @@ -28,6 +28,11 @@ export default class Category extends Component {
28 <ChannelFliter selectID={this.props.channelFliter} onChannelPressFliter={this.props.onChannelPressFliter}/> 28 <ChannelFliter selectID={this.props.channelFliter} onChannelPressFliter={this.props.onChannelPressFliter}/>
29 <CategoryList 29 <CategoryList
30 categoryList={this.props.categoryList} 30 categoryList={this.props.categoryList}
  31 + pressLeftRow={this.props.pressLeftRow}
  32 + currentCateId={this.props.currentCateId}
  33 + currentChannelId={this.props.currentChannelId}
  34 + channelFliter= {this.props.channelFliter}
  35 + pressSubCateRow={this.props.pressSubCateRow}
31 /> 36 />
32 </View> 37 </View>
33 ); 38 );
@@ -9,6 +9,8 @@ import ReactNative, { @@ -9,6 +9,8 @@ import ReactNative, {
9 StyleSheet, 9 StyleSheet,
10 Dimensions, 10 Dimensions,
11 TouchableOpacity, 11 TouchableOpacity,
  12 + Animated,
  13 + LayoutAnimation,
12 } from 'react-native'; 14 } from 'react-native';
13 import immutable from 'immutable'; 15 import immutable from 'immutable';
14 16
@@ -17,44 +19,99 @@ export default class CategoryList extends Component { @@ -17,44 +19,99 @@ export default class CategoryList extends Component {
17 constructor(props) { 19 constructor(props) {
18 super(props); 20 super(props);
19 this.renderRow = this.renderRow.bind(this); 21 this.renderRow = this.renderRow.bind(this);
  22 + this.renderSeparator=this.renderSeparator.bind(this);
  23 + this._pressLeftRow=this._pressLeftRow.bind(this);
20 this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)}); 24 this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
  25 + this.subRenderRow=this.subRenderRow.bind(this);
  26 + this.state = {
  27 + offsetx: 0,
  28 + };
  29 + }
  30 + componentWillMount() {
  31 + // Animate creation
  32 + LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  33 + }
  34 +
  35 + _pressLeftRow(value,rowID){
  36 + this.props.pressLeftRow(value,rowID);
  37 + if(rowID==this.props.currentCateId){
  38 + LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  39 + if(this.state.offsetx<0){
  40 + this.setState({offsetx:0});
  41 + }else{
  42 + this.setState({offsetx: -width/2});
  43 + }
  44 + }else{
  45 + if(this.state.offsetx==0){
  46 + this.setState({offsetx: -width/2});
  47 + }
  48 + }
  49 + }
  50 +
  51 + subRenderRow(rowData, sectionID, rowID, highlightRow) {
  52 +
  53 + let selectText = rowData.get('category_name');
  54 + return (
  55 + <TouchableOpacity onPress={() => this.props.pressSubCateRow(rowData.toJS())}>
  56 + <View style={styles.subRow} >
  57 + <Text style={styles.title} numberOfLines={1}>
  58 + {selectText}
  59 + </Text>
  60 + </View>
  61 + </TouchableOpacity>
  62 + );
21 } 63 }
22 64
23 renderRow(rowData, sectionID, rowID, highlightRow) { 65 renderRow(rowData, sectionID, rowID, highlightRow) {
24 - let selectText = this.props.filterNameFactors.get(rowData.get('category_name'));  
25 - console.log('=========renderRow========');  
26 - console.log(rowData);  
27 - console.log(selectText);  
28 - console.log('==========renderRow======='); 66 + let selectText = rowData.get('category_name');
29 return ( 67 return (
30 - <TouchableOpacity onPress={() => this._pressLeftRow(rowData.toJS())}> 68 + <TouchableOpacity onPress={() => this._pressLeftRow(rowData.toJS(),rowID)}>
31 <View style={styles.row} > 69 <View style={styles.row} >
32 <Text style={styles.title} numberOfLines={1}> 70 <Text style={styles.title} numberOfLines={1}>
33 {selectText} 71 {selectText}
34 </Text> 72 </Text>
  73 + <Image style={styles.arrow} source={require('../../images/shared_enterbuttom_normal.png')}/>
35 </View> 74 </View>
36 </TouchableOpacity> 75 </TouchableOpacity>
37 ); 76 );
38 } 77 }
39 78
  79 +
  80 + renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
  81 + return (
  82 + <View key={'sep' + rowID} style={styles.separator}>
  83 + </View>
  84 + );
  85 + }
  86 +
40 render() { 87 render() {
41 let {categoryList} = this.props; 88 let {categoryList} = this.props;
42 - let subList = [];  
43 - console.log('=========sss========');  
44 - console.log(categoryList);  
45 - console.log(categoryList.get('categoryListForBoy').toArray());  
46 - console.log('==========ddddd=======');  
47 - subList=categoryList.get('categoryListForBoy').toArray(); 89 + let cateList = [];
  90 + let subCateList=[];
  91 + if(categoryList.get(this.props.currentChannelId)){
  92 + cateList=categoryList.get(this.props.currentChannelId).toArray();
  93 + }
  94 + if(cateList[0]){
  95 + subCateList=categoryList.get(this.props.currentChannelId).get(this.props.currentCateId).get('sub').toArray();
  96 + }
48 return ( 97 return (
49 <View style={styles.container}> 98 <View style={styles.container}>
50 <ListView 99 <ListView
51 - contentContainerStyle={styles.contentContainer}  
52 - dataSource={this.dataSource.cloneWithRows(subList)} 100 + style={styles.contentContainer}
  101 + dataSource={this.dataSource.cloneWithRows(cateList)}
53 enableEmptySections={true} 102 enableEmptySections={true}
54 renderRow={this.renderRow} 103 renderRow={this.renderRow}
  104 + renderSeparator={this.renderSeparator}
  105 + scrollsToTop={false}
  106 + />
  107 + <ListView
  108 + style={[styles.subContentContainer, {marginLeft: this.state.offsetx}]}
  109 + dataSource={this.dataSource.cloneWithRows(subCateList)}
  110 + enableEmptySections={true}
  111 + renderRow={this.subRenderRow}
  112 + renderSeparator={this.renderSeparator}
55 scrollsToTop={false} 113 scrollsToTop={false}
56 /> 114 />
57 -  
58 </View> 115 </View>
59 ); 116 );
60 } 117 }
@@ -62,26 +119,55 @@ export default class CategoryList extends Component { @@ -62,26 +119,55 @@ export default class CategoryList extends Component {
62 119
63 let {width, height} = Dimensions.get('window'); 120 let {width, height} = Dimensions.get('window');
64 121
65 -  
66 let styles = StyleSheet.create({ 122 let styles = StyleSheet.create({
67 container: { 123 container: {
68 flex: 1, 124 flex: 1,
69 flexDirection: 'row', 125 flexDirection: 'row',
70 - position: 'absolute',  
71 - top: 37,  
72 - left: 0,  
73 width: width, 126 width: width,
74 height: height - 37, 127 height: height - 37,
75 backgroundColor: 'white', 128 backgroundColor: 'white',
76 }, 129 },
77 contentContainer: { 130 contentContainer: {
78 backgroundColor: '#f4f4f4', 131 backgroundColor: '#f4f4f4',
  132 + width: width,
  133 + },
  134 + subContentContainer: {
  135 + // position: 'absolute',
  136 + backgroundColor: '#e0e0e0',
  137 + width: width/2,
  138 + height: height - 37,
  139 +
79 }, 140 },
80 row: { 141 row: {
81 - justifyContent: 'center', 142 + flexDirection: 'row',
  143 + alignItems: 'center',
82 height: 50, 144 height: 50,
83 width: width, 145 width: width,
84 paddingLeft: 15, 146 paddingLeft: 15,
85 backgroundColor: '#f4f4f4', 147 backgroundColor: '#f4f4f4',
86 }, 148 },
  149 + subRow: {
  150 + flexDirection: 'row',
  151 + alignItems: 'center',
  152 + height: 40,
  153 + width: width,
  154 + paddingLeft: 15,
  155 + backgroundColor: '#e0e0e0',
  156 + },
  157 + separator: {
  158 + width: width,
  159 + top: -2,
  160 + height: 1,
  161 + backgroundColor: '#e5e5e5',
  162 + },
  163 + title: {
  164 + flex: 1,
  165 + fontSize: 17,
  166 + color: '#444444',
  167 + },
  168 + arrow: {
  169 + marginRight: 8,
  170 + width: 12,
  171 + height: 12,
  172 + },
87 }); 173 });
@@ -28,19 +28,19 @@ export default class ChannelFliter extends React.Component { @@ -28,19 +28,19 @@ export default class ChannelFliter extends React.Component {
28 this.state = { 28 this.state = {
29 filters: [ 29 filters: [
30 { 30 {
31 - name: 'Boy', 31 + name: 'boy',
32 isSelect: false, 32 isSelect: false,
33 }, 33 },
34 { 34 {
35 - name: 'Girl', 35 + name: 'girl',
36 isSelect: false, 36 isSelect: false,
37 }, 37 },
38 { 38 {
39 - name: 'Kid', 39 + name: 'kids',
40 isSelect: false, 40 isSelect: false,
41 }, 41 },
42 { 42 {
43 - name: 'Lifestyle', 43 + name: 'lifestyle',
44 isSelect: false, 44 isSelect: false,
45 }, 45 },
46 ], 46 ],
@@ -66,7 +66,7 @@ export default class ChannelFliter extends React.Component { @@ -66,7 +66,7 @@ export default class ChannelFliter extends React.Component {
66 selectedIndex: rowID, 66 selectedIndex: rowID,
67 filters, 67 filters,
68 }); 68 });
69 - this.props.onChannelPressFliter && this.props.onChannelPressFliter(rowID); 69 + this.props.onChannelPressFliter && this.props.onChannelPressFliter(rowData.name);
70 }}> 70 }}>
71 <View key={'row' + rowID} style={styles.rowContainer}> 71 <View key={'row' + rowID} style={styles.rowContainer}>
72 <Text style={[styles.name, colorStyle]}>{rowData.name}</Text> 72 <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
@@ -79,4 +79,10 @@ export default keyMirror({ @@ -79,4 +79,10 @@ export default keyMirror({
79 GET_CATEGORY_SUCCESS:null, 79 GET_CATEGORY_SUCCESS:null,
80 GET_CATEGORY_FAILURE:null, 80 GET_CATEGORY_FAILURE:null,
81 81
  82 + SET_CURRENT_CATEGORY_ID:null,
  83 + SET_CURRENT_CHANNEL_ID:null,
  84 +
  85 + JUMP_TO_CATEGORY:null,
  86 +
  87 +
82 }); 88 });
@@ -10,6 +10,7 @@ import ReactNative, { @@ -10,6 +10,7 @@ import ReactNative, {
10 NativeModules, 10 NativeModules,
11 InteractionManager, 11 InteractionManager,
12 NativeAppEventEmitter, 12 NativeAppEventEmitter,
  13 + Alert,
13 } from 'react-native' 14 } from 'react-native'
14 15
15 import {bindActionCreators} from 'redux'; 16 import {bindActionCreators} from 'redux';
@@ -47,7 +48,8 @@ class CategoryContainer extends Component { @@ -47,7 +48,8 @@ class CategoryContainer extends Component {
47 constructor(props) { 48 constructor(props) {
48 super(props); 49 super(props);
49 this._onChannelPressFliter = this._onChannelPressFliter.bind(this); 50 this._onChannelPressFliter = this._onChannelPressFliter.bind(this);
50 - 51 + this._pressLeftRow=this._pressLeftRow.bind(this);
  52 + this._pressSubCateRow=this._pressSubCateRow.bind(this);
51 } 53 }
52 54
53 componentDidMount() { 55 componentDidMount() {
@@ -58,22 +60,36 @@ class CategoryContainer extends Component { @@ -58,22 +60,36 @@ class CategoryContainer extends Component {
58 60
59 } 61 }
60 _onChannelPressFliter(value){ 62 _onChannelPressFliter(value){
  63 + this.props.actions.setCurrentCateId(0);
  64 + this.props.actions.setCurrentChannelId(value);
  65 + }
  66 + _pressLeftRow(value,rowID){
  67 + this.props.actions.setCurrentCateId(rowID);
  68 + }
61 69
  70 + _pressSubCateRow(value){
  71 + console.log(value);
  72 + this.props.actions.jumpToCategory(value);
62 } 73 }
63 -  
64 74
65 render() { 75 render() {
66 let { 76 let {
67 channelFliter, 77 channelFliter,
68 categoryList, 78 categoryList,
  79 + currentChannelId,
  80 + currentCateId,
69 } = this.props.category; 81 } = this.props.category;
70 82
71 return ( 83 return (
72 <View style={styles.container}> 84 <View style={styles.container}>
73 <Category 85 <Category
74 categoryList={categoryList} 86 categoryList={categoryList}
  87 + currentChannelId={currentChannelId}
  88 + currentCateId={currentCateId}
75 channelFliter= {channelFliter} 89 channelFliter= {channelFliter}
  90 + pressLeftRow={this._pressLeftRow}
76 onChannelPressFliter={this._onChannelPressFliter} 91 onChannelPressFliter={this._onChannelPressFliter}
  92 + pressSubCateRow={this._pressSubCateRow}
77 /> 93 />
78 </View> 94 </View>
79 ); 95 );
@@ -10,6 +10,11 @@ const { @@ -10,6 +10,11 @@ const {
10 GET_CATEGORY_SUCCESS, 10 GET_CATEGORY_SUCCESS,
11 GET_CATEGORY_FAILURE, 11 GET_CATEGORY_FAILURE,
12 12
  13 + SET_CURRENT_CATEGORY_ID,
  14 + SET_CURRENT_CHANNEL_ID,
  15 +
  16 + JUMP_TO_CATEGORY,
  17 +
13 } = require('../../constants/actionTypes').default; 18 } = require('../../constants/actionTypes').default;
14 19
15 export function getCategory() { 20 export function getCategory() {
@@ -21,7 +26,6 @@ export function getCategory() { @@ -21,7 +26,6 @@ export function getCategory() {
21 dispatch(getCategorySuccess(json)); 26 dispatch(getCategorySuccess(json));
22 }) 27 })
23 .catch(error => { 28 .catch(error => {
24 - console.log(error);  
25 dispatch(getCategoryFailure(error)); 29 dispatch(getCategoryFailure(error));
26 }); 30 });
27 }; 31 };
@@ -46,3 +50,26 @@ export function getCategoryFailure(error) { @@ -46,3 +50,26 @@ export function getCategoryFailure(error) {
46 payload: error 50 payload: error
47 } 51 }
48 } 52 }
  53 +
  54 +export function setCurrentCateId(rowID){
  55 + return {
  56 + type: SET_CURRENT_CATEGORY_ID,
  57 + payload: rowID
  58 + }
  59 +}
  60 +
  61 +export function setCurrentChannelId(channelID){
  62 + return {
  63 + type: SET_CURRENT_CHANNEL_ID,
  64 + payload: channelID
  65 + }
  66 +}
  67 +
  68 +export function jumpToCategory(value){
  69 + ReactNative.NativeModules.YH_CommonHelper.jumpToCategory(value);
  70 + return {
  71 + type: SET_CURRENT_CHANNEL_ID,
  72 + payload: value
  73 + }
  74 +}
  75 +
@@ -4,11 +4,13 @@ import {Record, List, Map} from 'immutable'; @@ -4,11 +4,13 @@ import {Record, List, Map} from 'immutable';
4 4
5 let InitialState = Record({ 5 let InitialState = Record({
6 channelFliter:0, 6 channelFliter:0,
  7 + currentChannelId:'boy',
  8 + currentCateId:'0',
7 categoryList: new (Record({ 9 categoryList: new (Record({
8 - categoryListForBoy: List(),  
9 - categoryListForGirl: List(),  
10 - categoryListForKids: List(),  
11 - categoryListForLifestyle: List(), 10 + boy: List(),
  11 + girl: List(),
  12 + kids: List(),
  13 + lifestyle: List(),
12 })), 14 })),
13 15
14 }); 16 });
@@ -6,6 +6,11 @@ import Immutable, {Map} from 'immutable'; @@ -6,6 +6,11 @@ import Immutable, {Map} from 'immutable';
6 const { 6 const {
7 SET_TYPE, 7 SET_TYPE,
8 GET_CATEGORY_SUCCESS, 8 GET_CATEGORY_SUCCESS,
  9 +
  10 + SET_CURRENT_CATEGORY_ID,
  11 + SET_CURRENT_CHANNEL_ID,
  12 +
  13 + JUMP_TO_CATEGORY,
9 } = require('../../constants/actionTypes').default; 14 } = require('../../constants/actionTypes').default;
10 15
11 const initialState = new InitialState; 16 const initialState = new InitialState;
@@ -23,16 +28,19 @@ export default function categoryReducer(state=initialState, action) { @@ -23,16 +28,19 @@ export default function categoryReducer(state=initialState, action) {
23 kids, 28 kids,
24 lifestyle, 29 lifestyle,
25 } = action.payload; 30 } = action.payload;
26 - console.log('=======1=======');  
27 - console.log(boy);  
28 - console.log(girl);  
29 - console.log(kids);  
30 - console.log(lifestyle);  
31 - console.log('=======2=======');  
32 - return state.setIn(['categoryList', 'categoryListForBoy'],Immutable.fromJS(boy))  
33 - .setIn(['categoryList', 'categoryListForGirl'],Immutable.fromJS(girl))  
34 - .setIn(['categoryList', 'categoryListForKids'],Immutable.fromJS(kids))  
35 - .setIn(['categoryList', 'categoryListForLifestyle'],Immutable.fromJS(lifestyle)); 31 + return state.setIn(['categoryList', 'boy'],Immutable.fromJS(boy))
  32 + .setIn(['categoryList', 'girl'],Immutable.fromJS(girl))
  33 + .setIn(['categoryList', 'kids'],Immutable.fromJS(kids))
  34 + .setIn(['categoryList', 'lifestyle'],Immutable.fromJS(lifestyle));
  35 + }
  36 + case SET_CURRENT_CATEGORY_ID:{
  37 + return state.set('currentCateId',Immutable.fromJS(action.payload));
  38 + }
  39 + case SET_CURRENT_CHANNEL_ID:{
  40 + return state.set('currentChannelId',Immutable.fromJS(action.payload));
  41 + }
  42 + case JUMP_TO_CATEGORY:{
  43 +
36 } 44 }
37 } 45 }
38 46