Multiple Views (codesandbox#688)

* Allow multiple views

* Give embed default views

* Clean syntax

Author: CompuIves

packages/app/src/app/components/Preview/DevTools/Console/index.js

@@ -96,7 +96,9 @@ class Console extends React.Component {
   };
 
   addMessage(message, args, type) {
-    this.props.updateStatus(this.getType(message));
+    if (this.props.updateStatus) {
+      this.props.updateStatus(this.getType(message));
+    }
 
     this.setState({
       messages: [
@@ -119,7 +121,9 @@ class Console extends React.Component {
   }
 
   clearConsole = () => {
-    this.props.updateStatus('clear');
+    if (this.props.updateStatus) {
+      this.props.updateStatus('clear');
+    }
     this.setState({ messages: [] });
   };
 

packages/app/src/app/components/Preview/DevTools/Tests/index.js

@@ -24,7 +24,8 @@ export type Status = 'idle' | 'running' | 'pass' | 'fail';
 type Props = {
   hidden: boolean,
   sandboxId: string,
-  updateStatus: (
+  standalone?: boolean,
+  updateStatus?: (
     type: 'success' | 'warning' | 'error' | 'info' | 'clear',
     count?: number
   ) => void,
@@ -86,6 +87,10 @@ class Tests extends React.Component<Props, State> {
 
   componentDidMount() {
     this.listener = listen(this.handleMessage);
+
+    if (this.props.standalone) {
+      this.runAllTests();
+    }
   }
 
   componentWillUnmount() {
@@ -116,13 +121,17 @@ class Tests extends React.Component<Props, State> {
       switch (data.event) {
         case 'initialize_tests': {
           this.currentDescribeBlocks = [];
-          this.props.updateStatus('clear');
+          if (this.props.updateStatus) {
+            this.props.updateStatus('clear');
+          }
           this.setState(INITIAL_STATE);
           break;
         }
         case 'total_test_start': {
           this.currentDescribeBlocks = [];
-          this.props.updateStatus('clear');
+          if (this.props.updateStatus) {
+            this.props.updateStatus('clear');
+          }
           this.setState({
             ...this.state,
             running: true,
@@ -143,13 +152,15 @@ class Tests extends React.Component<Props, State> {
             f => this.getStatus(this.state.files[f]) === 'pass'
           ).length;
 
-          if (failingTests > 0) {
-            this.props.updateStatus('error', failingTests);
-          } else if (passingTests === files.length) {
-            this.props.updateStatus('success', passingTests);
-          } else {
-            // Not all tests are run
-            this.props.updateStatus('warning', files.length - passingTests);
+          if (this.props.updateStatus) {
+            if (failingTests > 0) {
+              this.props.updateStatus('error', failingTests);
+            } else if (passingTests === files.length) {
+              this.props.updateStatus('success', passingTests);
+            } else {
+              // Not all tests are run
+              this.props.updateStatus('warning', files.length - passingTests);
+            }
           }
 
           break;

packages/app/src/app/components/Preview/DevTools/elements.js

@@ -4,6 +4,8 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
+
+  max-height: 100%;
   z-index: 100;
   background-color: ${props => props.theme.background4};
 `;

packages/app/src/app/components/Preview/DevTools/index.js

@@ -53,6 +53,7 @@ type Props = {
   shouldExpandDevTools?: boolean,
   devToolsOpen?: boolean,
   setDevToolsOpen?: (open: boolean) => void,
+  view?: 'browser' | 'console' | 'tests',
 };
 type State = {
   status: { [title: string]: ?Status },
@@ -65,18 +66,33 @@ type State = {
 };
 
 export default class DevTools extends React.PureComponent<Props, State> {
-  state = {
-    status: {},
-    currentPane: PANES[Object.keys(PANES)[0]].title,
+  constructor(props: Props) {
+    super(props);
 
-    mouseDown: false,
-    startY: 0,
-    startHeight: 0,
+    const hasView = props.view && props.view !== 'browser';
 
-    hidden: true,
+    let currentPane = PANES[Object.keys(PANES)[0]].title;
+    if (hasView) {
+      if (props.view === 'tests') {
+        currentPane = tests.title;
+      } else if (props.view === 'console') {
+        currentPane = console.title;
+      }
+    }
 
-    height: 2 * 16,
-  };
+    this.state = {
+      status: {},
+      currentPane,
+
+      mouseDown: false,
+      startY: 0,
+      startHeight: 0,
+
+      hidden: !hasView,
+
+      height: hasView ? 5000 : 2 * 16,
+    };
+  }
 
   componentWillReceiveProps(nextProps: Props) {
     if (nextProps.sandboxId !== this.props.sandboxId) {
@@ -316,7 +332,6 @@ export default class DevTools extends React.PureComponent<Props, State> {
         }}
         style={{
           height,
-          minHeight: height,
           position: 'relative',
           display: 'flex',
         }}

packages/app/src/app/components/Preview/Navigator/HorizontalAlign.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import IconBase from 'react-icons/lib/IconBase';
 
-export default () => (
+export default props => (
   <IconBase
     width="1em"
     height="1em"
     viewBox="0 0 16 16"
     version="1.1"
     xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}
   >
     <path
       d="M2.25 8.75v-1.5h11.5v1.5H2.25zm1.25-1.5v5.25h9V7.25h-9zM3 2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"

packages/app/src/app/components/Preview/Navigator/VerticalAlign.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import IconBase from 'react-icons/lib/IconBase';
 
-export default () => (
+export default props => (
   <IconBase
     width="1em"
     height="1em"
     viewBox="0 0 16 16"
     version="1.1"
     xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}
   >
     <path
       d="M7.25 2.735h1.5V12.75h-1.5V2.735zm0 .765v9h5.25v-9H7.25zM3 2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"

packages/app/src/app/components/Preview/Navigator/index.js

@@ -34,7 +34,7 @@ function Navigator({
   alignBottom,
 }) {
   return (
-    <Container>
+    <Container className="flying-container-handler" style={{ cursor: 'move' }}>
       <Icons>
         <Icon disabled={!onBack} onClick={onBack}>
           <LeftIcon />

packages/app/src/app/components/Preview/index.js

@@ -32,6 +32,7 @@ type Props = {
   inactive?: boolean,
   dragging?: boolean,
   hide: boolean,
+  noPreview: boolean,
 };
 
 type State = {
@@ -317,16 +318,18 @@ class BasePreview extends React.Component<Props, State> {
       isInProjectView,
       dragging,
       hide,
+      noPreview,
     } = this.props;
     const { historyPosition, history, urlInAddressBar } = this.state;
     const url = urlInAddressBar || frameUrl(sandbox.id);
 
-    if (hide) {
+    if (noPreview) {
+      // Means that preview is open in another tab definitely
       return null;
     }
 
     return (
-      <Container style={{ flex: 1 }}>
+      <Container style={{ flex: 1, display: hide ? 'none' : undefined }}>
         {showNavigation && (
           <Navigator
             url={decodeURIComponent(url)}

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/DevTools/Console.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Console from 'app/components/Preview/DevTools/Console';
+
+import Navigator from './Navigator';
+
+export default ({ alignRight, alignBottom }) => (
+  <div style={{ height: '100%' }}>
+    <Navigator
+      alignRight={alignRight}
+      alignBottom={alignBottom}
+      title="Console"
+    />
+    <Console.Content />
+  </div>
+);

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/DevTools/Navigator.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import VerticalAlign from 'app/src/app/components/Preview/Navigator/VerticalAlign';
+import HorizontalAlign from 'app/src/app/components/Preview/Navigator/HorizontalAlign';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+
+  width: 100%;
+
+  background-color: ${props => props.theme.background4};
+
+  cursor: move;
+  box-sizing: border-box;
+
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 600;
+`;
+
+const Title = styled.div`
+  flex: 1;
+`;
+
+const Icons = styled.div`
+  z-index: 20;
+  svg {
+    transition: 0.3s ease color;
+    margin-left: 0.5rem;
+    cursor: pointer;
+
+    &:hover {
+      color: white;
+    }
+  }
+`;
+
+export default ({ title, alignBottom, alignRight }) => (
+  <Container className="flying-container-handler">
+    <Title>{title}</Title>
+    <Icons>
+      <HorizontalAlign onClick={alignBottom} />
+      <VerticalAlign onClick={alignRight} />
+    </Icons>
+  </Container>
+);