react-component / dialog Goto Github PK
View Code? Open in Web Editor NEWReact Dialog
Home Page: https://dialog.react-component.vercel.app/
License: MIT License
React Dialog
Home Page: https://dialog.react-component.vercel.app/
License: MIT License
在一些情况下,比如 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.
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 可以通过配置达到
组件对点击右上角关闭和点击mask遮罩关闭没有区分差异。
使用过程中有用户反映,容易误点到遮罩导致dialog意外关闭。
是否可以提供类似maskClosable之类的配置项,禁用mask遮罩的关闭按钮,或者在onClose回调里给相应参数来区分是哪部分引起的关闭?
We are getting this when I tried bind a div with rc-dialog latest version and react 16.2 in production mode.
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.
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}
});
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,
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.
Some of them are really important.
let node = ReactDOM.findDOMNode(this.refs.dialog);
node.style.display='none';
node.offsetHeight;
node.style.display='';
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?
为什么 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
When the dialog is opened in modal mode, is it possible to allow moving the dialog by holding the title of the dialog?
宽度变化后,对话框未居中。
做单页应用的时候,不想切页面时候出现滚动条来回跳。所以就参考了这一篇文章,设置了的样式为overflow:scroll。
而这个样式,会导致dialog展示时,出现双滚动条
Dialog causes body to have an unwanted padding right, probably because it should remove scrollbar but it doesnt.
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?
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);
}
Some situations will need to use dialog without mask.But it seems that this component cannot support close mask config.
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!
it should be up to project using dialog
to pollyfill it.
Thanks
6.5.2存在这个问题,导致我的Picker组件一出来就关闭了;
antd-mobile的版本没做好它引用其他组件的版本;
最主要的原因是和与react-fastclick造成了冲突,它修改了对React.createElement的引用;
在ios body上用js设置overflow:hidden 是失效,所以是否应该开放出载入点。。
https://github.com/react-component/dialog/blob/master/src/DialogWrap.tsx#L29
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 makesreact
module stateful, and thus causes weird errors whenreact
module is
duplicated in the bundle.
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?
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
1]
[1] webpack: bundle build is now finished.
[1] WARNING Compiled with 1 warnings09:56:26
[1]
[1] warning in ./node_modules/rc-dialog/es/DialogWrap.js
[1]
[1] 10:20-41 "export 'createPortal' (imported as 'ReactDOM') was not found in 'react-dom'
[1]
[1] WAIT Compiling...09:56:27
[1]
[1]
[1] webpack: bundle build is now finished.
[1] WARNING Compiled with 1 warnings09:56:28
[1]
[1] warning in ./node_modules/rc-dialog/es/DialogWrap.js
[1]
[1] 10:20-41 "export 'createPortal' (imported as 'ReactDOM') was not found in 'react-dom'
package.json
"main": "./lib/DialogWrap",
实际上安装的npm包没有lib目录了
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.
🐈
Sometimes we want a modal but with just one action.
It should be great to be able to disable "cancel" button.
This function seems to be superfluous
这里 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 后点击关闭就会报错。
Auto. calculate body height (window height - title) for scrolling components inside body.
ps: dialogRendered not exists anymore.
lazyRenderBox: React.createClass is deprecated and will be removed in version 16
Lines 42 to 56 in 402c415
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 🎉
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.
web版的dialog可以支持onAnimationEnd吗?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.