Skip to content

Commit 28943db

Browse files
10xSebastian10xSebastian
committed
v14.1.0: allows to open dialog without animation
1 parent 3c424eb commit 28943db

7 files changed

Lines changed: 60 additions & 39 deletions

File tree

‎dev.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,29 +44,30 @@ <h5 class="px-4">Dialog</h5>
4444
</div>
4545
</div>
4646
<div class="px-4 pt-3">
47-
<button class='btn btn-primary' onClick='openDialog()'>Try it</button>
47+
<button class='btn btn-primary' onClick='openDialog(true)'>Try it</button>
48+
<button class='btn btn-primary' onClick='openDialog(false)'>Try it (without animation)</button>
4849
<script>
4950
let root
50-
var renderDialog = function(open) {
51+
var renderDialog = function(open, animate) {
5152
if (typeof root == 'undefined') { root = ReactDOM.createRoot(document.getElementById('dialog')) }
5253
const time = new Date().getTime()
5354
root.render(
5455
React.createElement(
5556
window.ReactDialog.ReactDialog,
56-
{ close: closeDialog, open: open, background: 'rgba(230,230,230,0.8)' },
57+
{ close: closeDialog, open: open, animate, background: 'rgba(230,230,230,0.8)' },
5758
React.createElement('div', { style: { background: 'white', padding: '10px' }, className: 'ReactDialogAnimation' },
5859
React.createElement('h1', {}, `I am a dialog! ${ time }`)
5960
)
6061
)
6162
)
6263
}
6364

64-
window.closeDialog = function(){
65-
renderDialog(false);
65+
window.closeDialog = function(animate = true){
66+
renderDialog(false, animate);
6667
}
6768

68-
window.openDialog = function(){
69-
renderDialog(true);
69+
window.openDialog = function(animate = true){
70+
renderDialog(true, animate);
7071
}
7172

7273
</script>

‎dist/esm/index.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,15 @@ class Dialog extends React.Component {
9696

9797
componentDidMount() {
9898
this.setState({ open: false }, () => {
99-
// make sure state is false first before opening the dialog
100-
// to ensure opening is animated
101-
setTimeout(() => {
99+
if(this.props.animate === false) {
102100
this.setState({ open: true });
103-
}, 10);
101+
} else {
102+
// make sure state is false first before opening the dialog
103+
// to ensure opening is animated
104+
setTimeout(() => {
105+
this.setState({ open: true });
106+
}, 10);
107+
}
104108
});
105109
this.props.document.addEventListener('keydown', this.handler, true);
106110
}
@@ -113,10 +117,10 @@ class Dialog extends React.Component {
113117
const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
114118
const style = ReactDialogStyle({ background: this.props.background });
115119
return (
116-
React.createElement('div', { key: this.props.dialogKey, className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 55}}
117-
, React.createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 56}}, style)
118-
, React.createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 57}}
119-
, React.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 58}} )
120+
React.createElement('div', { key: this.props.dialogKey, className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 59}}
121+
, React.createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 60}}, style)
122+
, React.createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 61}}
123+
, React.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 62}} )
120124
, this.props.children
121125
)
122126
)
@@ -153,7 +157,8 @@ class ReactDialog extends React.Component {
153157
background: this.props.background,
154158
close: this.props.close,
155159
document: _document,
156-
open: this.props.open, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
160+
open: this.props.open,
161+
animate: this.props.animate, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
157162

158163
, this.props.children
159164
),

‎dist/umd/index.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,15 @@
104104

105105
componentDidMount() {
106106
this.setState({ open: false }, () => {
107-
// make sure state is false first before opening the dialog
108-
// to ensure opening is animated
109-
setTimeout(() => {
107+
if(this.props.animate === false) {
110108
this.setState({ open: true });
111-
}, 10);
109+
} else {
110+
// make sure state is false first before opening the dialog
111+
// to ensure opening is animated
112+
setTimeout(() => {
113+
this.setState({ open: true });
114+
}, 10);
115+
}
112116
});
113117
this.props.document.addEventListener('keydown', this.handler, true);
114118
}
@@ -121,10 +125,10 @@
121125
const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
122126
const style = ReactDialogStyle({ background: this.props.background });
123127
return (
124-
React__default["default"].createElement('div', { key: this.props.dialogKey, className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 55}}
125-
, React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 56}}, style)
126-
, React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 57}}
127-
, React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 58}} )
128+
React__default["default"].createElement('div', { key: this.props.dialogKey, className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 59}}
129+
, React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 60}}, style)
130+
, React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 61}}
131+
, React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 62}} )
128132
, this.props.children
129133
)
130134
)
@@ -161,7 +165,8 @@
161165
background: this.props.background,
162166
close: this.props.close,
163167
document: _document,
164-
open: this.props.open, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
168+
open: this.props.open,
169+
animate: this.props.animate, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
165170

166171
, this.props.children
167172
),

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@depay/react-dialog",
33
"moduleName": "ReactDialog",
4-
"version": "14.0.6",
4+
"version": "14.1.0",
55
"description": "A basic dialog component for react.",
66
"main": "./dist/umd/index.js",
77
"module": "./dist/esm/index.js",

‎src/components/Dialog.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,15 @@ class Dialog extends React.Component {
3535

3636
componentDidMount() {
3737
this.setState({ open: false }, () => {
38-
// make sure state is false first before opening the dialog
39-
// to ensure opening is animated
40-
setTimeout(() => {
38+
if(this.props.animate === false) {
4139
this.setState({ open: true })
42-
}, 10)
40+
} else {
41+
// make sure state is false first before opening the dialog
42+
// to ensure opening is animated
43+
setTimeout(() => {
44+
this.setState({ open: true })
45+
}, 10)
46+
}
4347
})
4448
this.props.document.addEventListener('keydown', this.handler, true)
4549
}

‎src/index.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ class ReactDialog extends React.Component {
3131
close={this.props.close}
3232
document={_document}
3333
open={this.props.open}
34+
animate={this.props.animate}
3435
>
3536
{this.props.children}
3637
</Dialog>,

‎tmp/index.dev.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -106,11 +106,15 @@
106106

107107
componentDidMount() {
108108
this.setState({ open: false }, () => {
109-
// make sure state is false first before opening the dialog
110-
// to ensure opening is animated
111-
setTimeout(() => {
109+
if(this.props.animate === false) {
112110
this.setState({ open: true });
113-
}, 10);
111+
} else {
112+
// make sure state is false first before opening the dialog
113+
// to ensure opening is animated
114+
setTimeout(() => {
115+
this.setState({ open: true });
116+
}, 10);
117+
}
114118
});
115119
this.props.document.addEventListener('keydown', this.handler, true);
116120
}
@@ -123,10 +127,10 @@
123127
const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
124128
const style = ReactDialogStyle({ background: this.props.background });
125129
return (
126-
React__default["default"].createElement('div', { key: this.props.dialogKey, className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 55}}
127-
, React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 56}}, style)
128-
, React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 57}}
129-
, React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 58}} )
130+
React__default["default"].createElement('div', { key: this.props.dialogKey, className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 59}}
131+
, React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 60}}, style)
132+
, React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 61}}
133+
, React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 62}} )
130134
, this.props.children
131135
)
132136
)
@@ -163,7 +167,8 @@
163167
background: this.props.background,
164168
close: this.props.close,
165169
document: _document,
166-
open: this.props.open, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
170+
open: this.props.open,
171+
animate: this.props.animate, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
167172

168173
, this.props.children
169174
),

0 commit comments

Comments
 (0)