Skip to content

Commit 04d3171

Browse files
diasbrunodiasbruno
committed
[chore] passing lint...
1 parent 0da9e75 commit 04d3171

13 files changed

+347
-277
lines changed

‎.eslintrc.js renamed to ‎.eslintrc

+13-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = {
1+
{
22
"env": {
33
"es6": true,
44
"browser": true
@@ -13,13 +13,20 @@ module.exports = {
1313
"sourceType": "module"
1414
},
1515
"parser": "babel-eslint",
16-
rules: {
16+
"rules": {
17+
"quotes": [0],
1718
"comma-dangle": [2, "only-multiline"],
18-
"max-len": [1, {"code": 140}],
19+
"max-len": [1, {"code": 80}],
20+
"no-unused-expressions": [0],
1921
"no-continue": [0],
2022
"no-plusplus": [0],
21-
"space-before-function-paren": [2, "always"],
23+
"func-names": [0],
24+
"arrow-parens": [0],
25+
"space-before-function-paren": [0],
2226
"import/no-extraneous-dependencies": [2, {"devDependencies": true}],
27+
"jsx-a11y/no-static-element-interactions": [0],
28+
"react/no-find-dom-node": [0],
29+
"react/jsx-closing-bracket-location": [0],
2330
"react/jsx-filename-extension": ["error", {"extensions": [".js"]}]
24-
},
25-
};
31+
}
32+
}

‎lib/components/Modal.js

+52-38
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,37 @@ import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
33
import PropTypes from 'prop-types';
44
import ExecutionEnvironment from 'exenv';
5-
import ModalPortal from './ModalPortal';
65
import elementClass from 'element-class';
6+
import ModalPortal from './ModalPortal';
77
import * as ariaAppHider from '../helpers/ariaAppHider';
88
import * as refCount from '../helpers/refCount';
99

10+
const EE = ExecutionEnvironment;
1011
const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
1112

12-
const SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
13-
let AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
13+
const SafeHTMLElement = EE.canUseDOM ? window.HTMLElement : {};
14+
const AppElement = EE.canUseDOM ? document.body : { appendChild() {} };
1415

1516
function getParentElement(parentSelector) {
1617
return parentSelector();
1718
}
1819

1920
export default class Modal extends Component {
20-
static setAppElement = function(element) {
21-
AppElement = ariaAppHider.setElement(element);
22-
};
21+
static setAppElement(element) {
22+
ariaAppHider.setElement(element || AppElement);
23+
}
2324

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-
};
25+
/* eslint-disable no-console */
26+
static injectCSS() {
27+
(process.env.NODE_ENV !== "production")
28+
&& console.warn(
29+
'React-Modal: injectCSS has been deprecated ' +
30+
'and no longer has any effect. It will be removed in a later version'
31+
);
32+
}
33+
/* eslint-enable no-console */
2934

35+
/* eslint-disable react/no-unused-prop-types */
3036
static propTypes = {
3137
isOpen: PropTypes.bool.isRequired,
3238
style: PropTypes.shape({
@@ -35,6 +41,14 @@ export default class Modal extends Component {
3541
}),
3642
portalClassName: PropTypes.string,
3743
bodyOpenClassName: PropTypes.string,
44+
className: PropTypes.oneOfType([
45+
PropTypes.String,
46+
PropTypes.object
47+
]),
48+
overlayClassName: PropTypes.oneOfType([
49+
PropTypes.String,
50+
PropTypes.object
51+
]),
3852
appElement: PropTypes.instanceOf(SafeHTMLElement),
3953
onAfterOpen: PropTypes.func,
4054
onRequestClose: PropTypes.func,
@@ -45,6 +59,7 @@ export default class Modal extends Component {
4559
role: PropTypes.string,
4660
contentLabel: PropTypes.string.isRequired
4761
};
62+
/* eslint-enable react/no-unused-prop-types */
4863

4964
static defaultProps = {
5065
isOpen: false,
@@ -53,31 +68,31 @@ export default class Modal extends Component {
5368
ariaHideApp: true,
5469
closeTimeoutMS: 0,
5570
shouldCloseOnOverlayClick: true,
56-
parentSelector: function () { return document.body; }
71+
parentSelector() { return document.body; }
5772
};
5873

5974
static defaultStyles = {
6075
overlay: {
61-
position : 'fixed',
62-
top : 0,
63-
left : 0,
64-
right : 0,
65-
bottom : 0,
66-
backgroundColor : 'rgba(255, 255, 255, 0.75)'
76+
position: 'fixed',
77+
top: 0,
78+
left: 0,
79+
right: 0,
80+
bottom: 0,
81+
backgroundColor: 'rgba(255, 255, 255, 0.75)'
6782
},
6883
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'
84+
position: 'absolute',
85+
top: '40px',
86+
left: '40px',
87+
right: '40px',
88+
bottom: '40px',
89+
border: '1px solid #ccc',
90+
background: '#fff',
91+
overflow: 'auto',
92+
WebkitOverflowScrolling: 'touch',
93+
borderRadius: '4px',
94+
outline: 'none',
95+
padding: '20px'
8196
}
8297
};
8398

@@ -92,12 +107,6 @@ export default class Modal extends Component {
92107
this.renderPortal(this.props);
93108
}
94109

95-
componentWillUpdate(newProps) {
96-
if(newProps.portalClassName !== this.props.portalClassName) {
97-
this.node.className = newProps.portalClassName;
98-
}
99-
}
100-
101110
componentWillReceiveProps(newProps) {
102111
if (newProps.isOpen) refCount.add(this);
103112
if (!newProps.isOpen) refCount.remove(this);
@@ -112,6 +121,12 @@ export default class Modal extends Component {
112121
this.renderPortal(newProps);
113122
}
114123

124+
componentWillUpdate(newProps) {
125+
if (newProps.portalClassName !== this.props.portalClassName) {
126+
this.node.className = newProps.portalClassName;
127+
}
128+
}
129+
115130
componentWillUnmount() {
116131
if (!this.node) return;
117132

@@ -132,8 +147,7 @@ export default class Modal extends Component {
132147
this.portal.closeWithTimeout();
133148
}
134149

135-
const that = this;
136-
setTimeout(function() { that.removePortal(); }, closesAt - now);
150+
setTimeout(() => this.removePortal, closesAt - now);
137151
} else {
138152
this.removePortal();
139153
}

‎lib/components/ModalPortal.js

+79-49
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
2+
import { PropTypes } from 'prop-types';
23
import * as focusManager from '../helpers/focusManager';
3-
import { scopeTab } from '../helpers/scopeTab';
4+
import scopeTab from '../helpers/scopeTab';
45

56
// so that our CSS is statically analyzable
67
const CLASS_NAMES = {
@@ -19,6 +20,33 @@ export default class ModalPortal extends Component {
1920
}
2021
};
2122

23+
static propTypes = {
24+
isOpen: PropTypes.bool.isRequired,
25+
defaultStyles: PropTypes.shape({
26+
content: PropTypes.object,
27+
overlay: PropTypes.object
28+
}),
29+
style: PropTypes.shape({
30+
content: PropTypes.object,
31+
overlay: PropTypes.object
32+
}),
33+
className: PropTypes.oneOfType([
34+
PropTypes.String,
35+
PropTypes.object
36+
]),
37+
overlayClassName: PropTypes.oneOfType([
38+
PropTypes.String,
39+
PropTypes.object
40+
]),
41+
onAfterOpen: PropTypes.func,
42+
onRequestClose: PropTypes.func,
43+
closeTimeoutMS: PropTypes.number,
44+
shouldCloseOnOverlayClick: PropTypes.bool,
45+
role: PropTypes.string,
46+
contentLabel: PropTypes.string,
47+
children: PropTypes.node
48+
};
49+
2250
constructor(props) {
2351
super(props);
2452

@@ -38,10 +66,6 @@ export default class ModalPortal extends Component {
3866
}
3967
}
4068

41-
componentWillUnmount() {
42-
clearTimeout(this.closeTimer);
43-
}
44-
4569
componentWillReceiveProps(newProps) {
4670
// Focus only needs to be set once when the modal is being opened
4771
if (!this.props.isOpen && newProps.isOpen) {
@@ -59,6 +83,10 @@ export default class ModalPortal extends Component {
5983
}
6084
}
6185

86+
componentWillUnmount() {
87+
clearTimeout(this.closeTimer);
88+
}
89+
6290
setFocusAfterRender = focus => {
6391
this.focusAfterRender = focus;
6492
}
@@ -93,17 +121,16 @@ export default class ModalPortal extends Component {
93121
}
94122
}
95123

96-
focusContent = () => {
97-
// Don't steal focus from inner elements
98-
if (!this.contentHasFocus()) {
99-
this.refs.content.focus();
100-
}
101-
}
124+
// Don't steal focus from inner elements
125+
focusContent = () => (!this.contentHasFocus()) && this.content.focus();
102126

103127
closeWithTimeout = () => {
104128
const closesAt = Date.now() + this.props.closeTimeoutMS;
105-
this.setState({ beforeClose: true, closesAt: closesAt }, () => {
106-
this.closeTimer = setTimeout(this.closeWithoutTimeout, this.state.closesAt - Date.now());
129+
this.setState({ beforeClose: true, closesAt }, () => {
130+
this.closeTimer = setTimeout(
131+
this.closeWithoutTimeout,
132+
this.state.closesAt - Date.now()
133+
);
107134
});
108135
}
109136

@@ -117,10 +144,10 @@ export default class ModalPortal extends Component {
117144
}
118145

119146
handleKeyDown = event => {
120-
if (event.keyCode == TAB_KEY) {
121-
scopeTab(this.refs.content, event);
147+
if (event.keyCode === TAB_KEY) {
148+
scopeTab(this.content, event);
122149
}
123-
if (event.keyCode == ESC_KEY) {
150+
if (event.keyCode === ESC_KEY) {
124151
event.preventDefault();
125152
this.requestClose(event);
126153
}
@@ -145,53 +172,56 @@ export default class ModalPortal extends Component {
145172
this.shouldClose = false;
146173
}
147174

148-
requestClose = event => {
149-
if (this.ownerHandlesClose()) {
150-
this.props.onRequestClose(event);
151-
}
152-
}
175+
requestClose = event =>
176+
this.ownerHandlesClose() && this.props.onRequestClose(event);
153177

154-
ownerHandlesClose = () => {
155-
return this.props.onRequestClose;
156-
}
178+
ownerHandlesClose = () =>
179+
this.props.onRequestClose;
157180

158-
shouldBeClosed = () => {
159-
return !this.state.isOpen && !this.state.beforeClose;
160-
}
181+
shouldBeClosed = () =>
182+
!this.state.isOpen && !this.state.beforeClose;
161183

162-
contentHasFocus = () => {
163-
return document.activeElement === this.refs.content || this.refs.content.contains(document.activeElement);
164-
}
184+
contentHasFocus = () =>
185+
document.activeElement === this.content ||
186+
this.content.contains(document.activeElement);
165187

166188
buildClassName = (which, additional) => {
167189
const classNames = (typeof additional === 'object') ? additional : {
168190
base: CLASS_NAMES[which],
169-
afterOpen: CLASS_NAMES[which] + "--after-open",
170-
beforeClose: CLASS_NAMES[which] + "--before-close"
191+
afterOpen: `${CLASS_NAMES[which]}--after-open`,
192+
beforeClose: `${CLASS_NAMES[which]}--before-close`
171193
};
172194
let className = classNames.base;
173-
if (this.state.afterOpen) { className += " " + classNames.afterOpen; }
174-
if (this.state.beforeClose) { className += " " + classNames.beforeClose; }
175-
return (typeof additional === 'string' && additional) ? [className, additional].join(" ") : className;
195+
if (this.state.afterOpen) {
196+
className = `${className} ${classNames.afterOpen}`;
197+
}
198+
if (this.state.beforeClose) {
199+
className = `${className} ${classNames.beforeClose}`;
200+
}
201+
return (typeof additional === 'string' && additional) ?
202+
`${className} ${additional}` : className;
176203
}
177204

178205
render() {
179-
const contentStyles = this.props.className ? {} : this.props.defaultStyles.content;
180-
const overlayStyles = this.props.overlayClassName ? {} : this.props.defaultStyles.overlay;
206+
const { className, overlayClassName, defaultStyles } = this.props;
207+
const contentStyles = className ? {} : defaultStyles.content;
208+
const overlayStyles = overlayClassName ? {} : defaultStyles.overlay;
181209

182210
return this.shouldBeClosed() ? <div /> : (
183-
<div ref="overlay"
184-
className={this.buildClassName('overlay', this.props.overlayClassName)}
185-
style={{ ...overlayStyles, ...this.props.style.overlay }}
186-
onClick={this.handleOverlayOnClick}>
187-
<div ref="content"
188-
style={{ ...contentStyles, ...this.props.style.content }}
189-
className={this.buildClassName('content', this.props.className)}
190-
tabIndex="-1"
191-
onKeyDown={this.handleKeyDown}
192-
onClick={this.handleContentOnClick}
193-
role={this.props.role}
194-
aria-label={this.props.contentLabel}>
211+
<div
212+
ref={overlay => { this.overlay = overlay; }}
213+
className={this.buildClassName('overlay', overlayClassName)}
214+
style={{ ...overlayStyles, ...this.props.style.overlay }}
215+
onClick={this.handleOverlayOnClick}>
216+
<div
217+
ref={content => { this.content = content; }}
218+
style={{ ...contentStyles, ...this.props.style.content }}
219+
className={this.buildClassName('content', className)}
220+
tabIndex="-1"
221+
onKeyDown={this.handleKeyDown}
222+
onClick={this.handleContentOnClick}
223+
role={this.props.role}
224+
aria-label={this.props.contentLabel}>
195225
{this.props.children}
196226
</div>
197227
</div>

0 commit comments

Comments
 (0)