diff --git a/docs/dialog/theme/index.jsx b/docs/dialog/theme/index.jsx
index bcd79e8760..fb83284015 100644
--- a/docs/dialog/theme/index.jsx
+++ b/docs/dialog/theme/index.jsx
@@ -4,6 +4,8 @@ import '../../../src/demo-helper/style.js';
import '../../../src/dialog/style.js';
import { Demo, DemoGroup, initDemo } from '../../../src/demo-helper';
import Dialog from '../../../src/dialog';
+import { ModalInner } from '../../../src/dialog/show';
+
import zhCN from '../../../src/locale/zh-cn';
import enUS from '../../../src/locale/en-us';
@@ -116,6 +118,36 @@ class FunctionDemo extends Component {
);
+ const alertContent = (
+
+
+
+ );
+
+ const confirmContent = (
+
+
+
+ );
+
return (
@@ -124,6 +156,14 @@ class FunctionDemo extends Component {
{this.renderMask(hasMask, normalContent)}
+
+
+ {this.renderMask(hasMask, alertContent)}
+
+
+ {this.renderMask(hasMask, confirmContent)}
+
+
);
diff --git a/src/dialog/main.scss b/src/dialog/main.scss
index 45cafcb682..40f0aa31f8 100644
--- a/src/dialog/main.scss
+++ b/src/dialog/main.scss
@@ -111,6 +111,10 @@
}
}
+ &-quick #{$dialog-prefix}-body {
+ padding: $dialog-message-content-padding-top $dialog-message-content-padding-left-right $dialog-message-content-padding-bottom $dialog-message-content-padding-left-right;
+ }
+
& &-message.#{$css-prefix}message {
min-width: $s-25 * 3;
padding: 0;
diff --git a/src/dialog/scss/variable.scss b/src/dialog/scss/variable.scss
index b1333eea51..19cf5c5409 100644
--- a/src/dialog/scss/variable.scss
+++ b/src/dialog/scss/variable.scss
@@ -34,6 +34,17 @@ $dialog-title-padding-left-right: $s-5 !default;
/// divider
/// @namespace size/title
$dialog-title-border-width: $line-zero !default;
+/// padding (t)
+/// @namespace size/content
+$dialog-message-content-padding-top: $s-5 !default;
+
+/// padding (b)
+/// @namespace size/content
+$dialog-message-content-padding-bottom: $s-5 !default;
+
+/// padding (l, r)
+/// @namespace size/content
+$dialog-message-content-padding-left-right: $s-5 !default;
/// text
/// @namespace size/content
$dialog-content-font-size: $font-size-body-1 !default;
diff --git a/src/dialog/show.jsx b/src/dialog/show.jsx
index bc530353bf..38cc968609 100644
--- a/src/dialog/show.jsx
+++ b/src/dialog/show.jsx
@@ -15,6 +15,29 @@ const MESSAGE_TYPE = {
confirm: 'help',
};
+export const ModalInner = function({
+ type,
+ messageProps = {},
+ title,
+ rtl,
+ prefix = 'next-',
+ content,
+}) {
+ return (
+
+ {content}
+
+ );
+};
+
class Modal extends Component {
static propTypes = {
prefix: PropTypes.string,
@@ -46,6 +69,7 @@ class Modal extends Component {
okProps: PropTypes.object,
locale: PropTypes.object,
needWrapper: PropTypes.bool,
+ className: PropTypes.string,
};
static defaultProps = {
@@ -113,26 +137,21 @@ class Modal extends Component {
okProps,
needWrapper,
rtl,
+ className,
...others
} = this.props;
const newTitle = needWrapper && type ? null : title;
const newContent =
needWrapper && type ? (
-
- {content}
-
+ prefix={prefix}
+ content={content}
+ />
) : (
content
);
@@ -151,6 +170,8 @@ class Modal extends Component {
const { visible, loading } = this.state;
okProps.loading = loading;
+ const classNames = cx(`${prefix}dialog-quick`, className);
+
return (
diff --git a/test/dialog/index-spec.js b/test/dialog/index-spec.js
index 0b4b8579fb..6caebb068c 100644
--- a/test/dialog/index-spec.js
+++ b/test/dialog/index-spec.js
@@ -2,12 +2,18 @@ import React from 'react';
import ReactDOM from 'react-dom';
import assert from 'power-assert';
import ReactTestUtils from 'react-dom/test-utils';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
import { dom } from '../../src/util';
import Button from '../../src/button';
import ConfigProvider from '../../src/config-provider';
import Dialog from '../../src/dialog/index';
+import Message from '../../src/message';
import '../../src/dialog/style.js';
import zhCN from '../../src/locale/zh-cn';
+import { ModalInner as QuickInner } from '../../src/dialog/show';
+
+Enzyme.configure({ adapter: new Adapter() });
/* eslint-disable react/jsx-filename-extension */
/* global describe it afterEach */
@@ -547,6 +553,118 @@ describe('inner', () => {
});
});
+describe('Quick', () => {
+ let wrapper;
+ afterEach(() => {
+ if (wrapper) {
+ wrapper.unmount();
+ wrapper = null;
+ }
+ });
+
+ it('should support alert message', () => {
+ wrapper = shallow(
+ Modal Content}
+ />
+ );
+
+ const message = wrapper.find(Message);
+ assert(message.prop('type') === 'warning');
+ });
+
+ it('should support confirm message', () => {
+ wrapper = shallow(
+ Modal Content}
+ />
+ );
+
+ const message = wrapper.find(Message);
+ assert(message.prop('type') === 'help');
+ });
+
+ it('should support message title', () => {
+ wrapper = shallow(
+ Modal Content}
+ />
+ );
+
+ const message = wrapper.find(Message);
+ assert(message.prop('title') === 'quick confirm modal inner');
+ });
+
+ it('should support default prefix', () => {
+ wrapper = shallow(
+ Modal Content}
+ />
+ );
+
+ const message = wrapper.find(Message);
+ assert(message.prop('className') === 'next-dialog-message');
+ });
+
+ it('should support messageProps', () => {
+ wrapper = shallow(
+ Modal Content}
+ />
+ );
+
+ const message = wrapper.find(Message);
+ assert(message.prop('testProp') === 'test');
+ });
+
+ it('should support custom prefix', () => {
+ wrapper = shallow(
+ Modal Content}
+ />
+ );
+
+ const message = wrapper.find(Message);
+ assert(message.prop('className') === 'test-dialog-message');
+ });
+
+ it('should pass content as child', () => {
+ wrapper = shallow(
+ Modal Content}
+ />
+ );
+
+ const message = wrapper.find(Message);
+ assert(message.children().type() === 'span');
+ });
+
+})
+
function assertOkBtn(btn) {
assert(hasClass(btn, 'next-btn-primary'));
assert(btn.textContent.trim() === '确认');