Skip to content

Commit ca4e1aa

Browse files
lizlooneylizlooney
committed
Moved NewModuleNameModalProps and NewModuleNameModal to src/modal/NewModuleNameModal.tsx.
1 parent b430049 commit ca4e1aa

File tree

2 files changed

+120
-83
lines changed

2 files changed

+120
-83
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,9 @@ import * as Blockly from 'blockly/core';
4343
import {pythonGenerator} from 'blockly/python';
4444

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

4850
import * as CustomBlocks from './blocks/setup_custom_blocks';
4951
import { initialize as initializeGeneratedBlocks } from './blocks/utils/generated/initialize';
@@ -64,89 +66,6 @@ import * as ChangeFramework from './blocks/utils/change_framework'
6466
import {mutatorOpenListener} from './blocks/mrc_class_method_def'
6567

6668

67-
type NewModuleNameModalProps = {
68-
title: string;
69-
isOpen: boolean;
70-
initialValue: string;
71-
getCurrentProjectName: () => string;
72-
getModuleNames: (projectName: string) => string[];
73-
onOk: (newName: string) => void;
74-
onCancel: () => void;
75-
}
76-
77-
const NewModuleNameModal: React.FC<NewModuleNameModalProps> = ({ title, isOpen, initialValue, getCurrentProjectName, getModuleNames, onOk, onCancel }) => {
78-
const inputRef = useRef<InputRef>(null);
79-
const [value, setValue] = useState('');
80-
const [projectName, setProjectName] = useState('');
81-
const [moduleNames, setModuleNames] = useState<string[]>([]);
82-
const [alertErrorMessage, setAlertErrorMessage] = useState('');
83-
const [alertErrorVisible, setAlertErrorVisible] = useState(false);
84-
85-
const afterOpenChange = (open: boolean) => {
86-
if (open) {
87-
setValue(initialValue);
88-
const currentProjectName = getCurrentProjectName();
89-
setProjectName(currentProjectName);
90-
setModuleNames(getModuleNames(currentProjectName));
91-
if (inputRef.current) {
92-
inputRef.current.focus();
93-
}
94-
} else {
95-
setValue('');
96-
}
97-
};
98-
99-
const handleOk = () => {
100-
if (!commonStorage.isValidPythonModuleName(value)) {
101-
setAlertErrorMessage(value + ' is not a valid blocks module name');
102-
setAlertErrorVisible(true);
103-
return;
104-
}
105-
if (projectName === value) {
106-
setAlertErrorMessage('The project is already named ' + value);
107-
setAlertErrorVisible(true);
108-
return;
109-
}
110-
if (moduleNames.includes(value)) {
111-
setAlertErrorMessage('Another module is already named ' + value);
112-
setAlertErrorVisible(true);
113-
return;
114-
}
115-
onOk(value);
116-
};
117-
118-
return (
119-
<Modal
120-
title={title}
121-
open={isOpen}
122-
afterOpenChange={afterOpenChange}
123-
onCancel={onCancel}
124-
footer={[
125-
<Button key="cancel" onClick={onCancel}> Cancel </Button>,
126-
<Button key="ok" onClick={handleOk}> OK </Button>
127-
]}
128-
>
129-
<Flex vertical gap="small">
130-
<Typography.Paragraph> Name </Typography.Paragraph>
131-
<Input
132-
ref={inputRef}
133-
value={value}
134-
onPressEnter={handleOk}
135-
onChange={(e) => setValue(e.target.value.toLowerCase())}
136-
/>
137-
{alertErrorVisible && (
138-
<Alert
139-
type="error"
140-
message={alertErrorMessage}
141-
closable
142-
afterClose={() => setAlertErrorVisible(false)}
143-
/>
144-
)}
145-
</Flex>
146-
</Modal>
147-
);
148-
};
149-
15069
type BlocklyComponentType = {
15170
getBlocklyWorkspace: () => Blockly.WorkspaceSvg,
15271
};

‎src/modal/NewModuleNameModal.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 NewModuleNameModalProps = {
38+
title: string;
39+
isOpen: boolean;
40+
initialValue: string;
41+
getCurrentProjectName: () => string;
42+
getModuleNames: (projectName: string) => string[];
43+
onOk: (newName: string) => void;
44+
onCancel: () => void;
45+
}
46+
47+
export const NewModuleNameModal: React.FC<NewModuleNameModalProps> = ({ title, isOpen, initialValue, getCurrentProjectName, getModuleNames, onOk, onCancel }) => {
48+
const inputRef = useRef<InputRef>(null);
49+
const [value, setValue] = useState('');
50+
const [projectName, setProjectName] = useState('');
51+
const [moduleNames, setModuleNames] = useState<string[]>([]);
52+
const [alertErrorMessage, setAlertErrorMessage] = useState('');
53+
const [alertErrorVisible, setAlertErrorVisible] = useState(false);
54+
55+
const afterOpenChange = (open: boolean) => {
56+
if (open) {
57+
setValue(initialValue);
58+
const currentProjectName = getCurrentProjectName();
59+
setProjectName(currentProjectName);
60+
setModuleNames(getModuleNames(currentProjectName));
61+
if (inputRef.current) {
62+
inputRef.current.focus();
63+
}
64+
} else {
65+
setValue('');
66+
}
67+
};
68+
69+
const handleOk = () => {
70+
if (!commonStorage.isValidPythonModuleName(value)) {
71+
setAlertErrorMessage(value + ' is not a valid blocks module name');
72+
setAlertErrorVisible(true);
73+
return;
74+
}
75+
if (projectName === value) {
76+
setAlertErrorMessage('The project is already named ' + value);
77+
setAlertErrorVisible(true);
78+
return;
79+
}
80+
if (moduleNames.includes(value)) {
81+
setAlertErrorMessage('Another module is already named ' + value);
82+
setAlertErrorVisible(true);
83+
return;
84+
}
85+
onOk(value);
86+
};
87+
88+
return (
89+
<Modal
90+
title={title}
91+
open={isOpen}
92+
afterOpenChange={afterOpenChange}
93+
onCancel={onCancel}
94+
footer={[
95+
<Button key="cancel" onClick={onCancel}> Cancel </Button>,
96+
<Button key="ok" onClick={handleOk}> OK </Button>
97+
]}
98+
>
99+
<Flex vertical gap="small">
100+
<Typography.Paragraph> 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)