Skip to content

Commit dc2dfa5

Browse files
zackifyzackify
committed
added css transitions!
1 parent 119462b commit dc2dfa5

9 files changed

Lines changed: 160 additions & 17 deletions

File tree

‎README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,20 @@
1212
</Modal>
1313
~~~
1414

15+
##New in 0.4
16+
17+
CSS powered transitions! This took a lot of work but is so awesome :)
18+
19+
In your css file have a transition for the opacity: `transition: 'opacity 1s ease-in'`, now all you do is add in the transition speed as a prop. In the css example I just gave, it's one second:
20+
21+
~~~js
22+
<Modal show={this.state.show} onClose={this.close} transitionSpeed={1000}>
23+
<div>hey, click outside of me to close me!</div>
24+
</Modal>
25+
~~~
26+
27+
Now the component will open with your transition, and wait to hide until it finishes! Don't like transitions? Leave out the prop and everything works the same.
28+
1529
##Full Example
1630

1731
An incredibly simple modal dialog, because after writing [this post](http://reactjsnews.com/modals-in-react/), I found none of the ones listed let you easily overwrite the css!

‎build/simple-modal.js‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,15 @@ var Modal = (function (_React$Component) {
3232

3333
_get(Object.getPrototypeOf(Modal.prototype), 'constructor', this).call(this);
3434
this.hideOnOuterClick = this.hideOnOuterClick.bind(this);
35+
this.fadeIn = this.fadeIn.bind(this);
36+
this.fadeOut = this.fadeOut.bind(this);
37+
38+
this.state = {
39+
opacity: 0,
40+
display: 'none',
41+
visibility: 'hidden',
42+
show: false
43+
};
3544
}
3645

3746
_createClass(Modal, [{
@@ -40,10 +49,45 @@ var Modal = (function (_React$Component) {
4049
if (this.props.closeOnOuterClick === false) return;
4150
if (event.target.dataset.modal) this.props.onClose(event);
4251
}
52+
}, {
53+
key: 'componentWillReceiveProps',
54+
value: function componentWillReceiveProps(props) {
55+
if (this.props.show != props.show) {
56+
if (this.props.transitionSpeed) {
57+
if (props.show == true) this.fadeIn();else this.fadeOut();
58+
} else this.setState({ show: props.show });
59+
}
60+
}
61+
}, {
62+
key: 'fadeIn',
63+
value: function fadeIn() {
64+
var _this = this;
65+
66+
this.setState({
67+
display: 'block',
68+
visibility: 'visible',
69+
show: true
70+
}, function () {
71+
setTimeout(function () {
72+
_this.setState({ opacity: 1 });
73+
}, 10);
74+
});
75+
}
76+
}, {
77+
key: 'fadeOut',
78+
value: function fadeOut() {
79+
var _this2 = this;
80+
81+
this.setState({ opacity: 0 }, function () {
82+
setTimeout(function () {
83+
_this2.setState({ show: false });
84+
}, _this2.props.transitionSpeed);
85+
});
86+
}
4387
}, {
4488
key: 'render',
4589
value: function render() {
46-
if (!this.props.show) return null;
90+
if (!this.state.show) return null;
4791
//completely overwrite if they use a class
4892
if (this.props.className) {
4993
modalStyle = this.props.style;
@@ -52,6 +96,7 @@ var Modal = (function (_React$Component) {
5296
var modalStyle = _extends({}, _styles2['default'].modal, this.props.style);
5397
var containerStyle = _extends({}, _styles2['default'].container, this.props.containerStyle);
5498
}
99+
if (this.props.transitionSpeed) modalStyle = _extends({}, this.state, modalStyle);
55100

56101
return _react2['default'].createElement(
57102
'div',

‎build/styles.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ var modal = {
1212
left: 0,
1313
background: 'rgba(0, 0, 0, 0.8)',
1414
zIndex: 99999,
15-
transition: 'opacity 400ms ease-in',
16-
opacity: 1,
15+
transition: 'opacity 1s ease-in',
1716
pointerEvents: 'auto'
1817
};
1918

‎dist/simple-react-modal.js‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,15 @@ var Modal = (function (_React$Component) {
3434

3535
_get(Object.getPrototypeOf(Modal.prototype), 'constructor', this).call(this);
3636
this.hideOnOuterClick = this.hideOnOuterClick.bind(this);
37+
this.fadeIn = this.fadeIn.bind(this);
38+
this.fadeOut = this.fadeOut.bind(this);
39+
40+
this.state = {
41+
opacity: 0,
42+
display: 'none',
43+
visibility: 'hidden',
44+
show: false
45+
};
3746
}
3847

3948
_createClass(Modal, [{
@@ -42,10 +51,45 @@ var Modal = (function (_React$Component) {
4251
if (this.props.closeOnOuterClick === false) return;
4352
if (event.target.dataset.modal) this.props.onClose(event);
4453
}
54+
}, {
55+
key: 'componentWillReceiveProps',
56+
value: function componentWillReceiveProps(props) {
57+
if (this.props.show != props.show) {
58+
if (this.props.transitionSpeed) {
59+
if (props.show == true) this.fadeIn();else this.fadeOut();
60+
} else this.setState({ show: props.show });
61+
}
62+
}
63+
}, {
64+
key: 'fadeIn',
65+
value: function fadeIn() {
66+
var _this = this;
67+
68+
this.setState({
69+
display: 'block',
70+
visibility: 'visible',
71+
show: true
72+
}, function () {
73+
setTimeout(function () {
74+
_this.setState({ opacity: 1 });
75+
}, 10);
76+
});
77+
}
78+
}, {
79+
key: 'fadeOut',
80+
value: function fadeOut() {
81+
var _this2 = this;
82+
83+
this.setState({ opacity: 0 }, function () {
84+
setTimeout(function () {
85+
_this2.setState({ show: false });
86+
}, _this2.props.transitionSpeed);
87+
});
88+
}
4589
}, {
4690
key: 'render',
4791
value: function render() {
48-
if (!this.props.show) return null;
92+
if (!this.state.show) return null;
4993
//completely overwrite if they use a class
5094
if (this.props.className) {
5195
modalStyle = this.props.style;
@@ -54,6 +98,7 @@ var Modal = (function (_React$Component) {
5498
var modalStyle = _extends({}, _styles2['default'].modal, this.props.style);
5599
var containerStyle = _extends({}, _styles2['default'].container, this.props.containerStyle);
56100
}
101+
if (this.props.transitionSpeed) modalStyle = _extends({}, this.state, modalStyle);
57102

58103
return _react2['default'].createElement(
59104
'div',
@@ -90,8 +135,7 @@ var modal = {
90135
left: 0,
91136
background: 'rgba(0, 0, 0, 0.8)',
92137
zIndex: 99999,
93-
transition: 'opacity 400ms ease-in',
94-
opacity: 1,
138+
transition: 'opacity 1s ease-in',
95139
pointerEvents: 'auto'
96140
};
97141

‎dist/simple-react-modal.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/example.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@ export default class App extends React.Component{
2121
<div>
2222
<a onClick={this.show.bind(this)}>Open Modal</a>
2323
<Modal
24-
onOuterClick={false}
24+
closeOnOuterClick={true}
2525
show={this.state.show}
26-
onClose={this.close.bind(this)}>
26+
onClose={this.close.bind(this)}
27+
transitionSpeed={1000}>
2728

2829
<a key="close" style={closeStyle} onClick={this.close.bind(this)}>X</a>
2930
<div key="content">hey</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "simple-react-modal",
33
"description": "The simplest modal",
4-
"version": "0.3.2",
4+
"version": "0.4.0",
55
"main": "./build/simple-modal.js",
66
"directories": {
77
"example": "example"

‎src/simple-modal.js‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,65 @@ export default class Modal extends React.Component{
66
constructor(props){
77
super()
88
this.hideOnOuterClick = this.hideOnOuterClick.bind(this)
9+
this.fadeIn = this.fadeIn.bind(this)
10+
this.fadeOut = this.fadeOut.bind(this)
11+
12+
this.state = {
13+
opacity: 0,
14+
display: 'none',
15+
visibility: 'hidden',
16+
show: false
17+
}
18+
919
}
1020

1121
hideOnOuterClick(event){
1222
if(this.props.closeOnOuterClick === false) return
1323
if(event.target.dataset.modal) this.props.onClose(event)
1424
}
1525

26+
componentWillReceiveProps(props){
27+
if(this.props.show != props.show){
28+
if(this.props.transitionSpeed){
29+
if(props.show == true) this.fadeIn()
30+
else this.fadeOut()
31+
}
32+
else this.setState({show: props.show})
33+
}
34+
}
35+
36+
fadeIn(){
37+
this.setState({
38+
display: 'block',
39+
visibility: 'visible',
40+
show: true
41+
}, ()=>{
42+
setTimeout(()=>{
43+
this.setState({opacity: 1})
44+
},10)
45+
})
46+
}
47+
48+
fadeOut(){
49+
this.setState({opacity: 0}, ()=>{
50+
setTimeout(()=>{
51+
this.setState({show: false})
52+
}, this.props.transitionSpeed)
53+
})
54+
}
55+
1656
render(){
17-
if(!this.props.show) return null
57+
if(!this.state.show) return null
1858
//completely overwrite if they use a class
1959
if(this.props.className){
2060
modalStyle = this.props.style
2161
containerStyle = this.props.containerStyle
2262
}
2363
else{
24-
var modalStyle = Object.assign({}, styles.modal ,this.props.style)
25-
var containerStyle = Object.assign({},styles.container,this.props.containerStyle)
64+
var modalStyle = Object.assign({}, styles.modal, this.props.style)
65+
var containerStyle = Object.assign({}, styles.container, this.props.containerStyle)
2666
}
67+
if(this.props.transitionSpeed) modalStyle = Object.assign({}, this.state, modalStyle)
2768

2869
return (
2970
<div {...this.props} style={modalStyle} onClick={this.hideOnOuterClick} data-modal="true">

‎src/styles.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,16 @@ var modal = {
77
left: 0,
88
background: 'rgba(0, 0, 0, 0.8)',
99
zIndex: 99999,
10-
transition: 'opacity 400ms ease-in',
11-
opacity: 1,
12-
pointerEvents: 'auto',
10+
transition: 'opacity 1s ease-in',
11+
pointerEvents: 'auto'
1312
}
1413

1514
var container = {
1615
width: '400px',
1716
position: 'relative',
1817
margin: '10% auto',
1918
padding: '5px 20px 13px 20px',
20-
background: '#fff',
19+
background: '#fff'
2120
}
2221

2322
var close = {

0 commit comments

Comments
 (0)