refactor: can run with toast

soliury · soliury · commit 4391c0a425bc · 2016-02-01T15:09:19.000+08:00
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -1,10 +1,12 @@
 import * as home from './home';
 import * as user from './user';
+import * as utils from './utils';
 
 
 export default {
 	...home,
-	...user
+	...user,
+	...utils
 };
 
 
diff --git a/src/actions/utils.js b/src/actions/utils.js
@@ -0,0 +1,11 @@
+import { createAction } from 'redux-actions';
+import * as types from '../constants/ActionTypes';
+
+
+export const toast = createAction(types.TOAST, (text, timeout)=> {
+	return {
+		text,
+		timeout,
+		id: new Date().getTime()
+	}
+});
diff --git a/src/components/base/Toast.js b/src/components/base/Toast.js
@@ -0,0 +1,107 @@
+import React,{
+	Component,
+	PropTypes,
+	View,
+	StyleSheet,
+	Text,
+	Dimensions,
+	Animated
+} from 'react-native';
+
+const { height, width } = Dimensions.get('window');
+const toastWidth = width * 0.7;
+const defaultText = 'Toast';
+const defaultTimeout = 2000;
+
+
+class Toast extends Component {
+	static propTypes = {
+		duration: PropTypes.number
+	};
+
+
+	static defaultProps = {
+		duration: 300
+	};
+
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			fadeAnim: new Animated.Value(0.4),
+			show: false,
+			text: defaultText,
+			timeout: defaultTimeout
+		};
+	}
+
+
+	componentWillUnmount() {
+		clearTimeout(this.timeout);
+	}
+
+
+	show(text = defaultText, timeout = defaultTimeout) {
+		const { duration } = this.props;
+		Animated.timing(this.state.fadeAnim, {
+			toValue: 1,
+			duration: duration
+		}).start();
+
+		this.setState({
+			show: true,
+			text,
+			timeout
+		});
+
+		this.timeout = setTimeout(()=> {
+			Animated.timing(this.state.fadeAnim, {
+				toValue: 0,
+				duration: duration
+			}).start(()=> {
+				this.setState({
+					show: false
+				});
+			});
+		}, timeout - duration);
+	}
+
+
+	render() {
+		const opacity = {
+			opacity: this.state.fadeAnim
+		};
+		if (!this.state.show) return null;
+		return (
+			<Animated.View style={[styles.container, this.props.style, opacity]}>
+				<Text style={styles.text}>
+					{this.state.text}
+				</Text>
+			</Animated.View>
+		)
+	}
+}
+
+const styles = StyleSheet.create({
+	container: {
+		position: 'absolute',
+		backgroundColor: 'rgba(0,0,0,0.8)',
+		borderRadius: 5,
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center',
+		width: toastWidth,
+		left: (width - toastWidth) / 2,
+		top: (height - 60) / 2,
+		padding: 20
+	},
+	text: {
+		flex: 1,
+		color: 'white',
+		fontSize: 16,
+		textAlign: 'center'
+	}
+});
+
+
+export default Toast;
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js
@@ -12,3 +12,9 @@ export const GET_USER_FROM_STORAGE = 'GET_USER_FROM_STORAGE';
 export const UPDATE_CLIENT_USER_INFO = 'UPDATE_CLIENT_USER_INFO';
 export const LOGOUT = 'LOGOUT';
 export const GET_USER_INFO = 'GET_USER_INFO';
+
+
+// utils
+export const TOAST = 'TOAST';
+export const OPEN_TOAST = 'OPEN_TOAST';
+export const CLOSE_TOAST = 'CLOSE_TOAST';
diff --git a/src/layouts/Home.js b/src/layouts/Home.js
@@ -24,7 +24,7 @@ class Home extends Component {
 					source={{ uri: config.bgImgUri }}>
 
 					<Text onPress={()=>{
-						this.props.router.toAbout();
+						this.props.actions.toast('测试');
 					}}>
 						toAbout
 					</Text>
diff --git a/src/layouts/QRCode.js b/src/layouts/QRCode.js
@@ -31,6 +31,7 @@ class QRCode extends Component {
 		VibrationIOS.vibrate();
 		actions.checkToken(result.data, ()=> {
 			router.pop();
+			actions.toast('登陆成功');
 		});
 		router.pop();
 	}
diff --git a/src/layouts/Utils.js b/src/layouts/Utils.js
@@ -1,25 +1,50 @@
 import React,{
 	Component,
-	View
+	View,
+	StyleSheet,
+	Text
 } from 'react-native';
+import Toast from '../components/base/Toast';
 
 
 class Utils extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+
 	componentDidMount() {
 		const { actions } = this.props;
 		//actions.getUserFromStorage();
 	}
 
 
+	componentWillReceiveProps(nextProps) {
+		if (this.props.toast.id !== nextProps.toast.id) {
+			this.toast.show(nextProps.toast.text, nextProps.toast.timeout);
+		}
+	}
+
+
 	render() {
-		return null;
+		return (
+			<Toast ref={ (view)=> this.toast=view } style={styles.container}/>
+		);
 	}
 }
 
 
+const styles = StyleSheet.create({
+	container: {
+		position: 'absolute'
+	}
+});
+
+
 export const LayoutComponent = Utils;
 export function mapStateToProps(state) {
+	const { utils = {} } = state;
 	return {
-		util: state.util
+		...utils
 	}
 }
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
 import home from './home';
 import user from './user';
 import userUI from './userUI';
+import utils from './utils';
 
 export default combineReducers({
 	home,
 	user,
-	userUI
+	userUI,
+	utils
 });
diff --git a/src/reducers/utils.js b/src/reducers/utils.js
@@ -0,0 +1,27 @@
+import * as types from '../constants/ActionTypes';
+
+
+const initialState = {
+	toast: {
+		text: null,
+		timeout: 2000,
+		id: null
+	}
+};
+
+
+export default function (state = initialState, action) {
+	const { payload ={} } = action;
+	switch (action.type) {
+		case types.TOAST:
+			return {
+				...state,
+				toast: {
+					...state.toast,
+					...payload
+				}
+			};
+		default :
+			return state;
+	}
+}
diff --git a/src/store/configureStore.js b/src/store/configureStore.js
@@ -2,14 +2,16 @@ import { createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import promiseMiddleware from './promiseMiddleware';
 import asyncActionCallbackMiddleware from './asyncActionCallbackMiddleware';
+import utilsMiddleware from './utilsMiddleware';
 import logger from 'redux-logger';
 import reducers from '../reducers';
 
 
 var middlewares = [
 	thunkMiddleware,
 	promiseMiddleware,
-	asyncActionCallbackMiddleware
+	asyncActionCallbackMiddleware,
+	utilsMiddleware
 ];
 
 
diff --git a/src/store/utilsMiddleware.js b/src/store/utilsMiddleware.js
@@ -0,0 +1,25 @@
+import * as types from '../constants/ActionTypes';
+import { createAction }  from 'redux-actions';
+import * as utilsActions from '../actions/utils';
+
+export default function utilsMiddleware({ dispatch }) {
+	return next => action => {
+		const { meta = {}, payload, error, type } = action;
+		const { toast } = meta;
+
+		const dispatchToast = (...args)=> {
+			dispatch(utilsActions.toast(...args));
+		};
+
+		if (toast) {
+			if (typeof toast === 'function') {
+				toast(dispatchToast);
+			}
+
+			if (typeof toast === 'string' || typeof toast === 'number') {
+				dispatchToast(toast.text);
+			}
+		}
+		next(action);
+	}
+}

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ class QRCode extends Component {`
`31`	`31`	`VibrationIOS.vibrate();`
`32`	`32`	`actions.checkToken(result.data, ()=> {`
`33`	`33`	`router.pop();`
	`34`	`+ actions.toast('登陆成功');`
`34`	`35`	`});`
`35`	`36`	`router.pop();`
`36`	`37`	`}`