-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
CreateFolderEntry.tsx
116 lines (106 loc) · 3.1 KB
/
CreateFolderEntry.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react';
import { Mutation } from 'react-apollo';
import AddFolderIcon from 'react-icons/lib/md/create-new-folder';
import Input from '@codesandbox/common/lib/components/Input';
import track from '@codesandbox/common/lib/utils/analytics';
import { ESC } from '@codesandbox/common/lib/utils/keycodes';
import {
CreateDirectoryContainer,
IconContainer,
AnimatedChevron,
} from './elements';
import {
PATHED_SANDBOXES_FOLDER_QUERY,
CREATE_FOLDER_MUTATION,
} from '../../../queries';
interface Props {
basePath: string;
teamId: string | undefined;
close: () => void;
depth: number;
noFocus?: boolean;
}
export const CreateFolderEntry = ({
basePath,
teamId,
noFocus,
close,
depth,
}: Props) => {
let input;
return (
<Mutation mutation={CREATE_FOLDER_MUTATION}>
{mutate => (
<form
onSubmit={e => {
e.preventDefault();
const path = basePath + '/' + input.value;
track('Dashboard - Create Directory', {
path,
});
mutate({
variables: { path, teamId },
optimisticResponse: {
__typename: 'Mutation',
createCollection: {
id: 'optimistic-id',
path,
__typename: 'Collection',
},
},
update: (proxy, { data: { createCollection } }) => {
const variables: { teamId?: string } = {};
if (teamId) {
variables.teamId = teamId;
}
// Read the data from our cache for this query.
const d: { me: any } = proxy.readQuery({
query: PATHED_SANDBOXES_FOLDER_QUERY,
variables,
});
// Add our collection from the mutation to the end.
d.me.collections.push(createCollection);
// Write our data back to the cache.
proxy.writeQuery({
query: PATHED_SANDBOXES_FOLDER_QUERY,
variables,
data: d,
});
},
});
input.value = '';
close();
}}
>
<CreateDirectoryContainer depth={depth + 1}>
<IconContainer style={{ marginRight: '0.25rem' }}>
<AnimatedChevron open={false} />
<AddFolderIcon />
</IconContainer>{' '}
<Input
placeholder="Folder Name"
style={{ marginRight: '1rem' }}
onBlur={close}
onKeyDown={e => {
if (e.keyCode === ESC) {
e.preventDefault();
close();
}
}}
ref={el => {
if (el) {
if (!noFocus) {
el.focus();
el.select();
}
input = el;
}
}}
block
/>
</CreateDirectoryContainer>
</form>
)}
</Mutation>
);
};