feat(Modal): support placeholder & add theme

ref gitlab 469

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.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/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/prompt.md

@@ -34,7 +34,7 @@ const App = () => (
             }, 1000);
           }),
         },
-      ])}
+      ], 'default', null, ['请输入你的名字'])}
     >按钮 Promise</Button>
 
     <WhiteSpace size="lg" />

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.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.web.tsx

@@ -1,22 +1,19 @@
 /* tslint:disable:no-switch-case-fall-through */
-/* tslint:disable:no-unused-variable */
 import React from 'react';
-/* tslint:enable:no-unused-variable */
 import ReactDOM from 'react-dom';
 import Modal from './Modal.web';
 
-export default function a(...args) {
-  if (!args || !args[2]) {
+export default function prompt(
+  title, message, callbackOrActions, type = 'default', defaultValue = '', placeholder = ['', ''],
+) {
+  if (!callbackOrActions) {
     // console.log('Must specify callbackOrActions');
     return {
       close: () => {},
     };
   }
 
   const prefixCls = 'am-modal';
-  const title = args[0];
-  const type = args[3] || 'default';
-  const defaultValue = args[4] || '';
 
   let data: any = {};
 
@@ -41,10 +38,21 @@ export default function a(...args) {
       inputDom = (
         <div>
           <div className={`${prefixCls}-input`}>
-            <input type="text" defaultValue={defaultValue} ref={input => focusFn(input)} onChange={onChange} />
+            <input
+              type="text"
+              defaultValue={defaultValue}
+              ref={input => focusFn(input)}
+              onChange={onChange}
+              placeholder={placeholder[0]}
+            />
           </div>
           <div className={`${prefixCls}-input`}>
-            <input type="password" defaultValue="" onChange={onChange} />
+            <input
+              type="password"
+              defaultValue=""
+              onChange={onChange}
+              placeholder={placeholder[1]}
+            />
           </div>
         </div>
       );
@@ -53,7 +61,13 @@ export default function a(...args) {
       inputDom = (
         <div>
           <div className={`${prefixCls}-input`}>
-            <input type="password" defaultValue="" ref={input => focusFn(input)} onChange={onChange} />
+            <input
+              type="password"
+              defaultValue=""
+              ref={input => focusFn(input)}
+              onChange={onChange}
+              placeholder={placeholder[0]}
+            />
           </div>
         </div>
       );
@@ -64,7 +78,13 @@ export default function a(...args) {
       inputDom = (
         <div>
           <div className={`${prefixCls}-input`}>
-            <input type="text" defaultValue={defaultValue} ref={input => focusFn(input)} onChange={onChange} />
+            <input
+              type="text"
+              defaultValue={defaultValue}
+              ref={input => focusFn(input)}
+              onChange={onChange}
+              placeholder={placeholder[0]}
+            />
           </div>
         </div>
       );
@@ -74,7 +94,7 @@ export default function a(...args) {
   let content = (
     <div>
       <label>
-        {args[1]}
+        {message}
         {inputDom}
       </label>
     </div>
@@ -102,13 +122,13 @@ export default function a(...args) {
   }
 
   let actions;
-  if (typeof args[2] === 'function') {
+  if (typeof callbackOrActions === 'function') {
     actions = [
       { text: '取消' },
-      { text: '确定', onPress: () => { getArgs(args[2]); } },
+      { text: '确定', onPress: () => { getArgs(callbackOrActions); } },
     ];
   } else {
-    actions = args[2].map(item => {
+    actions = callbackOrActions.map(item => {
       return {
         text: item.text,
         onPress: () => {

components/modal/style/Dialog.less

@@ -88,9 +88,10 @@
   }
 
   &-body {
-    font-size: @font-size-base;
+    font-size: @font-size-subhead;
     color: @color-text-caption;
     height: 100%;
+    line-height: @line-height-paragraph;
     overflow: auto;
   }
 

components/modal/style/index.less

@@ -12,9 +12,9 @@
     text-decoration: none;
     outline: none;
     color: @color-link;
-    font-size: @link-button-font-size;
-    height: @across-button-height;
-    line-height: @across-button-height;
+    font-size: @modal-button-font-size;
+    height: @modal-button-height;
+    line-height: @modal-button-height;
     display: block;
     .ellipsis();
   }
@@ -49,6 +49,8 @@
   }
 
   &-input {
+    height: 72px;
+    line-height: @line-height-base;
     border-left: @border-width-sm solid @border-color-base;
     border-right: @border-width-sm solid @border-color-base;
     border-bottom: @border-width-sm solid @border-color-base;
@@ -68,10 +70,16 @@
     input {
       border: 0;
       width: 98%;
+      height: 100%;
       box-sizing: border-box;  // maybe not need it ?
 
       margin: 0;
       padding: @v-spacing-xs 0;
+      &::placeholder {
+        font-size: @font-size-base;
+        color: #ccc;
+        padding-left: @h-spacing-md;
+      }
     }
   }
 
@@ -90,11 +98,9 @@
       }
 
       .@{modalPrefixClass}-body {
-        font-size: @font-size-caption;
         color: @color-text-base;
         text-align: left;
         padding: 0 48px @v-spacing-lg;
-        line-height: @line-height-paragraph;
 
         .@{modalPrefixClass}-input {
           border-left: 0;

components/search-bar/style/index.less

@@ -69,7 +69,7 @@
       background-color: transparent;
       border: 0;
 
-      &::-webkit-input-placeholder {
+      &::placeholder {
         background: none;
         text-align: left;
         // color: @color-text-placeholder;
@@ -135,7 +135,7 @@
         opacity: 1;
         padding-left: @h-spacing-lg + @icon-size-xxs + @h-spacing-sm;
 
-        &::-webkit-input-placeholder {
+        &::placeholder {
           // display: none;
           color: transparent;
         }

components/style/themes/default.less

@@ -131,6 +131,8 @@
 
 // modal
 @modal-font-size-heading: 36px;
+@modal-button-font-size: 36px; //按钮字号
+@modal-button-height: 100px; //按钮高度
 
 // list
 @list-title-height: 60px;

components/textarea-item/style/index.less

@@ -100,7 +100,7 @@
     word-break: break-all;
     word-wrap: break-word;
 
-    &::-webkit-input-placeholder {
+    &::placeholder {
       color: @color-text-placeholder;
     }