Skip to content

Commit d2fbe55

Browse files
diasbrunodiasbruno
committed
[chore] added babel stage-2 preset.
1 parent 95e8511 commit d2fbe55

File tree

11 files changed

+508
-304
lines changed

11 files changed

+508
-304
lines changed

Diff for: ‎.babelrc

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["es2015", "react"]
3-
}
2+
"presets": ["es2015", "stage-2", "react"]
3+
}

Diff for: ‎examples/basic/app.js

+35-41
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,57 @@
1-
var React = require('react');
2-
var ReactDOM = require('react-dom');
3-
var Modal = require('../../lib/index');
4-
var createReactClass = require('create-react-class');
1+
import React, { Component } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import Modal from '../../lib/index';
54

6-
var appElement = document.getElementById('example');
5+
const appElement = document.getElementById('example');
76

87
Modal.setAppElement('#example');
98

10-
var App = createReactClass({
11-
12-
getInitialState: function() {
13-
return { modalIsOpen: false, modal2: false };
14-
},
15-
16-
openModal: function() {
17-
this.setState(Object.assign({}, this.state, { modalIsOpen: true }));
18-
},
9+
class App extends Component {
10+
constructor(props) {
11+
super(props);
12+
this.state = { modal1: false, modal2: false };
13+
}
1914

20-
closeModal: function() {
21-
this.setState(Object.assign({}, this.state, { modalIsOpen: false }));
22-
},
15+
toggleModal_1 = () => {
16+
this.setState({ ...this.state, modal1: !this.state.modal1 });
17+
}
2318

24-
openSecondModal: function(event) {
19+
toggleModal_2 = event => {
2520
event.preventDefault();
26-
this.setState(Object.assign ({}, this.state, { modal2: true }));
27-
},
28-
29-
closeSecondModal: function() {
30-
this.setState(Object.assign ({}, this.state, { modal2: false }));
31-
},
21+
this.setState({ ...this.state, modal2: !this.state.modal2 });
22+
}
3223

33-
handleModalCloseRequest: function() {
24+
handleModalCloseRequest = () => {
3425
// opportunity to validate something and keep the modal open even if it
3526
// requested to be closed
36-
this.setState(Object.assign ({}, this.state, { modalIsOpen: false }));
37-
},
27+
this.setState({ ...this.state, modal1: false });
28+
}
3829

39-
handleInputChange: function() {
40-
this.setState({ foo: 'bar' });
41-
},
30+
handleInputChange = () => {
31+
this.setState({ ...this.state, foo: 'bar' });
32+
}
4233

43-
handleOnAfterOpenModal: function() {
34+
handleOnAfterOpenModal = () => {
4435
// when ready, we can access the available refs.
4536
this.refs.title.style.color = '#F00';
46-
},
37+
}
4738

48-
render: function() {
39+
render() {
40+
const { modal1, modal2 } = this.state;
4941
return (
5042
<div>
51-
<button onClick={this.openModal}>Open Modal A</button>
52-
<button onClick={this.openSecondModal}>Open Modal B</button>
43+
<button onClick={this.toggleModal_1}>Open Modal A</button>
44+
<button onClick={this.toggleModal_2}>Open Modal B</button>
5345
<Modal
5446
ref="mymodal"
5547
id="test"
5648
closeTimeoutMS={150}
57-
isOpen={this.state.modalIsOpen}
49+
isOpen={modal1}
50+
contentLabel="modalA"
5851
onAfterOpen={this.handleOnAfterOpenModal}
5952
onRequestClose={this.handleModalCloseRequest}>
6053
<h1 ref="title">Hello</h1>
61-
<button onClick={this.closeModal}>close</button>
54+
<button onClick={this.toggleModal_1}>close</button>
6255
<div>I am a modal</div>
6356
<form>
6457
<input onChange={this.handleInputChange} />
@@ -71,20 +64,21 @@ var App = createReactClass({
7164
<button>hi</button>
7265
<button>hi</button>
7366
<button>hi</button>
74-
<button onClick={this.openSecondModal}>Open Modal B</button>
67+
<button onClick={this.toggleModal_2}>Open Modal B</button>
7568
</form>
7669
</Modal>
7770
<Modal ref="mymodal2"
7871
id="test2"
7972
closeTimeoutMS={150}
80-
isOpen={this.state.modal2}
73+
contentLabel="modalB"
74+
isOpen={modal2}
8175
onAfterOpen={() => {}}
82-
onRequestClose={this.closeSecondModal}>
76+
onRequestClose={this.toggleModal_2}>
8377
<p>test</p>
8478
</Modal>
8579
</div>
8680
);
8781
}
88-
});
82+
}
8983

9084
ReactDOM.render(<App/>, appElement);

Diff for: ‎lib/components/Modal.js

+86-93
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,33 @@
1-
var React = require('react');
2-
var ReactDOM = require('react-dom');
3-
var DOMFactories = require('react-dom-factories');
4-
var PropTypes = require('prop-types');
5-
var ExecutionEnvironment = require('exenv');
6-
var ModalPortal = React.createFactory(require('./ModalPortal'));
7-
var ariaAppHider = require('../helpers/ariaAppHider');
8-
var refCount = require('../helpers/refCount');
9-
var elementClass = require('element-class');
10-
var renderSubtreeIntoContainer = require("react-dom").unstable_renderSubtreeIntoContainer;
11-
var Assign = require('lodash.assign');
12-
var createReactClass = require('create-react-class');
13-
14-
var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
15-
var AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
1+
import React, { Component } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import PropTypes from 'prop-types';
4+
import ExecutionEnvironment from 'exenv';
5+
import ModalPortal from './ModalPortal';
6+
import elementClass from 'element-class';
7+
import * as ariaAppHider from '../helpers/ariaAppHider';
8+
import * as refCount from '../helpers/refCount';
9+
10+
const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
11+
12+
const SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
13+
let AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
1614

1715
function getParentElement(parentSelector) {
1816
return parentSelector();
1917
}
2018

21-
var Modal = createReactClass({
19+
export default class Modal extends Component {
20+
static setAppElement = function(element) {
21+
AppElement = ariaAppHider.setElement(element);
22+
};
2223

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

35-
propTypes: {
30+
static propTypes = {
3631
isOpen: PropTypes.bool.isRequired,
3732
style: PropTypes.shape({
3833
content: PropTypes.object,
@@ -49,52 +44,75 @@ var Modal = createReactClass({
4944
parentSelector: PropTypes.func,
5045
role: PropTypes.string,
5146
contentLabel: PropTypes.string.isRequired
52-
},
53-
54-
getDefaultProps: function () {
55-
return {
56-
isOpen: false,
57-
portalClassName: 'ReactModalPortal',
58-
bodyOpenClassName: 'ReactModal__Body--open',
59-
ariaHideApp: true,
60-
closeTimeoutMS: 0,
61-
shouldCloseOnOverlayClick: true,
62-
parentSelector: function () { return document.body; }
63-
};
64-
},
65-
66-
componentDidMount: function() {
47+
};
48+
49+
static defaultProps = {
50+
isOpen: false,
51+
portalClassName: 'ReactModalPortal',
52+
bodyOpenClassName: 'ReactModal__Body--open',
53+
ariaHideApp: true,
54+
closeTimeoutMS: 0,
55+
shouldCloseOnOverlayClick: true,
56+
parentSelector: function () { return document.body; }
57+
};
58+
59+
static defaultStyles = {
60+
overlay: {
61+
position : 'fixed',
62+
top : 0,
63+
left : 0,
64+
right : 0,
65+
bottom : 0,
66+
backgroundColor : 'rgba(255, 255, 255, 0.75)'
67+
},
68+
content: {
69+
position : 'absolute',
70+
top : '40px',
71+
left : '40px',
72+
right : '40px',
73+
bottom : '40px',
74+
border : '1px solid #ccc',
75+
background : '#fff',
76+
overflow : 'auto',
77+
WebkitOverflowScrolling : 'touch',
78+
borderRadius : '4px',
79+
outline : 'none',
80+
padding : '20px'
81+
}
82+
};
83+
84+
componentDidMount() {
6785
this.node = document.createElement('div');
6886
this.node.className = this.props.portalClassName;
6987

7088
if (this.props.isOpen) refCount.add(this);
7189

72-
var parent = getParentElement(this.props.parentSelector);
90+
const parent = getParentElement(this.props.parentSelector);
7391
parent.appendChild(this.node);
7492
this.renderPortal(this.props);
75-
},
93+
}
7694

77-
componentWillUpdate: function(newProps) {
95+
componentWillUpdate(newProps) {
7896
if(newProps.portalClassName !== this.props.portalClassName) {
7997
this.node.className = newProps.portalClassName;
8098
}
81-
},
99+
}
82100

83-
componentWillReceiveProps: function(newProps) {
101+
componentWillReceiveProps(newProps) {
84102
if (newProps.isOpen) refCount.add(this);
85103
if (!newProps.isOpen) refCount.remove(this);
86-
var currentParent = getParentElement(this.props.parentSelector);
87-
var newParent = getParentElement(newProps.parentSelector);
104+
const currentParent = getParentElement(this.props.parentSelector);
105+
const newParent = getParentElement(newProps.parentSelector);
88106

89-
if(newParent !== currentParent) {
107+
if (newParent !== currentParent) {
90108
currentParent.removeChild(this.node);
91109
newParent.appendChild(this.node);
92110
}
93111

94112
this.renderPortal(newProps);
95-
},
113+
}
96114

97-
componentWillUnmount: function() {
115+
componentWillUnmount() {
98116
if (!this.node) return;
99117

100118
refCount.remove(this);
@@ -103,9 +121,9 @@ var Modal = createReactClass({
103121
ariaAppHider.show(this.props.appElement);
104122
}
105123

106-
var state = this.portal.state;
107-
var now = Date.now();
108-
var closesAt = state.isOpen && this.props.closeTimeoutMS
124+
const state = this.portal.state;
125+
const now = Date.now();
126+
const closesAt = state.isOpen && this.props.closeTimeoutMS
109127
&& (state.closesAt
110128
|| now + this.props.closeTimeoutMS);
111129

@@ -114,24 +132,24 @@ var Modal = createReactClass({
114132
this.portal.closeWithTimeout();
115133
}
116134

117-
var that = this;
135+
const that = this;
118136
setTimeout(function() { that.removePortal(); }, closesAt - now);
119137
} else {
120138
this.removePortal();
121139
}
122-
},
140+
}
123141

124-
removePortal: function() {
142+
removePortal = () => {
125143
ReactDOM.unmountComponentAtNode(this.node);
126-
var parent = getParentElement(this.props.parentSelector);
144+
const parent = getParentElement(this.props.parentSelector);
127145
parent.removeChild(this.node);
128146

129147
if (refCount.count() === 0) {
130148
elementClass(document.body).remove(this.props.bodyOpenClassName);
131149
}
132-
},
150+
}
133151

134-
renderPortal: function(props) {
152+
renderPortal = props => {
135153
if (props.isOpen || refCount.count() > 0) {
136154
elementClass(document.body).add(this.props.bodyOpenClassName);
137155
} else {
@@ -142,37 +160,12 @@ var Modal = createReactClass({
142160
ariaAppHider.toggle(props.isOpen, props.appElement);
143161
}
144162

145-
this.portal = renderSubtreeIntoContainer(this, ModalPortal(Assign({}, props, {defaultStyles: Modal.defaultStyles})), this.node);
146-
},
147-
148-
render: function () {
149-
return DOMFactories.noscript();
163+
this.portal = renderSubtreeIntoContainer(this, (
164+
<ModalPortal defaultStyles={Modal.defaultStyles} {...props} />
165+
), this.node);
150166
}
151-
});
152-
153-
Modal.defaultStyles = {
154-
overlay: {
155-
position : 'fixed',
156-
top : 0,
157-
left : 0,
158-
right : 0,
159-
bottom : 0,
160-
backgroundColor : 'rgba(255, 255, 255, 0.75)'
161-
},
162-
content: {
163-
position : 'absolute',
164-
top : '40px',
165-
left : '40px',
166-
right : '40px',
167-
bottom : '40px',
168-
border : '1px solid #ccc',
169-
background : '#fff',
170-
overflow : 'auto',
171-
WebkitOverflowScrolling : 'touch',
172-
borderRadius : '4px',
173-
outline : 'none',
174-
padding : '20px'
167+
168+
render() {
169+
return null;
175170
}
176171
}
177-
178-
module.exports = Modal

0 commit comments

Comments
 (0)