feat(Modal): rn style

ant-design · Jul 25, 2017 · d6df17b · d6df17b
1 parent 4e7df9d
commit d6df17b
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 11 deletions.
diff --git a/components/modal/AlertContainer.tsx b/components/modal/AlertContainer.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, ScrollView } from 'react-native';
 import Modal from './Modal';
+import modalStyle, { IModalStyle } from './style/index';
 
 export type AlertButtonType = {
   text: string;
@@ -13,6 +14,7 @@ export interface AlertContainerProps {
   content: any;
   actions: Array<AlertButtonType>;
   onAnimationEnd?: (visible: boolean) => void;
+  styles?: IModalStyle;
 }
 
 export default class AlertContainer extends React.Component<AlertContainerProps, any> {
@@ -23,14 +25,18 @@ export default class AlertContainer extends React.Component<AlertContainerProps,
     };
   }
 
+  static defaultProps = {
+    styles: modalStyle,
+  };
+
   onClose = () => {
     this.setState({
       visible: false,
     });
   }
 
   render() {
-    const { title, actions, content, onAnimationEnd } = this.props;
+    const { title, actions, content, onAnimationEnd, styles } = this.props;
     const footer = actions.map((button) => {
       const orginPress = button.onPress || function () {};
       button.onPress = () => {
@@ -46,6 +52,7 @@ export default class AlertContainer extends React.Component<AlertContainerProps,
       return button;
     });
 
+    console.log('container', styles.content, content)
     return (
       <Modal
         transparent
@@ -56,7 +63,7 @@ export default class AlertContainer extends React.Component<AlertContainerProps,
         onAnimationEnd={onAnimationEnd}
       >
         <ScrollView>
-          <Text>{content}</Text>
+          <Text style={styles.content}>{content}</Text>
         </ScrollView>
       </Modal>
     );

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -77,7 +77,7 @@ class AntmModal extends React.Component<IModalNativeProps, any> {
           buttonStyle = button.style;
           if (typeof buttonStyle === 'string') {
             const styleMap = {
-              'cancel': { fontWeight: 'bold' },
+              'cancel': {},
               'default': {},
               'destructive': { color: 'red' },
             };

diff --git a/components/modal/alert.tsx b/components/modal/alert.tsx
@@ -2,11 +2,7 @@ import React from 'react';
 import topView from 'rn-topview';
 import AlertContainer from './AlertContainer';
 
-export default function a(...args) {
-  const title = args[0];
-  const content = args[1];
-  const actions = args[2] || [{ text: '确定' }];
-
+export default function a(title, content, actions = [{ text: '确定' }]) {
   const onAnimationEnd = (visible) => {
     if (!visible) {
       topView.remove();

diff --git a/components/modal/demo/basic.tsx b/components/modal/demo/basic.tsx
@@ -39,7 +39,7 @@ export default class BasicModalExample extends React.Component<any, any> {
   onButtonClick = () => {
     Modal.alert(
       '标题',
-     ('alert 内容内容'),
+     'alert 内容内容',
       [
         { text: 'Cancel', onPress: () => console.log('cancel'), style: 'cancel' },
         { text: 'OK', onPress: () => console.log('ok') },

diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx
@@ -19,6 +19,7 @@ export interface IModalStyle {
   operationContainer: ViewStyle;
   operationBody: ViewStyle;
   buttonTextOperation: TextStyle;
+  content: TextStyle;
 }
 
 export default StyleSheet.create<any>({
@@ -45,7 +46,7 @@ export default StyleSheet.create<any>({
     borderBottomRightRadius: variables.radius_md,
   },
   header: {
-    fontSize: variables.font_size_heading,
+    fontSize: variables.modal_font_size_heading,
     color: variables.color_text_base,
     textAlign: 'center',
     paddingHorizontal: variables.h_spacing_lg,
@@ -83,6 +84,7 @@ export default StyleSheet.create<any>({
     flexDirection: 'column',
   },
   buttonWrapH: {
+    height: variables.modal_button_height,
     flexGrow: 1,
     borderColor: variables.border_color_base,
     borderTopWidth: StyleSheet.hairlineWidth,
@@ -98,7 +100,7 @@ export default StyleSheet.create<any>({
   buttonText: {
     textAlign: 'center',
     color: variables.color_link,
-    fontSize: variables.link_button_font_size,
+    fontSize: variables.modal_button_font_size,
     backgroundColor: 'transparent',
   },
   operationContainer: {
@@ -113,4 +115,9 @@ export default StyleSheet.create<any>({
     textAlign: 'left',
     paddingHorizontal: 15,
   },
+  content: {
+    color: variables.color_text_base,
+    lineHeight: variables.line_height_paragraph,
+    fontSize: variables.font_size_subhead,
+  },
 });
diff --git a/components/style/themes/default.tsx b/components/style/themes/default.tsx
@@ -133,6 +133,11 @@ export default {
   link_button_fill_tap: '#ddd',
   link_button_font_size: 16,
 
+  // modal
+  modal_font_size_heading: 18,
+  modal_button_font_size: 18, //按钮字号
+  modal_button_height: 50, //按钮高度
+
   // list
   list_title_height: 30,
   list_item_height_sm: 35,