1- import React , { useCallback , useState } from 'react' ;
1+ import { Sandbox } from '@codesandbox/common/lib/types' ;
2+ import track from '@codesandbox/common/lib/utils/analytics' ;
3+ import { getSandboxName as getSandboxNameBase } from '@codesandbox/common/lib/utils/get-sandbox-name' ;
4+ import { ESC } from '@codesandbox/common/lib/utils/keycodes' ;
25import { basename } from 'path' ;
3- import { useOvermind } from 'app/overmind' ;
6+ import React , {
7+ ChangeEvent ,
8+ FormEvent ,
9+ FunctionComponent ,
10+ KeyboardEvent ,
11+ useState ,
12+ } from 'react' ;
413import Media from 'react-media' ;
5-
614import { Spring } from 'react-spring/renderprops' ;
715
8- import track from '@codesandbox/common/lib/utils/analytics' ;
9- import { ESC } from '@codesandbox/common/lib/utils/keycodes' ;
10- import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name' ;
11- import { Sandbox } from '@codesandbox/common/lib/types' ;
16+ import { useOvermind } from 'app/overmind' ;
17+
1218import {
1319 Container ,
14- SandboxName ,
20+ FolderName ,
1521 SandboxForm ,
1622 SandboxInput ,
17- FolderName ,
23+ SandboxName ,
1824} from './elements' ;
1925
20- interface ICollectionInfoProps {
26+ type Props = {
2127 sandbox : Sandbox ;
22- isLoggedIn : boolean ;
23- }
24-
25- const CollectionInfo : React . FC < ICollectionInfoProps > = ( {
26- sandbox,
27- isLoggedIn,
28- } ) => {
29- const [ updatingName , setUpdatingName ] = useState ( false ) ;
30- const [ nameValue , setNameValue ] = useState ( '' ) ;
28+ } ;
29+ export const CollectionInfo : FunctionComponent < Props > = ( { sandbox } ) => {
3130 const {
3231 actions : {
33- workspace : { sandboxInfoUpdated, valueChanged } ,
3432 modalOpened,
33+ workspace : { sandboxInfoUpdated, valueChanged } ,
3534 } ,
35+ state : { isLoggedIn } ,
3636 } = useOvermind ( ) ;
37+ const [ nameValue , setNameValue ] = useState ( '' ) ;
38+ const [ updatingName , setUpdatingName ] = useState ( false ) ;
3739
38- const sandboxName = useCallback ( ( ) => getSandboxName ( sandbox ) || 'Untitled' , [
39- sandbox ,
40- ] ) ;
41-
42- const updateSandboxInfo = useCallback ( ( ) => {
40+ const getSandboxName = ( ) => getSandboxNameBase ( sandbox ) || 'Untitled' ;
41+ const updateSandboxInfo = ( ) => {
4342 sandboxInfoUpdated ( ) ;
44- setUpdatingName ( false ) ;
45- } , [ sandboxInfoUpdated ] ) ;
46-
47- const submitNameChange = useCallback (
48- e => {
49- e . preventDefault ( ) ;
50- updateSandboxInfo ( ) ;
5143
52- track ( 'Change Sandbox Name From Header' ) ;
53- } ,
54- [ updateSandboxInfo ]
55- ) ;
56-
57- const handleNameClick = useCallback ( ( ) => {
58- setUpdatingName ( true ) ;
59- setNameValue ( sandboxName ( ) ) ;
60- } , [ sandboxName ] ) ;
44+ setUpdatingName ( false ) ;
45+ } ;
6146
62- const handleKeyUp = useCallback (
63- e => {
64- if ( e . keyCode === ESC ) {
65- updateSandboxInfo ( ) ;
66- }
67- } ,
68- [ updateSandboxInfo ]
69- ) ;
47+ const submitNameChange = ( { preventDefault } : FormEvent < HTMLFormElement > ) => {
48+ preventDefault ( ) ;
7049
71- const handleBlur = useCallback ( ( ) => {
7250 updateSandboxInfo ( ) ;
73- } , [ updateSandboxInfo ] ) ;
74-
75- const handleInputUpdate = useCallback (
76- e => {
77- valueChanged ( {
78- field : 'title' ,
79- value : e . target . value ,
80- } ) ;
8151
82- setNameValue ( e . target . value ) ;
83- } ,
84- [ valueChanged ]
85- ) ;
52+ track ( 'Change Sandbox Name From Header' ) ;
53+ } ;
54+ const handleKeyUp = ( { keyCode } : KeyboardEvent < HTMLInputElement > ) => {
55+ if ( keyCode === ESC ) {
56+ updateSandboxInfo ( ) ;
57+ }
58+ } ;
59+ const handleBlur = ( ) => {
60+ updateSandboxInfo ( ) ;
61+ } ;
62+ const handleInputUpdate = ( {
63+ target : { value } ,
64+ } : ChangeEvent < HTMLInputElement > ) => {
65+ valueChanged ( { field : 'title' , value } ) ;
66+
67+ setNameValue ( value ) ;
68+ } ;
69+ const handleNameClick = ( ) => {
70+ setNameValue ( getSandboxName ( ) ) ;
71+ setUpdatingName ( true ) ;
72+ } ;
8673
8774 const value = nameValue !== 'Untitled' && updatingName ? nameValue : '' ;
88-
8975 const folderName = sandbox . collection
9076 ? basename ( sandbox . collection . path ) ||
9177 ( sandbox . team ? sandbox . team . name : 'My Sandboxes' )
9278 : 'My Sandboxes' ;
9379
9480 return (
95- < Spring < { opacity : number ; pointerEvents : 'none' | 'initial' } >
81+ < Spring
9682 from = { {
9783 opacity : 1 ,
9884 } }
@@ -116,19 +102,10 @@ const CollectionInfo: React.FC<ICollectionInfoProps> = ({
116102 < Media
117103 query = "(min-width: 950px)"
118104 render = { ( ) => (
119- < div
120- style = { {
121- ...style ,
122- overflow : 'hidden' ,
123- } }
124- >
105+ < div style = { { ...style , overflow : 'hidden' } } >
125106 { isLoggedIn ? (
126107 < FolderName
127- onClick = { ( ) => {
128- modalOpened ( {
129- modal : 'moveSandbox' ,
130- } ) ;
131- } }
108+ onClick = { ( ) => modalOpened ( { modal : 'moveSandbox' } ) }
132109 >
133110 { folderName }
134111 </ FolderName >
@@ -139,6 +116,7 @@ const CollectionInfo: React.FC<ICollectionInfoProps> = ({
139116 </ div >
140117 ) }
141118 />
119+
142120 { updatingName ? (
143121 < SandboxForm onSubmit = { submitNameChange } >
144122 < SandboxInput
@@ -157,7 +135,7 @@ const CollectionInfo: React.FC<ICollectionInfoProps> = ({
157135 </ SandboxForm >
158136 ) : (
159137 < SandboxName onClick = { handleNameClick } >
160- { sandboxName ( ) }
138+ { getSandboxName ( ) }
161139 </ SandboxName >
162140 ) }
163141 </ Container >
@@ -167,5 +145,3 @@ const CollectionInfo: React.FC<ICollectionInfoProps> = ({
167145 </ Spring >
168146 ) ;
169147} ;
170-
171- export { CollectionInfo } ;
0 commit comments