diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js deleted file mode 100755 index 34a57f0272d..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js +++ /dev/null @@ -1,58 +0,0 @@ -import styled from 'styled-components'; -import AutosizeInput from 'react-input-autosize'; - -export const Container = styled.div` - display: flex; - position: relative; - font-size: 0.875rem; - align-items: center; - white-space: nowrap; - text-align: center; -`; - -export const SandboxName = styled.span` - color: ${props => (props.theme.light ? 'black' : 'white')}; - margin-left: 0.25rem; - - cursor: pointer; - text-overflow: ellipsis; -`; - -export const SandboxForm = styled.form` - position: 'absolute'; - left: 0; - right: 0; - display: 'flex'; - align-items: 'center'; - justify-content: 'center'; -`; - -export const SandboxInput = styled(AutosizeInput)` - input { - display: inline-block; - background-color: transparent; - outline: 0; - border: 0; - color: white; - margin: 0; - padding: 0; - text-align: center; - } -`; - -export const FolderName = styled.button` - display: inline-block; - cursor: pointer; - transition: 0.3s ease color; - padding: 0; - margin: 0; - outline: 0; - border: 0; - background-color: transparent; - color: inherit; - - margin-right: 0.25rem; - &:hover { - color: white; - } -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx deleted file mode 100755 index a391a29a6e2..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import { basename } from 'path'; -import { useOvermind } from 'app/overmind'; -import Media from 'react-media'; - -import { Spring } from 'react-spring/renderprops'; - -import track from '@codesandbox/common/lib/utils/analytics'; -import { ESC } from '@codesandbox/common/lib/utils/keycodes'; -import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name'; -import { Sandbox } from '@codesandbox/common/lib/types'; -import { - Container, - SandboxName, - SandboxForm, - SandboxInput, - FolderName, -} from './elements'; - -interface ICollectionInfoProps { - sandbox: Sandbox; - isLoggedIn: boolean; -} - -const CollectionInfo: React.FC = ({ - sandbox, - isLoggedIn, -}) => { - const [updatingName, setUpdatingName] = useState(false); - const [nameValue, setNameValue] = useState(''); - const { - actions: { - workspace: { sandboxInfoUpdated, valueChanged }, - modalOpened, - }, - } = useOvermind(); - - const sandboxName = useCallback(() => getSandboxName(sandbox) || 'Untitled', [ - sandbox, - ]); - - const updateSandboxInfo = useCallback(() => { - sandboxInfoUpdated(); - setUpdatingName(false); - }, [sandboxInfoUpdated]); - - const submitNameChange = useCallback( - e => { - e.preventDefault(); - updateSandboxInfo(); - - track('Change Sandbox Name From Header'); - }, - [updateSandboxInfo] - ); - - const handleNameClick = useCallback(() => { - setUpdatingName(true); - setNameValue(sandboxName()); - }, [sandboxName]); - - const handleKeyUp = useCallback( - e => { - if (e.keyCode === ESC) { - updateSandboxInfo(); - } - }, - [updateSandboxInfo] - ); - - const handleBlur = useCallback(() => { - updateSandboxInfo(); - }, [updateSandboxInfo]); - - const handleInputUpdate = useCallback( - e => { - valueChanged({ - field: 'title', - value: e.target.value, - }); - - setNameValue(e.target.value); - }, - [valueChanged] - ); - - const value = nameValue !== 'Untitled' && updatingName ? nameValue : ''; - - const folderName = sandbox.collection - ? basename(sandbox.collection.path) || - (sandbox.team ? sandbox.team.name : 'My Sandboxes') - : 'My Sandboxes'; - - return ( - - from={{ - opacity: 1, - }} - to={ - updatingName - ? { - opacity: 0, - pointerEvents: 'none', - } - : { - opacity: 1, - pointerEvents: 'initial', - } - } - > - {style => ( - ( - - ( -
- {isLoggedIn ? ( - { - modalOpened({ - modal: 'moveSandbox', - }); - }} - > - {folderName} - - ) : ( - 'Anonymous ' - )} - /{' '} -
- )} - /> - {updatingName ? ( - - { - if (el) { - el.focus(); - } - }} - onKeyUp={handleKeyUp} - onBlur={handleBlur} - onChange={handleInputUpdate} - placeholder={nameValue} - value={value} - /> - - ) : ( - - {sandboxName()} - - )} -
- )} - /> - )} - - ); -}; - -export { CollectionInfo };