Refactor confirm (ant-design#8409)

* Refactor confirm * Add okCancel test * Only test React 16 * Upgrade rc-dialog
3610cn · Dec 2, 2017 · 45815d1 · 45815d1
1 parent bbbdb99
commit 45815d1
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 70 deletions.
diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js
@@ -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');
+  });
 });
diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
@@ -6,98 +6,102 @@ 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,
-  };
-  const prefixCls = props.prefixCls || 'ant-confirm';
-  let div = document.createElement('div');
-  document.body.appendChild(div);
+interface ConfirmDialogProps extends ModalFuncProps {
+  afterClose?: () => void;
+  close: (...args: any[]) => void;
+}
 
-  let width = props.width || 416;
-  let style = props.style || {};
+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';
+  // 默认为 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 classString = classNames(prefixCls, {
-    [`${prefixCls}-${props.type}`]: true,
-  }, props.className);
+  const cancelButton = okCancel && (
+    <ActionButton actionFn={onCancel} closeModal={close}>
+      {cancelText}
+    </ActionButton>
+  );
 
-  ReactDOM.render(
+  return (
     <Dialog
       className={classString}
       onCancel={close.bind(this, { triggerCancel: true })}
-      visible
+      visible={visible}
       title=""
       transitionName="zoom"
       footer=""
       maskTransitionName="fade"
       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,

diff --git a/package.json b/package.json
@@ -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",