diff --git a/components/input-item/style/index.less b/components/input-item/style/index.less index ab7c1cc9c5..dedae74700 100644 --- a/components/input-item/style/index.less +++ b/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; } diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 4102a69985..5724604a3d 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -36,6 +36,9 @@ class AntmModal extends React.Component { styles: modalStyle, operation: false, }; + static alert: any; + static operation: any; + static prompt: any; root: any; @@ -77,7 +80,7 @@ class AntmModal extends React.Component { buttonStyle = button.style; if (typeof buttonStyle === 'string') { const styleMap = { - 'cancel': { fontWeight: 'bold' }, + 'cancel': {}, 'default': {}, 'destructive': { color: 'red' }, }; diff --git a/components/modal/Modal.web.tsx b/components/modal/Modal.web.tsx index b65a0b69d2..520018c9b4 100644 --- a/components/modal/Modal.web.tsx +++ b/components/modal/Modal.web.tsx @@ -57,7 +57,7 @@ export default class Modal extends ModalComponent { buttonStyle = button.style; if (typeof buttonStyle === 'string') { const styleMap = { - cancel: { fontWeight: 'bold' }, + cancel: {}, default: {}, destructive: { color: 'red' }, }; diff --git a/components/modal/PromptContainer.tsx b/components/modal/PromptContainer.tsx index ccc8b0a631..b132e3b471 100644 --- a/components/modal/PromptContainer.tsx +++ b/components/modal/PromptContainer.tsx @@ -18,6 +18,7 @@ export interface PropmptContainerProps { actions: Array; onAnimationEnd?: (visible: boolean) => void; styles?: IPromptStyle; + placeholders?: string[]; } export default class PropmptContainer extends React.Component { @@ -49,7 +50,7 @@ export default class PropmptContainer extends React.Component ) @@ -143,12 +145,12 @@ export default class PropmptContainer extends React.Component ) } - ); diff --git a/components/modal/__tests__/__snapshots__/demo.test.js.snap b/components/modal/__tests__/__snapshots__/demo.test.js.snap index 100dddab68..da387b8e89 100644 --- a/components/modal/__tests__/__snapshots__/demo.test.js.snap +++ b/components/modal/__tests__/__snapshots__/demo.test.js.snap @@ -356,6 +356,90 @@ exports[`renders ./components/modal/demo/basic.tsx correctly 1`] = ` ] } /> + + + + 显示 Modal.prompt (default) + + + + { if (!visible) { topView.remove(); diff --git a/components/modal/alert.web.tsx b/components/modal/alert.web.tsx index 6c230398a2..ac8fcbd217 100644 --- a/components/modal/alert.web.tsx +++ b/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'; diff --git a/components/modal/demo/alert.md b/components/modal/demo/alert.md index 9752f1057e..f9b13638e9 100644 --- a/components/modal/demo/alert.md +++ b/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 = () => ( @@ -60,7 +60,6 @@ const App = () => ( Toast.info('onPress Promise', 1); setTimeout(resolve, 1000); }), - style: { fontWeight: 'bold' }, }, ])} >按钮 Promise diff --git a/components/modal/demo/basic.tsx b/components/modal/demo/basic.tsx index cb7c75aac8..42e555ae42 100644 --- a/components/modal/demo/basic.tsx +++ b/components/modal/demo/basic.tsx @@ -39,7 +39,7 @@ export default class BasicModalExample extends React.Component { 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 { '输入用户名和密码', (login, password) => console.log(`login: ${login}, password: ${password}`), 'login-password', + null, + ['请输入用户名', '请输入密码'], ); } @@ -73,6 +75,16 @@ export default class BasicModalExample extends React.Component { ); } + 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 { + + diff --git a/components/modal/demo/prompt.md b/components/modal/demo/prompt.md index 7397cfcda4..7ac1b8a47a 100644 --- a/components/modal/demo/prompt.md +++ b/components/modal/demo/prompt.md @@ -34,7 +34,7 @@ const App = () => ( }, 1000); }), }, - ])} + ], 'default', null, ['请输入你的名字'])} >按钮 Promise @@ -71,6 +71,8 @@ const App = () => ( '输入用户名和密码', (login, password) => console.log(`login: ${login}, password: ${password}`), 'login-password', + null, + ['请输入用户名', '请输入密码'], )} >输入框登录形式 diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 29d254c337..4c50088b02 100644 --- a/components/modal/index.en-US.md +++ b/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 ) diff --git a/components/modal/index.tsx b/components/modal/index.tsx index 0e2796af42..ae3007ca76 100644 --- a/components/modal/index.tsx +++ b/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; diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index cff688db47..080d419517 100644 --- a/components/modal/index.zh-CN.md +++ b/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?) diff --git a/components/modal/prompt.tsx b/components/modal/prompt.tsx index d0e9a9521e..e82ae0b821 100644 --- a/components/modal/prompt.tsx +++ b/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) { , ); } diff --git a/components/modal/prompt.web.tsx b/components/modal/prompt.web.tsx index 15b8738c61..1ee6ef5ff4 100644 --- a/components/modal/prompt.web.tsx +++ b/components/modal/prompt.web.tsx @@ -1,12 +1,12 @@ /* 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 = '', placeholders = ['', ''], +) { + if (!callbackOrActions) { // console.log('Must specify callbackOrActions'); return { close: () => {}, @@ -14,9 +14,6 @@ export default function a(...args) { } 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 = (
- focusFn(input)} onChange={onChange} /> + focusFn(input)} + onChange={onChange} + placeholder={placeholders[0]} + />
- +
); @@ -53,7 +61,13 @@ export default function a(...args) { inputDom = (
- focusFn(input)} onChange={onChange} /> + focusFn(input)} + onChange={onChange} + placeholder={placeholders[0]} + />
); @@ -64,7 +78,13 @@ export default function a(...args) { inputDom = (
- focusFn(input)} onChange={onChange} /> + focusFn(input)} + onChange={onChange} + placeholder={placeholders[0]} + />
); @@ -74,7 +94,7 @@ export default function a(...args) { let content = (
@@ -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: () => { diff --git a/components/modal/style/Dialog.less b/components/modal/style/Dialog.less index 1d6211a502..07a11b0b75 100644 --- a/components/modal/style/Dialog.less +++ b/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; } diff --git a/components/modal/style/index.less b/components/modal/style/index.less index 0dc4abc4ec..981c5bf497 100644 --- a/components/modal/style/index.less +++ b/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; diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 41c3a6ee9e..a218bdbcf3 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -45,7 +45,7 @@ export default StyleSheet.create({ 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 +83,7 @@ export default StyleSheet.create({ flexDirection: 'column', }, buttonWrapH: { + height: variables.modal_button_height, flexGrow: 1, borderColor: variables.border_color_base, borderTopWidth: StyleSheet.hairlineWidth, @@ -98,7 +99,7 @@ export default StyleSheet.create({ buttonText: { textAlign: 'center', color: variables.color_link, - fontSize: variables.link_button_font_size, + fontSize: variables.modal_button_font_size, backgroundColor: 'transparent', }, operationContainer: { diff --git a/components/modal/style/prompt.tsx b/components/modal/style/prompt.tsx index 48ded6755d..03280e4aff 100644 --- a/components/modal/style/prompt.tsx +++ b/components/modal/style/prompt.tsx @@ -27,7 +27,7 @@ export default StyleSheet.create({ borderColor: variables.border_color_base, }, input: { - height: 22, + height: 36, fontSize: variables.font_size_base, paddingHorizontal: variables.h_spacing_sm, paddingVertical: 0, diff --git a/components/search-bar/style/index.less b/components/search-bar/style/index.less index d3fc3a0eca..daf6c9a40c 100644 --- a/components/search-bar/style/index.less +++ b/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; } diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 80679dcd71..c6e5cba07a 100644 --- a/components/style/themes/default.less +++ b/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; diff --git a/components/style/themes/default.tsx b/components/style/themes/default.tsx index f40635f2b6..5bca669bfe 100644 --- 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, diff --git a/components/textarea-item/style/index.less b/components/textarea-item/style/index.less index d1218fcaa5..66d3b7e08d 100644 --- a/components/textarea-item/style/index.less +++ b/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; }