From 6a8f8a7af40dd8f9676ec47ff23b22d369a9ffbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Mon, 7 Oct 2019 02:41:00 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A8=20Switch=20CollectionInfo=20to?= =?UTF-8?q?=20use=20useOvermind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/app/package.json | 1 + .../{elements.js => elements.ts} | 23 +-- .../Editor/Header/CollectionInfo/index.tsx | 132 +++++++----------- yarn.lock | 7 + 4 files changed, 74 insertions(+), 89 deletions(-) rename packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/{elements.js => elements.ts} (72%) diff --git a/packages/app/package.json b/packages/app/package.json index aa02e169357..871f8628e94 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -244,6 +244,7 @@ "@types/react-dom": "^16.8.3", "@types/react-helmet": "^5.0.11", "@types/react-icons": "2.2.7", + "@types/react-input-autosize": "^2.0.1", "@types/react-router-dom": "^4.3.1", "@types/react-stripe-elements": "^1.3.2", "@types/resolve": "^0.0.8", 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.ts similarity index 72% rename from packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js rename to packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.ts index 34a57f0272d..ecec0e57070 100755 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; import AutosizeInput from 'react-input-autosize'; +import styled, { css } from 'styled-components'; export const Container = styled.div` display: flex; @@ -11,20 +11,22 @@ export const Container = styled.div` `; export const SandboxName = styled.span` - color: ${props => (props.theme.light ? 'black' : 'white')}; - margin-left: 0.25rem; + ${({ theme }) => css` + color: ${theme.light ? 'black' : 'white'}; + margin-left: 0.25rem; - cursor: pointer; - text-overflow: ellipsis; + cursor: pointer; + text-overflow: ellipsis; + `}; `; export const SandboxForm = styled.form` - position: 'absolute'; + position: absolute; left: 0; right: 0; - display: 'flex'; - align-items: 'center'; - justify-content: 'center'; + display: flex; + align-items: center; + justify-content: center; `; export const SandboxInput = styled(AutosizeInput)` @@ -45,13 +47,12 @@ export const FolderName = styled.button` cursor: pointer; transition: 0.3s ease color; padding: 0; - margin: 0; + margin: 0 0.25rem 0 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 index a391a29a6e2..2d519a3ddd3 100755 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx @@ -1,98 +1,84 @@ -import React, { useCallback, useState } from 'react'; +import { Sandbox } from '@codesandbox/common/lib/types'; +import track from '@codesandbox/common/lib/utils/analytics'; +import { getSandboxName as getSandboxNameBase } from '@codesandbox/common/lib/utils/get-sandbox-name'; +import { ESC } from '@codesandbox/common/lib/utils/keycodes'; import { basename } from 'path'; -import { useOvermind } from 'app/overmind'; +import React, { + ChangeEvent, + FormEvent, + FunctionComponent, + KeyboardEvent, + useState, +} from 'react'; 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 { useOvermind } from 'app/overmind'; + import { Container, - SandboxName, + FolderName, SandboxForm, SandboxInput, - FolderName, + SandboxName, } from './elements'; -interface ICollectionInfoProps { +type Props = { sandbox: Sandbox; - isLoggedIn: boolean; -} - -const CollectionInfo: React.FC = ({ - sandbox, - isLoggedIn, -}) => { - const [updatingName, setUpdatingName] = useState(false); - const [nameValue, setNameValue] = useState(''); +}; +export const CollectionInfo: FunctionComponent = ({ sandbox }) => { const { actions: { - workspace: { sandboxInfoUpdated, valueChanged }, modalOpened, + workspace: { sandboxInfoUpdated, valueChanged }, }, + state: { isLoggedIn }, } = useOvermind(); + const [nameValue, setNameValue] = useState(''); + const [updatingName, setUpdatingName] = useState(false); - const sandboxName = useCallback(() => getSandboxName(sandbox) || 'Untitled', [ - sandbox, - ]); - - const updateSandboxInfo = useCallback(() => { + const getSandboxName = () => getSandboxNameBase(sandbox) || 'Untitled'; + const updateSandboxInfo = () => { 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]); + setUpdatingName(false); + }; - const handleKeyUp = useCallback( - e => { - if (e.keyCode === ESC) { - updateSandboxInfo(); - } - }, - [updateSandboxInfo] - ); + const submitNameChange = ({ preventDefault }: FormEvent) => { + preventDefault(); - const handleBlur = useCallback(() => { updateSandboxInfo(); - }, [updateSandboxInfo]); - - const handleInputUpdate = useCallback( - e => { - valueChanged({ - field: 'title', - value: e.target.value, - }); - setNameValue(e.target.value); - }, - [valueChanged] - ); + track('Change Sandbox Name From Header'); + }; + const handleKeyUp = ({ keyCode }: KeyboardEvent) => { + if (keyCode === ESC) { + updateSandboxInfo(); + } + }; + const handleBlur = () => { + updateSandboxInfo(); + }; + const handleInputUpdate = ({ + target: { value }, + }: ChangeEvent) => { + valueChanged({ field: 'title', value }); + + setNameValue(value); + }; + const handleNameClick = () => { + setNameValue(getSandboxName()); + setUpdatingName(true); + }; const value = nameValue !== 'Untitled' && updatingName ? nameValue : ''; - const folderName = sandbox.collection ? basename(sandbox.collection.path) || (sandbox.team ? sandbox.team.name : 'My Sandboxes') : 'My Sandboxes'; return ( - + = ({ ( -
+
{isLoggedIn ? ( { - modalOpened({ - modal: 'moveSandbox', - }); - }} + onClick={() => modalOpened({ modal: 'moveSandbox' })} > {folderName} @@ -139,6 +116,7 @@ const CollectionInfo: React.FC = ({
)} /> + {updatingName ? ( = ({ ) : ( - {sandboxName()} + {getSandboxName()} )} @@ -167,5 +145,3 @@ const CollectionInfo: React.FC = ({ ); }; - -export { CollectionInfo }; diff --git a/yarn.lock b/yarn.lock index 6cd176541e4..e6a87b89e82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4191,6 +4191,13 @@ "@types/react" "*" "@types/react-icon-base" "*" +"@types/react-input-autosize@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.0.1.tgz#04ac4b532128c98532352042b6c7af8b5d3f52ca" + integrity sha512-vsmqA6Pp5IyMZv3C7x7mNM8lqikfWQ4lCWsoVk/w+HZ2Y3KOdFk6ad4jsQeltXn/UaO+YUZLtWdMIjLLIeCxBA== + dependencies: + "@types/react" "*" + "@types/react-native@*": version "0.57.42" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.42.tgz#06ad92cd1378146402b7667de13cb7b935d194d6" From 46282d24aa283d51d1cec885691551cc982b9528 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 19 Oct 2019 19:32:30 +0200 Subject: [PATCH 2/2] Fix types --- packages/app/package.json | 1 - .../pages/Sandbox/Editor/Header/CollectionInfo/index.tsx | 6 +++--- yarn.lock | 7 ------- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 871f8628e94..aa02e169357 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -244,7 +244,6 @@ "@types/react-dom": "^16.8.3", "@types/react-helmet": "^5.0.11", "@types/react-icons": "2.2.7", - "@types/react-input-autosize": "^2.0.1", "@types/react-router-dom": "^4.3.1", "@types/react-stripe-elements": "^1.3.2", "@types/resolve": "^0.0.8", 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 index 2d519a3ddd3..af2e898de8f 100755 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx @@ -44,8 +44,8 @@ export const CollectionInfo: FunctionComponent = ({ sandbox }) => { setUpdatingName(false); }; - const submitNameChange = ({ preventDefault }: FormEvent) => { - preventDefault(); + const submitNameChange = (event: FormEvent) => { + event.preventDefault(); updateSandboxInfo(); @@ -78,7 +78,7 @@ export const CollectionInfo: FunctionComponent = ({ sandbox }) => { : 'My Sandboxes'; return ( - from={{ opacity: 1, }} diff --git a/yarn.lock b/yarn.lock index e6a87b89e82..6cd176541e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4191,13 +4191,6 @@ "@types/react" "*" "@types/react-icon-base" "*" -"@types/react-input-autosize@^2.0.1": - version "2.0.1" - resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.0.1.tgz#04ac4b532128c98532352042b6c7af8b5d3f52ca" - integrity sha512-vsmqA6Pp5IyMZv3C7x7mNM8lqikfWQ4lCWsoVk/w+HZ2Y3KOdFk6ad4jsQeltXn/UaO+YUZLtWdMIjLLIeCxBA== - dependencies: - "@types/react" "*" - "@types/react-native@*": version "0.57.42" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.42.tgz#06ad92cd1378146402b7667de13cb7b935d194d6"