Yuge update!

.babelrc

@@ -1,37 +1,27 @@
 {
-    env: {
-        development: {
-            presets: [
+    "env": {
+        "test": {
+            "presets": [
                 ["env", {
-                    targets: {
-                        browsers: ["last 2 versions", "ie >= 11"]
+                    "targets": {
+                        "browsers": ["last 2 versions", "ie >= 11"]
                     },
-                    modules: false,
-                    useBuiltIns: true
+                    "useBuiltIns": true
                 }],
-                "react-hmre"
-            ]
-        },
-        test: {
-            presets: [
-                ["env", {
-                    targets: {
-                        browsers: ["last 2 versions", "ie >= 11"]
-                    },
-                    useBuiltIns: true
-                }]
+                "stage-2",
+                "react"
             ]
         }
     },
-    plugins: ["transform-object-rest-spread"],
-    presets: [
+    "presets": [
         ["env", {
-            targets: {
-                browsers: ["last 2 versions", "ie >= 11"]
+            "targets": {
+                "browsers": ["last 2 versions", "ie >= 11"]
             },
-            modules: false,
-            useBuiltIns: true
+            "modules": false,
+            "useBuiltIns": true
         }],
+        "stage-2",
         "react"
     ]
 }

.eslintrc

@@ -3,24 +3,19 @@
     'browser': true,
     'jest': true
   },
-  'extends': 'airbnb',
+  "extends": "airbnb",
   'globals': {
     'React': true
   },
   'rules': {
     'arrow-parens': ['error', 'as-needed'],
-    'class-methods-use-this': 0,
-    'comma-dangle': ['error', 'never'],
+    'comma-dangle': ['error', 'always-multiline'],
     'import/no-named-as-default': 0,
-    'func-names': 0,
+    'import/no-named-as-default-member': 0,
     'indent': ['error', 4],
-    'no-plusplus': ['error', { 'allowForLoopAfterthoughts': true }],
-    'prefer-arrow-callback': 0,
-    'react/forbid-prop-types': 0,
     'react/jsx-indent': [2, 4],
     'react/jsx-indent-props': [2, 4],
-    'react/require-default-props': 0,
-    'space-before-function-paren': 0
+    'react/require-default-props': 0
   },
   "settings": {
     "import/resolver": {

.gitignore

@@ -4,4 +4,3 @@ coverage
 lib
 node_modules
 npm-debug.log
-test-reports

example-app/app/app.jsx

@@ -20,18 +20,8 @@ class App extends Component {
                 <div className="abc" style={{height:'1000px'}}>
                     <Menus />
                 </div>
-                <ModalPopup
-                    closePopup={this.props.closePopup}
-                    id="modal1"
-                    layoverClassName="modal-layover"
-                    popupClassName="modal-container"
-                />
-                <Portal
-                    modalTransitionEnterTimeout={300}
-                    modalTransitionLeaveTimeout={300}
-                    popupTransitionEnterTimeout={100}
-                    popupTransitionLeaveTimeout={100}
-                />
+                <ModalPopup id="modal1" />
+                <Portal />
             </div>
         );
     }

example-app/app/components/modal-popup.jsx

@@ -1,25 +1,21 @@
-import { Component } from 'react';
 import { connect } from 'react-redux';
 import { Modal, closePopup } from 'react-redux-popup';
 import Menus from 'app/menus2';
-import store from 'app/store';
 
 const doSomethingAction = () => ({ type: 'DO_SOMETHING' });
 const selector = state => state.modal;
 
-class ModalPopup extends Component {
-    render() {
-        return (
-            <div>
-                <label>This is modal popup</label>
-                <label>Open menu from the modal</label>
-                <Menus />
-                <button onClick={this.props.doSomethingAction}>Activate</button>
-                <button onClick={() => this.props.closePopup(this.props.id)}>OK</button>
-                {this.props.isActivated && <label>Activated!</label>}
-            </div>
-        );
-    }
-}
+const View = props => (
+    <div>
+        <label>This is modal popup</label>
+        <label>Open menu from the modal</label>
+        <Menus />
+        <button onClick={props.doSomethingAction}>Activate</button>
+        <button onClick={() => props.closePopup(props.id)}>OK</button>
+        {props.isActivated && <label>Activated!</label>}
+    </div>
+);
 
-export default Modal(connect(selector, { closePopup, doSomethingAction })(ModalPopup));
+const ConnectedView = connect(selector, { closePopup, doSomethingAction })(View);
+
+export default props => <Modal id={props.id} render={() => <ConnectedView id={props.id}/>} />;

example-app/app/components/popup-menu.jsx

@@ -1,27 +1,29 @@
-import { map } from 'lodash/fp';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Popup } from 'react-redux-popup';
 import MenuItem from 'app/components/popup-menu-item';
 
-class PopupMenu extends Component {
-    render() {
-        return <div className="popup-menu__container">{this.renderMenuItems()}</div>;
-    }
 
-    renderMenuItems() {
-        return map(item => {
-            return <MenuItem {...item} key={item.label}/>;
-        }, this.props.menuItems);
-    }
-}
+const PopupMenu = props => (
+    <div className="popup-menu__container">
+        {props.menuItems.map(item => <MenuItem {...item} key={item.label} />)}
+    </div>
+);
 
 PopupMenu.propTypes = {
     menuItems: PropTypes.arrayOf(PropTypes.shape({
         label: PropTypes.string.isRequired,
-        url: PropTypes.string
-    })).isRequired
+        url: PropTypes.string,
+    })).isRequired,
 };
 
 
-export default Popup(PopupMenu);
+export default props => (
+    <Popup
+        className="popup-menu"
+        getRect={props.getRect}
+        id={props.id}
+        offset={props.offset}
+        render={() => <PopupMenu menuItems={props.menuItems} />}
+    />
+);

example-app/styles/main.scss

@@ -83,7 +83,7 @@ html, body {
     }
 }
 
-.modal-leave {
+.modal-exit {
     & .modal-container {
         opacity: 1;
         transform: scale(1);
@@ -94,7 +94,7 @@ html, body {
     }
 }
 
-.modal-leave.modal-leave-active {
+.modal-exit.modal-exit-active {
     & .modal-container {
         opacity: 0.01;
         transform: scale(0.7);
@@ -116,10 +116,10 @@ html, body {
     }
 }
 
-.popup-leave {
+.popup-exit {
     opacity: 1;
 
-    &.popup-leave-active {
+    &.popup-exit-active {
         opacity: 0.01;
         transition: opacity 100ms ease-in;
     }

jest-setup.js

@@ -4,3 +4,6 @@ import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });
 
 window.React = require('react');
+
+// Monkey patch RAF until jest does
+window.requestAnimationFrame = callback => window.setTimeout(callback, 0);