Refactor - reuse UploadButton, move icons

src/components/ReactFileUtilities/FileIcon/FileIconSet/v1.tsx

@@ -2,9 +2,9 @@
  * Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  */
-import React, { SVGProps } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 
-export type IconPropsV1 = { size?: number } & SVGProps<SVGSVGElement>;
+export type IconPropsV1 = { size?: number } & ComponentPropsWithoutRef<'svg'>;
 
 const DEFAULT_SIZE = 20;
 

src/components/ReactFileUtilities/FileIcon/FileIconSet/v2.tsx

@@ -1,12 +1,12 @@
-import React, { SVGProps } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 
 export type IconTypeV2 = 'standard' | 'alt';
 
 export type IconPropsV2 = {
   mimeType?: string;
   size?: number;
   type?: IconTypeV2;
-} & SVGProps<SVGSVGElement>;
+} & ComponentPropsWithoutRef<'svg'>;
 
 const DEFAULT_SIZE = 40;
 

src/components/ReactFileUtilities/FileUploadButton.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 
-import { AttachmentIcon } from './AttachmentIcon';
-import { useHandleFileChangeWrapper } from './utils';
+import { AttachmentIcon } from './icons';
+import { UploadButton } from './UploadButton';
 
 export type FileUploadButtonProps = {
   handleFiles: (files: FileList | File[]) => void;
@@ -11,6 +11,9 @@ export type FileUploadButtonProps = {
   resetOnChange?: boolean;
 };
 
+/**
+ * @deprecated will be removed in the next major release
+ */
 export const FileUploadButton = ({
   disabled = false,
   multiple = false,
@@ -24,19 +27,17 @@ export const FileUploadButton = ({
     className = `${className} rfu-file-upload-button--disabled`;
   }
 
-  const onFileChange = useHandleFileChangeWrapper(resetOnChange, handleFiles);
-
   return (
     <div className={className}>
       <label>
-        <input
+        <UploadButton
           accept={Array.isArray(accepts) ? accepts.join(',') : accepts}
           aria-label='File input'
           className='rfu-file-input'
           disabled={disabled}
           multiple={multiple}
-          onChange={onFileChange}
-          type='file'
+          onFileChange={handleFiles}
+          resetOnChange={resetOnChange}
         />
         {children}
       </label>

src/components/ReactFileUtilities/ImagePreviewer.tsx

@@ -3,7 +3,7 @@ import React, { MouseEvent, useCallback } from 'react';
 import { LoadingIndicator } from './LoadingIndicator';
 import { Thumbnail } from './Thumbnail';
 import { ThumbnailPlaceholder } from './ThumbnailPlaceholder';
-import { RetryIcon } from './RetryIcon';
+import { RetryIcon } from './icons';
 
 import type { ImageUpload } from './types';
 import clsx from 'clsx';

src/components/ReactFileUtilities/ImageUploadButton.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 
-import { PictureIcon } from './PictureIcon';
-import { useHandleFileChangeWrapper } from './utils';
+import { PictureIcon } from './icons';
+import { UploadButton } from './UploadButton';
 
 export type ImageUploadButtonProps = {
   handleFiles: (files: File[]) => void;
@@ -10,29 +10,28 @@ export type ImageUploadButtonProps = {
   resetOnChange?: boolean;
 };
 
+/**
+ * @deprecated will be removed in the next major release
+ */
 export const ImageUploadButton = ({
   multiple = false,
   disabled = false,
   handleFiles,
   children = <PictureIcon />,
   resetOnChange = false,
-}: PropsWithChildren<ImageUploadButtonProps>) => {
-  const onFileChange = useHandleFileChangeWrapper(resetOnChange, handleFiles);
-
-  return (
-    <div className='rfu-image-upload-button'>
-      <label>
-        <input
-          accept='image/*'
-          aria-label='Image input'
-          className='rfu-image-input'
-          disabled={disabled}
-          multiple={multiple}
-          onChange={onFileChange}
-          type='file'
-        />
-        {children}
-      </label>
-    </div>
-  );
-};
+}: PropsWithChildren<ImageUploadButtonProps>) => (
+  <div className='rfu-image-upload-button'>
+    <label>
+      <UploadButton
+        accept='image/*'
+        aria-label='Image input'
+        className='rfu-image-input'
+        disabled={disabled}
+        multiple={multiple}
+        onFileChange={handleFiles}
+        resetOnChange={resetOnChange}
+      />
+      {children}
+    </label>
+  </div>
+);

src/components/ReactFileUtilities/Thumbnail.tsx

@@ -1,8 +1,7 @@
 import React, { MouseEventHandler, useCallback } from 'react';
 
 import { IconButton } from './IconButton';
-import { FilePlaceholder } from './FilePlaceholder';
-import { CloseIcon } from './CloseIcon';
+import { CloseIcon, FilePlaceholderIcon } from './icons';
 
 export type ThumbnailProps = {
   image: string;
@@ -30,7 +29,10 @@ export const Thumbnail = ({ alt, handleClose, image, size = 100 }: ThumbnailProp
       {image ? (
         <img alt={alt ?? ''} className='rfu-thumbnail__image' src={image} />
       ) : (
-        <FilePlaceholder className='rfu-thumbnail__image' preserveAspectRatio='xMinYMin slice' />
+        <FilePlaceholderIcon
+          className='rfu-thumbnail__image'
+          preserveAspectRatio='xMinYMin slice'
+        />
       )}
     </div>
   );

src/components/ReactFileUtilities/FilePlaceholder.tsx → src/components/ReactFileUtilities/icons/FilePlaceholderIcon.tsx

@@ -1,6 +1,6 @@
-import React, { SVGProps } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 
-export const FilePlaceholder = (props: SVGProps<SVGSVGElement>) => (
+export const FilePlaceholderIcon = (props: ComponentPropsWithoutRef<'svg'>) => (
   <svg role='img' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' {...props}>
     <g>
       <path

src/components/ReactFileUtilities/icons/index.ts

@@ -0,0 +1,5 @@
+export * from './AttachmentIcon';
+export * from './CloseIcon';
+export * from './FilePlaceholderIcon';
+export * from './PictureIcon';
+export * from './RetryIcon';

src/components/ReactFileUtilities/index.ts

@@ -1,14 +1,13 @@
-export * from './AttachmentIcon';
 export * from './FileIcon';
 export * from './FilePreviewer';
 export * from './FileUploadButton';
 export * from './ImageDropzone';
 export * from './ImagePreviewer';
 export * from './ImageUploadButton';
 export * from './LoadingIndicator';
-export * from './PictureIcon';
 export * from './Thumbnail';
 export * from './ThumbnailPlaceholder';
 export * from './UploadButton';
 export * from './types';
 export * from './utils';
+export { AttachmentIcon, PictureIcon } from './icons';