feat(react-ui-lib): add more types of file repeater

contember · Jun 14, 2024 · ca80a79 · ca80a79
1 parent 52757d6
commit ca80a79
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 23 deletions.
diff --git a/build/api/react-ui-lib.api.md b/build/api/react-ui-lib.api.md
@@ -190,6 +190,12 @@ export const AudioField: React_2.NamedExoticComponent<AudioFieldProps>;
 // @public (undocumented)
 export type AudioFieldProps = BaseFieldProps & AudioFileTypeProps;
 
+// @public (undocumented)
+export const AudioRepeaterField: React_2.NamedExoticComponent<AudioRepeaterFieldProps>;
+
+// @public (undocumented)
+export type AudioRepeaterFieldProps = BaseFileRepeaterFieldProps & AudioFileTypeProps;
+
 // @public (undocumented)
 export const BackButton: ({ label }: BackButtonProps) => JSX_2.Element;
 
@@ -219,6 +225,9 @@ export const baseEditorPlugins: {
 // @public (undocumented)
 export type BaseFieldProps = Omit<FormContainerProps, 'children'> & UploaderBaseFieldProps;
 
+// @public (undocumented)
+export type BaseFileRepeaterFieldProps = Omit<FormContainerProps, 'children'> & RepeaterProps & UploaderBaseFieldProps;
+
 // @public (undocumented)
 export const Binding: ({ children }: {
     children: ReactNode;
@@ -1250,6 +1259,12 @@ export const FileField: React_2.NamedExoticComponent<FileFieldProps>;
 // @public (undocumented)
 export type FileFieldProps = BaseFieldProps & AnyFileTypeProps;
 
+// @public (undocumented)
+export const FileRepeaterField: React_2.NamedExoticComponent<FileRepeaterFieldProps>;
+
+// @public (undocumented)
+export type FileRepeaterFieldProps = BaseFileRepeaterFieldProps & AnyFileTypeProps;
+
 // @public (undocumented)
 export const formatBoolean: (value: boolean | null) => string | null;
 
@@ -1348,12 +1363,10 @@ export const ImageField: React_2.NamedExoticComponent<ImageFieldProps>;
 export type ImageFieldProps = BaseFieldProps & ImageFileTypeProps;
 
 // @public (undocumented)
-export type ImageRepeaterField = Omit<FormContainerProps, 'children'> & RepeaterProps & UploaderBaseFieldProps & ImageFileTypeProps & {
-    children?: React_2.ReactNode;
-};
+export const ImageRepeaterField: React_2.NamedExoticComponent<ImageRepeaterFieldProps>;
 
 // @public (undocumented)
-export const ImageRepeaterField: React_2.NamedExoticComponent<ImageRepeaterField>;
+export type ImageRepeaterFieldProps = BaseFileRepeaterFieldProps & ImageFileTypeProps;
 
 // @public (undocumented)
 export interface ImageResizeOptions {
@@ -2564,6 +2577,12 @@ export const VideoField: React_2.NamedExoticComponent<VideoFieldProps>;
 // @public (undocumented)
 export type VideoFieldProps = BaseFieldProps & VideoFileTypeProps;
 
+// @public (undocumented)
+export const VideoRepeaterField: React_2.NamedExoticComponent<VideoRepeaterFieldProps>;
+
+// @public (undocumented)
+export type VideoRepeaterFieldProps = BaseFileRepeaterFieldProps & VideoFileTypeProps;
+
 // @public (undocumented)
 export const withFallback: <T>(formatter: (value: T) => string, fallback: string) => (value: T | null) => string;
 

diff --git 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
@@ -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