Upgrade to React 16

app/components/DropToImport/DropToImport.js

@@ -97,7 +97,9 @@ class DropToImport extends Component {
       'documentId',
       'collectionId',
       'documents',
-      'disabled'
+      'disabled',
+      'dropzoneRef',
+      'menuOpen'
     );
 
     if (this.props.disabled) return this.props.children;

app/components/DropdownMenu/DropdownMenu.js

@@ -4,7 +4,7 @@ import invariant from 'invariant';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
-import Portal from 'react-portal';
+import { PortalWithState } from 'react-portal';
 import Flex from 'shared/components/Flex';
 import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
@@ -19,58 +19,54 @@ type Props = {
 
 @observer class DropdownMenu extends Component {
   props: Props;
-  actionRef: Object;
-  @observable open: boolean = false;
   @observable top: number;
   @observable left: number;
   @observable right: number;
 
-  handleClick = (ev: SyntheticEvent) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    const currentTarget = ev.currentTarget;
-    invariant(document.body, 'why you not here');
+  handleOpen = (openPortal: SyntheticEvent => void) => {
+    return (ev: SyntheticMouseEvent) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      const currentTarget = ev.currentTarget;
+      invariant(document.body, 'why you not here');
 
-    if (currentTarget instanceof HTMLDivElement) {
-      const bodyRect = document.body.getBoundingClientRect();
-      const targetRect = currentTarget.getBoundingClientRect();
-      this.open = true;
-      this.top = targetRect.bottom - bodyRect.top;
-      this.right = bodyRect.width - targetRect.left - targetRect.width;
-      if (this.props.onOpen) this.props.onOpen();
-    }
-  };
-
-  handleClose = (ev: SyntheticEvent) => {
-    this.open = false;
-    if (this.props.onClose) this.props.onClose();
+      if (currentTarget instanceof HTMLDivElement) {
+        const bodyRect = document.body.getBoundingClientRect();
+        const targetRect = currentTarget.getBoundingClientRect();
+        this.top = targetRect.bottom - bodyRect.top;
+        this.right = bodyRect.width - targetRect.left - targetRect.width;
+        openPortal(ev);
+      }
+    };
   };
 
   render() {
     return (
       <div>
-        <Label
-          onClick={this.handleClick}
-          innerRef={ref => (this.actionRef = ref)}
-        >
-          {this.props.label}
-        </Label>
-        <Portal
+        <PortalWithState
+          onOpen={this.props.onOpen}
+          onClose={this.props.onClose}
           closeOnEsc
           closeOnOutsideClick
-          isOpened={this.open}
-          onClose={this.handleClose}
         >
-          <Menu
-            onClick={this.handleClose}
-            style={this.props.style}
-            left={this.left}
-            top={this.top}
-            right={this.right}
-          >
-            {this.props.children}
-          </Menu>
-        </Portal>
+          {({ closePortal, openPortal, portal }) => [
+            <Label onClick={this.handleOpen(openPortal)} key="label">
+              {this.props.label}
+            </Label>,
+            portal(
+              <Menu
+                key="menu"
+                onClick={closePortal}
+                style={this.props.style}
+                left={this.left}
+                top={this.top}
+                right={this.right}
+              >
+                {this.props.children}
+              </Menu>
+            ),
+          ]}
+        </PortalWithState>
       </div>
     );
   }

app/components/Editor/components/BlockInsert.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import Portal from 'react-portal';
+import { Portal } from 'react-portal';
 import { findDOMNode, Node } from 'slate';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -112,7 +112,7 @@ export default class BlockInsert extends Component {
     const style = { top: `${this.top}px`, left: `${this.left}px` };
 
     return (
-      <Portal isOpened>
+      <Portal>
         <Trigger active={this.active} style={style}>
           <PlusIcon onClick={this.handleClick} color={color.slate} />
         </Trigger>

app/components/Editor/components/Code.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import CopyButton from './CopyButton';
 import { color } from 'shared/styles/constants';
 import type { Props } from '../types';
+import 'shared/styles/prism.css';
 
 export default function Code({ children, node, readOnly, attributes }: Props) {
   const language = node.data.get('language') || 'javascript';

app/components/Editor/components/Toolbar/Toolbar.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import Portal from 'react-portal';
+import { Portal } from 'react-portal';
 import styled from 'styled-components';
 import _ from 'lodash';
 import type { State } from '../../types';
@@ -118,7 +118,7 @@ export default class Toolbar extends Component {
     };
 
     return (
-      <Portal isOpened>
+      <Portal>
         <Menu active={this.state.active} innerRef={this.setRef} style={style}>
           {link &&
             <LinkToolbar

app/components/Layout/components/SidebarCollections.js

@@ -194,7 +194,7 @@ const DocumentLink = observer(
         <DropToImport
           history={history}
           documentId={document.id}
-          activeStyle="activeDropZone"
+          activeClassName="activeDropZone"
         >
           <SidebarLink
             to={document.url}

app/components/Layout/components/SidebarLink.js

@@ -71,7 +71,7 @@ type Props = {
     if (this.props.expand) this.handleExpand();
   }
 
-  componentDidReceiveProps(nextProps: Props) {
+  componentWillReceiveProps(nextProps: Props) {
     if (nextProps.expand) this.handleExpand();
   }
 

app/components/LoadingListPlaceholder/LoadingListPlaceholder.js

@@ -1,8 +1,7 @@
 // @flow
 import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styled from 'styled-components';
-import { pulsate } from 'shared/styles/animations';
+import { fadeIn, pulsate } from 'shared/styles/animations';
 import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';
 
@@ -15,15 +14,7 @@ const randomValues = Array.from(
 
 export default (props: Object) => {
   return (
-    <ReactCSSTransitionGroup
-      transitionName="fadeIn"
-      transitionAppear
-      transitionEnter
-      transitionLeave
-      transitionAppearTimeout={0}
-      transitionEnterTimeout={0}
-      transitionLeaveTimeout={0}
-    >
+    <Fade>
       <Item column auto>
         <Mask style={{ width: randomValues[0] }} header />
         <Mask style={{ width: randomValues[1] }} />
@@ -32,10 +23,14 @@ export default (props: Object) => {
         <Mask style={{ width: randomValues[2] }} header />
         <Mask style={{ width: randomValues[3] }} />
       </Item>
-    </ReactCSSTransitionGroup>
+    </Fade>
   );
 };
 
+const Fade = styled.span`
+  animation: ${fadeIn} 150ms ease-in-out;
+`;
+
 const Item = styled(Flex)`
   padding: 18px 0;
 `;

app/components/LoadingPlaceholder/ListPlaceholder.js

@@ -1,8 +1,8 @@
 // @flow
 import React from 'react';
 import _ from 'lodash';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styled from 'styled-components';
+import { fadeIn } from 'shared/styles/animations';
 import Mask from './components/Mask';
 import Flex from 'shared/components/Flex';
 
@@ -12,25 +12,21 @@ type Props = {
 
 const ListPlaceHolder = ({ count }: Props) => {
   return (
-    <ReactCSSTransitionGroup
-      transitionName="fadeIn"
-      transitionAppearTimeout={0}
-      transitionEnterTimeout={0}
-      transitionLeaveTimeout={0}
-      transitionAppear
-      transitionEnter
-      transitionLeave
-    >
+    <Fade>
       {_.times(count || 2, index => (
         <Item key={index} column auto>
           <Mask header />
           <Mask />
         </Item>
       ))}
-    </ReactCSSTransitionGroup>
+    </Fade>
   );
 };
 
+const Fade = styled.span`
+  animation: ${fadeIn} 150ms ease-in-out;
+`;
+
 const Item = styled(Flex)`
   padding: 18px 0;
 `;

app/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,26 +1,23 @@
 // @flow
 import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import styled from 'styled-components';
+import { fadeIn } from 'shared/styles/animations';
 import Mask from './components/Mask';
 import Flex from 'shared/components/Flex';
 
-export default (props: Object) => {
+export default function LoadingPlaceholder(props: Object) {
   return (
-    <ReactCSSTransitionGroup
-      transitionName="fadeIn"
-      transitionAppearTimeout={0}
-      transitionEnterTimeout={0}
-      transitionLeaveTimeout={0}
-      transitionAppear
-      transitionEnter
-      transitionLeave
-    >
+    <Fade>
       <Flex column auto {...props}>
         <Mask header />
         <Mask />
         <Mask />
         <Mask />
       </Flex>
-    </ReactCSSTransitionGroup>
+    </Fade>
   );
-};
+}
+
+const Fade = styled.span`
+  animation: ${fadeIn} 150ms ease-in-out;
+`;