[chore] added babel stage-2 preset.

reactjs · Jun 15, 2017 · d2fbe55 · d2fbe55
1 parent 95e8511
commit d2fbe55
Show file tree

Hide file tree

Showing 11 changed files with 508 additions and 304 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react"]
-}
+  "presets": ["es2015", "stage-2", "react"]
+}
diff --git a/examples/basic/app.js b/examples/basic/app.js
@@ -1,64 +1,57 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Modal = require('../../lib/index');
-var createReactClass = require('create-react-class');
+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 = createReactClass({
-
-  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} />
@@ -71,20 +64,21 @@ var App = createReactClass({
             <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);
diff --git a/lib/components/Modal.js b/lib/components/Modal.js
@@ -1,38 +1,33 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var DOMFactories = require('react-dom-factories');
-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');
-
-var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
-var AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
+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';
+
+const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
+
+const SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
+let AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
 
 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,
@@ -49,52 +44,75 @@ 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;
 
     if (this.props.isOpen) refCount.add(this);
 
-    var parent = getParentElement(this.props.parentSelector);
+    const parent = getParentElement(this.props.parentSelector);
     parent.appendChild(this.node);
     this.renderPortal(this.props);
-  },
+  }
 
-  componentWillUpdate: function(newProps) {
+  componentWillUpdate(newProps) {
     if(newProps.portalClassName !== this.props.portalClassName) {
       this.node.className = newProps.portalClassName;
     }
-  },
+  }
 
-  componentWillReceiveProps: function(newProps) {
+  componentWillReceiveProps(newProps) {
     if (newProps.isOpen) refCount.add(this);
     if (!newProps.isOpen) refCount.remove(this);
-    var currentParent = getParentElement(this.props.parentSelector);
-    var newParent = getParentElement(newProps.parentSelector);
+    const currentParent = getParentElement(this.props.parentSelector);
+    const newParent = getParentElement(newProps.parentSelector);
 
-    if(newParent !== currentParent) {
+    if (newParent !== currentParent) {
       currentParent.removeChild(this.node);
       newParent.appendChild(this.node);
     }
 
     this.renderPortal(newProps);
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     if (!this.node) return;
 
     refCount.remove(this);
@@ -103,9 +121,9 @@ var Modal = createReactClass({
       ariaAppHider.show(this.props.appElement);
     }
 
-    var state = this.portal.state;
-    var now = Date.now();
-    var closesAt = state.isOpen && this.props.closeTimeoutMS
+    const state = this.portal.state;
+    const now = Date.now();
+    const closesAt = state.isOpen && this.props.closeTimeoutMS
       && (state.closesAt
         || now + this.props.closeTimeoutMS);
 
@@ -114,24 +132,24 @@ var Modal = createReactClass({
         this.portal.closeWithTimeout();
       }
 
-      var that = this;
+      const that = this;
       setTimeout(function() { that.removePortal(); }, closesAt - now);
     } else {
       this.removePortal();
     }
-  },
+  }
 
-  removePortal: function() {
+  removePortal = () => {
     ReactDOM.unmountComponentAtNode(this.node);
-    var parent = getParentElement(this.props.parentSelector);
+    const 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 {
@@ -142,37 +160,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 DOMFactories.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