feat(file-upload-item): custom icon (#849)

core-ds · Oct 11, 2021 · 59b8925 · 59b8925
1 parent e8d284b
commit 59b8925
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/file-upload-item/src/Component.test.tsx b/packages/file-upload-item/src/Component.test.tsx
@@ -40,6 +40,15 @@ describe('FileUploadItem', () => {
         expect(container.firstElementChild).toHaveClass(className);
     });
 
+    it('should use custom icon', () => {
+        const dataTestId = 'test-id';
+        const { queryByTestId } = render(
+            <FileUploadItem icon={() => <div data-test-id={dataTestId} />} />,
+        );
+
+        expect(queryByTestId(dataTestId)).toBeInTheDocument();
+    });
+
     describe('Callbacks tests', () => {
         it('should call `onDelete` prop', () => {
             const cb = jest.fn();

diff --git a/packages/file-upload-item/src/Component.tsx b/packages/file-upload-item/src/Component.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode, useCallback } from 'react';
+import React, { ElementType, MouseEvent, ReactNode, useCallback } from 'react';
 import cn from 'classnames';
 
 import { IconButton } from '@alfalab/core-components-icon-button';
@@ -75,6 +75,11 @@ export type FileUploadItemProps = {
      */
     children?: React.ReactNode;
 
+    /**
+     * Компонент кастомной иконки
+     */
+    icon?: ElementType<{ className?: string }>;
+
     /**
      * Обработчик загрузки файла
      */
@@ -102,6 +107,7 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
     id = '0',
     name = '',
     size,
+    icon: Icon = fileIcon(name),
     uploadDate,
     downloadLink,
     uploadStatus,
@@ -142,11 +148,10 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
             case 'UPLOADING':
                 return <Spinner visible={true} />;
             default: {
-                const Icon = fileIcon(name);
                 return <Icon className={styles.icon} />;
             }
         }
-    }, [name, uploadStatus]);
+    }, [uploadStatus]);
 
     const renderName = useCallback(
         () => (