Show error when rename a file with invalid name (codesandbox#2908)

* show error

* fix rename file with same name not show error

* remove useless style

Author: yeion7

…yEntry/Entry/EntryTitleInput/elements.js …Entry/Entry/EntryTitleInput/elements.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/elements.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/elements.tsx

@@ -1,12 +1,11 @@
 import styled from 'styled-components';
 
-export const InputContainer = styled.div`
+export const InputContainer = styled.div<{ errorMessage?: boolean }>`
   display: inline-block;
-  overflow: auto;
+
   input {
     transition: 0.3s ease all;
     font-family: inherit;
-    position: absolute;
     border: 1px solid ${props => props.theme.primary};
     outline: none;
     background-color: ${props =>
@@ -24,3 +23,9 @@ export const InputContainer = styled.div`
     }
   }
 `;
+
+export const InputError = styled.p`
+  font-size: 0.9em;
+  padding: 0.25rem;
+  margin: 0;
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/index.js

@@ -0,0 +1,79 @@
+import React, {
+  useState,
+  ChangeEvent,
+  KeyboardEvent,
+  FunctionComponent,
+} from 'react';
+import { VisuallyHidden } from 'reakit/VisuallyHidden';
+
+import { ESC, ENTER } from '@codesandbox/common/lib/utils/keycodes';
+
+import { InputContainer, InputError } from './elements';
+
+function select(el) {
+  if (el) {
+    el.select();
+  }
+}
+
+interface Props {
+  title: string;
+  onCommit: (value: string, force?: boolean) => void;
+  onChange: (value: string) => void;
+  onCancel: () => void;
+  error: string | null;
+  id: string;
+}
+
+export const EntryTitleInput: FunctionComponent<Props> = ({
+  title,
+  onCommit,
+  onCancel,
+  onChange,
+  error,
+  id,
+}) => {
+  const [currentValue, setCurretValue] = useState(title);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target) {
+      const { value } = e.target;
+      onChange(value);
+      setCurretValue(value);
+    }
+  };
+
+  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.keyCode === ENTER) {
+      onCommit(currentValue.trim());
+    } else if (e.keyCode === ESC) {
+      onCancel();
+    }
+  };
+
+  return (
+    <InputContainer>
+      <VisuallyHidden>
+        <label id={`label-${id}`} htmlFor={`input-${id}`}>
+          {title ? `rename ${title}` : 'set name new file'}
+        </label>
+      </VisuallyHidden>
+      <input
+        onChange={handleChange}
+        onBlur={() => onCommit(currentValue, true)}
+        onKeyUp={handleKeyUp}
+        ref={select}
+        value={currentValue}
+        id={`input-${id}`}
+        aria-invalid={Boolean(error)}
+        aria-labelledby={`label-${id}`}
+        aria-describedby={`error-${id}`}
+      />
+      {error && typeof error === 'string' && (
+        <InputError role="alert" id={`error-${id}`}>
+          {error}
+        </InputError>
+      )}
+    </InputContainer>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/index.tsx

@@ -13,10 +13,10 @@ import EditIcons from './EditIcons';
 import { NotSyncedIconWithMargin, Right } from './elements';
 import EntryIcons from './EntryIcons';
 import EntryTitle from './EntryTitle';
-import EntryTitleInput from './EntryTitleInput';
+import { EntryTitleInput } from './EntryTitleInput';
 
 interface IEntryProps {
-  renameValidator: (id: string, title: string) => boolean;
+  renameValidator: (id: string, title: string) => string;
   shortid: string;
   id: string;
   title: string;
@@ -67,7 +67,7 @@ const Entry: React.FC<IEntryProps> = ({
   state: incomingState = '',
 }) => {
   const [state, setState] = useState(incomingState);
-  const [error, setError] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const [hovering, setHovering] = useState(false);
 
   const resetState = () => {
@@ -76,7 +76,7 @@ const Entry: React.FC<IEntryProps> = ({
     }
 
     setState('');
-    setError(false);
+    setError(null);
   };
 
   const handleValidateTitle = (titleToValidate: string) => {
@@ -97,7 +97,7 @@ const Entry: React.FC<IEntryProps> = ({
   const discardModuleChangesAction = () =>
     discardModuleChanges ? discardModuleChanges(shortid) : false;
 
-  const handleRename = (newTitle: string, force: boolean) => {
+  const handleRename = (newTitle: string, force: boolean = false) => {
     if (newTitle === title) {
       resetState();
       return;
@@ -174,10 +174,12 @@ const Entry: React.FC<IEntryProps> = ({
           <EntryIcons type={type} error={moduleHasError} />
           {state === 'editing' ? (
             <EntryTitleInput
+              id={id}
               title={title}
               onChange={handleValidateTitle}
               onCancel={resetState}
               onCommit={handleRename}
+              error={error}
             />
           ) : (
             <EntryTitle title={title} />

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx

@@ -168,11 +168,8 @@ class DirectoryEntry extends React.PureComponent {
 
   setOpen = open => this.setState({ open });
 
-  validateModuleTitle = (_, title) => {
-    const { id } = this.props;
-
-    return validateTitle(id, title, this.getChildren());
-  };
+  validateModuleTitle = (id, title) =>
+    validateTitle(id, title, this.getChildren());
 
   validateDirectoryTitle = (id, title) => {
     const { root } = this.props;