Skip to content

Updated modalFactory React.createClass() to ES6 #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yuanyan merged 1 commit into from
Feb 28, 2019
Merged

Updated modalFactory React.createClass() to ES6 #48

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
375 changes: 187 additions & 188 deletions src/modalFactory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,189 +1,188 @@
var React = require('react');
var transitionEvents = require('domkit/transitionEvents');
var appendVendorPrefix = require('domkit/appendVendorPrefix');

module.exports = function(animation){

return React.createClass({
propTypes: {
className: React.PropTypes.string,
// Close the modal when esc is pressed? Defaults to true.
keyboard: React.PropTypes.bool,
onShow: React.PropTypes.func,
onHide: React.PropTypes.func,
animation: React.PropTypes.object,
backdrop: React.PropTypes.bool,
closeOnClick: React.PropTypes.bool,
modalStyle: React.PropTypes.object,
backdropStyle: React.PropTypes.object,
contentStyle: React.PropTypes.object,
},

getDefaultProps: function() {
return {
className: "",
onShow: function(){},
onHide: function(){},
animation: animation,
keyboard: true,
backdrop: true,
closeOnClick: true,
modalStyle: {},
backdropStyle: {},
contentStyle: {},
};
},

getInitialState: function(){
return {
willHidden: false,
hidden: true
};
},

hasHidden: function(){
return this.state.hidden;
},

addTransitionListener: function(node, handle){
if (node) {
var endListener = function(e) {
if (e && e.target !== node) {
return;
}
transitionEvents.removeEndEventListener(node, endListener);
handle();
};
transitionEvents.addEndEventListener(node, endListener);
}
},

handleBackdropClick: function() {
if (this.props.closeOnClick) {
this.hide("backdrop");
}
},

render: function() {

var hidden = this.hasHidden();
if (hidden) return null;

var willHidden = this.state.willHidden;
var animation = this.props.animation;
var modalStyle = animation.getModalStyle(willHidden);
var backdropStyle = animation.getBackdropStyle(willHidden);
var contentStyle = animation.getContentStyle(willHidden);
var ref = animation.getRef(willHidden);
var sharp = animation.getSharp && animation.getSharp(willHidden);

// Apply custom style properties
if (this.props.modalStyle) {
var prefixedModalStyle = appendVendorPrefix(this.props.modalStyle);
for (var style in prefixedModalStyle) {
modalStyle[style] = prefixedModalStyle[style];
}
}

if (this.props.backdropStyle) {
var prefixedBackdropStyle = appendVendorPrefix(this.props.backdropStyle);
for (var style in prefixedBackdropStyle) {
backdropStyle[style] = prefixedBackdropStyle[style];
}
}

if (this.props.contentStyle) {
var prefixedContentStyle = appendVendorPrefix(this.props.contentStyle);
for (var style in prefixedContentStyle) {
contentStyle[style] = prefixedContentStyle[style];
}
}

var backdrop = this.props.backdrop? <div style={backdropStyle} onClick={this.props.closeOnClick? this.handleBackdropClick: null} />: undefined;

if(willHidden) {
var node = this.refs[ref];
this.addTransitionListener(node, this.leave);
}

return (<span>
<div ref="modal" style={modalStyle} className={this.props.className}>
{sharp}
<div ref="content" tabIndex="-1" style={contentStyle}>
{this.props.children}
</div>
</div>
{backdrop}
</span>)
;
},

leave: function(){
this.setState({
hidden: true
});
this.props.onHide(this.state.hideSource);
},

enter: function(){
this.props.onShow();
},

show: function(){
if (!this.hasHidden()) return;

this.setState({
willHidden: false,
hidden: false
});

setTimeout(function(){
var ref = this.props.animation.getRef();
var node = this.refs[ref];
this.addTransitionListener(node, this.enter);
}.bind(this), 0);
},

hide: function(source){
if (this.hasHidden()) return;

if (!source) {
source = "hide";
}

this.setState({
hideSource: source,
willHidden: true
});
},

toggle: function(){
if (this.hasHidden())
this.show();
else
this.hide("toggle");
},

listenKeyboard: function(event) {
(typeof(this.props.keyboard)=="function")
?this.props.keyboard(event)
:this.closeOnEsc(event);
},

closeOnEsc: function(event){
if (this.props.keyboard &&
(event.key === "Escape" ||
event.keyCode === 27)) {
this.hide("keyboard");
}
},

componentDidMount: function(){
window.addEventListener("keydown", this.listenKeyboard, true);
},

componentWillUnmount: function() {
window.removeEventListener("keydown", this.listenKeyboard, true);
import React from 'react'
import transitionEvents from 'domkit/transitionEvents'
import appendVendorPrefix from 'domkit/appendVendorPrefix'

class modalFactory extends React.Component {
propTypes: {
className: React.PropTypes.string,
// Close the modal when esc is pressed? Defaults to true.
keyboard: React.PropTypes.bool,
onShow: React.PropTypes.func,
onHide: React.PropTypes.func,
animation: React.PropTypes.object,
backdrop: React.PropTypes.bool,
closeOnClick: React.PropTypes.bool,
modalStyle: React.PropTypes.object,
backdropStyle: React.PropTypes.object,
contentStyle: React.PropTypes.object,
}

getDefaultProps() {
return {
className: "",
onShow: function(){},
onHide: function(){},
animation: animation,
keyboard: true,
backdrop: true,
closeOnClick: true,
modalStyle: {},
backdropStyle: {},
contentStyle: {},
}
}

getInitialState(){
return {
willHidden: false,
hidden: true
}
}

hasHidden(){
return this.state.hidden
}

addTransitionListener(node, handle){
if (node) {
var endListener = function(e) {
if (e && e.target !== node) {
return
}
});
};
transitionEvents.removeEndEventListener(node, endListener)
handle()
}
transitionEvents.addEndEventListener(node, endListener)
}
}

handleBackdropClick() {
if (this.props.closeOnClick) {
this.hide("backdrop")
}
}

render() {

var hidden = this.hasHidden()
if (hidden) return null

var willHidden = this.state.willHidden
var animation = this.props.animation
var modalStyle = animation.getModalStyle(willHidden)
var backdropStyle = animation.getBackdropStyle(willHidden)
var contentStyle = animation.getContentStyle(willHidden)
var ref = animation.getRef(willHidden)
var sharp = animation.getSharp && animation.getSharp(willHidden)

// Apply custom style properties
if (this.props.modalStyle) {
var prefixedModalStyle = appendVendorPrefix(this.props.modalStyle)
for (var style in prefixedModalStyle) {
modalStyle[style] = prefixedModalStyle[style]
}
}

if (this.props.backdropStyle) {
var prefixedBackdropStyle = appendVendorPrefix(this.props.backdropStyle)
for (var style in prefixedBackdropStyle) {
backdropStyle[style] = prefixedBackdropStyle[style]
}
}

if (this.props.contentStyle) {
var prefixedContentStyle = appendVendorPrefix(this.props.contentStyle)
for (var style in prefixedContentStyle) {
contentStyle[style] = prefixedContentStyle[style]
}
}

var backdrop = this.props.backdrop? <div style={backdropStyle} onClick={this.props.closeOnClick? this.handleBackdropClick: null} />: undefined

if(willHidden) {
var node = this.refs[ref]
this.addTransitionListener(node, this.leave)
}

return (<span>
<div ref="modal" style={modalStyle} className={this.props.className}>
{sharp}
<div ref="content" tabIndex="-1" style={contentStyle}>
{this.props.children}
</div>
</div>
{backdrop}
</span>)

}

leave(){
this.setState({
hidden: true
})
this.props.onHide(this.state.hideSource)
}

enter(){
this.props.onShow()
}

show(){
if (!this.hasHidden()) return

this.setState({
willHidden: false,
hidden: false
})

setTimeout(function(){
var ref = this.props.animation.getRef()
var node = this.refs[ref]
this.addTransitionListener(node, this.enter)
}.bind(this), 0)
}

hide(source){
if (this.hasHidden()) return

if (!source) {
source = "hide"
}

this.setState({
hideSource: source,
willHidden: true
})
}

toggle(){
if (this.hasHidden())
this.show()
else
this.hide("toggle")
}

listenKeyboard(event) {
(typeof(this.props.keyboard)=="function")
?this.props.keyboard(event)
:this.closeOnEsc(event)
}

closeOnEsc(event){
if (this.props.keyboard &&
(event.key === "Escape" ||
event.keyCode === 27)) {
this.hide("keyboard")
}
}

componentDidMount(){
window.addEventListener("keydown", this.listenKeyboard, true)
}

componentWillUnmount() {
window.removeEventListener("keydown", this.listenKeyboard, true)
}
}

export default modalFactory