Skip to content

Commit b430049

Browse files
lizlooneylizlooney
committed
Moved NewProjectNameModalProps and NewProjectNameModal to src/modal/NewProjectNameModal.tsx.
1 parent 178dc39 commit b430049

File tree

2 files changed

+120
-85
lines changed

2 files changed

+120
-85
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,10 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
4040
import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
4141

4242
import * as Blockly from 'blockly/core';
43-
import {pythonGenerator} from 'blockly/python'
43+
import {pythonGenerator} from 'blockly/python';
4444

4545
import BlocklyComponent from './Blockly';
46+
import { NewProjectNameModalProps, NewProjectNameModal } from './modal/NewProjectNameModal';
4647

4748
import * as CustomBlocks from './blocks/setup_custom_blocks';
4849
import { initialize as initializeGeneratedBlocks } from './blocks/utils/generated/initialize';
@@ -63,90 +64,6 @@ import * as ChangeFramework from './blocks/utils/change_framework'
6364
import {mutatorOpenListener} from './blocks/mrc_class_method_def'
6465

6566

66-
type NewProjectNameModalProps = {
67-
title: string;
68-
isOpen: boolean;
69-
initialValue: string;
70-
getProjectNames: () => string[];
71-
onOk: (newName: string) => void;
72-
onCancel: () => void;
73-
}
74-
75-
const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title, isOpen, initialValue, getProjectNames, onOk, onCancel }) => {
76-
const inputRef = useRef<InputRef>(null);
77-
const [message, setMessage] = useState('');
78-
const [value, setValue] = useState('');
79-
const [projectNames, setProjectNames] = useState<string[]>([]);
80-
const [alertErrorMessage, setAlertErrorMessage] = useState('');
81-
const [alertErrorVisible, setAlertErrorVisible] = useState(false);
82-
83-
const afterOpenChange = (open: boolean) => {
84-
if (open) {
85-
setValue(initialValue);
86-
const w = getProjectNames();
87-
if (w.length === 0) {
88-
setMessage('Let\'s create your first project. You just need to give it a name.');
89-
}
90-
setProjectNames(w);
91-
if (inputRef.current) {
92-
inputRef.current.focus();
93-
}
94-
} else {
95-
setValue('');
96-
setMessage('');
97-
}
98-
};
99-
100-
const handleOk = () => {
101-
if (!commonStorage.isValidPythonModuleName(value)) {
102-
setAlertErrorMessage(value + ' is not a valid blocks module name');
103-
setAlertErrorVisible(true);
104-
return;
105-
}
106-
if (projectNames.includes(value)) {
107-
setAlertErrorMessage('There is already a project named ' + value);
108-
setAlertErrorVisible(true);
109-
return;
110-
}
111-
onOk(value);
112-
};
113-
114-
return (
115-
<Modal
116-
title={title}
117-
open={isOpen}
118-
afterOpenChange={afterOpenChange}
119-
onCancel={onCancel}
120-
footer={[
121-
<Button key="cancel" onClick={onCancel}> Cancel </Button>,
122-
<Button key="ok" onClick={handleOk}> OK </Button>
123-
]}
124-
>
125-
<Flex vertical gap="small">
126-
<Typography.Paragraph
127-
style={message.length === 0 ? { display: 'none' } : { }}
128-
>{message}</Typography.Paragraph>
129-
<Typography.Paragraph> Project Name </Typography.Paragraph>
130-
<Input
131-
ref={inputRef}
132-
value={value}
133-
onPressEnter={handleOk}
134-
onChange={(e) => setValue(e.target.value.toLowerCase())}
135-
/>
136-
{alertErrorVisible && (
137-
<Alert
138-
type="error"
139-
message={alertErrorMessage}
140-
closable
141-
afterClose={() => setAlertErrorVisible(false)}
142-
/>
143-
)}
144-
</Flex>
145-
</Modal>
146-
);
147-
};
148-
149-
15067
type NewModuleNameModalProps = {
15168
title: string;
15269
isOpen: boolean;

‎src/modal/NewProjectNameModal.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/**
2+
* @license
3+
* Copyright 2024 Google LLC
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* https://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
/**
19+
* @author [email protected] (Liz Looney)
20+
*/
21+
22+
import React, { useState, useRef } from 'react';
23+
24+
import {
25+
Alert,
26+
Button,
27+
Flex,
28+
Input,
29+
Modal,
30+
Typography,
31+
} from 'antd';
32+
import type { InputRef } from 'antd';
33+
34+
import * as commonStorage from '../storage/common_storage';
35+
36+
37+
export type NewProjectNameModalProps = {
38+
title: string;
39+
isOpen: boolean;
40+
initialValue: string;
41+
getProjectNames: () => string[];
42+
onOk: (newName: string) => void;
43+
onCancel: () => void;
44+
}
45+
46+
export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title, isOpen, initialValue, getProjectNames, onOk, onCancel }) => {
47+
const inputRef = useRef<InputRef>(null);
48+
const [message, setMessage] = useState('');
49+
const [value, setValue] = useState('');
50+
const [projectNames, setProjectNames] = useState<string[]>([]);
51+
const [alertErrorMessage, setAlertErrorMessage] = useState('');
52+
const [alertErrorVisible, setAlertErrorVisible] = useState(false);
53+
54+
const afterOpenChange = (open: boolean) => {
55+
if (open) {
56+
setValue(initialValue);
57+
const w = getProjectNames();
58+
if (w.length === 0) {
59+
setMessage('Let\'s create your first project. You just need to give it a name.');
60+
}
61+
setProjectNames(w);
62+
if (inputRef.current) {
63+
inputRef.current.focus();
64+
}
65+
} else {
66+
setValue('');
67+
setMessage('');
68+
}
69+
};
70+
71+
const handleOk = () => {
72+
if (!commonStorage.isValidPythonModuleName(value)) {
73+
setAlertErrorMessage(value + ' is not a valid blocks module name');
74+
setAlertErrorVisible(true);
75+
return;
76+
}
77+
if (projectNames.includes(value)) {
78+
setAlertErrorMessage('There is already a project named ' + value);
79+
setAlertErrorVisible(true);
80+
return;
81+
}
82+
onOk(value);
83+
};
84+
85+
return (
86+
<Modal
87+
title={title}
88+
open={isOpen}
89+
afterOpenChange={afterOpenChange}
90+
onCancel={onCancel}
91+
footer={[
92+
<Button key="cancel" onClick={onCancel}> Cancel </Button>,
93+
<Button key="ok" onClick={handleOk}> OK </Button>
94+
]}
95+
>
96+
<Flex vertical gap="small">
97+
<Typography.Paragraph
98+
style={message.length === 0 ? { display: 'none' } : { }}
99+
>{message}</Typography.Paragraph>
100+
<Typography.Paragraph> Project Name </Typography.Paragraph>
101+
<Input
102+
ref={inputRef}
103+
value={value}
104+
onPressEnter={handleOk}
105+
onChange={(e) => setValue(e.target.value.toLowerCase())}
106+
/>
107+
{alertErrorVisible && (
108+
<Alert
109+
type="error"
110+
message={alertErrorMessage}
111+
closable
112+
afterClose={() => setAlertErrorVisible(false)}
113+
/>
114+
)}
115+
</Flex>
116+
</Modal>
117+
);
118+
};

0 commit comments

Comments
 (0)