use rc-dialog/lib/Modal

ant-design · Sep 19, 2016 · 554343a · 554343a
1 parent df8ca44
commit 554343a
Show file tree

Hide file tree

Showing 22 changed files with 215 additions and 341 deletions.
diff --git a/components/action-sheet/index.tsx b/components/action-sheet/index.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import {
   View,
-  Modal,
-  TouchableWithoutFeedback,
-  Animated,
-  Dimensions,
   DeviceEventEmitter,
   ActionSheetIOS,
   Platform,
@@ -13,8 +9,7 @@ import {
 } from 'react-native';
 import styles, { vars as variables } from './style/index';
 import topView from 'rn-topview';
-
-const WIN_HEIGHT = Dimensions.get('window').height;
+import Modal from 'rc-dialog/lib/Modal';
 
 function noop(a: any) {
 }
@@ -38,80 +33,48 @@ class ActionSheetAndroid extends React.Component<Props, any> {
   constructor(props) {
     super(props);
     this.state = {
-      translateY: new Animated.Value(0),
+      visible: true,
     };
     ActionSheet.instances[props.name] = this;
   }
 
   componentWillMount() {
     DeviceEventEmitter.addListener('antActionSheetHide', () => {
-      this.animatedHide();
-    });
-  }
-
-  componentDidMount() {
-    this.state.translateY.setValue(WIN_HEIGHT);
-    this.anim = Animated.timing(this.state.translateY, {
-      duration: 200,
-      toValue: 0,
-      delay: 5,
-    });
-    this.anim.start(() => {
-      this.anim = null;
+      this.setState({
+        visible: false,
+      });
     });
   }
 
   componentWillUnmount() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-    if (this.anim) {
-      this.anim.stop();
-      this.anim = null;
-    }
     DeviceEventEmitter.removeAllListeners('antActionSheetHide');
   }
 
-  onMaskClose = () => {
-    if (this.props.maskClosable) {
-      this.animatedHide();
-    }
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
   };
 
-  animatedHide = () => {
-    this.state.translateY.setValue(0);
-    this.anim = Animated.timing(this.state.translateY, {
-      duration: 200,
-      toValue: WIN_HEIGHT,
-      delay: 5,
-    });
-    this.anim.start(() => {
-      this.anim = null;
+  onAnimationEnd(visible) {
+    if (!visible) {
       topView.remove();
-    });
+    }
   };
 
   render() {
     return (
-      <View style={styles.wrap}>
-        <Modal
-          animationType={'none'}
-          transparent
-          visible
-          onRequestClose={Platform.OS === 'android' ? this.animatedHide : undefined}
-        >
-          <TouchableWithoutFeedback onPress={this.onMaskClose}>
-            <View style={styles.mask}/>
-          </TouchableWithoutFeedback>
-          <Animated.View style={[styles.content, {
-            transform: [
-              { translateY: this.state.translateY },
-            ],
-          }]}>
-            {this.props.children}
-          </Animated.View>
-        </Modal>
-      </View>
+      <Modal
+        animationDuration={200}
+        animateAppear
+        onClose={this.onClose}
+        visible={this.state.visible}
+        onAnimationEnd={this.onAnimationEnd}
+        style={styles.content}
+      >
+
+        {this.props.children}
+      </Modal>
     );
   }
 }
@@ -122,7 +85,7 @@ if (Platform.OS === 'ios') {
   ActionSheet = {
     instances: {},
     showActionSheetWithOptions(config, callback = noop) {
-      const {title, message, options, destructiveButtonIndex, cancelButtonIndex} = config;
+      const { title, message, options, destructiveButtonIndex, cancelButtonIndex } = config;
       const titleMsg = [
         title ? <View style={styles.title} key="0"><Text style={styles.titleText}>{title}</Text></View> : null,
         message ? <View style={styles.message} key="1"><Text>{message}</Text></View> : null,
@@ -152,7 +115,7 @@ if (Platform.OS === 'ios') {
                     {item}
                   </Text>
                 </TouchableHighlight>
-                {cancelButtonIndex === index ? <View style={styles.cancelBtnMask}/> : null}
+                {cancelButtonIndex === index ? <View style={styles.cancelBtnMask} /> : null}
               </View>
             ))}
           </View>
@@ -165,7 +128,7 @@ if (Platform.OS === 'ios') {
       );
     },
     showShareActionSheetWithOptions(config) {
-      const {url, message, excludedActivityTypes} = config;
+      const { url, message, excludedActivityTypes } = config;
       const titleMsg = [
         url ? <View style={styles.title} key="0"><Text>{url}</Text></View> : null,
         message ? <View style={styles.message} key="1"><Text>{message}</Text></View> : null,

diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PopupDatePicker from 'rmc-date-picker/lib/Popup';
-import PopupStyles from './PopupStyles';
+import PopupStyles from '../picker/style/index';
 import { formatFn, getProps as getDefaultProps } from './utils';
 import assign from 'object-assign';
 import tsPropsType from './PropsType';

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -1,112 +1,80 @@
 import * as React from 'react';
-import { View, Text, Modal, TouchableWithoutFeedback, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableWithoutFeedback, TouchableOpacity } from 'react-native';
 import modalStyle from './style/index';
 import ModalPropsType from './ModalPropsType';
+import Modal from 'rc-dialog/lib/Modal';
 
 class AntmModal extends React.Component<ModalPropsType, any> {
   static defaultProps = {
     visible: false,
     closable: false,
     maskClosable: false,
-    transparent: false,
-    animated: true,
     style: {},
-    onClose() {},
-    onShow() {},
+    onClose() {
+    },
     footer: [],
+    dialog: false,
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: props.visible || false,
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.visible !== this.state.visible) {
-      this.setState({
-        visible: nextProps.visible,
-      });
+  onMaskClose = () => {
+    if (this.props.maskClosable) {
+      this.props.onClose();
     }
-  }
-
-  onRequestClose = () => {
-    this.setState({
-      visible: false,
-    });
   };
 
-  onClosePress = () => {
-    this.props.onClose();
-    this.setState({
-      visible: false,
-    });
-  }
-
   render() {
     const {
-      title, closable, maskClosable, footer, animated, onShow, transparent, children, style,
-      onRequestClose,
+      title, closable, footer, children, style,
+      dialog, visible, onClose,
     } = this.props;
 
-    let showModal = this.state.visible;
-    const animationType: 'fade' | 'slide' | 'none' = animated ? (transparent ? 'fade' : 'slide') : 'none';
-    const innerStyle = transparent ? {backgroundColor: 'white'} : {backgroundColor: 'transparent'};
-
     const btnGroupStyle = footer.length === 2 ? modalStyle.buttnGroupH : modalStyle.buttnGroupV;
     const buttonWrapStyle = footer.length === 2 ? modalStyle.buttnWrapH : modalStyle.buttnWrapV;
 
     const footerDom = footer.length ? (
       <View style={[btnGroupStyle]}>
-      {
-        footer.map((button: any, i) => {
-          return (
-            <View key={i} style={[buttonWrapStyle]}>
-              <TouchableOpacity onPress={() => {
+        {
+          footer.map((button: any, i) => {
+            return (
+              <View key={i} style={[buttonWrapStyle]}>
+                <TouchableOpacity onPress={() => {
                 if (button.onPress) {
                   button.onPress();
                 }
-                this.onClosePress();
+                onClose();
               }}>
-                <Text style={[modalStyle.buttonText]}>{button.text || `按钮${i}`}</Text>
-              </TouchableOpacity>
-            </View>
-          );
-        })
-      }
+                  <Text style={[modalStyle.buttonText]}>{button.text || `按钮${i}`}</Text>
+                </TouchableOpacity>
+              </View>
+            );
+          })
+        }
       </View>
     ) : null;
 
     return (
       <Modal
-        animationType={animationType}
-        onRequestClose={onRequestClose || this.onRequestClose}
-        onShow={onShow}
-        transparent={transparent}
-        visible={showModal}
+        onClose={this.onMaskClose}
+        wrapStyle={dialog ? modalStyle.container : undefined}
+        style={[modalStyle.innerContainer, style]}
+        visible={visible}
       >
-        { transparent ? (
-            <View style={[modalStyle.container]}>
-              {maskClosable ? <TouchableWithoutFeedback onPress={this.onClosePress}>
-                <View style={[modalStyle.maskClosable]}></View>
-              </TouchableWithoutFeedback> : null}
-              <View style={[modalStyle.innerContainer, innerStyle, style]}>
-                {title ? <Text style={[modalStyle.header]}>{title}</Text> : null}
-                <View style={modalStyle.body}>{children}</View>
-                {footer ? <View>{footerDom}</View> : null}
-                {closable ? <TouchableWithoutFeedback onPress={this.onClosePress}>
-                  <View style={[modalStyle.closeWrap]}>
-                    <Text style={[modalStyle.close]}>×</Text>
-                  </View>
-                </TouchableWithoutFeedback> : null}
+        { dialog ? (
+          <View>
+            {title ? <Text style={[modalStyle.header]}>{title}</Text> : null}
+            <View style={modalStyle.body}>{children}</View>
+            {footer ? <View>{footerDom}</View> : null}
+            {closable ? <TouchableWithoutFeedback onPress={onClose}>
+              <View style={[modalStyle.closeWrap]}>
+                <Text style={[modalStyle.close]}>×</Text>
               </View>
-            </View>
-          ) : (
-            <View style={style}>
-              {children}
-            </View>
-          )
+            </TouchableWithoutFeedback> : null}
+          </View>
+        ) : (
+          <View style={style}>
+            {children}
+          </View>
+        )
         }
       </Modal>
     );