fix: file icon when user rename file (#548)

Author: PolinaGurinovich97

src/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.tsx

@@ -18,6 +18,7 @@ export interface DialFileManagerItemIconProps
   loading?: boolean;
   sharedIndicatorClassName?: string;
   sharedIndicatorTooltip?: ReactNode;
+  fileExtension?: string;
 }
 
 /**
@@ -65,6 +66,7 @@ export const DialFileManagerItemIcon: FC<DialFileManagerItemIconProps> = ({
   loading = false,
   sharedIndicatorClassName,
   sharedIndicatorTooltip,
+  fileExtension,
   ...restProps
 }) => {
   const wrapIcon = (icon: ReactNode) => (
@@ -86,7 +88,9 @@ export const DialFileManagerItemIcon: FC<DialFileManagerItemIconProps> = ({
   }
 
   if (type === DialItemType.File) {
-    const extension = name.includes('.') ? name.split('.').pop() : undefined;
+    const extension = name.includes('.')
+      ? name.split('.').pop()
+      : fileExtension || void 0;
 
     return (
       <DialFileIcon

src/components/FileManager/components/FileManagerItemName/FileManagerItemName.tsx

@@ -19,6 +19,7 @@ export interface DialFileManagerItemNameProps
   shared?: boolean;
   details?: ReactNode;
   sharedIndicatorTooltip?: ReactNode;
+  fileExtension?: string;
   validate?: (value: string) => string | null;
   onSave?: (value: string) => void;
   onCancel?: () => void;
@@ -67,6 +68,7 @@ export const DialFileManagerItemName: FC<DialFileManagerItemNameProps> = ({
   iconSize = BASE_ICON_SIZE,
   validate,
   onSave,
+  fileExtension,
   onCancel,
   inputContainerClassName,
   sharedIndicatorClassName,
@@ -117,6 +119,7 @@ export const DialFileManagerItemName: FC<DialFileManagerItemNameProps> = ({
       inputRef={inputRef}
       onChange={onChange}
       iconSize={iconSize}
+      fileExtension={fileExtension}
       inputContainerClassName={inputContainerClassName}
       sharedIndicatorTooltip={sharedIndicatorTooltip}
       sharedIndicatorClassName={sharedIndicatorClassName}

src/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.tsx

@@ -26,6 +26,7 @@ export interface DialFileManagerItemNameInputProps {
   onChange?: (value?: string) => void;
   sharedIndicatorClassName?: string;
   sharedIndicatorTooltip?: ReactNode;
+  fileExtension?: string;
 }
 
 /**
@@ -96,6 +97,7 @@ export const DialFileManagerItemNameInput: FC<
   onChange,
   sharedIndicatorClassName,
   sharedIndicatorTooltip,
+  fileExtension,
 }) => {
   const getInputIconAfter = () => {
     if (!inputInvalid) return null;
@@ -125,6 +127,7 @@ export const DialFileManagerItemNameInput: FC<
         stroke={iconStroke}
         loading={loading}
         shared={shared}
+        fileExtension={fileExtension}
         sharedIndicatorClassName={sharedIndicatorClassName}
         sharedIndicatorTooltip={sharedIndicatorTooltip}
       />

src/components/FileName/FileName.tsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 
 export interface DialFileNameProps {
   name: string;
+  fileExtension?: string;
   className?: string;
   shared?: boolean;
   iconSize?: number;
@@ -51,8 +52,11 @@ export const DialFileName: FC<DialFileNameProps> = ({
   details,
   sharedIndicatorClassName,
   sharedIndicatorTooltip,
+  fileExtension,
 }) => {
-  const extension = name.includes('.') ? name.split('.').pop() : undefined;
+  const extension = name.includes('.')
+    ? name.split('.').pop()
+    : fileExtension || void 0;
 
   return (
     <div className={mergeClasses('flex items-center gap-2 w-full', className)}>

src/constants/file-grid-columns.tsx

@@ -101,6 +101,7 @@ export const NAME_COLUMN =
                   ? DialItemType.Folder
                   : DialItemType.File
               }
+              fileExtension={renamedItem.name.split('.').pop()}
               elementId={`rename-${params.data.id}`}
               editing={true}
               shared={isSharedByMe}