From 1b9d2fec5d4035b2e8606d5ff59dc04c74e401b8 Mon Sep 17 00:00:00 2001
From: David Matejka <matej21@matej21.cz>
Date: Fri, 14 Jun 2024 17:27:30 +0200
Subject: [PATCH] feat(react-ui-lib): add more types of file repeater

---
 packages/react-ui-lib/src/form/upload.tsx | 85 ++++++++++++++++++-----
 packages/react-ui-lib/src/upload/view.tsx |  4 +-
 2 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/packages/react-ui-lib/src/form/upload.tsx b/packages/react-ui-lib/src/form/upload.tsx
index 98c154534..c4a1680d3 100644
--- a/packages/react-ui-lib/src/form/upload.tsx
+++ b/packages/react-ui-lib/src/form/upload.tsx
@@ -159,27 +159,78 @@ const UploadFieldInner = Component((({ baseField, label, description, children,
 	</>
 })
 
-
-
-
-export type ImageRepeaterField =
+export type BaseFileRepeaterFieldProps =
 	& Omit<FormContainerProps, 'children'>
 	& RepeaterProps
 	& UploaderBaseFieldProps
+
+
+export type ImageRepeaterFieldProps =
+	& BaseFileRepeaterFieldProps
 	& ImageFileTypeProps
+
+export const ImageRepeaterField = Component<ImageRepeaterFieldProps>(props => <>
+	<FileRepeaterFieldInner {...props} fileType={createImageFileType(props)}>
+		<UploadedImageView {...props} DestroyAction={RepeaterRemoveItemTrigger} />
+	</FileRepeaterFieldInner>
+</>)
+
+
+export type AudioRepeaterFieldProps =
+	& BaseFileRepeaterFieldProps
+	& AudioFileTypeProps
+
+export const AudioRepeaterField = Component<AudioRepeaterFieldProps>(props => <>
+	<FileRepeaterFieldInner {...props} fileType={createAudioFileType(props)}>
+		<UploadedAudioView {...props} DestroyAction={RepeaterRemoveItemTrigger} />
+	</FileRepeaterFieldInner>
+</>)
+
+
+export type VideoRepeaterFieldProps =
+	& BaseFileRepeaterFieldProps
+	& VideoFileTypeProps
+
+export const VideoRepeaterField = Component<VideoRepeaterFieldProps>(props => <>
+	<FileRepeaterFieldInner {...props} fileType={createVideoFileType(props)}>
+		<UploadedVideoView {...props} DestroyAction={RepeaterRemoveItemTrigger} />
+	</FileRepeaterFieldInner>
+</>)
+
+
+export type FileRepeaterFieldProps =
+	& BaseFileRepeaterFieldProps
+	& AnyFileTypeProps
+
+export const FileRepeaterField = Component<FileRepeaterFieldProps>(props => <>
+	<FileRepeaterFieldInner {...props} fileType={createAnyFileType(props)}>
+		<UploadedAnyView {...props} DestroyAction={RepeaterRemoveItemTrigger} />
+	</FileRepeaterFieldInner>
+</>)
+
+
+type FileRepeaterFieldInnerProps =
+	& BaseFileRepeaterFieldProps
 	& {
-		children?: React.ReactNode
+		fileType: FileType
+		children: ReactNode
 	}
 
-export const ImageRepeaterField = Component<ImageRepeaterField>(({ baseField, label, description, children, uploader, ...props }, environment) => {
-	const entity = useEntity()
+const FileRepeaterFieldInner = Component<FileRepeaterFieldInnerProps>(({ baseField, label, description, children, fileType, ...props }) => {
+
 	const defaultUploader = useS3Client()
-	uploader ??= defaultUploader
-	const [type] = useState(() => createImageFileType({ uploader, ...props }))
+	const [fileTypeStable] = useState(fileType)
+	const fileTypeWithUploader = useMemo(
+		() => ({ ...fileTypeStable, uploader: fileTypeStable?.uploader ?? defaultUploader }),
+		[defaultUploader, fileTypeStable],
+	)
+
+	// const entity = useEntity()
 	// const errors = type.extractors?.flatMap(it => it.getErrorsHolders?.({
 	// 	environment,
 	// 	entity,
 	// }) ?? []).flatMap(it => it.errors?.errors ?? [])
+
 	const id = useId()
 	return (
 		<FormFieldIdContext.Provider value={id}>
@@ -188,7 +239,7 @@ export const ImageRepeaterField = Component<ImageRepeaterField>(({ baseField, la
 					<Repeater {...props} initialEntityCount={0}>
 						<UploaderRepeaterItemsWrapperUI>
 
-							<MultiUploader baseField={baseField} fileType={type}>
+							<MultiUploader baseField={baseField} fileType={fileTypeWithUploader}>
 								<UploaderHasFile>
 									<UploaderProgress />
 								</UploaderHasFile>
@@ -207,7 +258,7 @@ export const ImageRepeaterField = Component<ImageRepeaterField>(({ baseField, la
 													<UploaderRepeaterHandleUI />
 												</RepeaterSortableItemActivator>
 												<UploaderBase baseField={baseField}>
-													<UploadedImageView {...props} DestroyAction={RepeaterRemoveItemTrigger} />
+													{children}
 												</UploaderBase>
 											</UploaderRepeaterItemUI>
 										</RepeaterSortableItemNode>
@@ -220,7 +271,7 @@ export const ImageRepeaterField = Component<ImageRepeaterField>(({ baseField, la
 								<RepeaterSortableDragOverlay>
 									<UploaderRepeaterDragOverlayUI>
 										<UploaderBase baseField={baseField}>
-											<UploadedImageView {...props} DestroyAction={RepeaterRemoveItemTrigger} />
+											{children}
 										</UploaderBase>
 									</UploaderRepeaterDragOverlayUI>
 								</RepeaterSortableDragOverlay>
@@ -232,12 +283,12 @@ export const ImageRepeaterField = Component<ImageRepeaterField>(({ baseField, la
 			</FormErrorContext.Provider>
 		</FormFieldIdContext.Provider>
 	)
-}, ({ baseField, label, description, children, ...props }) => {
-	const type = createImageFileType(props)
+}, ({ baseField, label, description, children, fileType, ...props }) => {
 	return <>
 		<Repeater {...props} initialEntityCount={0}>
-			<Uploader baseField={baseField} fileType={type}></Uploader>
-			<UploadedImageView {...props} >{children}</UploadedImageView>
+			<MultiUploader baseField={baseField} fileType={fileType}>
+				{children}
+			</MultiUploader>
 		</Repeater>
 	</>
-})
+}, 'FileRepeaterFieldInner')
diff --git a/packages/react-ui-lib/src/upload/view.tsx b/packages/react-ui-lib/src/upload/view.tsx
index 217635250..6ca3e3fff 100644
--- a/packages/react-ui-lib/src/upload/view.tsx
+++ b/packages/react-ui-lib/src/upload/view.tsx
@@ -13,8 +13,8 @@ export type UploadedImageViewProps =
 	& GenericFileMetadataExtractorProps
 	& ImageFileDataExtractorProps
 	& {
-	DestroyAction?: ComponentType<{ children: ReactNode }>
-}
+		DestroyAction?: ComponentType<{ children: ReactNode }>
+	}
 
 export const UploadedImageView = Component<UploadedImageViewProps>(({ DestroyAction, ...props }) => {
 	const url = useField<string>(props.urlField).value