feat(Modal): support placeholder & add theme

components/input-item/style/index.less

@@ -63,7 +63,7 @@
       line-height: @line-height-base;
       box-sizing: border-box;
 
-      &::-webkit-input-placeholder {
+      &::placeholder {
         color: @color-text-placeholder;
         line-height: 1.2;
       }

components/modal/Modal.tsx

@@ -36,6 +36,9 @@ class AntmModal extends React.Component<IModalNativeProps, any> {
     styles: modalStyle,
     operation: false,
   };
+  static alert: any;
+  static operation: any;
+  static prompt: any;
 
   root: any;
 
@@ -77,7 +80,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' },
             };

components/modal/Modal.web.tsx

@@ -57,7 +57,7 @@ export default class Modal extends ModalComponent<ModalProps, any> {
       buttonStyle = button.style;
       if (typeof buttonStyle === 'string') {
         const styleMap = {
-          cancel: { fontWeight: 'bold' },
+          cancel: {},
           default: {},
           destructive: { color: 'red' },
         };

components/modal/PromptContainer.tsx

@@ -18,6 +18,7 @@ export interface PropmptContainerProps {
   actions: Array<ButtonType>;
   onAnimationEnd?: (visible: boolean) => void;
   styles?: IPromptStyle;
+  placeholders?: string[];
 }
 
 export default class PropmptContainer extends React.Component<PropmptContainerProps, any> {
@@ -49,7 +50,7 @@ export default class PropmptContainer extends React.Component<PropmptContainerPr
   }
 
   render() {
-    const { title, onAnimationEnd, message, type, actions } = this.props;
+    const { title, onAnimationEnd, message, type, actions, placeholders } = this.props;
     const styles = this.props.styles!;
     const { text, password } = this.state;
     const getArgs = function(func) {
@@ -129,6 +130,7 @@ export default class PropmptContainer extends React.Component<PropmptContainerPr
                     value={this.state.text}
                     style={styles.input}
                     underlineColorAndroid="transparent"
+                    placeholder={placeholders![0]}
                   />
                 </View>
               )
@@ -143,12 +145,12 @@ export default class PropmptContainer extends React.Component<PropmptContainerPr
                     value={this.state.password}
                     style={styles.input}
                     underlineColorAndroid="transparent"
+                    placeholder={placeholders![1]}
                   />
                 </View>
               )
             }
           </View>
-          <View style={{ height: 60 }} />
         </KeyboardAvoidingView>
       </Modal>
     );

components/modal/__tests__/__snapshots__/demo.test.js.snap

@@ -356,6 +356,90 @@ exports[`renders ./components/modal/demo/basic.tsx correctly 1`] = `
         ]
       }
     />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hasTVPreferredFocus={undefined}
+      hitSlop={undefined}
+      isTVSelectable={true}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 47,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+      tvParallaxProperties={undefined}
+    >
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "fontSize": 18,
+              },
+              Object {
+                "color": "#000",
+              },
+              false,
+              false,
+            ]
+          }
+        >
+          显示 Modal.prompt (default)
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
     <View
       accessibilityComponentType={undefined}
       accessibilityLabel={undefined}

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();

components/modal/alert.web.tsx

@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import React from 'react';
-/* tslint:enable:no-unused-variable */
 import ReactDOM from 'react-dom';
 import Modal from './Modal.web';
 

components/modal/demo/alert.md

@@ -21,7 +21,7 @@ const alert = Modal.alert;
 const showAlert = () => {
   const alertInstance = alert('删除', '确定删除么???', [
     { text: 'Cancel', onPress: () => console.log('cancel'), style: 'default' },
-    { text: 'OK', onPress: () => console.log('ok'), style: { fontWeight: 'bold' } },
+    { text: 'OK', onPress: () => console.log('ok') },
   ]);
   setTimeout(() => {
     // 可以调用close方法以在外部close
@@ -38,7 +38,7 @@ const App = () => (
     <WhiteSpace size="lg" />
     <Button onClick={() => alert('删除', '确定删除么???', [
       { text: '取消', onPress: () => console.log('cancel') },
-      { text: '确定', onPress: () => console.log('ok'), style: { fontWeight: 'bold' } },
+      { text: '确定', onPress: () => console.log('ok') },
     ])}
     >确认对话框</Button>
 
@@ -60,7 +60,6 @@ const App = () => (
           Toast.info('onPress Promise', 1);
           setTimeout(resolve, 1000);
         }),
-        style: { fontWeight: 'bold' },
       },
     ])}
     >按钮 Promise</Button>

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') },
@@ -60,6 +60,8 @@ export default class BasicModalExample extends React.Component<any, any> {
       '输入用户名和密码',
       (login, password) => console.log(`login: ${login}, password: ${password}`),
       'login-password',
+      null,
+      ['请输入用户名', '请输入密码'],
     );
   }
 
@@ -73,6 +75,16 @@ export default class BasicModalExample extends React.Component<any, any> {
     );
   }
 
+  onButtonClick5 = () => {
+    Modal.prompt(
+      '输入姓名',
+      '这是姓名message,可以不要',
+      password => console.log(`password: ${password}`),
+      'default',
+      null,
+      ['请输入姓名'],
+    );
+  }
   render() {
     const footerButtons = [
       { text: 'Cancel', onPress: () => console.log('cancel') },
@@ -89,6 +101,8 @@ export default class BasicModalExample extends React.Component<any, any> {
           <WhiteSpace />
           <Button onClick={this.onButtonClick2}>显示 Modal.opertation</Button>
           <WhiteSpace />
+          <Button onClick={this.onButtonClick5}>显示 Modal.prompt (default)</Button>
+          <WhiteSpace />
           <Button onClick={this.onButtonClick3}>显示 Modal.prompt (login-password)</Button>
           <WhiteSpace />
           <Button onClick={this.onButtonClick4}>显示 Modal.prompt (secure-text)</Button>

components/modal/demo/prompt.md

@@ -34,7 +34,7 @@ const App = () => (
             }, 1000);
           }),
         },
-      ])}
+      ], 'default', null, ['请输入你的名字'])}
     >按钮 Promise</Button>
 
     <WhiteSpace size="lg" />
@@ -71,6 +71,8 @@ const App = () => (
       '输入用户名和密码',
       (login, password) => console.log(`login: ${login}, password: ${password}`),
       'login-password',
+      null,
+      ['请输入用户名', '请输入密码'],
     )}
     >输入框登录形式 </Button>
 

components/modal/index.en-US.md

@@ -51,8 +51,9 @@ Properties | Descrition | Type | Default
 | callbackOrActions  | button group [{text, onPress}] or callback      | Array or Function | -            |
 | type       | prompt style   | String (`default`, `secure-text`, `login-password`)|  `default`  |
 | defaultValue       | Default(input whick type is password is not supported)   | String |   -  |
+| placeholders       | ['', '']  | String[] |   -  |
 
-call Modal.prompt(title, message, callbackOrActions, type?, defaultValue?).close()` can close prompt Modal outside anywhere as you wish.
+call Modal.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?).close()` can close prompt Modal outside anywhere as you wish.
 
 ### Modal.operation(actions?) ( Support Platform：WEB、React-Native )
 

components/modal/index.tsx

@@ -3,8 +3,8 @@ import alert from './alert';
 import prompt from './prompt';
 import operation from './operation';
 
-(Modal as any).alert = alert;
-(Modal as any).operation = operation;
-(Modal as any).prompt = prompt;
+Modal.alert = alert;
+Modal.operation = operation;
+Modal.prompt = prompt;
 
 export default Modal;

components/modal/index.zh-CN.md

@@ -53,8 +53,10 @@ subtitle: 对话框
 | callbackOrActions  | 按钮组 [{text, onPress}] 或回调函数      | Array or Function | 无            |
 | type       | prompt 的样式   | String (`default`, `secure-text`, `login-password`)|  `default`  |
 | defaultValue       | 默认值(input 为 password 类型不支持)   | String |   -  |
+| placeholders       | ['', '']  | String[] |   -  |
 
-Modal.prompt(title, message, callbackOrActions, type?, defaultValue?).close()` 可以在外部关闭 prompt
+
+Modal.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?).close()` 可以在外部关闭 prompt
 
 ### Modal.operation(actions?)
 

components/modal/prompt.tsx

@@ -2,15 +2,13 @@ import React from 'react';
 import topView from 'rn-topview';
 import PromptContainer from './PromptContainer';
 
-export default function a(...args) {
-  if (!args || !args[2]) {
+export default function prompt(
+  title, message, callbackOrActions, type = 'default', defaultValue = '', placeholders = ['', ''],
+) {
+  if (!callbackOrActions) {
     console.error('Must specify callbackOrActions');
     return;
   }
-  const title = args[0];
-  const message = args[1] || '';
-  const type = args[3] || 'default';
-  const defaultValue = args[4] || '';
 
   const onAnimationEnd = (visible) => {
     if (!visible) {
@@ -22,10 +20,11 @@ export default function a(...args) {
     <PromptContainer
       title={title}
       message={message}
-      actions={args[2]}
-      type={type}
+      actions={callbackOrActions}
+      type={type as any}
       defaultValue={defaultValue}
       onAnimationEnd={onAnimationEnd}
+      placeholders={placeholders}
     />,
   );
 }