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;
+`;

app/index.js

@@ -16,9 +16,6 @@ import CollectionsStore from 'stores/CollectionsStore';
 import CacheStore from 'stores/CacheStore';
 import globalStyles from 'shared/styles/globals';
 
-import 'styles/transitions.css';
-import 'styles/prism.css';
-
 import Home from 'scenes/Home';
 import Dashboard from 'scenes/Dashboard';
 import Starred from 'scenes/Starred';

app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.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,25 +14,21 @@ const randomValues = Array.from(
 
 export default (props: Object) => {
   return (
-    <ReactCSSTransitionGroup
-      transitionName="fadeIn"
-      transitionAppear
-      transitionEnter
-      transitionLeave
-      transitionAppearTimeout={0}
-      transitionEnterTimeout={0}
-      transitionLeaveTimeout={0}
-    >
+    <Fade>
       <Flex column auto {...props}>
         <Mask style={{ width: randomValues[0] }} header />
         <Mask style={{ width: randomValues[1] }} />
         <Mask style={{ width: randomValues[2] }} />
         <Mask style={{ width: randomValues[3] }} />
       </Flex>
-    </ReactCSSTransitionGroup>
+    </Fade>
   );
 };
 
+const Fade = styled.span`
+  animation: ${fadeIn} 150ms ease-in-out;
+`;
+
 const Mask = styled(Flex)`
   height: ${props => (props.header ? 28 : 18)}px;
   margin-bottom: ${props => (props.header ? 32 : 14)}px;

app/styles/prism.css

@@ -1,141 +0,0 @@
-/*
-
-Based on Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
-Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
-
-*/
-code[class*="language-"],
-pre[class*="language-"] {
-  -webkit-font-smoothing: initial;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 13px;
-  line-height: 1.375;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  color: #24292e;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #6a737d;
-}
-
-.token.punctuation {
-  color: #5e6687;
-}
-
-.token.namespace {
-  opacity: .7;
-}
-
-.token.operator,
-.token.boolean,
-.token.number {
-  color: #d73a49;
-}
-
-.token.property {
-  color: #c08b30;
-}
-
-.token.tag {
-  color: #3d8fd1;
-}
-
-.token.string {
-  color: #032f62;
-}
-
-.token.selector {
-  color: #6679cc;
-}
-
-.token.attr-name {
-  color: #c76b29;
-}
-
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #22a2c9;
-}
-
-.token.attr-value,
-.token.keyword,
-.token.control,
-.token.directive,
-.token.unit {
-  color: #d73a49;
-}
-
-.token.function {
-  color: #6f42c1;
-}
-
-.token.statement,
-.token.regex,
-.token.atrule {
-  color: #22a2c9;
-}
-
-.token.placeholder,
-.token.variable {
-  color: #3d8fd1;
-}
-
-.token.deleted {
-  text-decoration: line-through;
-}
-
-.token.inserted {
-  border-bottom: 1px dotted #202746;
-  text-decoration: none;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.important {
-  color: #c94922;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-pre > code.highlight {
-  outline: 0.4em solid #c94922;
-  outline-offset: .4em;
-}

app/styles/transitions.css

@@ -1,27 +0,0 @@
-.fadeIn-appear {
-  opacity: 0.01;
-}
-
-.fadeIn-appear.fadeIn-appear-active {
-  opacity: 1;
-  transition: opacity 250ms ease-in;
-  transition-delay: 0.35s;
-}
-
-.fadeIn-enter {
-  opacity: 0.01;
-}
-
-.fadeIn-enter.fadeIn-enter-active {
-  opacity: 1;
-  transition: opacity 200ms ease-in;
-}
-
-.fadeIn-leave {
-  opacity: 1;
-}
-
-.fadeIn-leave.fadeIn-leave-active {
-  opacity: 0.01;
-  transition: opacity 200ms ease-in;
-}