mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
Refactor confirm (#8409)
* Refactor confirm * Add okCancel test * Only test React 16 * Upgrade rc-dialog
This commit is contained in:
Wei Zhu
GitHub
parent
bbbdb9911d
commit
45815d1148
@ -65,4 +65,22 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
$$('.ant-btn-primary')[0].click();
|
||||
expect(errorSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
if (process.env.REACT !== '15') {
|
||||
it('shows animation when close', () => {
|
||||
jest.useFakeTimers();
|
||||
open();
|
||||
$$('.ant-btn')[0].click();
|
||||
expect($$('.ant-confirm')).toHaveLength(1);
|
||||
jest.runAllTimers();
|
||||
expect($$('.ant-confirm')).toHaveLength(0);
|
||||
jest.useRealTimers();
|
||||
});
|
||||
}
|
||||
|
||||
it('ok only', () => {
|
||||
open({ okCancel: false });
|
||||
expect($$('.ant-btn')).toHaveLength(1);
|
||||
expect($$('.ant-btn')[0].innerHTML).toContain('OK');
|
||||
});
|
||||
});
|
||||
|
||||
@ -6,84 +6,46 @@ import Dialog, { ModalFuncProps } from './Modal';
|
||||
import ActionButton from './ActionButton';
|
||||
import { getConfirmLocale } from './locale';
|
||||
|
||||
export default function confirm(config: ModalFuncProps) {
|
||||
const props: ModalFuncProps = {
|
||||
iconType: 'question-circle',
|
||||
okType: 'primary',
|
||||
...config,
|
||||
};
|
||||
interface ConfirmDialogProps extends ModalFuncProps {
|
||||
afterClose?: () => void;
|
||||
close: (...args: any[]) => void;
|
||||
}
|
||||
|
||||
const IS_REACT_16 = !!ReactDOM.createPortal;
|
||||
|
||||
const ConfirmDialog = (props: ConfirmDialogProps) => {
|
||||
const { onCancel, onOk, close, zIndex, afterClose, visible } = props;
|
||||
const iconType = props.iconType || 'question-circle';
|
||||
const okType = props.okType || 'primary';
|
||||
const prefixCls = props.prefixCls || 'ant-confirm';
|
||||
let div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
|
||||
let width = props.width || 416;
|
||||
let style = props.style || {};
|
||||
|
||||
// 默认为 true，保持向下兼容
|
||||
const okCancel = ('okCancel' in props) ? props.okCancel! : true;
|
||||
const width = props.width || 416;
|
||||
const style = props.style || {};
|
||||
// 默认为 false，保持旧版默认行为
|
||||
const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
|
||||
|
||||
// 默认为 true，保持向下兼容
|
||||
if (!('okCancel' in props)) {
|
||||
props.okCancel = true;
|
||||
}
|
||||
|
||||
const runtimeLocale = getConfirmLocale();
|
||||
const okText = props.okText ||
|
||||
(okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
|
||||
const cancelText = props.cancelText || runtimeLocale.cancelText;
|
||||
|
||||
props.okText = props.okText ||
|
||||
(props.okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
|
||||
props.cancelText = props.cancelText || runtimeLocale.cancelText;
|
||||
|
||||
function close(...args: any[]) {
|
||||
const unmountResult = ReactDOM.unmountComponentAtNode(div);
|
||||
if (unmountResult && div.parentNode) {
|
||||
div.parentNode.removeChild(div);
|
||||
}
|
||||
const triggerCancel = args && args.length &&
|
||||
args.some(param => param && param.triggerCancel);
|
||||
if (props.onCancel && triggerCancel) {
|
||||
props.onCancel(...args);
|
||||
}
|
||||
}
|
||||
|
||||
let body = (
|
||||
<div className={`${prefixCls}-body`}>
|
||||
<Icon type={props.iconType!} />
|
||||
<span className={`${prefixCls}-title`}>{props.title}</span>
|
||||
<div className={`${prefixCls}-content`}>{props.content}</div>
|
||||
</div>
|
||||
const classString = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-${props.type}`,
|
||||
props.className,
|
||||
);
|
||||
|
||||
let footer: React.ReactElement<any> | null = null;
|
||||
if (props.okCancel) {
|
||||
footer = (
|
||||
<div className={`${prefixCls}-btns`}>
|
||||
<ActionButton actionFn={props.onCancel} closeModal={close}>
|
||||
{props.cancelText}
|
||||
</ActionButton>
|
||||
<ActionButton type={props.okType} actionFn={props.onOk} closeModal={close} autoFocus>
|
||||
{props.okText}
|
||||
</ActionButton>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
footer = (
|
||||
<div className={`${prefixCls}-btns`}>
|
||||
<ActionButton type={props.okType} actionFn={props.onOk} closeModal={close} autoFocus>
|
||||
{props.okText}
|
||||
</ActionButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const cancelButton = okCancel && (
|
||||
<ActionButton actionFn={onCancel} closeModal={close}>
|
||||
{cancelText}
|
||||
</ActionButton>
|
||||
);
|
||||
|
||||
const classString = classNames(prefixCls, {
|
||||
[`${prefixCls}-${props.type}`]: true,
|
||||
}, props.className);
|
||||
|
||||
ReactDOM.render(
|
||||
return (
|
||||
<Dialog
|
||||
className={classString}
|
||||
onCancel={close.bind(this, { triggerCancel: true })}
|
||||
visible
|
||||
visible={visible}
|
||||
title=""
|
||||
transitionName="zoom"
|
||||
footer=""
|
||||
@ -91,13 +53,55 @@ export default function confirm(config: ModalFuncProps) {
|
||||
maskClosable={maskClosable}
|
||||
style={style}
|
||||
width={width}
|
||||
zIndex={props.zIndex}
|
||||
zIndex={zIndex}
|
||||
afterClose={afterClose}
|
||||
>
|
||||
<div className={`${prefixCls}-body-wrapper`}>
|
||||
{body} {footer}
|
||||
<div className={`${prefixCls}-body`}>
|
||||
<Icon type={iconType!} />
|
||||
<span className={`${prefixCls}-title`}>{props.title}</span>
|
||||
<div className={`${prefixCls}-content`}>{props.content}</div>
|
||||
</div>
|
||||
<div className={`${prefixCls}-btns`}>
|
||||
{cancelButton}
|
||||
<ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus>
|
||||
{okText}
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
, div);
|
||||
);
|
||||
};
|
||||
|
||||
export default function confirm(config: ModalFuncProps) {
|
||||
let div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
|
||||
function close(...args: any[]) {
|
||||
if (IS_REACT_16) {
|
||||
render({ ...config, close, visible: false, afterClose: destroy.bind(this, ...args) });
|
||||
} else {
|
||||
destroy(...args);
|
||||
}
|
||||
}
|
||||
|
||||
function destroy(...args: any[]) {
|
||||
const unmountResult = ReactDOM.unmountComponentAtNode(div);
|
||||
if (unmountResult && div.parentNode) {
|
||||
div.parentNode.removeChild(div);
|
||||
}
|
||||
const triggerCancel = args && args.length &&
|
||||
args.some(param => param && param.triggerCancel);
|
||||
if (config.onCancel && triggerCancel) {
|
||||
config.onCancel(...args);
|
||||
}
|
||||
}
|
||||
|
||||
function render(props: any) {
|
||||
ReactDOM.render(<ConfirmDialog {...props} />, div);
|
||||
}
|
||||
|
||||
render({ ...config, visible: true, close });
|
||||
|
||||
return {
|
||||
destroy: close,
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
"rc-cascader": "~0.12.0",
|
||||
"rc-checkbox": "~2.1.1",
|
||||
"rc-collapse": "~1.7.5",
|
||||
"rc-dialog": "~7.0.0",
|
||||
"rc-dialog": "~7.0.3",
|
||||
"rc-dropdown": "~2.1.0",
|
||||
"rc-editor-mention": "^1.0.2",
|
||||
"rc-form": "^2.1.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user