Merge pull request #274 from wpmudev/fix-uploader-onchange-prop

fix/uploader: onChange should not be called onMount
wpmudev · Apr 19, 2024 · 5f16419 · 5f16419
2 parents 31301d9 + d59bc69
commit 5f16419
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 51 deletions.
diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Apr 2024 14:40:08 GMT
+// Generated on Thu, 18 Apr 2024 12:58:08 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);

diff --git a/packages/ui/uploader/src/uploader-file.tsx b/packages/ui/uploader/src/uploader-file.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from "react"
+import React, { memo } from "react"
 
 import { FileCheck } from "@wpmudev/sui-icons"
 import { Button } from "@wpmudev/sui-button"
@@ -18,46 +18,44 @@ import { useStyles } from "@wpmudev/sui-hooks"
  * @param {Function}          props.onRemove - Callback function to remove the file.
  * @return {JSX.Element} The JSX representation of the UploaderFile component.
  */
-const UploaderFile: React.FC<UploaderFileProps> = ({
-	id,
-	file,
-	onRemove,
-	_style = {},
-	...props
-}: UploaderFileProps): JSX.Element => {
-	const { suiInlineClassname } = useStyles(_style)
+const UploaderFile: React.FC<UploaderFileProps> = React.memo(
+	({ id, file, onRemove, _style = {} }: UploaderFileProps): JSX.Element => {
+		const { suiInlineClassname } = useStyles(_style)
 
-	// @todo: add error variation support
-	return (
-		<div
-			className={generateCN("sui-uploader__file", {}, suiInlineClassname)}
-			data-testid="uploader-file"
-		>
-			<div className="sui-uploader__file--preview">
-				{/* Render image preview if the file is an image, otherwise render a generic file icon */}
-				{isImageFile(file?.type) ? (
-					<span
-						role="img"
-						className="sui-uploader__file--image"
-						style={{
-							backgroundImage: `url(${getFileImagePreview(file)})`,
-						}}
-					/>
-				) : (
-					<FileCheck size="sm" className="sui-uploader__file--icon" />
-				)}
+		// @todo: add error variation support
+		return (
+			<div
+				className={generateCN("sui-uploader__file", {}, suiInlineClassname)}
+				data-testid="uploader-file"
+			>
+				<div className="sui-uploader__file--preview">
+					{/* Render image preview if the file is an image, otherwise render a generic file icon */}
+					{isImageFile(file?.type) ? (
+						<span
+							role="img"
+							className="sui-uploader__file--image"
+							style={{
+								backgroundImage: `url(${getFileImagePreview(file)})`,
+							}}
+						/>
+					) : (
+						<FileCheck size="sm" className="sui-uploader__file--icon" />
+					)}
+				</div>
+				{/* Display the file name */}
+				<span className="sui-uploader__file--name">{file?.name}</span>
+				{/* Button to remove the file */}
+				<Button
+					className="sui-uploader__file--remove"
+					iconOnly={true}
+					icon="Close"
+					onClick={() => onRemove(id)}
+				/>
 			</div>
-			{/* Display the file name */}
-			<span className="sui-uploader__file--name">{file?.name}</span>
-			{/* Button to remove the file */}
-			<Button
-				className="sui-uploader__file--remove"
-				iconOnly={true}
-				icon="Close"
-				onClick={() => onRemove(id)}
-			/>
-		</div>
-	)
-}
+		)
+	},
+)
+
+UploaderFile.displayName = "UploaderFile"
 
 export { UploaderFile }
diff --git a/packages/ui/uploader/src/uploader.tsx b/packages/ui/uploader/src/uploader.tsx
@@ -84,14 +84,6 @@ const Uploader: React.FC<UploaderProps> = ({
 		return false
 	}
 
-	// Send files to parent component
-	useEffect(() => {
-		if (onChange) {
-			onChange(files)
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [files])
-
 	// Callback to handle file selection
 	const onSelectFile = useCallback(
 		(filesOrEvent: unknown | Record<string, any>[]) => {
@@ -136,8 +128,14 @@ const Uploader: React.FC<UploaderProps> = ({
 				return file
 			})
 
+			// New files list
+			const _files = [...files, ...tempSelectedFiles]
+
 			// Append new files to the existing files array
-			setFiles([...files, ...tempSelectedFiles])
+			setFiles(_files)
+
+			// Call onChange function
+			onChange(_files)
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[files],
@@ -151,10 +149,21 @@ const Uploader: React.FC<UploaderProps> = ({
 	// Callback to remove a file from the selected files
 	const onRemoveFile = useCallback(
 		(fileIndex: number) => {
-			setFiles(files.filter((file: File, index: number) => index !== fileIndex))
+			// New files list
+			const _files = files.filter(
+				(file: File, index: number) => index !== fileIndex,
+			)
+
+			// Update Files state
+			setFiles(_files)
 
+			// Call onChange callback
+			onChange(_files)
+
+			// Empty the file input value
 			emptyFileInput()
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[files],
 	)