这里 https://github.com/react-component/dialog/blob/master/src%2FDialogWrap.jsx#L53-L58

我想自己去 unmount DialogWrap（不改变 visible），但是发现这里如果visible: true的会再次 render Dialog，这时如果在DialogWrap的 children 里有用 ref的话 react 就会报错。

例子：http://codepen.io/yesmeck/pen/ONRvrz?editors=0010

打开 modal 后点击关闭就会报错。

为什么 rc-dialog-wrap 把 rc-dialog-mask 完全覆盖掉了？而且都设为 fixed 。 在移动端禁止 rc-dialog-mask 这层的 touchStart 不会影响到 content 的 touch 事件，因为是 平级的 dom 。但现在 content 所在 div 覆盖了整个页面，就不能禁止 touch 事件了。

Hi, currently Modals are attached to the body, which is an issue if you do serverside rendering. Wouldn't it be a better approach to use or imitate https://github.com/cloudflare/react-gateway, in that you choose a destination inside your app component (which works great for SSR)?

Move from ant-design/ant-design#3731 by @bkniffler

it should be up to project using dialog to pollyfill it.

Thanks

Some situations will need to use dialog without mask.But it seems that this component cannot support close mask config.

Dialog causes body to have an unwanted padding right, probably because it should remove scrollbar but it doesnt.

https://stackoverflow.com/questions/45653564/react-js-avoid-the-modal-to-be-executed-when-the-component-is-rendered

When the dialog is opened in modal mode, is it possible to allow moving the dialog by holding the title of the dialog?

rc-trigger support this, but I want to use rc-dialog as standalone component for errors. So it were nice when this option were possible on rc-dialog level already.

• 组件是 react-component 而不是 react-bootstrap，不要把一些bootstrap的样式生搬过来，例如

var Dialog = React.createClass({
  render: function(){
    return <div className='modal-dialog rc-dialog'>
      <div className='rc-dialog-header modal-header'></div>
    </div>
  }
});

组件和 bootstrap css 绑定过紧，样式和 js 不一致，不利用其它应用场景，建议通过属性来解决：

// 伪代码
var Dialog = React.createClass({
  render: function(){
    return <div className='{this.props.className} rc-dialog'>
      <div className='rc-dialog-header {this.props.headerClassName}'></div>
    </div>
  }
});

用户如果使用 bootstrap 可以通过配置达到

lazyRenderBox: React.createClass is deprecated and will be removed in version 16

🐈

宽度变化后，对话框未居中。

在一些情况下，比如 dialog 中是一个表单的情况下，销毁可以帮助解决很多问题，比如 表单重置，多选框搜索值不清空等等。

组件对点击右上角关闭和点击mask遮罩关闭没有区分差异。
使用过程中有用户反映，容易误点到遮罩导致dialog意外关闭。
是否可以提供类似maskClosable之类的配置项，禁用mask遮罩的关闭按钮，或者在onClose回调里给相应参数来区分是哪部分引起的关闭？

http://react-component.github.io/dialog/build/examples/ant-design.html

showDialog(<p>content</p>, {
      title: "第二个弹框",
      animation: 'zoom',
      maskAnimation: 'fade',
      onBeforeClose: this.beforeClose,
      style: {width: 600}
    });

在ios body上用js设置overflow：hidden 是失效，所以是否应该开放出载入点。。

https://github.com/react-component/dialog/blob/master/src/DialogWrap.tsx#L29

Hi.

Check this section : https://github.com/react-component/dialog/blob/master/src/Dialog.tsx#L78

Call to removeScrollingEffect should be called in the else section inside the if (prevProps.visible) { ... } section.

Since if I'm using dialog in the page, and "hiding" it (using visible={false}), There is no scrollbar in the page until the component is unmounted (In my scenario - When I'm navigating to a different page).

I can pull request if you want.

Thanks.

Hi,

I am using version 6.5.7 in a TypeScript project. The compiler throws an error

ERROR in [at-loader] node_modules\rc-dialog\lib\DialogWrap.d.ts:2:8
    TS1192: Module '"D:/dev/SEFrontend/report-editor/node_modules/@types/react/index"' has no default export.

And the usage as

import Dialog from 'rc-dialog'

results in errors, too. createElement receives null as type, which does not work.

Using it this style

const Dialog = require('rc-dialog')

works, but does not remove the first compiler error.

I created a wrapper around the dialog component to setup a custom dialog with some extra functionality. One of it's functionality should be to provide a context with some functions to the dialogs children, which can set the title from inside. But when I create a child context in my wrapper it's not passed to the children. Any idea for a solution for this?

提问：dialog 怎么老是顶着页面底部，和顶部留出那么大块空余呢

This function seems to be superfluous

rc-dialog component is using React 16, but React 16 considers ref string as legacy and in my app it throw an error in ANT Design component which is using rc-dialog.
I think the issue is on this line:
https://github.com/react-component/dialog/blob/master/src/Dialog.tsx#L216

common text of error:

Uncaught Error: Element ref was specified as a string (header) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
...

stack trace:

The above error occurred in the <div> component:
    in div
    in div
    in LazyRenderBox
    in AnimateChild
    in Animate
    in div
    in div
    in Dialog

Please fix it.

I am using [email protected]

Looks like problem appears due (4) https://news.ycombinator.com/edit?id=12093234

String refs force React to keep track of currently executing component. This is problematic
because it makes react module stateful, and thus causes weird errors when react module is
duplicated in the bundle.

We are getting this when I tried bind a div with rc-dialog latest version and react 16.2 in production mode.

Sometimes it is really useful to pre-render modal content, especially if data needs fetched or modal content render bottlenecks animations.

Is it possible to add a forceRender={Boolean} prop like in Collapse Panel?

As suggested in #48 by @eternalsky, but I figure its still something different than having a gateway (which is especially useful in SSR scenarios since no direct dom interaction is taking place).

I think that would be pretty useful if, additionally to my suggestion and in line with other rc components like tooltip (https://ant.design/components/tooltip/), getModalContainer would be implemented so we can attach to whatever dom element we need through querySelection or getElementById.

Auto. calculate body height (window height - title) for scrolling components inside body.
ps: dialogRendered not exists anymore.

做单页应用的时候，不想切页面时候出现滚动条来回跳。所以就参考了这一篇文章，设置了的样式为overflow:scroll。

而这个样式，会导致dialog展示时，出现双滚动条

Hi! May be there is something that I want to know, but I don't understand Chinese 😅 #11

The question is when I have tree like this:

<Parent>
  <Child />
</Parent>

and Child component changes its state, Parent component does not handle this event, because componentDidUpdate does not called and as a result can't re-align itself.
I looked at Align, DOMWrap and DialogWrap components, but still can't figure out how do you do this magic.

Thanks!

Some of them are really important.

• Prerender w/o lazy dialog - make some animations smoother
• css 3d transformations cause blurry effect on text in chrome.
  A possible fix:

let node = ReactDOM.findDOMNode(this.refs.dialog);
    node.style.display='none';
    node.offsetHeight;
    node.style.display='';

• add css class to window when the animation finished
• animation onEnd event in browser version (the other animation events too)
• exploit some useful features for the child context (like window close)
• option for destroy window on close

ant-design/ant-design#190

facebook/react#4081

facebook/react#4819

While using antd's Modal component, I ran into the issue where I had to display the updated props from the parent-component into the child-component,i.e., Modal.

Expected behaviour -
On setting the state in componentWillReceiveProps the Modal/dialog component should re-render.

Current behaviour -
The re-render is barred because of the following condition in the shouldComponentUpdate hook -

  shouldComponentUpdate({ visible }) {
    return !!(this.props.visible || visible);
  }

web版的dialog可以支持onAnimationEnd吗？

Before the React@16, this library use React.unstable_renderSubtreeIntoContainer to render modal, so the unmount of modal is controlled by library. So it's able to render the leave animation while component is unmounted and remove the container after animation finished.

If using 16, the modal node is nested in only root tree of react application. If modal is unmounted then the content (children) of modal is also unmounted. This just behaves like the normal nested node in tree. Do you have any idea about solving this ?

I think the feature that processing leaving animation before modal is unmounted is awesome, because sometimes we really need to destroy the modal according some state changes. But this feature is so awesome that I don't want to lose it.

Thank you for your great works 🎉

Sometimes we want a modal but with just one action.

It should be great to be able to disable "cancel" button.

It were useful when beside of width and height property there where property which don't allow the dialog be bigger than the current browser window size.

Hi, guys!

I am working with rc-components and they'r are suiting my needs perfectly.
Yesterday i need to mantain the focus in my dialog but i'v noticed that holding shift was making the focus leave the dialog and going to the application behing.

I thought could be something in my components but the online examples are doing the same:
http://react-component.github.io/dialog/examples/ant-design.html

This is the code that controls the shift key in dialog.tsx:

onKeyDown = (e) => {
  const props = this.props;
  if (props.keyboard && e.keyCode === KeyCode.ESC) {
      this.close(e);
  }
    // keep focus inside dialog
  if (props.visible) {
    if (e.keyCode === KeyCode.TAB) {
      const activeElement = document.activeElement;
      const dialogRoot = this.refs.wrap;
      const sentinel = this.refs.sentinel;
      if (e.shiftKey) {
        if (activeElement === dialogRoot) {
            sentinel.focus();
        }
      } else if (activeElement === this.refs.sentinel) {
          dialogRoot.focus();
      }
    }
  }
}

What happens is that when you'r on the first focusable element in the dialog ex.: <button>Close</button> and press shift+tab, the focus get out of the dialog, because the activeElement is the button and its different than dialogRoot, so it never hits the if (activeElement === dialogRoot).

The only way this if (activeElement === dialogRoot) works is when you focus the dialog clicking on the background.

The simple workaround i'v found was to change the tabIndex={-1} of the div in render to tabIndex={0}. I don't know if it was set -1 because of something else, but changing to 0 works perfectly.
I'v tested on Chrome, Mozilla and IE 11.

package.json
"main": "./lib/DialogWrap",

实际上安装的npm包没有lib目录了

Hello!

I want to mount Dialog component in DOM tree right where it is defined, not in <body/> or another container.

As I see in sources I can use Dialog instead of exported DialogWrap. But this not wrapped Dialog isn't exported from the module. Are some reasons for that?

6.5.2存在这个问题，导致我的Picker组件一出来就关闭了；

antd-mobile的版本没做好它引用其他组件的版本；

最主要的原因是和与react-fastclick造成了冲突，它修改了对React.createElement的引用；

There are many warnings like [ts] Property 'inTransition' does not exist on type 'Dialog'. in my editor (vscode), and my version of ts is 2.5.3.

So I'm curious about the ts version you used when developing rc-dialog.

➜  dialog git:(master) ✗ npm run watch-tsc

> [email protected] watch-tsc /Users/jerryzou/Dev/playground/dialog
> rc-tools run watch-tsc

rc-tools run watch-tsc
examples/ant-design.tsx(9,25): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).
examples/ant-design.tsx(17,10): error TS2339: Property 'setState' does not exist on type 'MyControl'.
examples/ant-design.tsx(25,14): error TS6133: 'e' is declared but never used.
examples/ant-design.tsx(27,10): error TS2339: Property 'setState' does not exist on type 'MyControl'.
...
...
...
[17:30:09] TypeScript: 86 semantic errors
[17:30:09] TypeScript: 1 declaration error
[17:30:09] TypeScript: 2 emit errors
[17:30:09] TypeScript: emit failed