Merge branch 'master' of github.com:codesandbox/codesandbox-client

SaraVieira · SaraVieira · commit 13c6b7edccb6 · 2019-12-10T15:10:06.000+01:00
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/index.tsx
@@ -1,33 +1,53 @@
 import { HIDDEN_DIRECTORIES } from '@codesandbox/common/lib/templates/constants/files';
-import { inject, observer } from 'app/componentConnectors';
+import { Module, Directory } from '@codesandbox/common/lib/types';
+import { useOvermind } from 'app/overmind';
 import { sortBy } from 'lodash-es';
 import * as React from 'react';
-
-import ModuleEntry from './ModuleEntry';
 import DirectoryEntry from '..';
+import ModuleEntry from './ModuleEntry';
 
-const DirectoryChildren = ({
+interface IDirectoryChildrenProps {
+  depth: number;
+  renameModule: (title: string, moduleShortid: string) => void;
+  setCurrentModule: (id: string) => void;
+  parentShortid: string;
+  deleteEntry: (shortid: string, title: string) => void;
+  isInProjectView: boolean;
+  markTabsNotDirty: () => void;
+  discardModuleChanges: (shortid: string) => void;
+  getModulePath: (
+    modules: Module[],
+    directories: Directory[],
+    id: string
+  ) => string;
+  renameValidator: (id: string, title: string) => boolean;
+}
+
+const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
   depth = 0,
   renameModule,
   setCurrentModule,
   parentShortid,
   deleteEntry,
   isInProjectView,
   markTabsNotDirty,
-  store,
   discardModuleChanges,
   getModulePath,
-  signals,
   renameValidator,
 }) => {
+  const {
+    state: {
+      editor: { currentSandbox, mainModule, currentModuleShortid },
+    },
+    actions: { files, editor },
+  } = useOvermind();
+
   const {
     id: sandboxId,
     modules,
     directories,
     template: sandboxTemplate,
-  } = store.editor.currentSandbox;
-  const { mainModule, currentModuleShortid } = store.editor;
-  const mainModuleId = mainModule.id;
+  } = currentSandbox;
 
   return (
     <div>
@@ -44,15 +64,13 @@ const DirectoryChildren = ({
             key={dir.id}
             siblings={[...directories, ...modules]}
             depth={depth + 1}
-            signals={
-              signals /* TODO: Just pass what is needed by the DragDrop */
-            }
+            signals={{ files, editor }}
             id={dir.id}
             shortid={dir.shortid}
             title={dir.title}
             sandboxId={sandboxId}
             sandboxTemplate={sandboxTemplate}
-            mainModuleId={mainModuleId}
+            mainModuleId={mainModule.id}
             modules={modules}
             directories={directories}
             currentModuleShortid={currentModuleShortid}
@@ -82,4 +100,4 @@ const DirectoryChildren = ({
   );
 };
 
-export default inject('store', 'signals')(observer(DirectoryChildren));
+export default DirectoryChildren;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.ts
@@ -1,12 +1,19 @@
 import styled from 'styled-components';
 
-export const RedIcon = styled.span`
+export const RedIcon = styled.span<{
+  width: number;
+  height: number;
+}>`
   color: ${props => props.theme.red};
   width: ${props => props.width}px;
   height: ${props => props.height}px;
 `;
 
-export const SVGIcon = styled.span`
+export const SVGIcon = styled.span<{
+  url: string;
+  width: number;
+  height: number;
+}>`
   background-image: url(${props => props.url});
   background-size: ${props => props.width}px;
   background-position: 0;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.tsx
@@ -1,11 +1,17 @@
 import React, { Component } from 'react';
-
 import ErrorIcon from 'react-icons/lib/md/error';
 
 import { RedIcon, SVGIcon } from './elements';
 import getIconURL from './GetIconURL';
 
-class GetIcon extends Component {
+type Props = {
+  type: string;
+  width?: number;
+  height?: number;
+  error?: boolean;
+};
+
+class GetIcon extends Component<Props> {
   state = { icon: null };
 
   getIcon = async type => {
@@ -27,36 +33,29 @@ class GetIcon extends Component {
   }
 
   render() {
-    const { type, error, width, height } = this.props;
+    const { error, width, height } = this.props;
     const { icon } = this.state;
 
     if (error) {
       return (
-        <RedIcon>
+        <RedIcon width={width} height={height}>
           <ErrorIcon width={width} height={height} />
         </RedIcon>
       );
     }
-    return <SVGIcon url={icon} type={type} width={width} height={height} />;
+    return <SVGIcon url={icon} width={width} height={height} />;
   }
 }
 
-function EntryIcon({
+const EntryIcon: React.FC<Props> = ({
   type,
   width = 16,
   height = 16,
   error,
-}: {
-  type: string,
-  width?: number,
-  height?: number,
-  error?: boolean,
-}) {
-  return (
-    <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-      <GetIcon type={type} error={error} width={width} height={height} />
-    </div>
-  );
-}
+}) => (
+  <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+    <GetIcon type={type} error={error} width={width} height={height} />
+  </div>
+);
 
 export default EntryIcon;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.ts
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.tsx
@@ -0,0 +1,80 @@
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
+import { ModuleTab } from '@codesandbox/common/lib/types';
+import { useOvermind } from 'app/overmind';
+import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import { saveAllModules } from 'app/store/modules/editor/utils';
+// eslint-disable-next-line import/extensions
+import getType from 'app/utils/get-type.ts';
+import React from 'react';
+import CrossIcon from 'react-icons/lib/md/clear';
+import { EntryContainer } from '../elements';
+import { WorkspaceItem } from '../WorkspaceItem';
+import { CrossIconContainer, Dir, Title } from './elements';
+import SaveIcon from './SaveIcon';
+
+export const OpenedTabs: React.FC = () => {
+  const { state, actions } = useOvermind();
+  const sandbox = state.editor.currentSandbox;
+  const { currentModuleShortid } = state.editor;
+  const moduleObject = {};
+  sandbox.modules.forEach(m => {
+    moduleObject[m.shortid] = m;
+  });
+
+  const openModules = (state.editor.tabs as ModuleTab[])
+    .map(t => moduleObject[t.moduleShortid])
+    .filter(x => x);
+
+  return (
+    <WorkspaceItem
+      title="Open Tabs"
+      actions={
+        <SaveIcon
+          disabled={state.editor.isAllModulesSynced}
+          onClick={e => {
+            if (e) {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+            saveAllModules(state, actions);
+          }}
+        />
+      }
+    >
+      {openModules.map((m, i) => (
+        <EntryContainer
+          onClick={() => {
+            actions.editor.moduleSelected({ id: m.id });
+          }}
+          active={currentModuleShortid === m.shortid}
+          key={m.id}
+        >
+          <EntryIcons
+            type={getType(m.title)}
+            error={m.errors && m.errors.length > 0}
+          />
+          <Title>{m.title}</Title>
+          <Dir>
+            {getModulePath(sandbox.modules, sandbox.directories, m.id)
+              .replace('/', '')
+              .replace(new RegExp(m.title + '$'), '')}
+          </Dir>
+          {currentModuleShortid !== m.shortid && (
+            <CrossIconContainer
+              onClick={e => {
+                if (e) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+
+                actions.editor.tabClosed(i);
+              }}
+            >
+              <CrossIcon />
+            </CrossIconContainer>
+          )}
+        </EntryContainer>
+      ))}
+    </WorkspaceItem>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem/index.tsx
@@ -15,7 +15,7 @@ type Props = {
   keepState?: boolean;
   disabled?: boolean;
   defaultOpen?: boolean;
-  actions?: React.Component<any, any>;
+  actions?: React.ReactNode;
   style?: React.CSSProperties;
   showOverflow?: boolean;
 };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.ts
@@ -1,7 +1,19 @@
-import styled from 'styled-components';
 import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
+import styled from 'styled-components';
+
+type ContainerStylesProps = {
+  theme?: any;
+  color?: string;
+  alternative?: boolean;
+  noTransition?: boolean;
+  depth?: number;
+  active?: boolean;
+  editing?: boolean;
+  nameValidationError?: string;
+  rightColors?: string[];
+};
 
-export const getContainerStyles = props => {
+export const getContainerStyles = (props: ContainerStylesProps) => {
   const { theme } = props;
   const getSelectedColor = activeColor => {
     // some have active as full white and should never be
@@ -94,7 +106,7 @@ export const getContainerStyles = props => {
   return styles;
 };
 
-export const EntryContainer = styled.div`
+export const EntryContainer = styled.div<ContainerStylesProps>`
   ${props => getContainerStyles(props)};
 `;
 
@@ -152,7 +164,7 @@ export const IconArea = styled.div`
   ${fadeIn(0)};
 `;
 
-export const WorkspaceInputContainer = styled.div`
+export const WorkspaceInputContainer = styled.div<{ errorMessage?: string }>`
   display: inline-block;
   display: flex;
   overflow: visible;
