Skip to content

Commit

Permalink
feat(Dialog): quick dialog padding
Browse files Browse the repository at this point in the history 
- add theme variables to set quick dialog padding separate form dialog
- refactor dialog show to allow for placing in theme config docs
  • Loading branch information
@jdkahn
jdkahn committed Apr 10, 2019
1 parent 79aa2b8 commit 14a4ded
Show file tree
Hide file tree
Showing 5 changed files with 207 additions and 12 deletions.
40 changes: 40 additions & 0 deletions docs/dialog/theme/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -116,6 +118,36 @@ class FunctionDemo extends Component {
</Dialog.Inner>
);

const alertContent = (
<Dialog.Inner
className="next-dialog-quick"
style={style}
footerAlign={footerAlign}
footerActions={okIsLeft ? ['ok', 'cancel'] : ['cancel', 'ok']}
locale={locale}>
<ModalInner
type="alert"
title={hasTitle ? i18n.title : null}
locale={locale}
content={i18n.content} />
</Dialog.Inner>
);

const confirmContent = (
<Dialog.Inner
className="next-dialog-quick"
style={style}
footerAlign={footerAlign}
footerActions={okIsLeft ? ['ok', 'cancel'] : ['cancel', 'ok']}
locale={locale}>
<ModalInner
type="confirm"
title={hasTitle ? i18n.title : null}
locale={locale}
content={i18n.content} />
</Dialog.Inner>
);

return (
<div className="demo-container">
<Demo title="Dialog" demoFunction={this.state.demoFunction} onFunctionChange={this.onFunctionChange}>
Expand All @@ -124,6 +156,14 @@ class FunctionDemo extends Component {
{this.renderMask(hasMask, normalContent)}
</DemoGroup>
</Demo>
<Demo title="Quick">
<DemoGroup label="Alert">
{this.renderMask(hasMask, alertContent)}
</DemoGroup>
<DemoGroup label="Confirm">
{this.renderMask(hasMask, confirmContent)}
</DemoGroup>
</Demo>
</Demo>
</div>
);
Expand Down
4 changes: 4 additions & 0 deletions src/dialog/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 11 additions & 0 deletions src/dialog/scss/variable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
46 changes: 34 additions & 12 deletions src/dialog/show.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,29 @@ const MESSAGE_TYPE = {
confirm: 'help',
};

export const ModalInner = function({
type,
messageProps = {},
title,
rtl,
prefix = 'next-',
content,
}) {
return (
<Message
size="large"
shape="addon"
type={MESSAGE_TYPE[type]}
{...messageProps}
title={title}
rtl={rtl}
className={cx(`${prefix}dialog-message`, messageProps.className)}
>
{content}
</Message>
);
};

class Modal extends Component {
static propTypes = {
prefix: PropTypes.string,
Expand Down Expand Up @@ -46,6 +69,7 @@ class Modal extends Component {
okProps: PropTypes.object,
locale: PropTypes.object,
needWrapper: PropTypes.bool,
className: PropTypes.string,
};

static defaultProps = {
Expand Down Expand Up @@ -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 ? (
<Message
size="large"
shape="addon"
type={MESSAGE_TYPE[type]}
{...messageProps}
<ModalInner
type={type}
messageProps={messageProps}
title={title}
rtl={rtl}
className={cx(
`${prefix}dialog-message`,
messageProps.className
)}
>
{content}
</Message>
prefix={prefix}
content={content}
/>
) : (
content
);
Expand All @@ -151,6 +170,8 @@ class Modal extends Component {
const { visible, loading } = this.state;
okProps.loading = loading;

const classNames = cx(`${prefix}dialog-quick`, className);

return (
<Dialog
role="alertdialog"
Expand All @@ -163,6 +184,7 @@ class Modal extends Component {
onCancel={newOnCancel}
onClose={newOnClose}
okProps={okProps}
className={classNames}
>
{newContent}
</Dialog>
Expand Down
118 changes: 118 additions & 0 deletions test/dialog/index-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -547,6 +553,118 @@ describe('inner', () => {
});
});

describe('Quick', () => {
let wrapper;
afterEach(() => {
if (wrapper) {
wrapper.unmount();
wrapper = null;
}
});

it('should support alert message', () => {
wrapper = shallow(
<QuickInner
type="alert"
title="quick confirm modal inner"
locale={zhCN}
content={<span>Modal Content</span>}
/>
);

const message = wrapper.find(Message);
assert(message.prop('type') === 'warning');
});

it('should support confirm message', () => {
wrapper = shallow(
<QuickInner
type="confirm"
title="quick confirm modal inner"
locale={zhCN}
content={<span>Modal Content</span>}
/>
);

const message = wrapper.find(Message);
assert(message.prop('type') === 'help');
});

it('should support message title', () => {
wrapper = shallow(
<QuickInner
type="confirm"
title="quick confirm modal inner"
locale={zhCN}
content={<span>Modal Content</span>}
/>
);

const message = wrapper.find(Message);
assert(message.prop('title') === 'quick confirm modal inner');
});

it('should support default prefix', () => {
wrapper = shallow(
<QuickInner
type="confirm"
title="quick confirm modal inner"
locale={zhCN}
content={<span>Modal Content</span>}
/>
);

const message = wrapper.find(Message);
assert(message.prop('className') === 'next-dialog-message');
});

it('should support messageProps', () => {
wrapper = shallow(
<QuickInner
type="confirm"
title="quick confirm modal inner"
locale={zhCN}
messageProps={{testProp: 'test'}}
content={<span>Modal Content</span>}
/>
);

const message = wrapper.find(Message);
assert(message.prop('testProp') === 'test');
});

it('should support custom prefix', () => {
wrapper = shallow(
<QuickInner
type="confirm"
title="quick confirm modal inner"
prefix="test-"
locale={zhCN}
content={<span>Modal Content</span>}
/>
);

const message = wrapper.find(Message);
assert(message.prop('className') === 'test-dialog-message');
});

it('should pass content as child', () => {
wrapper = shallow(
<QuickInner
type="confirm"
title="quick confirm modal inner"
prefix="test-"
locale={zhCN}
content={<span>Modal Content</span>}
/>
);

const message = wrapper.find(Message);
assert(message.children().type() === 'span');
});

})

function assertOkBtn(btn) {
assert(hasClass(btn, 'next-btn-primary'));
assert(btn.textContent.trim() === '确认');
Expand Down

0 comments on commit 14a4ded

Please sign in to comment.