fixed bug around name length
MODIFY
src/client/src/components/Input/index.tsx
src/client/src/components/Input/index.tsx
@@ -5,6 +5,7 @@ import styles from "./styles.module.css";
interface IProps {
handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+ handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => any;
ariaLabel: string;
value?: string;
customStyle?: string;
@@ -20,12 +21,14 @@ const Input = ({
customStyle,
placeholder,
maxLength,
+ handleKeyDown,
autoFocus
}: IProps) => {
return (
<input
aria-label={ariaLabel}
onChange={handleChange}
+ onKeyDown={handleKeyDown}
placeholder={placeholder}
className={classnames(styles.input, customStyle)}
value={value}

MODIFY
src/client/src/containers/ProjectNameAndOutput/index.tsx
src/client/src/containers/ProjectNameAndOutput/index.tsx
@@ -60,6 +60,13 @@ const messages = defineMessages({
id: "projectName.ariaProjectName",
defaultMessage: "Project Name Input"
},
+ nameTooLong: {
+ id: "projectNameError.nameTooLong",
+ defaultMessage:
+ "Project name can only be " +
+ PROJECT_NAME_CHARACTER_LIMIT +
+ " characters long"
+ },
outputPathTitle: {
id: "projectName.outputPathTitle",
defaultMessage: "Save To"
@@ -67,6 +74,8 @@ const messages = defineMessages({
});
const ProjectNameAndOutput = (props: Props) => {
+ const [projectNameMaxLength, setprojectNameMaxLength] = React.useState(false);
+
React.useEffect(() => {
if (props.vscode) {
if (props.projectPathValidation) {
@@ -97,6 +106,18 @@ const ProjectNameAndOutput = (props: Props) => {
const element = e.currentTarget as HTMLInputElement;
props.updateProjectName(element.value);
};
+ const validateKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+ const element = e.target as HTMLInputElement;
+ const inputKeyCheck = /^[A-Za-z0-9_\- ]$/
+
+ if(element.value.length === 50 && inputKeyCheck.test(e.key)){
+ setprojectNameMaxLength(true);
+ e.stopPropagation();
+ }else{
+ setprojectNameMaxLength(false);
+ }
+ }
+
const handleOutputPathChange = (
e: React.SyntheticEvent<HTMLInputElement>
) => {
@@ -118,6 +139,7 @@ const ProjectNameAndOutput = (props: Props) => {
</div>
<Input
handleChange={handleProjectNameChange}
+ handleKeyDown={validateKey}
ariaLabel={props.intl.formatMessage(messages.ariaProjectNameLabel)}
value={props.projectName}
maxLength={PROJECT_NAME_CHARACTER_LIMIT}
@@ -129,6 +151,12 @@ const ProjectNameAndOutput = (props: Props) => {
.error as FormattedMessage.MessageDescriptor)}
</div>
)}
+ {projectNameMaxLength && (
+ <div className={styles.errorMessage}>
+ {props.intl.formatMessage(messages
+ .nameTooLong as FormattedMessage.MessageDescriptor)}
+ </div>
+ )}
</div>
<div className={styles.inputContainer}>
<div className={styles.inputTitle}>

MODIFY
src/client/src/utils/validateName.ts
src/client/src/utils/validateName.ts
@@ -15,13 +15,6 @@ const messages = defineMessages({
defaultMessage:
"Name may only contain letters, numbers, spaces, dashes or underscores"
},
- nameTooLong: {
- id: "projectNameError.nameTooLong",
- defaultMessage:
- "Name should be under " +
- PROJECT_NAME_CHARACTER_LIMIT +
- " characters long"
- },
nameStartLetter: {
id: "pageNameError.nameStartLetter",
defaultMessage: "Name may only start with letters"
@@ -68,10 +61,6 @@ export function validateName(title: string, type: string): any {
error = messages.invalidProjectName;
}
}
- if (title.length >= PROJECT_NAME_CHARACTER_LIMIT) {
- isValid = false;
- error = messages.nameTooLong;
- }
} else if (type === "function") {
if (!/^[A-Za-z0-9][A-Za-z0-9-]*[a-zA-Z0-9]$/.test(title)) {
isValid = false;

fixed bug around name length