diff --git a/build/api/react-ui-lib.api.md b/build/api/react-ui-lib.api.md index d3d99c1bc..0b9497a79 100644 --- 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; // @public (undocumented) export type AudioFieldProps = BaseFieldProps & AudioFileTypeProps; +// @public (undocumented) +export const AudioRepeaterField: React_2.NamedExoticComponent; + +// @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 & UploaderBaseFieldProps; +// @public (undocumented) +export type BaseFileRepeaterFieldProps = Omit & RepeaterProps & UploaderBaseFieldProps; + // @public (undocumented) export const Binding: ({ children }: { children: ReactNode; @@ -1250,6 +1259,12 @@ export const FileField: React_2.NamedExoticComponent; // @public (undocumented) export type FileFieldProps = BaseFieldProps & AnyFileTypeProps; +// @public (undocumented) +export const FileRepeaterField: React_2.NamedExoticComponent; + +// @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; export type ImageFieldProps = BaseFieldProps & ImageFileTypeProps; // @public (undocumented) -export type ImageRepeaterField = Omit & RepeaterProps & UploaderBaseFieldProps & ImageFileTypeProps & { - children?: React_2.ReactNode; -}; +export const ImageRepeaterField: React_2.NamedExoticComponent; // @public (undocumented) -export const ImageRepeaterField: React_2.NamedExoticComponent; +export type ImageRepeaterFieldProps = BaseFileRepeaterFieldProps & ImageFileTypeProps; // @public (undocumented) export interface ImageResizeOptions { @@ -2564,6 +2577,12 @@ export const VideoField: React_2.NamedExoticComponent; // @public (undocumented) export type VideoFieldProps = BaseFieldProps & VideoFileTypeProps; +// @public (undocumented) +export const VideoRepeaterField: React_2.NamedExoticComponent; + +// @public (undocumented) +export type VideoRepeaterFieldProps = BaseFileRepeaterFieldProps & VideoFileTypeProps; + // @public (undocumented) export const withFallback: (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 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 & RepeaterProps & UploaderBaseFieldProps + + +export type ImageRepeaterFieldProps = + & BaseFileRepeaterFieldProps & ImageFileTypeProps + +export const ImageRepeaterField = Component(props => <> + + + +) + + +export type AudioRepeaterFieldProps = + & BaseFileRepeaterFieldProps + & AudioFileTypeProps + +export const AudioRepeaterField = Component(props => <> + + + +) + + +export type VideoRepeaterFieldProps = + & BaseFileRepeaterFieldProps + & VideoFileTypeProps + +export const VideoRepeaterField = Component(props => <> + + + +) + + +export type FileRepeaterFieldProps = + & BaseFileRepeaterFieldProps + & AnyFileTypeProps + +export const FileRepeaterField = Component(props => <> + + + +) + + +type FileRepeaterFieldInnerProps = + & BaseFileRepeaterFieldProps & { - children?: React.ReactNode + fileType: FileType + children: ReactNode } -export const ImageRepeaterField = Component(({ baseField, label, description, children, uploader, ...props }, environment) => { - const entity = useEntity() +const FileRepeaterFieldInner = Component(({ 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 ( @@ -188,7 +239,7 @@ export const ImageRepeaterField = Component(({ baseField, la - + @@ -207,7 +258,7 @@ export const ImageRepeaterField = Component(({ baseField, la - + {children} @@ -220,7 +271,7 @@ export const ImageRepeaterField = Component(({ baseField, la - + {children} @@ -232,12 +283,12 @@ export const ImageRepeaterField = Component(({ baseField, la ) -}, ({ baseField, label, description, children, ...props }) => { - const type = createImageFileType(props) +}, ({ baseField, label, description, children, fileType, ...props }) => { return <> - - {children} + + {children} + -}) +}, '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(({ DestroyAction, ...props }) => { const url = useField(props.urlField).value