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 ( {newContent} 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() === '确认');