Upgrade dependencies

2018-11-06 21:58:32 -08:00
parent 690feb6040
commit 8d569fd46d
44 changed files with 2221 additions and 671 deletions
--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -15,7 +15,7 @@ type Props = {
  highlight?: ?string,
  context?: ?string,
  showCollection?: boolean,
-  innerRef?: *,
+  ref?: *,
 };

 const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
@@ -131,7 +131,6 @@ class DocumentPreview extends React.Component<Props> {
    const {
      document,
      showCollection,
-      innerRef,
      highlight,
      context,
      ...rest
@@ -147,7 +146,6 @@ class DocumentPreview extends React.Component<Props> {
          pathname: document.url,
          state: { title: document.title },
        }}
-        innerRef={innerRef}
        {...rest}
      >
        <Heading>
--- a/app/components/DropToImport/DropToImport.js
+++ b/app/components/DropToImport/DropToImport.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
-import { injectGlobal } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 import importFile from 'utils/importFile';
 import invariant from 'invariant';
 import _ from 'lodash';
@@ -21,8 +21,7 @@ type Props = {
  history: Object,
 };

-// eslint-disable-next-line
-injectGlobal`
+const GlobalStyles = createGlobalStyle`
  .activeDropZone {
    background: ${props => props.theme.slateDark};
    svg { fill: ${props => props.theme.white}; }
@@ -93,6 +92,7 @@ class DropToImport extends React.Component<Props> {
        multiple
        {...props}
      >
+        <GlobalStyles />
        {this.isImporting && <LoadingIndicator />}
        {this.props.children}
      </Dropzone>
--- a/app/components/Modal/Modal.js
+++ b/app/components/Modal/Modal.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import styled, { injectGlobal } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import ReactModal from 'react-modal';
 import { CloseIcon } from 'outline-icons';
@@ -15,8 +15,7 @@ type Props = {
  onRequestClose: () => *,
 };

-// eslint-disable-next-line
-injectGlobal`
+const GlobalStyles = createGlobalStyle`
  .ReactModal__Overlay {
    z-index: 100;
  }
@@ -36,20 +35,23 @@ const Modal = ({
  if (!isOpen) return null;

  return (
-    <StyledModal
-      contentLabel={title}
-      onRequestClose={onRequestClose}
-      isOpen={isOpen}
-      {...rest}
-    >
-      <Content column>
-        {title && <h1>{title}</h1>}
-        <Close onClick={onRequestClose}>
-          <CloseIcon size={32} />
-        </Close>
-        {children}
-      </Content>
-    </StyledModal>
+    <React.Fragment>
+      <GlobalStyles />
+      <StyledModal
+        contentLabel={title}
+        onRequestClose={onRequestClose}
+        isOpen={isOpen}
+        {...rest}
+      >
+        <Content column>
+          {title && <h1>{title}</h1>}
+          <Close onClick={onRequestClose}>
+            <CloseIcon size={32} />
+          </Close>
+          {children}
+        </Content>
+      </StyledModal>
+    </React.Fragment>
  );
 };

--- a/app/components/PathToDocument.js
+++ b/app/components/PathToDocument.js
@@ -18,7 +18,7 @@ const ResultWrapper = styled.div`

 const StyledGoToIcon = styled(GoToIcon)``;

-const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
+const ResultWrapperLink = styled(ResultWrapper.withComponent('a'))`
  height: 32px;
  padding-top: 3px;
  padding-left: 5px;
@@ -74,7 +74,7 @@ class PathToDocument extends React.Component<Props> {
    if (!result) return <div />;

    return (
-      <Component innerRef={ref} onClick={this.handleClick} selectable href>
+      <Component ref={ref} onClick={this.handleClick} selectable href>
        {result.path
          .map(doc => <span key={doc.id}>{doc.title}</span>)
          .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
--- a/app/components/RouteSidebarHidden/RouteSidebarHidden.js
+++ b/app/components/RouteSidebarHidden/RouteSidebarHidden.js
@@ -19,7 +19,7 @@ class RouteSidebarHidden extends React.Component<Props> {
  }

  render() {
-    const { component, ...rest } = this.props;
+    const { component, ui, ...rest } = this.props;
    const Component = component;
    return <Route {...rest} render={props => <Component {...props} />} />;
  }
--- a/app/components/Sidebar/components/DocumentLink.js
+++ b/app/components/Sidebar/components/DocumentLink.js
@@ -12,7 +12,7 @@ type Props = {
  document: NavigationNode,
  history: Object,
  activeDocument: ?Document,
-  activeDocumentRef?: HTMLElement => void,
+  activeDocumentRef?: (?HTMLElement) => *,
  prefetchDocument: (documentId: string) => Promise<void>,
  depth: number,
 };
@@ -51,7 +51,7 @@ class DocumentLink extends React.Component<Props> {
      <Flex
        column
        key={document.id}
-        innerRef={isActiveDocument ? activeDocumentRef : undefined}
+        ref={isActiveDocument ? activeDocumentRef : undefined}
        onMouseEnter={this.handleMouseEnter}
      >
        <DropToImport
--- a/app/components/Sidebar/components/SidebarLink.js
+++ b/app/components/Sidebar/components/SidebarLink.js
@@ -27,7 +27,7 @@ const StyledNavLink = styled(NavLink)`
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 0;
-  margin-left: ${({ icon }) => (icon ? '-20px;' : '0')};
+  margin-left: ${props => (props.icon ? '-20px;' : '0')};
  color: ${props => props.theme.slateDark};
  font-size: 15px;
  cursor: pointer;
@@ -37,8 +37,6 @@ const StyledNavLink = styled(NavLink)`
  }
 `;

-const StyledDiv = StyledNavLink.withComponent('div');
-
 type Props = {
  to?: string | Object,
  onClick?: (SyntheticEvent<*>) => *,
@@ -103,26 +101,26 @@ class SidebarLink extends React.Component<Props> {
      hideExpandToggle,
      exact,
    } = this.props;
-    const Component = to ? StyledNavLink : StyledDiv;
    const showExpandIcon =
      expandedContent && !hideExpandToggle ? true : undefined;

    return (
      <Wrapper menuOpen={menuOpen} column>
-        <Component
+        <StyledNavLink
          icon={showExpandIcon}
          activeStyle={this.activeStyle}
          style={active ? this.activeStyle : undefined}
          onClick={onClick}
-          to={to}
          exact={exact !== false}
+          to={to}
+          as={to ? undefined : 'div'}
        >
          {icon && <IconWrapper>{icon}</IconWrapper>}
          {showExpandIcon && (
            <StyledGoTo expanded={this.expanded} onClick={this.handleClick} />
          )}
          <Content onClick={this.handleExpand}>{children}</Content>
-        </Component>
+        </StyledNavLink>
        {/* Collection */ expand && hideExpandToggle && expandedContent}
        {/* Document */ this.expanded && !hideExpandToggle && expandedContent}
        {menu && <Action>{menu}</Action>}
--- a/app/components/Tooltip/index.js
+++ b/app/components/Tooltip/index.js
@@ -1,9 +1,19 @@
 // @flow
+import * as React from 'react';
 import { TooltipTrigger } from 'pui-react-tooltip';
-import { injectGlobal } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';

-injectGlobal`
+const GlobalStyles = createGlobalStyle`
  .tooltip:hover .tooltip-container:not(.tooltip-container-hidden){visibility:visible;opacity:1}.tooltip-container{visibility:hidden;-webkit-transition:opacity ease-out 0.2s;transition:opacity ease-out 0.2s;z-index:10;position:absolute;bottom:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:0 0 8px 0;text-align:left}.tooltip-container.tooltip-container-visible{visibility:visible}.tooltip-container.tooltip-hoverable:after{content:"";position:absolute;width:calc(100% + 16px);height:calc(100% + 16px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.tooltip-container .tooltip-content{white-space:nowrap;padding:4px 8px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:0;text-transform:none;background-color:#243641;color:#fff;border-radius:2px;border:1px solid #243641;box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1)}.tooltip-container .tooltip-content:before{content:"";z-index:1;position:absolute;bottom:-4px;left:50%;-webkit-transform:translateX(-50%) rotateZ(45deg);transform:translateX(-50%) rotateZ(45deg);background-color:#243641;border-bottom:1px solid #243641;border-right:1px solid #243641;width:8px;height:8px}.tooltip-container .tooltip-content:after{content:"";box-sizing:content-box;z-index:-1;position:absolute;bottom:-4px;left:50%;-webkit-transform:translateX(-50%) rotateZ(45deg);transform:translateX(-50%) rotateZ(45deg);background-color:#243641;box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1);width:8px;height:8px}.tooltip{position:relative;display:inline-block}.tooltip.tooltip-light .tooltip-content{background-color:#fff;color:#243641;border:1px solid #DFE5E8}.tooltip.tooltip-light .tooltip-content:before{background-color:#fff;border-bottom:1px solid #DFE5E8;border-right:1px solid #DFE5E8}.tooltip.tooltip-light .tooltip-content:after{background-color:#fff}.tooltip.tooltip-bottom .tooltip-container{top:100%;bottom:auto;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:8px 0 0 0}.tooltip.tooltip-bottom .tooltip-container .tooltip-content:before{bottom:auto;top:-4px;border-top:1px solid #243641;border-right:none;border-bottom:none;border-left:1px solid #243641}.tooltip.tooltip-bottom .tooltip-container .tooltip-content:after{bottom:auto;top:-4px}.tooltip.tooltip-bottom.tooltip-light .tooltip-content:before{border-top:1px solid #DFE5E8;border-left:1px solid #DFE5E8}.tooltip.tooltip-right .tooltip-container{top:50%;bottom:auto;left:100%;-webkit-transform:translatey(-50%);transform:translatey(-50%);margin:0 0 0 8px}.tooltip.tooltip-right .tooltip-container .tooltip-content:before{bottom:auto;left:-4px;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg);border-top:none;border-right:none;border-bottom:1px solid #243641;border-left:1px solid #243641}.tooltip.tooltip-right .tooltip-container .tooltip-content:after{bottom:auto;left:-4px;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg)}.tooltip.tooltip-right.tooltip-light .tooltip-content:before{border-bottom:1px solid #DFE5E8;border-left:1px solid #DFE5E8}.tooltip.tooltip-left .tooltip-container{top:50%;bottom:auto;right:100%;left:auto;-webkit-transform:translatey(-50%);transform:translatey(-50%);margin:0 8px 0 0}.tooltip.tooltip-left .tooltip-container .tooltip-content:before{bottom:auto;right:-4px;left:auto;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg);border-top:1px solid #243641;border-right:1px solid #243641;border-bottom:none;border-left:none}.tooltip.tooltip-left .tooltip-container .tooltip-content:after{bottom:auto;right:-4px;left:auto;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg)}.tooltip.tooltip-left.tooltip-light .tooltip-content:before{border-top:1px solid #DFE5E8;border-right:1px solid #DFE5E8}.tooltip-sm.tooltip-container{width:120px}.tooltip-sm.tooltip-container .tooltip-content{white-space:normal}.tooltip-md.tooltip-container{width:240px}.tooltip-md.tooltip-container .tooltip-content{white-space:normal}.tooltip-lg.tooltip-container{width:360px}.tooltip-lg.tooltip-container .tooltip-content{white-space:normal}.tether-element{z-index:99}.overlay-trigger{color:#1B78B3;-webkit-transition:all 300ms ease-out;transition:all 300ms ease-out;-webkit-transition-property:background-color, color, opacity;transition-property:background-color, color, opacity}.overlay-trigger:hover,.overlay-trigger:focus{color:#1f8ace;cursor:pointer;outline:none;text-decoration:none}.overlay-trigger:active,.overlay-trigger.active{color:#176698}
 `;

-export default TooltipTrigger;
+const Tooltip = function(props: *) {
+  return (
+    <React.Fragment>
+      <GlobalStyles />
+      <TooltipTrigger {...props} />
+    </React.Fragment>
+  );
+};
+
+export default Tooltip;