Skip to content

Commit 8e68eeb

Browse files
TrustDecTrustDec
committed
PopupDialog
1 parent 451ddb3 commit 8e68eeb

File tree

8 files changed

+171
-42
lines changed

8 files changed

+171
-42
lines changed

‎src/modules/PopupDialog.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React,{ Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { View,Text,TouchableOpacity,StyleSheet } from "react-native";
4+
import PopupDialog,{ SlideAnimation,DialogTitle,ScaleAnimation,DialogButton } from 'react-native-popup-dialog';
5+
6+
const dialogTitle = props => <DialogTitle {...props} />;
7+
//const dialogTitle = () => null;
8+
class PopupDialogView extends Component {
9+
render(){
10+
return(
11+
<PopupDialog {...this.props} dialogStyle={{overflow:'hidden'}}>
12+
{this.props.children}
13+
<View style={{flexDirection:'row',position:'absolute',bottom:0}}>
14+
{
15+
this.props.cancelBtn && <TouchableOpacity
16+
activeOpacity={.6}
17+
onPress={this.props.cancelBtn.onPress}
18+
style={[styles.container,{backgroundColor:this.props.cancelBtn.bgColor}]}
19+
>
20+
<Text style={styles.buttonTitle}>{this.props.cancelBtn.title}</Text>
21+
</TouchableOpacity>
22+
}
23+
{
24+
this.props.confirmBtn && <TouchableOpacity
25+
activeOpacity={.6}
26+
disabled={this.props.confirmBtn.disabled}
27+
onPress={this.props.confirmBtn.onPress}
28+
style={[styles.container,{backgroundColor:this.props.confirmBtn.bgColor}]}
29+
>
30+
<Text style={styles.buttonTitle}>{this.props.confirmBtn.title}</Text>
31+
</TouchableOpacity>
32+
}
33+
34+
</View>
35+
</PopupDialog>
36+
);
37+
}
38+
}
39+
const scaleAnimation = new ScaleAnimation();
40+
const actions = [];
41+
PopupDialog.propTypes = {
42+
width:PropTypes.number,
43+
height:PropTypes.number,
44+
show:PropTypes.bool.isRequired,
45+
dismissOnTouchOutside:PropTypes.bool,
46+
dialogAnimation:PropTypes.object,
47+
dialogTitle:PropTypes.element,
48+
actions:PropTypes.arrayOf(PropTypes.element),
49+
//children:PropTypes.element.isRequired,
50+
confirmBtn:PropTypes.object,
51+
cancelBtn:PropTypes.object,
52+
overlayOpacity:PropTypes.number,
53+
overlayBackgroundColor:PropTypes.string
54+
}
55+
PopupDialog.defaultProps = {
56+
width:.9,
57+
height:300,
58+
show:false,
59+
dismissOnTouchOutside:false,
60+
dialogAnimation: scaleAnimation,
61+
dialogTitle: null,
62+
actions:actions,
63+
confirmBtn:null,
64+
cancelBtn:null,
65+
overlayOpacity:.7,
66+
overlayBackgroundColor:'#000'
67+
}
68+
const styles = StyleSheet.create({
69+
container: {
70+
justifyContent:'center',
71+
alignItems:'center',
72+
height:45,
73+
flex:1,
74+
},
75+
buttonTitle:{
76+
color:'#fff',
77+
fontSize:16
78+
}
79+
});
80+
export default PopupDialogView

‎src/navigators/AppWithNavigation.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import SetEvent from '../page/setview'
1111
import ImmutableList from "../page/Immutable/List";
1212
import Carousel from '../page/home/containers/Carousel'
1313
import OpenWebView from "../components/WebView";
14+
import ECMAScript2016 from '../page/ECMAScript2016';
1415

1516
const MainStack = StackNavigator(
1617
{
@@ -37,6 +38,9 @@ const MainStack = StackNavigator(
3738
},
3839
OpenWebViewScreen: {
3940
screen:OpenWebView
41+
},
42+
ES6Screen: {
43+
screen:ECMAScript2016
4044
}
4145
},
4246
{

‎src/navigators/index.js‎

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
import React,{ Component } from 'react';
22
import { connect } from 'react-redux';
33
import { BackHandler,ToastAndroid,View,Text, } from "react-native";
4-
import PopupDialog,{ SlideAnimation,DialogTitle,ScaleAnimation,DialogButton } from 'react-native-popup-dialog';
4+
// import PopupDialog,{ SlideAnimation,DialogTitle,ScaleAnimation,DialogButton } from 'react-native-popup-dialog';
5+
import { DialogButton,DialogTitle } from "react-native-popup-dialog";
56
import * as dialogType from "../redux/actions/dialogType";
67
import ReactNavigation from "react-navigation";
78
import AppNavigator from './AppWithNavigation';
89
import { addListener } from "../redux/util";
910
import Button from '../modules/Button'
11+
import PopupDialog from '../modules/PopupDialog';
1012
const {StackNavigator,TabNavigator,TabBarBottom,addNavigationHelpers, NavigationActions} = ReactNavigation;
11-
13+
const confirmBtn = {
14+
text: '确定按钮',
15+
onPress: ()=>false
16+
};
17+
const cancelBtn = {
18+
text: '取消按钮',
19+
onPress: ()=>false
20+
};
1221
class ReduxNavigation extends Component {
1322
componentDidMount() {
1423
BackHandler.addEventListener("hardwareBackPress", this.onBackButtonPressAndroid);
@@ -42,44 +51,31 @@ class ReduxNavigation extends Component {
4251
addListener,
4352
theme
4453
});
45-
console.log(dialog)
4654
return <View style={{flex:1}}>
47-
<AppNavigator navigation={navigation} />
48-
<PopupDialog
49-
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
50-
dialogAnimation={scaleAnimation}
51-
dialogTitle={<DialogTitle title="Dialog Title" />}
52-
width={.9}
53-
height={300}
54-
show={dialog}
55-
dismissOnTouchOutside={false}
56-
actions={[
57-
<DialogButton
58-
text="关闭"
59-
onPress={()=>this.props.hideDialog()}
60-
key="button-1"
61-
/>,
62-
]}
55+
<AppNavigator navigation={navigation} />
56+
<PopupDialog
57+
show={dialog.isShow}
58+
confirmBtn={{title:'set dark',bgColor:'#188eee',disabled:theme.id === 'dark',onPress:this.props.setTheme}}
59+
cancelBtn={{title:'关闭按钮',bgColor:'#9DABC0',onPress:this.props.hideDialog}}
60+
dialogTitle={<DialogTitle title="PopupDialog"/>}
6361
>
64-
<View>
65-
<Button
66-
onClick={this.props.setTheme}
67-
title={"默认绿色"}
68-
bgColor='#188eee'
69-
/>
70-
<Button
71-
onClick={this.props.setDefaultTheme}
72-
title={"默认颜色"}
73-
bgColor='#16A085'
74-
/>
75-
<Text style={theme.styles.navFont} >知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。
76-
</Text>
62+
<View style={{marginTop:10}}>
63+
<Text style={theme.styles.navFont} >
64+
知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。
65+
</Text>
66+
{
67+
theme.id !== 'default' && <Button
68+
onClick={this.props.setDefaultTheme}
69+
title={"默认颜色"}
70+
bgColor='#16A085'
71+
/>
72+
}
7773
</View>
74+
{dialog.children}
7875
</PopupDialog>
79-
</View>
76+
</View>
8077
}
8178
}
82-
const scaleAnimation = new ScaleAnimation();
8379
const mapStateToProps = (state) => {
8480
return {
8581
nav:state.nav,

‎src/page/ECMAScript2016/index.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React,{ Component } from 'react';
2+
import { Image, View, Text,StyleSheet,StatusBar } from 'react-native';
3+
import Button from '../../modules/Button'
4+
function tag(stringArr, ...values){
5+
// ...
6+
console.log(stringArr);
7+
console.log(values)
8+
}
9+
class ECMAScript2016 extends Component {
10+
render(){
11+
let s = 'Hello world!';
12+
let a1 = s.startsWith('Hello') // true
13+
let a2 =s.endsWith('!') // true
14+
let a3 =s.includes('o') // true
15+
let a4 = s.repeat(2);
16+
//alert `123`;
17+
let a = 5;
18+
let b = 10;
19+
20+
tag`Hello ${ a + b } world ${ a * b }`;
21+
return(
22+
<View>
23+
<Text>{"\uD842\uDFB7"}</Text>
24+
<Text>{a1.toString()}</Text>
25+
<Text>{a2.toString()}</Text>
26+
<Text>{a3.toString()}</Text>
27+
<Text>{a4}</Text>
28+
</View>
29+
);
30+
}
31+
}
32+
export default ECMAScript2016

‎src/page/home/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React,{ Component } from 'react';
22
import { connect } from 'react-redux';
3-
import { Image, View, Text,StyleSheet,StatusBar } from 'react-native';
3+
import { Image, View, Text,StyleSheet,StatusBar,ScrollView } from 'react-native';
44
import * as dialogType from "../../redux/actions/dialogType";
55
import Button from '../../modules/Button'
66
import { ColorUtils } from "../../equipment/ColorUtils";
@@ -28,6 +28,7 @@ class HomeScreen extends Component {
2828
}
2929
render(){
3030
return(
31+
<ScrollView >
3132
<View style={styles.container}>
3233
<Button
3334
onClick={this.onNavigateRouthPush.bind(this,'CarouselScreen')}
@@ -74,7 +75,13 @@ class HomeScreen extends Component {
7475
title={"ShowDialog"}
7576
bgColor='#5ACBC8'
7677
/>
78+
<Button
79+
onClick={this.onNavigateRouthPush.bind(this,'ES6Screen')}
80+
title={"ES6Screen"}
81+
bgColor='#5ACBC8'
82+
/>
7783
</View>
84+
</ScrollView>
7885

7986
);
8087
}

‎src/page/index.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Modal from 'react-native-modalbox';
1010
import * as CONFIG from "../equipment/ComponentUtil";
1111
import { ListRow,Toast } from "teaset";
1212
import ToastView from '../equipment/ToastUtil'
13+
import PopupDialog from '../modules/PopupDialog';
1314

1415
class LoginScreen extends Component {
1516
static navigationOptions = ({ navigation, navigationOptions }) => {
@@ -31,7 +32,11 @@ class LoginScreen extends Component {
3132
password:"456",
3233
per:0
3334
}
34-
35+
// shouldComponentUpdate(nextProps, nextState) {
36+
// console.log(nextProps, nextState)
37+
// console.log(nextState)
38+
// return true;
39+
// }
3540
onChangeText = text => {
3641
console.log(text);
3742
}
@@ -100,7 +105,7 @@ class LoginScreen extends Component {
100105
bgColor='#16A085'
101106
/>
102107
<Button
103-
onClick={this.props.showDialog}
108+
onClick={this.props.showDialog.bind(this,{type:'SHOW_DIALOG',children:null})}
104109
title={"Dialog"}
105110
bgColor='#188eee'
106111
/>
@@ -158,7 +163,7 @@ const mapStateToProps = (state) => {
158163
const mapDispatchToProps = (dispatch, ownProps) => {
159164
return {
160165
actions: bindActionCreators(actionCreators, dispatch),
161-
showDialog: ()=>dispatch(dialogType.SHOW_DIALOG),
166+
showDialog: (element)=>dispatch(element),
162167
hideDialog: ()=>dispatch(dialogType.HIDE_DIALOG),
163168
}
164169
};

‎src/redux/reducers/dialog.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
export default dialog = (state = false, action) => {
1+
const initialState={
2+
isShow:false,
3+
children:null
4+
};
5+
export default dialog = (state = initialState, action) => {
6+
console.log(action)
27
switch (action.type) {
38
case 'SHOW_DIALOG':
4-
return true
9+
return {isShow:true,children:action.children}
510
case 'HIDE_DIALOG':
6-
return false
11+
return {isShow:false,children:null}
712
default:
813
return state
914
}

‎src/redux/util/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ export const middleware = createReactNavigationReduxMiddleware(
1414
export const addListener = createReduxBoundAddListener("root");
1515
export default createStore(
1616
AppReducer,
17-
applyMiddleware(thunk,middleware,createLogger),
17+
applyMiddleware(thunk,middleware,/*createLogger*/),
1818
);

0 commit comments

Comments
 (0)