Skip to content

[changed] master to v1. #409

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

Closed
wants to merge 1 commit into from
Closed

[changed] master to v1. #409

Show file tree
Hide file tree
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
4 changes: 2 additions & 2 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"presets": ["es2015", "react"]
}
"presets": ["es2015", "stage-2", "react"]
}
75 changes: 35 additions & 40 deletions examples/basic/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,57 @@
var React = require('react');
var ReactDOM = require('react-dom');
var Modal = require('../../lib/index');
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Modal from '../../lib/index';

var appElement = document.getElementById('example');
const appElement = document.getElementById('example');

Modal.setAppElement('#example');

var App = React.createClass({

getInitialState: function() {
return { modalIsOpen: false, modal2: false };
},

openModal: function() {
this.setState(Object.assign({}, this.state, { modalIsOpen: true }));
},
class App extends Component {
constructor(props) {
super(props);
this.state = { modal1: false, modal2: false };
}

closeModal: function() {
this.setState(Object.assign({}, this.state, { modalIsOpen: false }));
},
toggleModal_1 = () => {
this.setState({ ...this.state, modal1: !this.state.modal1 });
}

openSecondModal: function(event) {
toggleModal_2 = event => {
event.preventDefault();
this.setState(Object.assign ({}, this.state, { modal2: true }));
},

closeSecondModal: function() {
this.setState(Object.assign ({}, this.state, { modal2: false }));
},
this.setState({ ...this.state, modal2: !this.state.modal2 });
}

handleModalCloseRequest: function() {
handleModalCloseRequest = () => {
// opportunity to validate something and keep the modal open even if it
// requested to be closed
this.setState(Object.assign ({}, this.state, { modalIsOpen: false }));
},
this.setState({ ...this.state, modal1: false });
}

handleInputChange: function() {
this.setState({ foo: 'bar' });
},
handleInputChange = () => {
this.setState({ ...this.state, foo: 'bar' });
}

handleOnAfterOpenModal: function() {
handleOnAfterOpenModal = () => {
// when ready, we can access the available refs.
this.refs.title.style.color = '#F00';
},
}

render: function() {
render() {
const { modal1, modal2 } = this.state;
return (
<div>
<button onClick={this.openModal}>Open Modal A</button>
<button onClick={this.openSecondModal}>Open Modal B</button>
<button onClick={this.toggleModal_1}>Open Modal A</button>
<button onClick={this.toggleModal_2}>Open Modal B</button>
<Modal
ref="mymodal"
id="test"
closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
isOpen={modal1}
contentLabel="modalA"
onAfterOpen={this.handleOnAfterOpenModal}
onRequestClose={this.handleModalCloseRequest}>
<h1 ref="title">Hello</h1>
<button onClick={this.closeModal}>close</button>
<button onClick={this.toggleModal_1}>close</button>
<div>I am a modal</div>
<form>
<input onChange={this.handleInputChange} />
Expand All @@ -70,20 +64,21 @@ var App = React.createClass({
<button>hi</button>
<button>hi</button>
<button>hi</button>
<button onClick={this.openSecondModal}>Open Modal B</button>
<button onClick={this.toggleModal_2}>Open Modal B</button>
</form>
</Modal>
<Modal ref="mymodal2"
id="test2"
closeTimeoutMS={150}
isOpen={this.state.modal2}
contentLabel="modalB"
isOpen={modal2}
onAfterOpen={() => {}}
onRequestClose={this.closeSecondModal}>
onRequestClose={this.toggleModal_2}>
<p>test</p>
</Modal>
</div>
);
}
});
}

ReactDOM.render(<App/>, appElement);
150 changes: 72 additions & 78 deletions lib/components/Modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = require('prop-types');
var ExecutionEnvironment = require('exenv');
var ModalPortal = React.createFactory(require('./ModalPortal'));
var ariaAppHider = require('../helpers/ariaAppHider');
var refCount = require('../helpers/refCount');
var elementClass = require('element-class');
var renderSubtreeIntoContainer = require("react-dom").unstable_renderSubtreeIntoContainer;
var Assign = require('lodash.assign');
var createReactClass = require('create-react-class')
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import ExecutionEnvironment from 'exenv';
import ModalPortal from './ModalPortal';
import elementClass from 'element-class';
import * as ariaAppHider from '../helpers/ariaAppHider';
import * as refCount from '../helpers/refCount';

var renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;

var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
var AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
Expand All @@ -17,21 +16,18 @@ function getParentElement(parentSelector) {
return parentSelector();
}

var Modal = createReactClass({
export default class Modal extends Component {
static setAppElement = function(element) {
AppElement = ariaAppHider.setElement(element);
};

displayName: 'Modal',
statics: {
setAppElement: function(element) {
AppElement = ariaAppHider.setElement(element);
},
injectCSS: function() {
"production" !== process.env.NODE_ENV
&& console.warn('React-Modal: injectCSS has been deprecated ' +
'and no longer has any effect. It will be removed in a later version');
}
},
static injectCSS = function() {
"production" !== process.env.NODE_ENV
&& console.warn('React-Modal: injectCSS has been deprecated ' +
'and no longer has any effect. It will be removed in a later version');
};

propTypes: {
static propTypes = {
isOpen: PropTypes.bool.isRequired,
style: PropTypes.shape({
content: PropTypes.object,
Expand All @@ -48,21 +44,44 @@ var Modal = createReactClass({
parentSelector: PropTypes.func,
role: PropTypes.string,
contentLabel: PropTypes.string.isRequired
},

getDefaultProps: function () {
return {
isOpen: false,
portalClassName: 'ReactModalPortal',
bodyOpenClassName: 'ReactModal__Body--open',
ariaHideApp: true,
closeTimeoutMS: 0,
shouldCloseOnOverlayClick: true,
parentSelector: function () { return document.body; }
};
},

componentDidMount: function() {
};

static defaultProps = {
isOpen: false,
portalClassName: 'ReactModalPortal',
bodyOpenClassName: 'ReactModal__Body--open',
ariaHideApp: true,
closeTimeoutMS: 0,
shouldCloseOnOverlayClick: true,
parentSelector: function () { return document.body; }
};

static defaultStyles = {
overlay: {
position : 'fixed',
top : 0,
left : 0,
right : 0,
bottom : 0,
backgroundColor : 'rgba(255, 255, 255, 0.75)'
},
content: {
position : 'absolute',
top : '40px',
left : '40px',
right : '40px',
bottom : '40px',
border : '1px solid #ccc',
background : '#fff',
overflow : 'auto',
WebkitOverflowScrolling : 'touch',
borderRadius : '4px',
outline : 'none',
padding : '20px'
}
};

componentDidMount() {
this.node = document.createElement('div');
this.node.className = this.props.portalClassName;

Expand All @@ -71,9 +90,9 @@ var Modal = createReactClass({
var parent = getParentElement(this.props.parentSelector);
parent.appendChild(this.node);
this.renderPortal(this.props);
},
}

componentWillReceiveProps: function(newProps) {
componentWillReceiveProps(newProps) {
if (newProps.isOpen) refCount.add(this);
if (!newProps.isOpen) refCount.remove(this);
var currentParent = getParentElement(this.props.parentSelector);
Expand All @@ -85,9 +104,9 @@ var Modal = createReactClass({
}

this.renderPortal(newProps);
},
}

componentWillUnmount: function() {
componentWillUnmount() {
if (!this.node) return;

refCount.remove(this);
Expand All @@ -112,19 +131,19 @@ var Modal = createReactClass({
} else {
this.removePortal();
}
},
}

removePortal: function() {
removePortal = () => {
ReactDOM.unmountComponentAtNode(this.node);
var parent = getParentElement(this.props.parentSelector);
parent.removeChild(this.node);

if (refCount.count() === 0) {
elementClass(document.body).remove(this.props.bodyOpenClassName);
}
},
}

renderPortal: function(props) {
renderPortal = props => {
if (props.isOpen || refCount.count() > 0) {
elementClass(document.body).add(this.props.bodyOpenClassName);
} else {
Expand All @@ -135,37 +154,12 @@ var Modal = createReactClass({
ariaAppHider.toggle(props.isOpen, props.appElement);
}

this.portal = renderSubtreeIntoContainer(this, ModalPortal(Assign({}, props, {defaultStyles: Modal.defaultStyles})), this.node);
},

render: function () {
return React.DOM.noscript();
this.portal = renderSubtreeIntoContainer(this, (
<ModalPortal defaultStyles={Modal.defaultStyles} {...props} />
), this.node);
}
});

Modal.defaultStyles = {
overlay: {
position : 'fixed',
top : 0,
left : 0,
right : 0,
bottom : 0,
backgroundColor : 'rgba(255, 255, 255, 0.75)'
},
content: {
position : 'absolute',
top : '40px',
left : '40px',
right : '40px',
bottom : '40px',
border : '1px solid #ccc',
background : '#fff',
overflow : 'auto',
WebkitOverflowScrolling : 'touch',
borderRadius : '4px',
outline : 'none',
padding : '20px'

render() {
return null;
}
}

module.exports = Modal
Loading