settingState for open thumbnail

wangdicoder · wangdicoder · commit d5580cc48cf2 · 2016-12-04T03:13:11.000+11:00
diff --git a/js/actions/actionTypes.js b/js/actions/actionTypes.js
@@ -21,9 +21,11 @@ export const FETCH_TARGET_MORE_DATA_REQUEST = 'FETCH_TARGET_MORE_DATA_REQUEST';
 export const FETCH_TARGET_MORE_DATA_FAILURE = 'FETCH_TARGET_MORE_DATA_FAILURE';
 export const FETCH_TARGET_DATA_IS_FULL = 'FETCH_TARGET_DATA_IS_FULL';
 
-export const CHANGE_COLOR = 'CHANGE_COLOR';
-
 export const UPDATE_STAR_LIST = 'UPDATE_STAR_LIST';
 export const STAR_DATA_SUCCESS = 'STAR_DATA_SUCCESS';
 export const UNSTAR_DATA_SUCCESS = 'UNSTAR_DATA_SUCCESS';
-export const UPDATE_STAR_STATE = 'UPDATE_STAR_STATE';
+export const UPDATE_STAR_STATE = 'UPDATE_STAR_STATE';
+
+export const CHANGE_COLOR = 'CHANGE_COLOR';
+export const OPEN_SHOW_THUMBNAIL = 'OPEN_SHOW_THUMBNAIL';
+export const CLOSE_SHOW_THUMBNAIL = 'CLOSE_SHOW_THUMBNAIL';
diff --git a/js/actions/modifySettings.js b/js/actions/modifySettings.js
@@ -9,5 +9,17 @@ export function changeColor(color) {
     return {
         type: TYPES.CHANGE_COLOR,
         color: color
+    };
+}
+
+export function changeShowThumbnail(value) {
+    if(value) {
+        return {
+            type: TYPES.OPEN_SHOW_THUMBNAIL
+        };
+    }else {
+        return {
+            type: TYPES.CLOSE_SHOW_THUMBNAIL
+        };
     }
 }
diff --git a/js/components/ListViewWithInfo.js b/js/components/ListViewWithInfo.js
@@ -23,7 +23,8 @@ export default class ListViewWithInfo extends Component{
         renderTag: PropTypes.bool,
         isRenderFooter: PropTypes.bool,
         onEndReached: PropTypes.func,
-        isFullData: PropTypes.bool
+        isFullData: PropTypes.bool,
+        isOpenThumbnail: PropTypes.bool
     };
 
     render(){
@@ -89,7 +90,7 @@ export default class ListViewWithInfo extends Component{
         return(
             <View style={styles.itemContainer}>
                 <View style={styles.imgPart}>
-                    {rowData.images ?
+                    {(rowData.images && this.props.isOpenThumbnail) ?
                         <Image style={styles.image} source={{uri: getCorrectImageSizeUrl(rowData.images[0])}} />
                         :
                         <Image style={styles.image} source={require('../assets/user_article_no_data.png')}/>
diff --git a/js/containers/DiscoveryTab/TextTabPage.js b/js/containers/DiscoveryTab/TextTabPage.js
@@ -51,6 +51,7 @@ class TextTabPage extends BackPageComponent{
                                 onEndReached={this._listViewOnEndReached.bind(this)}
                                 isFullData={this.props.isFullData}
                                 mainThemeColor={this.props.mainThemeColor}
+                                isOpenThumbnail={this.props.isOpenThumbnail}
                             />
                         )
                     }
@@ -109,7 +110,8 @@ const mapStateToProps = (state) => {
         pageNumber: state.targetData.pageNumber,
         isFullData: state.targetData.isFullData,
         error: state.targetData.error,
-        mainThemeColor: state.settingState.mainThemeColor
+        mainThemeColor: state.settingState.mainThemeColor,
+        isOpenThumbnail: state.settingState.isOpenThumbnail
     };
 };
 
diff --git a/js/containers/DiscoveryTab/index.js b/js/containers/DiscoveryTab/index.js
@@ -162,7 +162,7 @@ class DiscoveryFragment extends Component{
                     </View>
                 </View>
                 <View style={styles.imgPart}>
-                    {rowData.images ?
+                    {(rowData.images && this.props.isOpenThumbnail) ?
                         <Image style={styles.image} source={{uri: getCorrectImageSizeUrl(rowData.images[0])}} />
                         :
                         <Image style={styles.image} source={require('../../assets/user_article_no_data.png')}/>
@@ -310,7 +310,8 @@ const mapStateToProps = (state) => {
         loading: state.randomData.loading,
         error: state.randomData.error,
         isRenderFooter: state.randomData.isRenderFooter,
-        mainThemeColor: state.settingState.mainThemeColor
+        mainThemeColor: state.settingState.mainThemeColor,
+        isOpenThumbnail: state.settingState.isOpenThumbnail
     };
 };
 
diff --git a/js/containers/MainPage.js b/js/containers/MainPage.js
@@ -30,7 +30,7 @@ class BottomTabBar extends Component{
     constructor(props){
         super(props);
         this.state = {
-            selectedTab: 'discovery'
+            selectedTab: 'more'
         };
     }
 
diff --git a/js/containers/MoreTab/index.js b/js/containers/MoreTab/index.js
@@ -14,6 +14,8 @@ import px2dp from '../../utils/px2dp';
 import Avatar from '../../components/Avatar';
 import colors from '../../constants/colors';
 import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux';
+import * as Actions from '../../actions/modifySettings';
 import ShareUtil from '../../utils/ShareUtil';
 
 import ThemeColorPage from './ThemeColorPage';
@@ -27,6 +29,7 @@ class MoreFragment extends Component{
     }
 
     render(){
+        const {actions, mainThemeColor, isOpenThumbnail} = this.props;
         return(
             <View style={styles.container}>
                 <NavigationBar title="更多"/>
@@ -50,13 +53,13 @@ class MoreFragment extends Component{
                         <RowItem title="首页内容展示顺序" icon="md-reorder" iconColor='lightskyblue' onPress={this._itemClickCallback.bind(this, 1)}/>
                         <RowItem title="自定义主题" icon="md-brush" iconColor={colors.orange} onPress={this._itemClickCallback.bind(this, 2)}/>
                         {/*<RowItem title="选择语言 / Language" icon="md-globe" iconColor={colors.purple}  onPress={this._itemClickCallback.bind(this, 3)}/>*/}
-                        <RowItemWithSwitcher title="夜间模式" icon="md-moon" iconColor="#7b68ee" renderSegment={false} onTintColor={this.props.mainThemeColor} />
+                        <RowItemWithSwitcher title="夜间模式" icon="md-moon" iconColor="#7b68ee" onTintColor={mainThemeColor} switcherValue={false}/>
+                        <RowItemWithSwitcher title="显示列表缩略图" icon="md-browsers" iconColor='plum' onTintColor={mainThemeColor} switcherValue={isOpenThumbnail} onValueChange={(value) => actions.changeShowThumbnail(value)} renderSegment={false}/>
                     </View>
                     <View style={styles.block}>
                         <RowItem title="关于作者" icon="md-happy" iconColor="#9acd32" renderSegment={false} onPress={this._itemClickCallback.bind(this, 4)}/>
                     </View>
                     <View style={styles.block}>
-                        <RowItemWithSwitcher title="显示列表缩略图" icon="md-browsers" iconColor='plum' onTintColor={this.props.mainThemeColor} switcherValue={false} />
                         <RowItem title="反馈" icon="md-text" iconColor={colors.lightGreen} onPress={this._itemClickCallback.bind(this, 6)} isShowRightArrow={false}/>
                         <RowItem title="分享" icon="md-share" iconColor={colors.orangeRed} renderSegment={false} onPress={this._itemClickCallback.bind(this, 7)} isShowRightArrow={false}/>
                     </View>
@@ -161,8 +164,15 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state) => {
     return {
-        mainThemeColor: state.settingState.mainThemeColor
+        mainThemeColor: state.settingState.mainThemeColor,
+        isOpenThumbnail: state.settingState.isOpenThumbnail
     };
 };
 
-export default connect(mapStateToProps)(MoreFragment);
+const mapDispatchToProps = (dispatch) => {
+    return {
+        actions: bindActionCreators(Actions, dispatch)
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(MoreFragment);
diff --git a/js/dao/SettingsDataDAO.js b/js/dao/SettingsDataDAO.js
@@ -0,0 +1,3 @@
+/**
+ * Created by wangdi on 4/12/16.
+ */
diff --git a/js/reducers/settingState.js b/js/reducers/settingState.js
@@ -7,16 +7,30 @@ import colors from '../constants/colors';
 import * as TYPES from '../actions/actionTypes';
 
 const initialState = {
-    mainThemeColor: colors.dodgerBlue
+    mainThemeColor: colors.dodgerBlue,
+    isOpenThumbnail: false
 }
 
 export default function settingState(state=initialState, action) {
     switch(action.type){
         case TYPES.CHANGE_COLOR:
             return Object.assign({}, state, {
+                ...state,
                 mainThemeColor: action.color
             });
 
+        case TYPES.OPEN_SHOW_THUMBNAIL:
+            return Object.assign({}, state, {
+                ...state,
+                isOpenThumbnail: true
+            });
+
+        case TYPES.CLOSE_SHOW_THUMBNAIL:
+            return Object.assign({}, state, {
+                ...state,
+                isOpenThumbnail: false
+            });
+
         default:
             return state;
     }

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ class BottomTabBar extends Component{`
`30`	`30`	`constructor(props){`
`31`	`31`	`super(props);`
`32`	`32`	`this.state = {`
`33`		`- selectedTab: 'discovery'`
	`33`	`+ selectedTab: 'more'`
`34`	`34`	`};`
`35`	`35`	`}`
`36`	`36`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/**`
	`2`	`+ * Created by wangdi on 4/12/16.`
	`3`	`+ */`